1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 11:40:27 +02:00

full regeneration

This commit is contained in:
Pomax
2021-02-28 12:28:41 -08:00
parent d8fab98ec7
commit 45394f6d0f
329 changed files with 3135 additions and 2361 deletions

View File

@@ -7,14 +7,14 @@ Bézier curves are the result of [linear interpolations](https://en.wikipedia.or
If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:
\[
Given \left (
\textit{Given} \left (
\begin{aligned}
p_1 &= some~point \\
p_2 &= some~other~point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
p_1 &= \textit{some point} \\
p_2 &= \textit{some other point} \\
\textit{distance} &= (p_2 - p_1) \\
\textit{ratio} &= \frac{\textit{percentage}}{100} \\
\end{aligned}
\right ),~our~new~point = p_1 + distance \cdot ratio
\right ),~\textit{our new point} = p_1 + \textit{distance} \cdot \textit{ratio}
\]
So let's look at that in action: the following graphic is interactive in that you can use your up and down arrow keys to increase or decrease the interpolation ratio, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives us two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all ratios taken together— form our Bézier curve:

View File

@@ -9,12 +9,12 @@
\[
\left (
\begin{aligned}
p_1 &= 一方の点 \\
p_2 &= もう一方の点 \\
距離 &= (p_2 - p_1) \\
比率 &= \frac{百分率}{100} \\
p_1 &= \textit{一方の点} \\
p_2 &= \textit{もう一方の点} \\
\textit{距離} &= (p_2 - p_1) \\
\textit{比率} &= \frac{\textit{百分率}}{100} \\
\end{aligned}
\right )のとき、新しい点 = p_1 + 距離 \cdot 比率
\right ) \textit{のとき、新しい点} = p_1 + \textit{距離} \cdot \textit{比率}
\]
では、実際に見てみましょう。下の図はインタラクティブになっています。上下キーで補間の比率が増減しますので、どうなるか確かめてみましょう。最初に3点があり、それを結んで2本の直線が引かれています。この直線の上でそれぞれ線形補間を行うと、2つの点が得られます。この2点の間でさらに線形補間を行うと、1つの点を得ることができます。そして、あらゆる比率に対して同様に点を求め、それをすべて集めると、このようにベジエ曲線ができるのです。

View File

@@ -7,17 +7,17 @@
Вот, скажем, зная расстояние между двух точек и желая поставить третью на удалении 20ти % этого расстояния до первой и, соответственно, 80ти % до второй, вычислить результат можно следующим образом:
\[
Дано \left (
\textit{Дано} \left (
\begin{aligned}
p_1 &= неикая~точка \\
p_2 &= неикая~другая~точка \\
расстояние &= (p_2 - p_1) \\
соотношение &= \frac{процентаж}{100} \\
p_1 &= \textit{неикая точка} \\
p_2 &= \textit{неикая другая точка} \\
\textit{расстояние} &= (p_2 - p_1) \\
\textit{соотношение} &= \frac{\textit{процентаж}}{100} \\
\end{aligned}
\right ),~наша~новая~точка = p_1 + расстояние \cdot соотношение
\right ),~\textit{наша новая точка} = p_1 + \textit{расстояние} \cdot \textit{соотношение}
\]
Что же, посмотрим на это в действии: ниже представлена интерактивная проекция, кликнув на ползунок, можно пользоваться клавишами вниз-вверх для увеличения и уменьшения соотношения интерполяции и наблюдать получаемый результат. Сначала, основываясь на трех точках, задаем два отрезка, затем производим линейную интерполяцию по длине каждого из них, получая еще две точки. Далее мы опять производим линейную интерполяцию уже между полученными точками и в итоге получаем искомую точку. (* на изображении видим 3 проекции соответственно этим трем действиям).
Что же, посмотрим на это в действии: ниже представлена интерактивная проекция, кликнув на ползунок, можно пользоваться клавишами вниз-вверх для увеличения и уменьшения соотношения интерполяции и наблюдать получаемый результат. Сначала, основываясь на трех точках, задаем два отрезка, затем производим линейную интерполяцию по длине каждого из них, получая еще две точки. Далее мы опять производим линейную интерполяцию уже между полученными точками и в итоге получаем искомую точку. (* на изображении видим 3 проекции соответственно этим трем действиям).
<graphics-element title="Линейная интерполяция составляющая кривую Безье" width="825" src="./interpolation.js">
<input type="range" min="10" max="90" step="1" value="25" class="slide-control">

View File

@@ -7,14 +7,14 @@
如果我们知道两点之间的距离并想找出离第一个点20%间距的一个新的点(也就是离第二个点80%的间距),我们可以通过简单的计算来得到:
\[
Given \left (
\textit{Given} \left (
\begin{aligned}
p_1 &= some~point \\
p_2 &= some~other~point \\
distance &= (p_2 - p_1) \\
ratio &= \frac{percentage}{100} \\
p_1 &= \textit{some point} \\
p_2 &= \textit{some other point} \\
\textit{distance} &= (p_2 - p_1) \\
\textit{ratio} &= \frac{\textit{percentage}}{100} \\
\end{aligned}
\right ),~our~new~point = p_1 + distance \cdot ratio
\right ),~\textit{our new point} = p_1 + \textit{distance} \cdot \textit{ratio}
\]
让我们来通过实际操作看一下:下面的图形都是可交互的,因此你可以通过上下键来增加或减少插值距离,来观察图形的变化。我们从三个点构成的两条线段开始。通过对各条线段进行线性插值得到两个点,对点之间的线段再进行线性插值,产生一个新的点。最终这些点——所有的点都可以通过选取不同的距离插值产生——构成了贝塞尔曲线