mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-31 03:59:58 +02:00
update drawCurve to drawCurvePoint to better reflect what it does
This commit is contained in:
Pomax
@@ -26,20 +26,20 @@
|
||||
いま説明したアルゴリズムを実装すると、以下のようになります。
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
newpoints=array(points.size-1)
|
||||
for(i=0; i<newpoints.length; i++):
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
これで実装完了です。ただし、+演算子のオーバーロードなどという贅沢品はたいてい無いでしょうから、`x`や`y`の値を直接扱う場合のコードも示しておきます。
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
@@ -48,7 +48,7 @@ function drawCurve(points[], t):
|
||||
x = (1-t) * points[i].x + t * points[i+1].x
|
||||
y = (1-t) * points[i].y + t * points[i+1].y
|
||||
newpoints[i] = new point(x,y)
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
さて、これは何をしているのでしょう？関数に渡す点のリストが長さ1であれば、点を1つ描きます。それ以外であれば、比率<i>t</i>の位置の点（すなわち、さきほどの説明に出てきた「印」）のリストを作り、そしてこの新しいリストを引数にして関数を呼び出します。
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
Для зарисовки кривой Безье, мы можем пробежаться по всем значениям `t` от 0 до 1 и скомпилировать вывод базовой функции с подставленными весами для каждого значения. К сожалению, чем замысловатее кривая, тем дороже обходиться это обчисление. Вместо этого, мы можем воспользоваться *Алгоритмом де Кастельжо* для прорисовки кривых. Этот алгоритм позволяет прорисовывать кривые базируясь на геометрических вычислениях и довольно прост в применении. На деле, настолько прост, что его можно воплотить при помощи карандаша и линейки.
|
||||
|
||||
Вместо использования функции математического анализа для нахождения значений `x/y` для `t`, давайте сделаем следующее:
|
||||
Вместо использования функции математического анализа для нахождения значений `x/y` для `t`, давайте сделаем следующее:
|
||||
|
||||
- Примем `t` за пропорцию(чем оно и является). t=0 будет 0% вдоль линии, t=1, соответсвенно, 100% вдоль линии.
|
||||
- Возьмем все линии между заданными контрольными точками. Для кривой `n`-го порядка это `n` линий
|
||||
- Разместим маркеры вдоль линий, соответсвенно значению `t`. Так, если `t` 0.2, разместим маркер на 20% от начала, и, соответственно, 80% от конца.
|
||||
- Теперь соединим полученные точки линиями. Это дает нам `n-1` линий.
|
||||
- Далее разместим маркеры на новых линиях, соответсвенно тому-же значению `t`.
|
||||
- Далее разместим маркеры на новых линиях, соответсвенно тому-же значению `t`.
|
||||
- Продолжим повторять два предыдущих шага, пока на выводе у нас останется всего одна линия. Маркер `t` на этой линии будет соответствовать точке для `t` на нашей кривой.
|
||||
|
||||
Чтобы проверить это в действии, ведите ползунок под ниже представленным графиком слева направо и наоборот, задавая разные значения `t` для иллюстрации геометрического построения.
|
||||
@@ -24,20 +24,20 @@
|
||||
Запишем согласно предложенному алгоритму:
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
newpoints=array(points.size-1)
|
||||
for(i=0; i<newpoints.length; i++):
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
Готово, алгоритм воплощен. Помимо того факта, что зачастую мы не располагаем роскошью перенагрузки оператора "+", так давайте совместим вычисление для значений `x` и `y`:
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
@@ -46,7 +46,7 @@ function drawCurve(points[], t):
|
||||
x = (1-t) * points[i].x + t * points[i+1].x
|
||||
y = (1-t) * points[i].y + t * points[i+1].y
|
||||
newpoints[i] = new point(x,y)
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
И что это делает? Это зарисует точку на график, если длинна вводной points составляет всего одну точку. В противном случае — это создает новый список для вводной, составленный из "маркеров", обчисленых пропорционально значению <i>t</i> между поточного списка точек вводной и вызовет саму себя с новой вводной.
|
||||
|
||||
@@ -26,20 +26,20 @@
|
||||
让我们使用刚才描述过的算法，并实现它：
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
newpoints=array(points.size-1)
|
||||
for(i=0; i<newpoints.length; i++):
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
好了，这就是算法的实现。一般来说你不能随意重载“+”操作符，因此我们给出计算`x`和`y`坐标的实现：
|
||||
|
||||
```
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
draw(points[0])
|
||||
else:
|
||||
@@ -48,7 +48,7 @@ function drawCurve(points[], t):
|
||||
x = (1-t) * points[i].x + t * points[i+1].x
|
||||
y = (1-t) * points[i].y + t * points[i+1].y
|
||||
newpoints[i] = new point(x,y)
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
以上算法做了什么？如果参数points列表只有一个点， 就画出一个点。如果有多个点，就生成以<i>t</i>为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
|
||||
|
||||
@@ -15,7 +15,7 @@ We can implement curve splitting by bolting some extra logging onto the de Caste
|
||||
```
|
||||
left=[]
|
||||
right=[]
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
left.add(points[0])
|
||||
right.add(points[0])
|
||||
@@ -28,7 +28,7 @@ function drawCurve(points[], t):
|
||||
if(i==newpoints.length-1):
|
||||
right.add(points[i+1])
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
After running this function for some value `t`, the `left` and `right` arrays will contain all the coordinates for two new curves - one to the "left" of our `t` value, the other on the "right". These new curves will have the same order as the original curve, and can be overlaid exactly on the original curve.
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
```
|
||||
left=[]
|
||||
right=[]
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
left.add(points[0])
|
||||
right.add(points[0])
|
||||
@@ -28,7 +28,7 @@ function drawCurve(points[], t):
|
||||
if(i==newpoints.length-1):
|
||||
right.add(points[i+1])
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
ある値`t`に対してこの関数を実行すると、`left`と`right`に新しい2曲線の座標が入ります。一方は`t`の「左」側、もう一方は「右」側の曲線です。この2曲線は元の曲線と同じ次数になり、また元の曲線とぴったり重なります。
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
```
|
||||
left=[]
|
||||
right=[]
|
||||
function drawCurve(points[], t):
|
||||
function drawCurvePoint(points[], t):
|
||||
if(points.length==1):
|
||||
left.add(points[0])
|
||||
right.add(points[0])
|
||||
@@ -28,7 +28,7 @@ function drawCurve(points[], t):
|
||||
if(i==newpoints.length-1):
|
||||
right.add(points[i+1])
|
||||
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
||||
drawCurve(newpoints, t)
|
||||
drawCurvePoint(newpoints, t)
|
||||
```
|
||||
|
||||
对某个给定 `t` 值，该函数执行后，数组 `left` 和 `right` 将包含两条曲线的所有点的坐标 -- 一条是`t`值左侧的曲线，一条是`t`值右侧的曲线， 与原始曲线同序且完全重合。
|
||||
|
||||
Reference in New Issue
Block a user