НОУ ИНТУИТ | Лекция | Построение кривых Безье
< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Аннотация: В лекции рассмотрено применение инструментов Кривая и Кривая Безье, их схожесть и различия. Приведены примеры использования этих инструментов.
Ключевые слова: кривая Безье, кривые Безье, отрезок, контур, сглаживание, значение, длина, очередь
Построение кривых Безье
Вы уже знаете, что кривая Безье — это прямая или кривая линия, состоящая из сегментов и узлов, расположенных на их концах. Узлы кривой Безье можно перемещать с помощью инструмента Shape (Форма) (), что позволяет изменять форму фигуры в целом. Узел может иметь направляющие, расположение и длину которых можно изменять с помощью соответствующих маркеров. Перемещение управляющих маркеров приводит к модифицированию внешнего вида сегментов — изменению их кривизны.
В предыдущей лекции мы рассмотрели инструмент Shape (Форма) (), который предназначен для работы с узлами и сегментами фигур в виде прямоугольников, эллипсов или многоугольников, преобразованных в кривые Безье.
Данный метод (использование фигуры-заготовки в виде прямоугольника, эллипса или многоугольника) удобен на начальных этапах освоения программы векторной графики. При этом вы изначально располагаете замкнутой линией и все, что нужно делать, — это добавить требуемое количество узлов, расположить их должным образом и задать требуемую кривизну отдельных сегментов и тип тех или иных узлов (рис. 6.1).
Рис. 6.1. Использование фигур-заготовок в виде прямоугольника и эллипса для построения более сложных фигур
Другой метод заключается в пошаговом построении фигуры, имеющей сложную форму, путем последовательного создания сегментов и узлов (рис. 6.2).
Рис. 6.2. Построение фигур сложной формы путем последовательного создания сегментов и узлов
intuit.ru/2010/edi»>Данный метод состоит в следующем. Сначала, используя набор прямолинейных сегментов, строят полигональное подобие будущей фигуры. Затем с помощью инструмента Shape (Форма) () над сегментами и узлами имеющегося объекта выполняют различные действия, в результате чего изображение принимает требуемый вид (рис. 6.3).Рис. 6.3. Многоугольное подобие короны (слева) и окончательный вариант, доработанный с помощью инструмента Shape (Форма) (справа)
Описанный вариант создания объекта похож на метод, основанный на использовании фигуры-заготовки. Отличие состоит лишь в том, что в этом случае полигональная заготовка фигуры строится сразу, в то время как при использовании фигуры-заготовки для получения полигональной фигуры необходимо соответствующим образом добавить и разместить узлы.
Для построения кривых предназначены инструменты Freehand (Кривая) () и Bezier (Кривая Безье) (), входящие в группу Curve (Кривая)
Рис.
Инструмент Freehand (Кривая)
Инструмент Freehand (Кривая) позволяет создавать прямолинейные и криволинейные отрезки.
Чтобы построить прямолинейный отрезок с помощью этого инструмента, необходимо выполнить такие действия.
- Выбрать инструмент Freehand (Кривая) ().
- Перевести указатель () на рабочую область и щелкнуть кнопкой мыши.
- Переместить указатель в то место, где необходимо создать второй узел, и щелкнуть кнопкой мыши.
ПРИМЕЧАНИЕ.Данный способ позволяет построить одиночный прямолинейный отрезок.
СОВЕТ.Если вы хотите продолжить построение, то для этого необходимо расположить указатель мыши на одном из концевых узлов построенного контура и, когда указатель примет вид, щелкнуть основной кнопкой мыши.
После этого нужно переместить указатель мыши в то место, где необходимо создать следующий узел, и снова щелкнуть основной кнопкой мыши. Таким образом можно построить полигональную линию.
Чтобы построить криволинейный контур с помощью инструмента Freehand (Кривая), необходимо действовать следующим образом.
- Выбрать инструмент Freehand (Кривая) ().
- Перевести указатель мыши () на рабочую область.
- Нажать кнопку мыши и, не отпуская ее, перетащить мышь, создавая кривую.
Гладкость линии итоговой кривой можно задать с помощью параметраFreehand Smoothing
Уменьшение значения данного параметра делает инструмент более чувствительным к движению мыши и приводит к созданию большего количества узлов при рисовании кривой (рис. 6.5).Рис. 6.5. Фигуры, нарисованные инструментом Freehand (Кривая) при разных значениях параметр Freehand Smoothing (Сглаживание кривой): 100 — слева, 50 — в центре, 0 — справа
Дальше >>
< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Математические основы машинной графики
Математические основы машинной графики
ОглавлениеПредисловие к русскому изданиюПредисловие Предисловие к первому изданию Благодарности Глава 1. Введение в машинную графику 1-1 ОБЗОР МАШИННОЙ ГРАФИКИ 1-2 ПРЕДСТАВЛЕНИЕ ИЗОБРАЖЕНИЙ 1-3 ПОДГОТОВКА ИЗОБРАЖЕНИЙ ДЛЯ ВЫВОДА 1-4 ПРЕДСТАВЛЕНИЕ ПРЕДВАРИТЕЛЬНО ПОДГОТОВЛЕННОГО ИЗОБРАЖЕНИЯ 1-5 ОРГАНИЗАЦИЯ ВЗАИМОДЕЙСТВИЯ С ИЗОБРАЖЕНИЕМ 1-6 ТИПЫ ГРАФИЧЕСКИХ УСТРОЙСТВ 1-7 ГРАФИЧЕСКИЕ ДИСПЛЕИ НА ЗАПОМИНАЮЩЕЙ ТРУБКЕ 1-8 ГРАФИЧЕСКИЕ ДИСПЛЕИ С РЕГЕНЕРАЦИЕЙ ИЗОБРАЖЕНИЯ 1-9 РАСТРОВЫЕ ГРАФИЧЕСКИЕ ДИСПЛЕИ С РЕГЕНЕРАЦИЕЙ ИЗОБРАЖЕНИЯ 1-10 УСТРОЙСТВО ЭЛЕКТРОННО-ЛУЧЕВОЙ ТРУБКИ 1-11 УСТРОЙСТВО ЦВЕТНОЙ РАСТРОВОЙ ЭЛТ 1-12 СИСТЕМЫ С ТЕЛЕВИЗИОННЫМ РАСТРОМ 1-13 ДИСПЛЕИ С ПЛОСКИМ ЭКРАНОМ 1-15 ЛАЗЕРНЫЕ ПЕЧАТАЮЩИЕ УСТРОЙСТВА 1-16 МАТРИЧНЫЕ ГРАФОПОСТРОИТЕЛИ 1-17 УСТРОЙСТВО СТРУЙНОЙ ПЕЧАТИ 1-18 УСТРОЙСТВО ТЕРМОПЕЧАТИ 1-19 ПЕРЬЕВЫЕ ГРАФОПОСТРОИТЕЛИ 1-20 ЦВЕТНЫЕ ВИДЕОКАМЕРЫ 1-21 АКТИВНЫЕ И ПАССИВНЫЕ ГРАФИЧЕСКИЕ УСТРОЙСТВА 1-22 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ МАШИННОЙ ГРАФИКИ 1-23 ЛИТЕРАТУРА Глава 2.  Двумерные преобразования2-1 ВВЕДЕНИЕ 2-2 ИЗОБРАЖЕНИЕ ТОЧЕК 2-3 ПРЕОБРАЗОВАНИЯ И МАТРИЦЫ 2-4 ПРЕОБРАЗОВАНИЕ ТОЧЕК 2-5 ПРЕОБРАЗОВАНИЕ ПРЯМЫХ ЛИНИЙ 2-6 ПРЕОБРАЗОВАНИЕ СРЕДНЕЙ ТОЧКИ 2-7 ПРЕОБРАЗОВАНИЕ ПАРАЛЛЕЛЬНЫХ ЛИНИЙ 2-9 ПОВОРОТ 2-10 ОТРАЖЕНИЕ 2-11 МАСШТАБИРОВАНИЕ 2-12 КОМБИНИРОВАННЫЕ ПРЕОБРАЗОВАНИЯ 2-13 ПРЕОБРАЗОВАНИЕ ЕДИНИЧНОГО КВАДРАТА 2-14 ПРЕОБРАЗОВАНИЯ ЖЕСТКИХ КОНСТРУКЦИЙ 2-15 ПЕРЕМЕЩЕНИЯ И ОДНОРОДНЫЕ КООРДИНАТЫ 2-16 ПОВОРОТ ВОКРУГ ПРОИЗВОЛЬНОЙ ТОЧКИ 2-17 ОТРАЖЕНИЕ ОТНОСИТЕЛЬНО ПРОИЗВОЛЬНОЙ ПРЯМОЙ 2-18 ПРОЕЦИРОВАНИЕ – ГЕОМЕТРИЧЕСКАЯ ИНТЕРПРЕТАЦИЯ ОДНОРОДНЫХ КООРДИНАТ 2-19 ПРОПОРЦИОНАЛЬНОЕ МАСШТАБИРОВАНИЕ 2-20 ТОЧКИ БЕСКОНЕЧНОСТИ 2-21 ПРАВИЛА ВЫПОЛНЕНИЯ ПРЕОБРАЗОВАНИЙ 2-22 ЛИТЕРАТУРА Глава 3. Пространственные преобразования и проекции 3-1 ВВЕДЕНИЕ 3-2 ТРЕХМЕРНОЕ МАСШТАБИРОВАНИЕ 3-3 ТРЕХМЕРНЫЕ СДВИГИ 3-5 ТРЕХМЕРНОЕ ОТРАЖЕНИЕ 3-6 ПРОСТРАНСТВЕННЫЙ ПЕРЕНОС 3-7 КОМПОЗИЦИИ ПРЕОБРАЗОВАНИЙ 3-8 ПОВОРОТЫ ВОКРУГ ОСИ, ПАРАЛЛЕЛЬНОЙ КООРДИНАТНОЙ ОСИ 3-9 ПОВОРОТ ВОКРУГ ПРОИЗВОЛЬНОЙ ОСИ В ПРОСТРАНСТВЕ 3-10 ОТРАЖЕНИЕ ОТНОСИТЕЛЬНО ПРОИЗВОЛЬНОЙ ПЛОСКОСТИ 3-11 АФФИННАЯ И ПЕРСПЕКТИВНАЯ (НАЧЕРТАТЕЛЬНАЯ) ГЕОМЕТРИЯ 3-12 ОРТОГРАФИЧЕСКИЕ ПРОЕКЦИИ 3-13 АКСОНОМЕТРИЧЕСКИЕ ПРОЕКЦИИ 3-14 КОСОУГОЛЬНЫЕ ПРОЕКЦИИ 3-15 ПЕРСПЕКТИВНЫЕ ПРЕОБРАЗОВАНИЯ 3-16 МЕТОДЫ СОЗДАНИЯ ПЕРСПЕКТИВНЫХ ВИДОВ 3-17 ТОЧКИ СХОДА 3-18 ФОТОГРАФИЯ И ПЕРСПЕКТИВНОЕ ПРЕОБРАЗОВАНИЕ 3-19 СТЕРЕОГРАФИЧЕСКАЯ ПРОЕКЦИЯ 3-20 СРАВНЕНИЕ ДВУХ МЕТОДОВ ПОСТРОЕНИЯ ПРОЕКЦИЙ – С ФИКСИРОВАННЫМ ОБЪЕКТОМ И С ФИКСИРОВАННЫМ ЦЕНТРОМ ПРОЕКЦИИ 3-21 ВОССТАНОВЛЕНИЕ ТРЕХМЕРНЫХ ОБЪЕКТОВ ПО ПРОЕКЦИЯМ 3-22 ЛИТЕРАТУРА Глава 4 Плоские кривые 4-1 ВВЕДЕНИЕ 4-2 ПРЕДСТАВЛЕНИЕ КРИВЫХ 4-3 НЕПАРАМЕТРИЧЕСКИЕ КРИВЫЕ 4-4 ПАРАМЕТРИЧЕСКИЕ КРИВЫЕ 4-5 ПАРАМЕТРИЧЕСКОЕ ПРЕДСТАВЛЕНИЕ ОКРУЖНОСТИ 4-6 ПАРАМЕТРИЧЕСКОЕ ПРЕДСТАВЛЕНИЕ ЭЛЛИПСА 4-7 ПАРАМЕТРИЧЕСКОЕ ПРЕДСТАВЛЕНИЕ ПАРАБОЛЫ 4-8 ПАРАМЕТРИЧЕСКОЕ ПРЕДСТАВЛЕНИЕ ГИПЕРБОЛЫ 4-9 ПРОЦЕДУРА ИСПОЛЬЗОВАНИЯ КОНИЧЕСКИХ СЕЧЕНИЙ 4-10 ОБЩИЕ УРАВНЕНИЯ КОНИЧЕСКИХ СЕЧЕНИЙ 4-11 ЛИТЕРАТУРА Глава5 Пространственные кривые 5-1 ВВЕДЕНИЕ 5-2 ПРЕДСТАВЛЕНИЕ ПРОСТРАНСТВЕННЫХ КРИВЫХ 5-3 КУБИЧЕСКИЕ СПЛАЙНЫ 5-4 НОРМАЛИЗОВАННЫЕ КУБИЧЕСКИЕ СПЛАЙНЫ 5-5 ДРУГИЕ ГРАНИЧНЫЕ УСЛОВИЯ 5-6 ПАРАБОЛИЧЕСКАЯ ИНТЕРПОЛЯЦИЯ 5-7 ОБОБЩЕННАЯ ПАРАБОЛИЧЕСКАЯ ИНТЕРПОЛЯЦИЯ 5-8 КРИВЫЕ БЕЗЬЕ 5-9 В-СПЛАЙНЫ 5-10 КОНЕЧНЫЕ УСЛОВИЯ ДЛЯ ПЕРИОДИЧЕСКИХ В-СПЛАЙНОВ 5-11 ПОДГОНКА В-СПЛАЙНОВ 5-12 РАЗБИЕНИЕ В-СПЛАЙНОВ 5-13 РАЦИОНАЛЬНЫЕ В-СПЛАЙНЫ 5-14 ЛИТЕРАТУРА Глава 6 Поверхности 6-1 ВВЕДЕНИЕ 6-2 ПОВЕРХНОСТИ ВРАЩЕНИЯ 6-3 ЗАМЕТАЮЩИЕ ПОВЕРХНОСТИ 6-4 КВАДРАТИЧНЫЕ ПОВЕРХНОСТИ 6-5 КУСОЧНОЕ ПРЕДСТАВЛЕНИЕ ПОВЕРХНОСТЕЙ 6-6 ОТОБРАЖЕНИЕ ПАРАМЕТРИЧЕСКИХ ПОВЕРХНОСТЕЙ 6-7 БИЛИНЕЙНАЯ ПОВЕРХНОСТЬ 6-8 ЛИНЕЙЧАТЫЕ И РАЗВЕРТЫВАЮЩИЕСЯ ПОВЕРХНОСТИ 6-9 ЛИНЕЙНАЯ ПОВЕРХНОСТЬ КУНСА 6-10 БИКУБИЧЕСКАЯ ПОВЕРХНОСТЬ КУНСА 6-11 ПОВЕРХНОСТИ БЕЗЬЕ 6-12 В-СПЛАЙН ПОВЕРХНОСТИ 6-13 В-СПЛАЙН ИНТЕРПОЛЯЦИЯ 6-14 РАЗБИЕНИЕ В-СПЛАЙН ПОВЕРХНОСТЕЙ 6-15 ГАУССОВА КРИВИЗНА И КАЧЕСТВО ПОВЕРХНОСТИ 6-16 РАЦИОНАЛЬНЫЕ В-СПЛАЙН ПОВЕРХНОСТИ 6-17 ЛИТЕРАТУРА |
Рождение кривых Безье и их влияние на графический дизайн
Без открытия кривой Безье мы не смогли бы рисовать кривые на компьютере.
Это математическое уравнение привело к созданию компьютерного программного обеспечения, которое коренным образом изменило способ создания графического дизайна. Узнайте, как кривая Безье произвела революцию в различных областях, включая анимацию и робототехнику.
Термин «кривая Безье» звучит сложно и пугающе, не так ли? Но не волнуйтесь — вы, вероятно, использовали эти кривые много раз, даже не осознавая этого. Это верно. Если вы когда-либо создавали что-то в Adobe Illustrator или Photoshop, вы использовали кривые Безье для создания различных форм, которые вы хотите использовать в своем дизайне.
Короче говоря, кривая Безье — это математическая функция, которая указывает компьютерному программному обеспечению создавать определенные формы для иллюстраций и надписей, среди прочего. Этот алгоритм позволяет создавать плавные и точные изображения, что делает технологию применимой в различных областях, таких как графический дизайн, машиностроение, робототехника, анимация и многое другое.
Благодаря этому прорыву родилась новая эра в языке искусства. И чтобы по-настоящему оценить масштабы его воздействия, вам нужно услышать всю историю целиком. Мы познакомим вас с историей происхождения кривых Безье, а затем обсудим, что они из себя представляют и как их можно применять в различных отраслях.
Мы начнем с путешествия во времена, когда еще не было компьютеров.
Бернштейн. Начало кривой Безье
Как инженеры моделировали объекты, которые они хотели создать, до появления компьютеров? Они использовали нечто, называемое сплайном.
Шпонка представляла собой длинный гибкий кусок пластика или дерева с прямоугольным поперечным сечением. Шлиц удерживался на месте, заземляя его на чертежную доску тяжелыми свинцовыми грузами с выступами, называемыми утками. Затем сплайн формировался в зависимости от того, где его фиксировали утки. Перемещение уток означало изменение формы сплайна.
com/p/BG9W_mbq_Mm/?utm_source=ig_embed&utm_campaign=loading» data-instgrm-version=»14″>Посмотреть эту публикацию в Instagram
Пост, которым поделился Кларк Келлогг (@clark_kellogg)
Очевидно, этот метод оказался далеко не идеальным, особенно с точки зрения точности. Просто подумай об этом. Инженеры должны были записывать положение утки как можно точнее, и им часто приходилось тратить значительные суммы денег на чертежное оборудование, необходимое для проектирования сложных деталей, занимающих много места. Математически этот подход также не оправдал себя, потому что при его анализе не было решения в закрытой форме.
В общем, не лучший подход, но на данный момент моделировать объекты с помощью компьютеров было невозможно. И даже когда на сцену вышли компьютеры, нужно было найти способ рисовать кривые.
Когда мы рисуем двухмерные или трехмерные объекты, они состоят из прямых линий и кривых. И если с помощью компьютера рисовать прямые линии достаточно просто, то кривые сложны.
Мы можем достаточно легко рисовать кривые от руки, но рисовать их на компьютере — совсем другое дело.
Вам нужна математическая функция, которая сообщает компьютеру, как их рисовать. Первый прорыв, открывший путь к пониманию этого, был сделан Сергеем Натановичем Бернштейном.
В 1912 году он разработал математическую концепцию многочленов с плавной кривизной. Многочлен представляет собой выражение более чем двух алгебраических членов и, более конкретно, суммы нескольких членов, содержащих разные степени одной и той же переменной, например, x1 и x2 .
К несчастью для Бернштейна, у него не было доступа к вычислительной мощности, необходимой для демонстрации того, как его математическая функция может применяться для решения реальных задач. В результате его открытие не увидит свет до 19 века.60-е годы.
К этому времени компьютеры стали стандартным инструментом, используемым в производстве, например, в автомобильной промышленности. И тут возникла новая проблема, потребовавшая вычислительного решения.
Два человека оказались в нужном месте в нужное время — математик по имени Пьер Безье и инженер по имени Поль де Кастельжо.
Пьер Безье работал в Renault, а де Кастельжо работал в Citroën. Проблема, которую они стремились решить, заключалась в поиске новых способов сделать автомобили более экономичными. Это привело обоих мужчин к плавно изогнутым полиномам Бернштейна, чтобы исследовать, как они могут изменить кузов автомобиля. Каждый из них боролся с проблемой независимо. Де Кастельжо был первым, кто объединил математическую базисную функцию, представленную Бернштейном, с компьютерным проектированием (САПР) для моделирования гладкого изогнутого автомобильного шасси.
Де Кастельжо открыл это приложение в 1959 году, но, к сожалению, Citroën не разрешил ему запатентовать его или опубликовать результаты. Renault был более щедрым, поэтому, когда Пьер Безье пришел к такому же выводу, ему разрешили запатентовать и опубликовать свои результаты в начале 1960-х годов. Именно поэтому эта математическая функция была названа кривой Безье.
Математическое уравнение для кривой Безье выглядит так:
Источник изображения: WikimediaДавайте подробнее объясним, почему это уравнение так ценно.
Что такое кривая Безье?
И как он решает загадку кривой?
С помощью одной простой математической функции Пьер Безье произвел революцию в цифровом дизайне. Его инструмент автоматизированного геометрического проектирования (CAGD) назывался UNISURF и позволял дизайнерам рисовать плавные и точные кривые на экране компьютера. Узнайте больше о CAGD из отличного обсуждения Моргана Кауфманна в Кривые и поверхности для CAGD: практическое руководство .
Но прежде чем мы продолжим рассказ о том, как кривые Безье покорили мир, важно понять, что такое кривая Безье и как она работает.
Если мы хотим изобразить плавную кривую на экране компьютера, нам нужно найти способ приблизить ее форму. Если вы очень внимательно посмотрите на ЖК-экран, вы увидите крошечные квадраты, которые составляют контур изображения.
Итак, все, что мы создаем в компьютерной графике, является лишь приближением.
Кривая Безье может аппроксимировать форму кривой, потому что это форма параметрической функции, состоящей из набора контрольных точек. Две точки представляют каждый конец кривой, а третья определяет форму кривой.
Параметрическая кривая создается с помощью линейной интерполяции. Все это означает «выбрать точку между двумя точками». Как только вы определили начало и конец кривой, вы можете расположить третью точку, чтобы создать форму кривой. Изменяя контрольные точки, вы изменяете всю кривую.
Например, если вы поместите третью точку на расстоянии 30 % от начала координат и 70 % от конечной точки, вы можете легко вычислить, какой будет форма вашей кривой, и если вы переместите третью точку в любом направлении, это изменит всю кривую.
Кривая на экране вашего компьютера является результатом математической функции, а именно кривой Безье, и этот алгоритм сообщает компьютеру, что делать с определенными входными данными.
Под «функцией» мы подразумеваем формулу, которая приводит нас к одному результату на основе любого количества входных данных. Функция в конечном итоге дает линии, которые мы видим на экранах наших компьютеров. Для целей дизайна нам нужна функция, которую можно было бы быстро вычислить для получения линии.
Кривые Безье — это параметрические функции, которые «мошенничают», поскольку используют более одной функции для генерации нескольких значений. Они делают это, связывая значения с «управляющей» переменной. Давайте распаковать это более тщательно.
Математика, стоящая за кривыми Безье
Кривые Безье характеризуются использованием одной и той же базовой функции для всех ее выходных значений. Другими словами, они используют «биномиальный полином» для выходных сигналов x и y . Помните, полиномы выглядят так:
Источник изображения: GitHub Полиномы с x3 в качестве члена высшего порядка являются «кубическими» полиномами, и если это x2 , у нас есть «квадратный» полином.
Если это x , мы называем это линией.
Кривые Безье представляют собой полиномы t , а не x , а значение t фиксировано между 0 и 1. Коэффициенты a , b и т. д. форма выглядит так:
Источник изображения: GitHubЧто делает кривую Безье таким важным достижением в цифровом искусстве, так это то, что она одновременно проста и универсальна, предоставляя графическим дизайнерам способ добиться контроля кривой, изменяя формы кривой по своему усмотрению.
Вы можете создавать базовые кривые и строить более сложные, соединяя несколько кривых Безье в одну кривую. Это позволяет графическим дизайнерам достигать сложности кривых, необходимой для их проектов.
Кривые Безье интересны тем, что мы можем рассматривать их через одну из двух линз. Первый позволяет нам увидеть их с помощью «настоящей математики», когда мы распаковываем кривую на основе ее производных, функций и т. д. Это включает рассмотрение кривой через ее полиномиальные функции.
Вторая линза позволяет нам рассматривать кривую с точки зрения интерполяций. Это означает, что мы рассматриваем «механическую» композицию, которая показывает, что кривая не выходит за пределы точек, использованных для ее создания.
Теперь, когда у вас есть более глубокое математическое понимание кривых Безье, мы можем вернуться к нашей истории о том, как кривые Безье в конечном итоге вошли в основной графический дизайн после его появления во французской автомобильной промышленности.
От создания автомобилей до совершенствования печати
Как кривые Безье изменили графический дизайн
Исследовательский центр Xerox в Пало-Альто стремился модернизировать традиционные офисные помещения, чтобы создать рабочее пространство будущего. Они предложили использовать компьютерные программы и промышленные сети, текстовые редакторы и лазерные принтеры. Единственным их слепым пятном было отсутствие мотивации к разработке компьютерной графики.
К разочарованию двух своих сотрудников — Джона Уорнока и Чарльза Гешке — Xerox не была заинтересована в разработке нового языка графики для контролируемой печати, который можно было бы коммерциализировать.
Так, в 19В 82 году эти два программиста покинули Xerox PARC, чтобы основать собственную компанию под названием Adobe. Звучит знакомо?
Их первым творением была технология под названием PostScript. С помощью этого универсального языка принтеры теперь могли интерпретировать текстовые документы для печати нужного содержимого. Язык был основан не на растровых изображениях, а на контрольных точках, соединенных алгоритмом для создания плавных кривых. Их программное обеспечение использовало кривые Безье для создания точных и полированных надписей.
Старый принтер Apple. Источник изображения: UnsplashИспользование Adobe кривых Безье для представления текстовых надписей навсегда изменило графический ландшафт. Текст в цифровых документах можно было растянуть, сжать, увеличить или уменьшить впервые. PostScript был выпущен в 1985 году на лазерных принтерах Apple и стал началом появления в мире универсального графического языка.
Однако, поскольку PostScript по-прежнему оставался языком графики, для создания графики требовалось быть программистом.
Таким образом, Adobe начала работу над продуктом с интерфейсом рисования, в котором использовался код PostScript.
Поскольку PostScript был основан на кривых и векторах, пользователь должен был щелкнуть интерфейс рисования, чтобы создать опорные точки, а затем перетащить, чтобы установить контрольную точку, которая будет определять каждую кривую.
Все эти усилия привели к созданию Adobe Illustrator, технологии, которая открыла гораздо больше, чем просто дизайн цифровых шрифтов.
Внезапно графический дизайн перестал быть громоздким аналоговым процессом, каким он был раньше. Графические дизайнеры всегда делали все вручную, что отнимало огромное количество времени и включало дополнительные усилия, такие как заправка, техническое обслуживание и мытье рук рапидографов.
Жена Уорнока, Марва, была дипломированным графическим дизайнером, которая хотела решать проблемы, с которыми каждый день сталкивались специалисты в ее области. Она хотела, чтобы графические дизайнеры могли легко создавать идеальные кривые, радикальные углы и штрихи разного размера.
И Уорнок был полон решимости перейти от ручной работы к компьютерной программе. Adobe Illustrator был ответом.
Печатная промышленность приветствовала эту новую технологию с распростертыми объятиями, признавая, что этот новый способ рисования для создания иллюстраций, печатной рекламы и обложек будет быстрее и дешевле. Задачи, которые изначально включали в себя идеальный штрих французской кривой, теперь можно было создавать всего двумя щелчками компьютерной мыши.
Adobe Illustrator успешно сочетает инструменты изобразительного искусства с доступным и доступным способом создания произведений искусства. Это сделало производство графического искусства менее трудоемким и более доступным, что позволило приток свежей крови и идей в индустрию графического дизайна.
Кривые Безье навсегда изменили графический дизайн. Итак, какие различные кривые Безье можно использовать для создания дизайнов? Давайте технически!
Различные типы кривых Безье
Как мы видели, кривые Безье аппроксимируют реальные формы, не имеющие математического представления, или формы с неизвестными или слишком сложными представлениями.
Кривая Безье состоит как минимум из трех точек: начала координат, конечной точки и как минимум одной контрольной точки. Это также позволяет использовать столько контрольных точек, сколько необходимо, хотя следует отметить, что оценка усложняется, когда у вас есть кривые более высокого порядка.
Более сложная кривая Безье также может быть построена из нескольких кривых Безье низкой степени, и наиболее распространенной формой является кубическая кривая Безье. Вы можете создать что-то, называемое сплайнами Безье, комбинируя многочисленные кривые и даже обобщая их на более высокие измерения для создания поверхностей Безье. Треугольник Безье — один из таких примеров.
(нулевой)
(нулевой)
Контрольные точки представлены от P0 до Pn , в зависимости от их количества. В этом уравнении n обозначает порядок кривой, где n =1 — линейный, n =2 — квадратичный, а n =3 — кубический.
В аффинных комбинациях сумма коэффициентов равна 1.
Давайте кратко рассмотрим различные кривые, которые вы можете использовать.
Линейная кривая Безье
С двумя различными точками, P0 и P1 , линейная кривая Безье представляет собой прямую линию между этими двумя точками. Кривая представлена как:
Источник изображения: WikimediaЭто эквивалентно линейной интерполяции.
Квадратичная кривая Безье
С тремя различными точками, P0 , P1 и P2 , квадратичная кривая представляет собой путь, полученный на основе функции B(t) . Он представлен следующим образом:
Источник изображения: WikimediaКвадратичную кривую также можно интерпретировать как линейную интерполянту точек на линейных кривых Безье, которые соответствуют от P0 до P1 и от P1 до P2 соответственно. В конечном итоге это дает производную кривой Безье по отношению к t следующим образом: Кривая Безье
С четырьмя различными точками, P0 , P1 , P2 и P3 , кубическая кривая представляет собой путь, полученный на основе функции B(t) .
Она представлена следующим образом:
Кубическая кривая может быть представлена в многомерном пространстве и определена как аффинная комбинация двух квадратичных кривых.
Существуют также различные способы определения кривых Безье. Рекурсивное определение выражает кривую Безье степени 9.0033 n с помощью линейной интерполяции — линейная комбинация двух соответствующих точек на двух кривых Безье степени n — 1. Явное определение непрерывно расширяет t0 и (1-t)0 до 1 по всему [0,1].
Интересной особенностью кривых Безье является то, что они не могут образовывать точную кривую, если расположены на фиксированном смещении от другой кривой Безье. Это фиксированное смещение также называется параллельной кривой, поскольку оно параллельно исходной кривой. Однако эвристические методы могут давать близкие приближения, если это необходимо для практических целей.
В области векторной графики вы можете рисовать две симметрично удаленные кривые смещения, что называется обводкой.
Итак, предположим, вы хотите преобразовать шрифты, определенные в Metafont (язык описания для рендеринга растровых шрифтов). В этом случае вы можете преобразовать кривые смещения в заполненные контуры Безье, обводя кривые Безье. Шрифты PostScript Type1 требуют, чтобы вы заполнили контур, очерченный кривыми Безье.
Другой тип кривой Безье — это рациональная кривая, полезная тем, что она может точно аппроксимировать произвольные формы за счет добавления регулируемых весов. Знаменатель представляет собой взвешенную сумму полиномов Бернштейна, а числитель — взвешенную кривую Безье в форме Бернштейна. Эти кривые часто используются для представления дуг окружности.
Следует также отметить, что кривые Катмулла-Рома отличаются от кривых Безье. Они отличаются тем, что означают точки, хотя кривые Безье и Кэтмилла-Рома кажутся очень похожими.
Применение кривых Безье
Поскольку кривые Безье позволяют графическим дизайнерам и инженерам моделировать реальные объекты, их применения многочисленны и невероятно ценны.
Давайте пройдемся по некоторым из них.
Компьютерная графика
Кривые Безье позволяют нам моделировать гладкие кривые, поскольку кривая содержится в выпуклой оболочке, созданной контрольными точками. Затем вы можете применить к кривой аффинные преобразования, такие как вращение и перемещение, применяя эти преобразования к контрольным точкам.
Наиболее часто используемыми кривыми Безье являются квадратичные кривые и кубические кривые, потому что кривые более высокой степени требуют больших вычислительных ресурсов для оценки. Они используются для создания простых форм.
Но, соединяя вместе кривые Безье низкого порядка, можно создать составную кривую Безье, которая выглядит как одна кривая, но обеспечивает сложность кривой, необходимую для создания более сложных форм. Они называются кривыми поли-Безье.
Стандарты векторной графики, такие как SVG, языки векторной графики, такие как PostScript, и программы векторной графики, такие как Adobe Illustrator, Vectornator, CorelDraw, Artline, Inscape, Timeworks Publisher и Allegro, используют составные кривые Безье.
Самый простой способ преобразования сканирования (растеризации) кривой Безье состоит в том, чтобы оценить множество близко расположенных точек, затем взять эту последовательность сегментов линии и преобразовать ее сканированием. Однако, если точки расположены слишком далеко друг от друга, растровый вывод может быть недостаточно гладким.
Широко используемый адаптивный метод — рекурсивное подразделение. С помощью этого метода вы проверяете контрольные точки кривой, чтобы увидеть, приближается ли кривая к прямой линии. Если это не так, вы параметрически делите его на два сегмента кривой и используете один и тот же метод рекурсивно на каждой половине. Говоря математическим языком, вы также можете использовать методы прямого дифференцирования, которые требуют анализа распространения ошибок.
Metafont использует алгоритм растеризации, основанный на квадратных уравнениях для дискретизации кривой. Модифицированная форма кривой алгоритма рисования линий Брезенхема может выполнять растеризацию путем разделения кривой на рациональные части.
Вы можете узнать больше о Metafont, прочитав превосходное обсуждение деталей реализации Addison Wesley в книге Дональда Кнута Metafont: The Program .
Шрифты
Как мы уже видели, кривые Безье дебютировали в мире дизайна с помощью принтеров, потому что они сильно повлияли на качество и точность надписей.
Например, шрифты TrueType используют составные кривые Безье, состоящие из квадратичных кривых. Другие языковые инструменты и средства обработки изображений, такие как PostScript, Asymptote, Metafont и SVG, используют составные кривые Безье, состоящие из кубических кривых, для рисования изогнутых фигур. Шрифты OpenType используют кубические и квадратичные кривые, в зависимости от того, какая технология управляет оболочкой OpenType (кодировка, которая сообщает системе, как обрабатывать шрифт).
Функция «сглаженная кривая» диаграмм в Microsoft Excel использует алгоритм для рекурсивного разделения всех кривых Безье до тех пор, пока кривая не станет достаточно плоской, чтобы ее можно было нарисовать в виде серии линейных или круговых сегментов.
Стоит отметить, что кривые Безье не могут точно представлять дуги окружностей и эллипсы, поэтому сначала они аппроксимируются кривыми Безье, которые затем аппроксимируются дугами окружностей. Этот подход неэффективен, потому что существуют также аппроксимации всех кривых Безье с использованием дуг окружностей или эллипсов, которые постепенно создаются на основе произвольной точности.
Таким образом, другой подход заключается в точном преобразовании всех кривых Безье и конических кривых (или поверхностей) в NURBS (неоднородный рациональный базисный сплайн), который можно создавать постепенно без необходимости сначала рекурсивно разбивать кривую для удовлетворения условия плоскостности. Этот подход лучше, поскольку он сохраняет определение кривой при всех линейных или перспективных 2D- и 3D-проекциях и преобразованиях. Современные аппаратные графические адаптеры обычно используют эту технику с ускоренной геометрией.
Источник изображения: Wikimedia CommonsАнимация
Такие приложения, как Synfig, используют кривые Безье для определения движения.
Пользователи прокладывают желаемый путь в виде кривых Безье, а приложение генерирует необходимые кадры для движения объекта по пути.
Именно так моушн-дизайнеры и аниматоры создают «ощущение» или «физику», которые они ищут. Кривая Безье не только контролирует, куда движется объект, но и определяет скорость движения во времени. Если иконке нужно переместиться из точки А в точку Б, дизайнер будет использовать кривую Безье, чтобы сгладить траекторию курсора и установить скорость движения.
Это чрезвычайно важно при изображении движения, чтобы пользователь не ощущал рывков или размытости. При редактировании видео очень важно выполнять масштабирование и панорамирование камеры во время съемки сцены или во время постобработки.
В 3D-анимации кривые Безье часто используются для определения 3D-путей и 2D-кривых для интерполяции ключевых кадров. Кривые Безье теперь часто используются для управления замедлением анимации в CSS, JavaScript, JavaFX и Flutter SDK. Они имеют значение в тексте и анимации наклона, поскольку бывают случаи, когда видеооператорам необходимо анимировать текст для эффекта.
Вы можете узнать больше о кривых Безье в контексте 3D-поверхностей, прочитав книгу Пола Бурка Поверхности Безье (в 3D) .
Робототехника
Кривые Безье также используются в робототехнике для построения траекторий рабочего органа. Это связано с тем, что многоугольник управления может указать, сталкивается ли путь с каким-либо ближайшим объектом или препятствием, что важно для машины, которая может ориентироваться в физическом мире.
Траектории суставного пространства, которые используются для сглаживания движений роботизированного оборудования, также можно точно дифференцировать с помощью кривых Безье. Таким образом, производные траекторий суставного пространства используются для расчета динамики и управляющего усилия (профили крутящего момента) роботизированного манипулятора (роботизированные руки AKA).
Как видите, открытие кривой Безье стало огромным шагом вперед в развитии цифрового графического дизайна и всего, что делает возможным компьютерное проектирование.
Без этой математической функции у нас не было бы компьютерного программного обеспечения для графических дизайнеров, рисовальщиков и аниматоров, которое работало бы быстрее и эффективнее без всех ручных усилий, которые раньше были задействованы.
Что еще более важно, эта технология сделала графический дизайн более доступным, открыв дверь большему количеству людей и идей, которые могут изменить мир. Но, тем не менее, не все программное обеспечение для проектирования одинаково, даже если эти платформы используют все, что могут предложить кривые Безье.
Вы все еще должны выбрать программное обеспечение, которое использует прошлые достижения для создания чего-то еще более ценного. И это именно то, что вы получаете с Vectornator.
Наше программное обеспечение для графического дизайна — это ваш личный набор возможностей, поскольку оно предоставляет все необходимые инструменты для создания потрясающих цифровых изображений без ограничений и забот. С помощью этой единой платформы вы получаете доступ ко всему спектру возможностей кривых Безье: рисованию, надписям, типографике, графическому дизайну, векторной графике и многому другому:
- Иллюстрация — Используя точные векторные инструменты, вы можете создавать детализированные современные цифровые изображения, отражающие ваши навыки и талант.
Используйте Pen Tool в Vectornator для создания сложных и точных контуров. - Леттеринг . Каллиграфия, рукописный шрифт и цифровая типографика возможны с нашим интуитивно понятным программным обеспечением для векторного дизайна, позволяющим создавать красивые буквы и шрифтовые рисунки, которые обращаются к вашей аудитории.
- Дизайн пользовательского интерфейса — Импортируйте свою работу с других платформ и поднимите свои проекты на новый уровень с помощью нашей функции автоматической трассировки для увлекательных, детализированных векторных проектов.
- Дизайн для печати . С помощью плавных векторных иллюстраций и ярких надписей вы можете создавать эффектные дизайны с точной цветопередачей CMYK, готовые к печати.
Используйте Pen Tool в Vectornator для создания сложных и точных контуров.Почему бы не попробовать Vectornator бесплатно сегодня и изучить все функции, которые покажут вам, что значит проектировать без ограничений?
Загрузите Vectornator, чтобы начать работу
Поднимите свои проекты на новый уровень.
Что такое кривые Безье в компьютерной графике?
Кривые Безье могут многое. Вы можете использовать их для рисования фигур и шаблонов дизайна, например. Их также можно использовать математически вместо линейного представления изменений, постепенно и тонко переключаясь между одним ключевым кадром или значением и другим позже.
Вы можете узнать это приложение в анимационных программах, таких как Adobe Animate, но использование кривых Безье выходит далеко за рамки мира искусства.
В этом простом объяснении мы собираемся отложить численный анализ в пользу чего-то более подходящего для наших нужд, например, использования кривых Безье в творческих приложениях, таких как Photoshop и After Effects. Что же делает их такими замечательными?
Что такое кривая Безье?
Кривые Безье, основанные на концепции математики, называемой полиномом Бернштейна, были изобретены французским инженером Пьером Безье. С тех пор кривые Безье превратились в предпочтительное решение для дизайнеров, которым нужен способ добраться из точки А в точку Б наиболее эстетичным способом.
Кривые Безье генерируются с помощью алгоритма, управляемого последовательностью контрольных точек, выраженной в терминах n + 1. Этот алгоритм особенно подходит для разделения промежуточного пространства, оценки и дифференциации каждой прогрессивной точки в желаемой градуирующей кривой.
Кривые Безье являются векторами по своей природе — в отличие от растровых растровых кривых, они масштабируемы, что означает, что они сохраняют определенные свойства при увеличении или уменьшении их масштаба.
Где найти кривые Безье?
Кривые Безье распространены не только в пакете Adobe (в таких приложениях для творчества, как Premiere, Photoshop и After Effects), но вы найдете их практически в любом приложении для творчества.
Приложения для создания визуальных медиа, вероятно, первое, что приходит на ум, но давайте не будем забывать о приложениях для аудиоинженерии, таких как Pro Tools, где кривые Безье можно использовать для изменения активов по параметрам или во времени.
Несколько распространенных примеров кривых Безье в дикой природе:
- Инструмент «Перо» в Photoshop и векторных дизайнерских программах , таких как Adobe Illustrator (и почти во всех других приложениях для творчества, в пакете Adobe и где угодно еще).
- Любое приложение, в котором используются кривые ключевых кадров Easy In / Easy Out , например After Effects .
- Всякий раз, когда вы имеете дело с NURBS , также известными как B-сплайны, в приложении для 3D-анимации или моделирования, таком как Maya или Blender , вы работаете с кривыми Безье в массовом порядке.
- Приложения САПР или любой другой цифровой инструмент, используемый для проектирования, также используют кривые Безье для многих целей.
Кривые Безье скрываются повсюду, вокруг нас. Как именно эти вещи делают то, что они делают?
Связано: Как создать или отредактировать узор в Adobe Illustrator
Как работают кривые Безье?
При создании нового вектора кривой Безье на холсте в таком приложении, как Illustrator, вы обычно начинаете с того, что даете программе две точки для работы; первая точка и вторая, с натянутой между ними кривой.
Квадратичная кривая Безье — это любая кривая Безье, созданная с использованием только этих двух начальных точек — кубические кривые Безье состоят из трех и так далее. Сейчас мы сосредоточимся на первом; самые простые из возможных кривых Безье, которые вы можете создать в любом из упомянутых нами типов программного обеспечения.
Обычно вы указываете приложению создать кривую Безье вместо линейного вектора, удерживая мышь и перетаскивая кривую на место, прежде чем отпустить вторую точку; после отпускания у вас будет два маркера интерполяции для каждой точки, составляющей кривую, включая любые дополнительные точки, которые вы записали постфактум.
От чего зависит, как будет выглядеть ваша кривая Безье?
- Расположение двух ваших точек, включая их «высоту» относительно друг друга и расстояние между ними.
- Интерполяция манипуляторов, найденных в каждой точке — вы используете эти манипуляторы, чтобы «направлять» кривую, сгибая ее на место.
- Пункты управления; «воображаемые» точки, найденные на пике линейной интерпретации как положения, так и интегрального шага вашей начальной и конечной точек (эта часть имеет больше общего с математикой, чем кривые Безье, в практическом, творческом смысле, но это все еще очень реально)
Как выглядят эти контрольные точки?
Представьте себе две прямые линии, направленные внутрь друг друга из любой крайней точки, просто взглянув на внешний край каждой стороны кривой.
Точка, в которой эти две линии пересекаются посередине, будет «контрольной точкой» математически любой квадратичной кривой Безье, несмотря на то, что ни один набор маркеров интерполяции не обязательно связан с ней напрямую.
Связанный: Как векторизовать изображение в Adobe Illustrator
После того, как вы уже разложили перед собой кривую, вы можете использовать ручки, чтобы изменить ее траекторию по желанию. Кривые Безье связаны по определению, поэтому их можно использовать для элегантного и идеально сбалансированного соединения любых двух точек на конечном поле.
Процесс создания кривой Безье прост и интуитивно понятен; так легко увидеть, как этот тип инструмента достиг вездесущности, которой он пользуется в настоящее время.
Применение кривой Безье за пределами среды
Кривые Безье можно использовать для создания собственных оригинальных рисунков или для отслеживания существующих форм, изображений и композиций. Они часто широко используются в векторной 2D-анимации, например, как часть процесса очистки.
Хотя художники всего мира, безусловно, взяли эту концепцию и перетряхнули ее, ее математические корни делают ее чрезвычайно полезной и в ряде других профессий и дисциплин.
Несколько других применений кривых Безье, помимо искусства и дизайна, включают:
- Архитектура и строительство, например, при проектировании супермагистралей.
- Промышленный дизайн, включая дизайн игрушек, мебели и автомобилей.
- Робототехника. Кривые Безье могут помочь в компьютеризированной локомоции и картировании местности.
- 3D-сканирование в биомедицинском контексте, при котором цифровой объект создается из множества 2D-сечений реального объекта (в частности, таких вещей, как компьютерная томография).
Это не говоря уже о ценности кривых Безье для интеллектуальных способностей, поскольку они стоят среди всего остального, что человечество знает о математике и истинной природе реальности в общем смысле. Это хардкорный материал, и временами абсолютно ужасающий.
