761просмотров
16 октября 2024 г.
Score: 837
Хочется коснуться важной темы в программировании — кривые Безье. Это база для векторной графики.
Векторная графика не имеет спецификации, но имеет форматы, которые в свою очередь признаны стандартизировать определённы вид записи масштабируемых объектов, например, в изображение или анимацию.
Примером формата может послужить svg, который даёт возможность отображение нескольких простых примитивов, путей (paths, описывающиеся кривыми Безье) и текста. Так же даёт возможность создавать простые анимации с перемещением и вращением объектов.
Приложу пример текста файла svg, который отображает круг. Важно, этот круг задаётся тегом и он масштабируемый, для отображения такого круга в png формате понадобилось бы в разы больше места (даже учитывая graymap и другие хитрости) <svg width="100" height="100"> <circle cx="50" cy="50" r="25" fill="black"/>
</svg> Стоит обратить внимание на аттрибут fill, т.к круг это набор векторов, эти векторы не имеют размера, поэтому размер нужно задать с помощью толщины, обводки, либо, как в данном случае, указать, что фигура должна быть залита. svg имеет достаточный для приложений, но не полноценный функционал векторной графики, например, не имеет функционала для использования математических формул.
Да, для записей графика математических формул используется... дискретизация функции и перевод в ранее упомянутые кривые Безье или же можно воспользоваться дополнительными инструментами, например js, для изменения svg на сайте в реальном времени, в зависимости от приближения и координат рабочей области пользователя.
Но что же такое кривая Безье?
— Одна из представленных кривых Безье, имеющая вид функции f(t, P0, ..., Pn), t ∈ [0, 1] - представление времени, P0, ..., Pn - точки в пространстве (x, y)
Кривые Безье бывают разных рангов, от ранга зависит количество переменных, кол-во переменных = ранг+1, кривые Безье 1, 2 и 3-го ранга имеют названия: прямая, квадратная и кубическая соответственно.
Чем больше ранг — тем больше вариаций кривых можно описать.
Прямая кривая Безье имеет две точки: P0 - начало, P1 - конец.
Начиная с квадратной кривая Безье может описывать кривую. P0 - начало, Pn - конец, остальные точки — контрольные(опорные) точки, от которых кривая "отталкивается" (см. ссылку) Видно, что функция кривой Безье имеет не привычный вид для графических функции, как например, y = f(x) или d = f(x, y) D(f) ∈ N ∩ [0, 1], потому что кривая Безье работает с векторами и определяет точку в пространстве во времени t,
поэтому, для отображения кривой Безье её необходимо растрировать с помощью дискретизации от t = 0, до t = 1. То есть, соединить на прямую точки во времени, например: n = 100, t = a/n, a ∈ N ∩ [0, n], и соединить получившиеся точки напрямую, результатом будет растрированная кривая Безье. Конечно, использовать константу для n не имеет смысла, нужно смотреть для каждой кривой свою n, которая также зависит от масштаба растрированного изображения, которое нужно получить.
Вся красота кривых Безье заключается в маленьком количестве необходимых данных, для определения кривой. Представим одну кубическую кривую Безье, для неё необходимо 4 точки, то есть 8 действительных чисел. В программирование, при использовании 64 битного float-point числа, нам понадобится всего 64 байта, что просто ничто, по сравнению с спецификациями, которые предполагают запись математических графических функций. Кривые Безье используется повсеместно, шрифты, все программы графики используют кривые Безье, что не возьми, если есть линия, а потом кривая часть — это либо Безье, либо схожая с Безье кривая Пощупать кубическую кривую Безье можно на примере в Desmos - https://www.desmos.com/calculator/cahqdxeshd
P.S. Печально, что тг не поддерживает сообщения в виде постов, со сложной структурой медиа, так бы всё обрисовать картинками и графиками