Что такое безье в информатике

Кривые Безье

Кривые Безье

Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в CSS-анимации и много где ещё.
Несмотря на «умное» название – это очень простая штука.
В принципе, можно создавать анимацию и без знания кривых Безье, но стоит один раз изучить эту тему хотя бы для того, чтобы в дальнейшем с комфортом пользоваться этим замечательным инструментом. Тем более что в мире векторной графики и продвинутых анимаций без них никак.

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

Кривая Безье задаётся опорными точками.
Их может быть две, три, четыре или больше. Например:
По двум точкам:

По трём точкам:

По четырём точкам:

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

Благодаря последнему свойству в компьютерной графике можно оптимизировать проверку пересечений двух кривых. Если их выпуклые оболочки не пересекаются, то и кривые тоже не пересекутся.
Основная ценность кривых Безье для рисования – в том, что, двигая точки, кривую можно менять, причём кривая при этом меняется интуитивно понятным образом.
После небольшой практики становится понятно, как расположить точки, чтобы получить нужную форму. А, соединяя несколько кривых, можно получить практически что угодно.
Вот некоторые примеры:

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

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

Вместо P_i нужно подставить координаты i-й опорной точки (x_i, y_i).
Эти уравнения векторные, то есть для каждой из координат:

Вместо x₁, y₁,x₂, y₂, x₃, y₃ подставляются координаты трёх опорных точек, и в то время как t пробегает множество от 0 до 1, соответствующие значения (x, y) как раз и образуют кривую.
Впрочем, это чересчур наукообразно, не очень понятно, почему кривые именно такие, и как зависят от опорных точек. С этим нам поможет разобраться другой, более наглядный алгоритм.

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

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

Алгоритм построения кривой по «методу де Кастельжо»:

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

Например, при t=0 – точки будут в начале, при t=0.25 – на расстоянии в 25% от начала отрезка, при t=0.5 – 50%(на середине), при t=1 – в конце отрезков.

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

Этот алгоритм рекурсивен. Для каждого t из интервала от 0 до 1 по этому правилу, соединяя точки на соответствующем расстоянии, из 4 отрезков делается 3, затем из 3 так же делается 2, затем из 2 отрезков – точка, описывающая кривую для данного значения t.
Так как алгоритм рекурсивен, то аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Однако на практике они менее полезны. Обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.

Источник

Кривые Безье

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/bezier-curve.

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

Несмотря на «умное» название – это очень простая штука.

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

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

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

Их может быть две, три, четыре или больше. Например:

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

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

Степень кривой равна числу точек минус один. Для двух точек – это линейная кривая (т.е. прямая), для трёх точек – квадратическая кривая (парабола), для четырёх – кубическая.

Кривая всегда находится внутри выпуклой оболочки, образованной опорными точками:

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

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

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

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

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

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

Математика

У кривых Безье есть математическая формула.

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

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

Эти уравнения векторные, то есть для каждой из координат:

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

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

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

Посмотрим его на примере трёх точек (точки можно двигать). Нажатие на кнопку «play» запустит демонстрацию.

Алгоритм построения кривой по «методу де Кастельжо»:

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

На каждом из коричневых отрезков берётся точка, находящаяся от начала на расстоянии от 0 до t пропорционально длине. Так как коричневых отрезков – два, то и точек две штуки.

Например, при t=0 – точки будут в начале, при t=0.25 – на расстоянии в 25% от начала отрезка, при t=0.5 – 50%(на середине), при t=1 – в конце отрезков.

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

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

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

Источник

Постигая кривые Безье

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

Для наглядности можно рассматривать их как график передвижения точки от начала до конца маршрута в зависимости от времени движения.

Время изменяется от 0 до 1 (до 100%). То есть мы изначально знаем время, за которое нужно переместиться из начальной точки (P₀) в конечную (P_n) (конкретная величина не имеет значения). На основании этого времени можно вычислить точную траекторию — по формулам.

Берем все время за 100% (или за единицу). В момент 0 (0%) точка находится в точке P₀, в момент 1 (100%) – в точке P_n. Положение точки в любой момент между этими моментами можно вычислить по формуле.

Порядок кривой всегда на 1 меньше количества контрольных точек. Рассмотрим построение пошагово, начиная с самой простой кривой.

Кривая Безье первого порядка

Простейшая кривая Безье — это обычная линия. Порядок первый – значит, контрольных точек две. Ее академическое уравнение выглядит так:

Разберем на простейшем примере. Пусть:

Сразу же проверим формулу.

При t = 0 (в начальный момент времени) должна получиться точка P₀, а при t = 1 должна получиться точка P₁.

А теперь найдем несколько точек между началом и концом. Тут используется сложение и умножение векторов, но в данном случае все интуитивно понятно:

Все полученные точки лежат на одной прямой – это и есть кривая Безье первого порядка.

Время идет, точка движется от старта к финишу. И в любой момент времени мы точно знаем, где она находится.

Кривые Безье второго порядка и больше

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

Непосредственно через них кривая не проходит, так зачем же они нужны?

На самом деле эти точки определяют направление движения (направление изгиба кривой) и крутизну этого изгиба.

Квадратичная кривая

Кривая Безье второго порядка, или квадратичная, задается тремя контрольными точками:

Маленький спойлер: кривая Безье второго порядка имеет форму параболы (не обязательно симметричной).

Формула у нее вот такая:

Проверим, что в начале и конце движения мы окажемся в точках P₀ и P₂ соответственно:

Найдем, где будет точка через половину времени t (0.5):

B(0.5) = 0.25*P₀ + 0.5*P₁ + 0.25*P₂ = (-0.25; 0) + (0; 1) + (0.25; 0) = (0; 1)

Если найти еще несколько точек, вырисуется ровная парабола. Так, в общем, и было задумано для простоты вычислений и визуальной ясности.

Рекурсивность кривых Безье

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

Вернемся к предыдущему примеру:

Предположим, что мы не знаем, как построить кривую второго порядка между P₀ и P₂. Но мы можем построить простейшую кривую первого порядка между P₀ и P₁, а также между P₁ и P₂, пользуясь формулой:

Для каждого момента времени мы можем найти положение точки на каждой из этих кривых.

Например, в момент времени 0.25 соответствующие точки Q₀ и Q₁ будут в таких позициях:

Между этими точками тоже можно построить кривую первого порядка.

Магия заключается в том, что точка на этой кривой в момент времени t = 0.25 соответствует точке на искомой кривой второго порядка в этот же момент времени.

Распишем чуть подробнее.

Этот рекурсивный алгоритм построения кривой Безье носит имя Поля де Кастельжо.

Кубическая кривая

Кривая Безье третьего порядка, или кубическая кривая, определяется уже четырьмя опорными точками – началом, концом и двумя вспомогательными, через которые она не будет непосредственно проходить.

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

Формула кубической кривой еще сложнее:

Вы можете попробовать эту кривую рассчитать самостоятельно.

Обратите внимание, ее тоже можно получить рекурсивно!

Найти точку кривой третьего порядка в момент времени t можно по следующему алгоритму:

Зачем все это нужно?

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

Кривые Безье используются в описаниях шрифтов TrueType, в SVG, GIMP и других графических форматах, в 3D-графике. Они используются даже в CSS для описания плавности анимации.

Источник

Хорошие Ручные Руководства Обучающего Времени По Специальности Информационные Технологии

Обучение переводу статей англоязычной документации, статьи про алгоритмы, а также LifeHacks, статьи по Компьютеру и Программированию, Журнал для Детей, Математику и смежные науки Инженерии.

Поиск по этому блогу

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

1. Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

На рисунках 1-4 представлены кривые Безье с точками: P₀ = (20, 20), P₁ = (120, 160), P₂ = (160, 160), P₃ = (170, 30), P₄ = (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-го порядка.

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

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

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

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

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

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

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

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

Источник

Кривые Безье

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

Несмотря на то, что открытие де Кастелье было сделано несколько ранее Безье (1959), его исследования не публиковались и скрывались компанией как производственная тайна до конца 1960-х.

Впервые кривые были представлены широкой публике в 1962 году французским инженером Пьером Безье, который, разработав их независимо от де Кастелье, использовал их для компьютерного проектирования автомобильных кузовов. Кривые были названы именем Безье, а именем де Кастелье назван разработанный им рекурсивный способ определения кривых (алгоритм де Кастелье).

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

Содержание

Определение

Кривая Безье — параметрическая кривая, задаваемая выражением

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

, где n — степень полинома, i — порядковый номер опорной вершины

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

Линейные кривые

При n = 1 кривая представляет собой отрезок прямой линии, опорные точки P₀ и P₁ определяют его начало и конец. Кривая задаётся уравнением:

.

Квадратичные кривые

Квадратичная кривая Безье (n = 2) задаётся 3-мя опорными точками: P₀, P₁ и P₂.

.

Квадратичные кривые Безье в составе сплайнов используются для описания формы символов в шрифтах SWF файлах.

Кубические кривые

В параметрической форме кубическая кривая Безье (n = 3) описывается следующим уравнением:

.

Четыре опорные точки P₀, P₁, P₂ и P₃, заданные в 2-х или 3-мерном пространстве определяют форму кривой.

Линия берёт начало из точки P₀ направляясь к P₁ и заканчивается в точке P₃ подходя к ней со стороны P₂. То есть кривая не проходит через точки P₁ и P₂, они используются для указания её направления. Длина отрезка между P₀ и P₁ определяет, как скоро кривая повернёт к P₃.

В матричной форме кубическая кривая Безье записывается следующим образом:

,

где называется базисной матрицей Безье:

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

Построение кривых Безье

Линейные кривые

Параметр t в функции, описывающей линейный случай кривой Безье, определяет где именно на расстоянии от P₀ до P₁ находится B(t). Например, при t = 0,25 значение функции B(t) соответствует четверти расстояния между точками P₀ и P₁. Параметр t изменяется от 0 до 1, а B(t) описывает отрезок прямой между точками P₀ и P₁.

Квадратичные кривые

Для построения квадратичных кривых Безье требуется выделение двух промежуточных точек Q₀ и Q₁ из условия чтобы параметр t изменялся от 0 до 1:

Кривые высших степеней

Для построения кривых высших порядков соответственно требуется и больше промежуточных точек. Для кубической кривой это промежуточные точки Q₀, Q₁ и Q₂, описывающие линейные кривые, а также точки R₀ и R₁, которые описывают квадратичные кривые: более простое уравнение p0q0/p0q1=q1p1/p1p2=bq0/q1q0

Для кривых четвёртой степени это будут точки Q₀, Q₁, Q₂ и Q₃, описывающие линейные кривые, R₀, R₁ и R₂, которые описывают квадратичные кривые, а также точки S₀ и S₁, описывающие кубические кривые Безье:

Применение в компьютерной графике

Благодаря простоте задания и манипуляции, кривые Безье нашли широкое применение в компьютерной графике для моделирования гладких линий. Кривая целиком лежит в выпуклой оболочке своих опорных точек. Это свойство кривых Безье с одной стороны значительно облегчает задачу нахождения точек пересечения кривых (если не пересекаются выпуклые оболочки, то не пересекаются и сами кривые), а с другой стороны позволяет визуализировать кривую с помощью её опорных точек. Кроме того аффинные преобразования кривой (перенос, масштабирование, вращение) также могут быть осуществлены путём применения соответствующих трансформаций к опорным точкам.

Наибольшее значение имеют кривые Безье второй и третьей степеней (квадратичные и кубические). Кривые высших степеней при обработке требуют большего объёма вычислений и для практических целей используются реже. Для построения сложных по форме линий отдельные кривые Безье могут быть последовательно соединены друг с другом в сплайн Безье. Для того, чтобы обеспечить гладкость линии в месте соединения двух кривых, смежные опорные точки обеих кривых должны лежать на одной линии. В программах векторной графики наподобие Adobe Illustrator или path).

Преобразование квадратичных кривых Безье в кубические

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

Литература

См. также

Неплоские кривыеВинтовая линия • Линия откоса • Локсодрома • Ортодромия • ГубкаСвязанные понятияОпределения кривойАналитическая кривая • Кривая Жордана • Канторова кривая • Кривая УрысонаПреобразованные кривыеЭволюта • Эвольвента • Каустика

Полезное

Смотреть что такое «Кривые Безье» в других словарях:

кривые Безье — (Bezier curves) Математические уравнения, применяемые для описания форм знаков в цифровых шрифтах [шрифт, описанный с помощью цифровых данных]. Названы в честь французского математика Пьера Безье (1910–99), разработавшего математическое… … Шрифтовая терминология

Кубические кривые Безье — Кривые Безье были разработаны в 60 х годах XX века независимо друг от друга Пьером Безье (Bézier) из автомобилестроительной компании «Рено» и Полем де Кастелье (de Casteljau) из компании «Ситроен», где применялись для проектирования кузовов… … Википедия

Кривые — Кривая или линия геометрическое понятие, определяемое в разных разделах геометрии различно. Содержание 1 Элементарная геометрия 2 Параметрические определения 3 Кривая Жордана … Википедия

безье — I. БЕЗЬЕ I нескл. beziers. Сладкое дессертное мускатное вино невысокого сорта. Вавилов 1856. Бордоское вино из округа Безьер. II. БЕЗЬЕ II Существует и обратное влияние промышленности на методы машинной графики. Самый известный пример такого… … Исторический словарь галлицизмов русского языка

Кривая Безье — Кривые Безье или Кривые Бернштейна Безье были разработаны в 60 х годах XX века независимо друг от друга Пьером Безье (Pierre Bézier) из автомобилестроительной компании «Рено» и Полем де Кастельжо (Paul de Faget de Casteljau) из компании «Ситроен» … Википедия

Кубическая кривая Безье — Кривые Безье были разработаны в 60 х годах XX века независимо друг от друга Пьером Безье (Bézier) из автомобилестроительной компании «Рено» и Полем де Кастелье (de Casteljau) из компании «Ситроен», где применялись для проектирования кузовов… … Википедия

Bezier curves — Кривые Безье (Bezier curves) Математические уравнения, применяемые для описания форм знаков в цифровых шрифтах [шрифт, описанный с помощью цифровых данных]. Названы в честь французского математика Пьера Безье (1910–99), разработавшего… … Шрифтовая терминология

Сплайн — (от англ. spline, от [flat] spline гибкое лекало, полоса металла, используемая для черчения кривых линий) функция, область определения которой разбита на конечное число отрезков, на каждом из которых сплайн совпадает с некоторым… … Википедия

Векторный графический редактор — Векторный редактор Inkscape. Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непо … Википедия

Векторная графика — Пример, показывающий разницу между векторной, фрактальной и растровой графикой при увеличении. a: исходное векторное изображение; b: иллюстрация, увеличенная в 8 раз как векторное изображение; c: иллюст … Википедия

Источник