Кривые Безье

Кривые Безье используются в графике для рисования плавных изгибов и в CSS-анимации для функции времени.

Тема эта не очень очевидная, поэтому разберем её подробно.

Виды кривых Безье

Кривая Безье задаётся опорными точками.

По четырём точкам	По трём точкам	По двум точкам

Если вы посмотрите внимательно на эти кривые, то «на глазок» заметите:

1. Степень кривой равна числу точки минус один, на рисунках выше изображены кубическая, квадратическая и линейная кривые.
2. Все они находятся внутри выпуклой оболочки, образованной опорными точками:

   

   Благодаря последнему свойству в компьюторной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.

Основная ценность кривых Безье — в том, что кривую можно менять, двигая точки. При этом кривая меняется интуитивно понятным образом.

Попробуйте двигать точки мышью в примере ниже:

Как можно заметить, кривая натянута по касательным 1 → 2 и 3 → 4.

После небольшой практики становится понятно, как расположить точки, чтобы получить нужную форму. А, соединяя несколько кривых, можно получить практически что угодно.

Вот некоторые примеры:

Математика

У кривых Безье есть математическая формула. Как мы увидим далее, в ней нет особенной необходимости, но для полноты картины — вот она.

Координаты кривой описываются в зависимости от параметра t⋲[0,1]

• Для двух точек:

  P = (1-t)P1 + tP2

• Для трёх точек:

  P = (1−t)2*P1 + 2(1−t)tP2 + t2P3

• Для четырёх точек:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Эти уравнения — векторные, т.е. вместо Pi нужно подставить координаты i-й опорной точки (xi, yi).

Формула даёт возможность строить кривые, но не очень понятно, почему они именно такие, и как зависят от опорных точек. С этим нам поможет разобраться другой алгоритм.

Рисование «де Кастельжо»

Метод де Кастельжо идентичен математическому определению кривой и наглядно показывает, как она строится.

Посмотрим его на примере трех точек (точки можно двигать):

Нажатие на кнопку "Play" запустит демонстрацию. А вот как она работает.

Алгоритм построения "де Кастельжо":

1. Строятся отрезки между опорными точками 1-2-3. На рисунке выше они чёрные.
2. Параметр t пробегает значения от 0 до 1. В примере выше использован шаг 0.05, т.е. в цикле 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Для каждого значения t:

   1. На каждом из этих отрезков берётся точка, находящаяся от начала на расстоянии от 0 до t пропорционально длине. То есть, при t=0 — точка будет в начале, при t=0.25 — на расстоянии в 25% от начала отрезка, при t=0.5 — 50%(на середине), при t=1 — в конце.
      Черных отрезков — два, так что и точки две.
   2. Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён синим.
      

      t=0.25	t=0.5

   3. На получившемся отрезке берётся точка на расстоянии, соответствующем t. На рисунке выше она красная. Эта точка является точкой кривой Безье.

   По мере того как t пробегает последовательность от 0 до 1, каждое значение t добавляет к кривой точку.

   Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.

   Демо для четырёх точек (точки можно двигать):

   Алгоритм:

   • Точки соединяются отрезками 1-2, 2-3, 3-4 (три черных отрезка)
   • На отрезках берутся точки, соответствующие текущему t, соединяются. Получается два зелёных отрезка.
   • На этих отрезках берутся точки, соответствующие текущему t, соединяются. Получается один синий отрезок.
   • На синем отрезке берётся точка, соответствующая текущему t. В примере она красная.
   • Эти точки описывают кривую.

   Нажмите на кнопку «play» в примере выше, чтобы увидеть это в действии.

   Ещё примеры кривых из левого-нижнего угла в правый-верхний:

   А вот что можно получить, если поперемещать точки:

   Пример негладкой кривой Безье:

   Бывают кривые и более высокого порядка: по пяти точкам, шести и так далее. Но обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.

   Итого

   Кривые Безье задаются опорными точками. Мы рассмотрели два определения кривых:

   1. Через математическую формулу.
   2. Через процесс построения де Кальваджо.

   С их помощью можно описать почти любую линию, особенно если соединить несколько.

   Применение:

   • В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.
   • В веб-разработке — в формате SVG. Кстати, все живые примеры выше написаны на SVG, точки передаются параметрами. Вот их исходник: demo.svg.
   • Как временная функция для CSS-анимации. JavaScript позволяет задавать временную функцию более гибко, но CSS-анимации позволяют делать простые вещи просто, и это здорово.