|
100 | 100 |
|
101 | 101 | - Эти точки вместе описывают кривую. |
102 | 102 |
|
103 | | -Алгоритм является рекурсивным и может быть обобщён на любое количество контрольных точек. |
| 103 | +Алгоритм является рекурсивным и может быть обобщён на любое количество опорных точек. |
104 | 104 |
|
105 | | -Дано N контрольных точек: |
| 105 | +Дано N опорных точек: |
106 | 106 |
|
107 | 107 | 1. Соединяем их, чтобы получить N-1 отрезков. |
108 | 108 | 2. Затем для каждого `t` от `0` до `1` берём точку на каждом отрезке на расстоянии пропорциональном `t` и соединяем их. Там будет N-2 отрезков. |
|
118 | 118 |
|
119 | 119 | [iframe src="demo.svg?p=0,0,0,0.75,0.25,1,1,1&animate=1" height=370] |
120 | 120 |
|
121 | | -Зигзагообразные контрольные точки тоже работают нормально: |
| 121 | +Зигзагообразные опорные точки тоже работают нормально: |
122 | 122 |
|
123 | 123 | [iframe src="demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1" height=370] |
124 | 124 |
|
|
134 | 134 | Если в описании алгоритма есть что-то непонятное, посмотрите "живые" примеры выше, они наглядно показывают, как строится кривая. |
135 | 135 | ``` |
136 | 136 |
|
137 | | -Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, используя 5, 6 или более контрольных точек. Но на практике много точек не так полезны. Обычно мы берём 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчёта. |
| 137 | +Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, используя 5, 6 или более опорных точек. Но на практике много точек не так полезны. Обычно мы берём 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчёта. |
138 | 138 |
|
139 | 139 | ```smart header="Как нарисовать кривую *через* заданные точки?" |
140 | | -Для задания кривой Безье используются контрольные точки. Как видим, они не находятся на кривой, кроме первой и последней. |
| 140 | +Для задания кривой Безье используются опорные точки. Как видим, они не находятся на кривой, кроме первой и последней. |
141 | 141 |
|
142 | 142 | Иногда перед нами стоит другая задача: нарисовать кривую *через* несколько точек, чтобы все они были на одной гладкой кривой. Эта задача называется [интерполяцией](https://en.wikipedia.org/wiki/Interpolation), и она за рамками нашего изложения. |
143 | 143 |
|
|
150 | 150 |
|
151 | 151 | Как мы видели, на самом деле нет необходимости её знать, большинство людей просто рисуют кривую, перемещая точки с помощью мыши. Но если вы увлекаетесь математикой -- вот она. |
152 | 152 |
|
153 | | -Координаты кривой с контрольными точками <code>P<sub>i</sub></code>: первая контрольная точка имеет координаты <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, вторая: <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code> и т.д., описываются уравнением, зависящим от параметра `t` на отрезке `[0,1]`. |
| 153 | +Координаты кривой с опорными точками <code>P<sub>i</sub></code>: первая опорная точка имеет координаты <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, вторая: <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code> и т.д., описываются уравнением, зависящим от параметра `t` на отрезке `[0,1]`. |
154 | 154 |
|
155 | 155 | - Формула для 2-х точечной кривой: |
156 | 156 |
|
157 | 157 | <code>P = (1-t)P<sub>1</sub> + tP<sub>2</sub></code> |
158 | | -- Для 3 контрольных точек: |
| 158 | +- Для 3 опорных точек: |
159 | 159 |
|
160 | 160 | <code>P = (1−t)<sup>2</sup>P<sub>1</sub> + 2(1−t)tP<sub>2</sub> + t<sup>2</sup>P<sub>3</sub></code> |
161 | | -- Для 4 контрольных точек: |
| 161 | +- Для 4 опорных точек: |
162 | 162 |
|
163 | 163 | <code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub> +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code> |
164 | 164 |
|
|
169 | 169 | - <code>x = (1−t)<sup>2</sup>x<sub>1</sub> + 2(1−t)tx<sub>2</sub> + t<sup>2</sup>x<sub>3</sub></code> |
170 | 170 | - <code>y = (1−t)<sup>2</sup>y<sub>1</sub> + 2(1−t)ty<sub>2</sub> + t<sup>2</sup>y<sub>3</sub></code> |
171 | 171 |
|
172 | | -Вместо <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> мы должны поместить координаты 3 контрольных точек, а затем при перемещении `t` от `0` до `1` для каждого значения `t` мы получим `(x,y)` кривой. |
| 172 | +Вместо <code>x<sub>1</sub>, y<sub>1</sub>, x<sub>2</sub>, y<sub>2</sub>, x<sub>3</sub>, y<sub>3</sub></code> мы должны поместить координаты 3 опорных точек, а затем при перемещении `t` от `0` до `1` для каждого значения `t` мы получим `(x,y)` кривой. |
173 | 173 |
|
174 | | -Например, если контрольными точками являются `(0,0)`, `(0.5,1)` и `(1,0)`, уравнения становятся: |
| 174 | +Например, если опорными точками являются `(0,0)`, `(0.5,1)` и `(1,0)`, уравнения становятся: |
175 | 175 |
|
176 | 176 | - <code>x = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 0.5 + t<sup>2</sup> * 1 = (1-t)t + t<sup>2</sup> = t</code> |
177 | 177 | - <code>y = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 1 + t<sup>2</sup> * 0 = 2(1-t)t = –2t<sup>2</sup> + 2t</code> |
178 | 178 |
|
179 | | -Теперь, в то время как `t` "пробегает" от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких контрольных точек. |
| 179 | +Теперь, в то время как `t` "пробегает" от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких опорных точек. |
180 | 180 |
|
181 | 181 | ## Итого |
182 | 182 |
|
|
189 | 189 |
|
190 | 190 | Их удобство в том, что: |
191 | 191 |
|
192 | | -- Можно рисовать плавные линии с помощью мыши, перемещая контрольные точки. |
| 192 | +- Можно рисовать плавные линии с помощью мыши, перемещая опорные точки. |
193 | 193 | - Сложные формы могут быть сделаны из нескольких кривых Безье. |
194 | 194 |
|
195 | 195 | Применение: |
|
0 commit comments