Набор Алгоритмов

Данная статья посвящена компьютерной графике, точнее её двухмерной части — Кривым Безье. Статья расскажет Вам, как построить самостоятельно кривую Безье. Что в дальнейшем поможет Вам в Ваших приложениях для векторной графики.

Алгоритмы - Кривые Безье.

1. Введение.

Кривы́е Безье́ — типы кривых, предложенные в 60-х годах XX века независимо друг от друга Пьером Безье из автомобилестроительной компании «Рено» и Полем де Кастельжо из компании «Ситроен», где применялись для проектирования кузовов автомобилей.

Поле де Кастельжо предложил их геометрическое рекурсивное обоснование. Пьер Безье предложил только их математическую формулировку.

Кривая Безье является частным случаем многочленов Бернштейна, описанных Сергеем Натановичем Бернштейном в 1912 году.

2. Кривая Безье.

Кривая Безье записывается следующим параметрическим выражением:

Где bk,n:

, а Pi - координаты i-ой точки. Т.е.:

t — изменяется от 0 до 1, вещественное, точность его определяется в зависимости от разрешения монитора и уровня дискретизации.

Далее приводятся примеры уравнений кривых от 1-го до 3-го порядка.

Уравнение кривой Безье 1-го порядка:

Рис. 1. Линейная кривая Безье.

Уравнение кривой Безье 2-го порядка:

Рис. 2. Квадратичная кривая Безье.

Уравнение кривой Безье 3-го порядка:

Рис. 3. Кубическая кривая Безье.

На рисунках 1-4 представлены кривые Безье с точками: P0 = (20, 20), P1 = (120, 160), P2 = (160, 160), P3 = (170, 30), P4 = (380, 180), построенными на поле шириной 400 точек и высотой 200 точек.

Рис. 4. Линейная кривая Безье.

Рис. 5. Квадратичная кривая Безье.

Рис. 6. Кубическая кривая Безье.

Рис. 7. Кривая Безье 4-го порядка.

Далее посмотрим на анимацию построения кривых Безье (точка t плавно двигается по кривой).

Анимация 1. Линейная кривая Безье.

Анимация 2. Квадратичная кривая Безье.

Анимация 3. Кубическая кривая Безье.

Анимация 4. Кривая Безье 4-го порядка.

3. Геометрическое объяснение кривых Безье Поля де Кастельжо.

Строим линейные кривые Безье от первой точки до второй, от второй к третьей и так до последней, не соединяя линейной кривой Безье последнюю и 0-ую точку. Через точки t (полученных ранее линейных кривых) строим линейные кривые Безье начиная с нулевой и до последней, как ранее, но уже по полученным точкам, которых на одну меньше, чем ранее. Снова строим через новополученные точки t линейные кривые и из них получаем новые точки. Так повторяем пока точка не останется одна — это и есть точка кривой. Теперь представьте всё это в движении — это и есть кривая Безье. Наглядно посмотрите на анимации далее.

Построение кривой Безье 1-го порядка:

Анимация 5. Геометрический смысл линейной кривой Безье.

Построение кривой Безье 2-го порядка:

Анимация 6. Геометрический смысл квадратичной кривой Безье.

Построение кривой Безье 3-го порядка:

Анимация 7. Геометрический смысл кубической кривой Безье.

Построение кривой Безье 4-го порядка:

Анимация 8. Геометрический смысл кривой Безье 4-го порядка.

В заключение раздела предоставляю исходный код программы для рисования описанных выше рисунков: Программа для рисования Кривых Безье, без учёта уровня дискретизации t. Программа написана на C# WPF, программа генерирует картинки попиксельно на холсте пикселей со сглаживанием с помощью сверх образца x16 (Алгоритмы - Сглаживание графики (Anti-aliasing)). Программа записывает картинки в корень расположения исполняемого файла.

4. Уровень дискретизации t.

Данный раздел показывает, как увеличивать t, чтобы при следующем не значительном увеличении вычисленные координаты не попали на туже точку.

Для определения уровня дискретизации t координаты x или y, для всех случаев с определённым t, должны отличаться на единицу. Т.е.:

Уравнение выглядит так, более конкретно:

Т.е.:

Решим это уравнение для линейной кривой:

Это уравнение Δt действительно для уравнения только кривой Безье первого порядка (n=1), хотя для неё бессмысленно начальное утверждение, но оно подойдёт Вам для многочленов Безье большего порядка. В конце показано, что выбирается минимальное Δt, но можно использовать и для конкретной оси.

Выведите уравнение для Δt для общего случая самостоятельно, если вы планируете написать свой графический редактор, то сделайте это обязательно.

5. Заключение.

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