From d8036dcb7c5eb79c14ffa128717aee2936088362 Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Mon, 12 Aug 2019 07:31:10 +0300 Subject: [PATCH 1/4] =?UTF-8?q?=D0=92=D1=8B=D1=87=D0=B8=D1=82=D0=BA=D0=B0?= =?UTF-8?q?=207-animation=201-bezier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 7-animation/1-bezier-curve/article.md | 30 +++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index 9d6a2ce604..a2dc6f7e28 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -31,7 +31,7 @@ ![](bezier4-e.svg) ![](bezier3-e.svg) -Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся. Таким образом, проверка пересечения выпуклых оболочек в первую очередь может дать очень быстрый результат «отсутствия пересечения». Проверить пересечение или выпуклые оболочки гораздо проще, потому что это прямоугольники, треугольники и т.д. (см. рисунок выше), гораздо более простые фигуры, чем кривая. +Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечения двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся. Таким образом, проверка пересечения выпуклых оболочек в первую очередь может дать очень быстрый результат «отсутствие пересечения». Проверить пересечение или выпуклые оболочки гораздо проще, потому что это прямоугольники, треугольники и т.д. (см. рисунок выше), гораздо более простые фигуры, чем кривая. **Основная ценность кривых Безье для рисования в том, что, двигая точки, кривую можно менять, причём кривая при этом меняется интуитивно понятным образом.** @@ -51,21 +51,21 @@ Есть математическая формула для кривых Безье, но давайте рассмотрим её чуть позже, потому что [Алгоритм де Кастельжо](http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%B4%D0%B5_%D0%9A%D0%B0%D1%81%D1%82%D0%B5%D0%BB%D1%8C%D0%B6%D0%BE) идентичен математическому определению кривой и наглядно показывает, как она строится. -Посмотрим его на примере трёх точек (точки 1,2 и 3 можно двигать). Нажатие на кнопку «play» запустит демонстрацию. +Рассмотрим его на примере трёх точек (точки 1,2 и 3 можно двигать). Нажатие на кнопку «play» запустит демонстрацию. [iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370] **Построение кривой Безье c 3 точками по «алгоритму де Кастельжо»:** -1. Рисуем опорные точки. В примере выше это: `1`, `2`, `3`. -2. Строятся отрезки между опорными точками 1 -> 2 -> 3. На рисунке выше они коричневые. -3. Параметр `t` пробегает значения от `0` до `1`. В примере выше использован шаг `0.05` т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. +1. Рисуются опорные точки. В примере это: `1`, `2`, `3`. +2. Строятся отрезки между опорными точками в следующем порядке 1 -> 2 -> 3. На рисунке они коричневые. +3. Параметр `t` «пробегает» значения от `0` до `1`. В примере использован шаг `0.05`, т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. Для каждого из этих значений `t`: - - На каждом из коричневых отрезков берётся точка, находящаяся на расстоянии, пропорциональном `t`, от его начала. Так как отрезков – два, то и точек две штуки. + - На каждом из коричневых отрезков берётся точка, находящаяся на расстоянии, пропорциональном `t`, от его начала. Так как отрезков два, то и точек две. - Например, при `t=0` -- точки будут в начале, при `t=0.25` -- на расстоянии в 25% от начала отрезка, при `t=0.5` -- 50%(на середине), при `t=1` -- в конце отрезков. + Например, при `t=0` -- точки будут в начале, при `t=0.25` -- на расстоянии в 25% от начала отрезка, при `t=0.5` -- 50% (на середине), при `t=1` -- в конце отрезков. - Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён синим. @@ -77,9 +77,9 @@ 4. На получившемся синем отрезке берётся точка на расстоянии, соответствующем `t`. То есть, для `t=0.25` (левый рисунок) получаем точку в конце первой четверти отрезка, для `t=0.5` (правый рисунок) – в середине отрезка. На рисунках выше эта точка отмечена красным. -5. По мере того, как `t` пробегает последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. Совокупность таких точек для всех значений образует кривую Безье. Она красная и имеет параболическую форму на картинках выше. +5. По мере того, как `t` «пробегает» последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. Совокупность таких точек для всех значений образует кривую Безье. Она красная и имеет параболическую форму на картинках выше. -Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками. +Был описан процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками. Демо для четырёх точек (точки можно двигать): @@ -99,8 +99,8 @@ Дано N контрольных точек: -1. Мы соединяем их, чтобы получить N-1 отрезков. -2. Затем для каждого `t` от `0` до `1` мы берем точку на каждом отрезке на расстоянии пропорциональном `t` и соединяем их. Там будет N-2 отрезков. +1. Соединяем их, чтобы получить N-1 отрезков. +2. Затем для каждого `t` от `0` до `1` берем точку на каждом отрезке на расстоянии пропорциональном `t` и соединяем их. Там будет N-2 отрезков. 3. Повторяем 2 шаг, пока не останется одна точка. Эти точки образуют кривую. @@ -130,7 +130,7 @@ Если в описании алгоритма есть что-то непонятное, посмотрите "живые" примеры выше, они наглядно показывают, как строится кривая. ``` -Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, то есть: используя 5, 6 или более контрольных точек. Но на практике много точек не так полезны. Обычно мы берем 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчета. +Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, используя 5, 6 или более контрольных точек. Но на практике много точек не так полезны. Обычно мы берем 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчета. ```smart header="Как нарисовать кривую *через* заданные точки?" Для задания кривой Безье используются контрольные точки. Как видим, они не находятся на кривой, кроме первой и последней. @@ -168,12 +168,12 @@ Вместо x1, y1, x2, y2, x3, y3 мы должны поместить координаты 3 контрольных точек, а затем при перемещении `t` от `0` до `1` для каждого значения `t` мы получим `(x,y)` кривой. -Например, если контрольными точками являются `(0,0)`, `(0.5, 1)` и `(1, 0)`, уравнения становятся: +Например, если контрольными точками являются `(0,0)`, `(0.5,1)` и `(1,0)`, уравнения становятся: - x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t - y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t -Теперь, в то время как `t` пробегает от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких контрольных точек. +Теперь, в то время как `t` «пробегает» от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких контрольных точек. ## Итого @@ -186,7 +186,7 @@ Их удобство в том, что: -- Мы можем рисовать плавные линии с помощью мыши, перемещая контрольные точки. +- Можно рисовать плавные линии с помощью мыши, перемещая контрольные точки. - Сложные формы могут быть сделаны из нескольких кривых Безье. Применение: From a8f5573f71be8bbfe7eca457bb07f9ef36be2ce7 Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Mon, 12 Aug 2019 15:23:39 +0300 Subject: [PATCH 2/4] Updates Signed-off-by: Alexander Ivanov --- 7-animation/1-bezier-curve/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index a2dc6f7e28..af81db6cc5 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -31,7 +31,7 @@ ![](bezier4-e.svg) ![](bezier3-e.svg) -Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечения двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся. Таким образом, проверка пересечения выпуклых оболочек в первую очередь может дать очень быстрый результат «отсутствие пересечения». Проверить пересечение или выпуклые оболочки гораздо проще, потому что это прямоугольники, треугольники и т.д. (см. рисунок выше), гораздо более простые фигуры, чем кривая. +Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечения двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся. Таким образом, проверка пересечения выпуклых оболочек в первую очередь может дать быстрый ответ на вопрос о наличии пересечения. Проверить пересечение или выпуклые оболочки гораздо проще, потому что это прямоугольники, треугольники и т.д. (см. рисунок выше), гораздо более простые фигуры, чем кривая. **Основная ценность кривых Безье для рисования в том, что, двигая точки, кривую можно менять, причём кривая при этом меняется интуитивно понятным образом.** From c36f0bb192cdb85667c715c01fb608b3e599422a Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Tue, 13 Aug 2019 06:51:01 +0300 Subject: [PATCH 3/4] Yofication Signed-off-by: Alexander Ivanov --- 7-animation/1-bezier-curve/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index af81db6cc5..1ba26cd325 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -100,7 +100,7 @@ Дано N контрольных точек: 1. Соединяем их, чтобы получить N-1 отрезков. -2. Затем для каждого `t` от `0` до `1` берем точку на каждом отрезке на расстоянии пропорциональном `t` и соединяем их. Там будет N-2 отрезков. +2. Затем для каждого `t` от `0` до `1` берём точку на каждом отрезке на расстоянии пропорциональном `t` и соединяем их. Там будет N-2 отрезков. 3. Повторяем 2 шаг, пока не останется одна точка. Эти точки образуют кривую. @@ -130,7 +130,7 @@ Если в описании алгоритма есть что-то непонятное, посмотрите "живые" примеры выше, они наглядно показывают, как строится кривая. ``` -Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, используя 5, 6 или более контрольных точек. Но на практике много точек не так полезны. Обычно мы берем 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчета. +Поскольку алгоритм является рекурсивным, мы можем построить кривые Безье любого порядка, используя 5, 6 или более контрольных точек. Но на практике много точек не так полезны. Обычно мы берём 2-3 точки, а для сложных линий склеиваем несколько кривых. Это проще для разработки и расчета. ```smart header="Как нарисовать кривую *через* заданные точки?" Для задания кривой Безье используются контрольные точки. Как видим, они не находятся на кривой, кроме первой и последней. From d274fc7ee3418ad36a322a4e43731321a9c7b590 Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Tue, 13 Aug 2019 08:30:10 +0300 Subject: [PATCH 4/4] Updates quotes Signed-off-by: Alexander Ivanov --- 7-animation/1-bezier-curve/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index 1ba26cd325..d062190860 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -22,7 +22,7 @@ ![](bezier4.svg) -Если вы посмотрите внимательно на эти кривые, то «на глазок» заметите: +Если вы посмотрите внимательно на эти кривые, то "на глазок" заметите: 1. **Точки не всегда на кривой.** Это совершенно нормально, как именно строится кривая мы рассмотрим чуть позже. 2. **Степень кривой равна числу точек минус один.** @@ -47,19 +47,19 @@ ![](bezier-car.svg) ![](bezier-letter.svg) ![](bezier-vase.svg) -## Алгоритм «де Кастельжо» +## Алгоритм "де Кастельжо" Есть математическая формула для кривых Безье, но давайте рассмотрим её чуть позже, потому что [Алгоритм де Кастельжо](http://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%B4%D0%B5_%D0%9A%D0%B0%D1%81%D1%82%D0%B5%D0%BB%D1%8C%D0%B6%D0%BE) идентичен математическому определению кривой и наглядно показывает, как она строится. -Рассмотрим его на примере трёх точек (точки 1,2 и 3 можно двигать). Нажатие на кнопку «play» запустит демонстрацию. +Рассмотрим его на примере трёх точек (точки 1,2 и 3 можно двигать). Нажатие на кнопку "play" запустит демонстрацию. [iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370] -**Построение кривой Безье c 3 точками по «алгоритму де Кастельжо»:** +**Построение кривой Безье c 3 точками по "алгоритму де Кастельжо":** 1. Рисуются опорные точки. В примере это: `1`, `2`, `3`. 2. Строятся отрезки между опорными точками в следующем порядке 1 -> 2 -> 3. На рисунке они коричневые. -3. Параметр `t` «пробегает» значения от `0` до `1`. В примере использован шаг `0.05`, т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. +3. Параметр `t` "пробегает" значения от `0` до `1`. В примере использован шаг `0.05`, т.е. в цикле `0, 0.05, 0.1, 0.15, ... 0.95, 1`. Для каждого из этих значений `t`: @@ -77,7 +77,7 @@ 4. На получившемся синем отрезке берётся точка на расстоянии, соответствующем `t`. То есть, для `t=0.25` (левый рисунок) получаем точку в конце первой четверти отрезка, для `t=0.5` (правый рисунок) – в середине отрезка. На рисунках выше эта точка отмечена красным. -5. По мере того, как `t` «пробегает» последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. Совокупность таких точек для всех значений образует кривую Безье. Она красная и имеет параболическую форму на картинках выше. +5. По мере того, как `t` "пробегает" последовательность от `0` до `1`, каждое значение `t` добавляет к кривой точку. Совокупность таких точек для всех значений образует кривую Безье. Она красная и имеет параболическую форму на картинках выше. Был описан процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками. @@ -173,7 +173,7 @@ - x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t - y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t -Теперь, в то время как `t` «пробегает» от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких контрольных точек. +Теперь, в то время как `t` "пробегает" от `0` до `1`, набор значений `(x, y)` для каждого `t` образует кривую для таких контрольных точек. ## Итого