Виды кривых Безье и их оцифровка
Однако можно и поразнообразить графическое представление кривых - поскольку вычерчиваются они параметрически ( параметр Т меняется от 0 до 1), то с параметром можно связать какое-нибудь действие, которое будет выполняться во время вычерчивания кривой. Например, можно менять толщину этой самой кривой, и тогда вместо скучной линии будет появляться веточка или листочек.
И я постарался в этом направлении, такие возможности в моей программе есть.
Но сначала я расскажу, как работать с графикой.
Программа DM_Paint предназначена прежде всего для художественного рисования, векторная графика входит в неё как некое дополнение и поэтому в общем меню она отражена скудно. А точнее, почти совсем не отражена. Есть только маленькая кнопочка «графика», вот её-то и нужно нажать, если вы хотите работать в редакторе, используя возможности векторной графики в полном объёме. Но можно обойтись даже и без этого.
Давайте, кликнем два раза по жёлтой кнопочке опций рисования ( на ней появится буква «а») и затем, кликая по кнопке над большой буквой «О», установим на ней «||||», затем - «\\||//», и затем «ППП» - это и будет опция рисования кривых Безье.
Далее рисование разделяется на виды, определяемые цифрой на кнопке «Градиент». Выставим Градиент=4 и нарисуем кривую, которую вы видите на рисунке первой. Это – кривая с заливкой цветом фона. Во время рисования никакой заливки не видно, заливка появляется в момент закрепления кривой Безье на рисунке, при нажатии на кнопку «закр».
Итак, и это видно по кнопочкам на рисунке, активный цвет у нас красный (кнопочка в центре), а цвет фона – желто оранжевый (вокруг неё). Соответствует этим цветам и цвет кривой с заливкой. И потом, в режиме Показа эти цвета возникнут, если мы выберем нашу кривую и подвигаем её, или, выбрав кривую, кликнем по строке «Параметры».
Но поговорим теперь о цифровом представлении цвета.
Как вы знаете, в системе RGB цвет обозначается тройкой отдельных чисел (по 8 бит на каждое число), но, чтобы создать удобства для реализации векторной графики, я огрубляю каждую компоненту цвета, отнимая у каждой компоненты последние 3 бита, и помещая все три компоненты в одно целое число с общим размером 15 бит. При этом, например, красный цвет 0,0,224 в системе RGB превращается в целое число 28, и именно это число вы можете видеть в конце строк цифровой распечатки, показанной на рисунке. А число 703 в ней – это жёлто оранжевый цвет фона.
Каждая, из созданных кривых Безье, в цифрах представлена парой строк числового массива - титульной и следующей за ней, находящейся как бы в «подвале» и находимой по ссылке.
Посмотрим на первые две строки распечатки –
1> 31 145 72 2 0 6 0 0 28 703 5
2 0 145 72 145 72 192 64 178 27 28 703
Первым в распечатке идёт № – индекс строки числового массива, с отступом спереди и значком > позади, если строка титульная. Титульная строка начинается с логотипа элемента векторной графики, для кривых Безье логотип = 31. Строки с нулём в первой позиции, это строки без логотипа, они несут информацию о координатах точек, составляющих графический элемент.
Кривая Безье состоит из 4-х точек – двух концевых и двух оттягивающих. Поэтому для них нужно 4 пары чисел (координаты X,Y для каждой точки).
В нашем примере координаты первой точки это 145,72 и там же расположена вторая точка. Третья точка находится на 64,178 а четвёртая, концевая, имеет координаты 178,27.
Координаты первой точки Безье мы видим также в позициях 2 и 3 титульной строки. Такая параллельная информация кажется излишней, но она будет нужна, если мы будем собирать кривые Безье в Фигуру.
Вслед за координатами в титульной строке идёт ссылка на следующие строки и число этих следующих строк. Поскольку для кривой Безье число строк, находящихся в «подвале» всегда равно единице, то на этой позиции указан ноль.
Далее мы видим число 6 – это значение на кнопке «Плотность» в момент записи кривой, далее идут два нуля – это некий резерв развития на будущее, который уже используется в фигуре Безье с логотипом 36.
Затем мы видим числа 28 и 703 – это активный цвет и цвет фона. Замыкает строку размер точки – это число, задающее толщину кривой Безье и толщину линий для её заштриховки. Кстати, штрихуется кривая или нет, зависит от числа, стоящего в пятой позиции. В нашем случае там стоит число 6 – значит, кривая штрихуется, а если там стоит 0, то кривая не штрихуется.
Цвет 28 и 703 мы видим также в последних позициях второй строки.
Это тоже некий параллелизм, но он будет придавать кривым самостоятельность в окраске в том случае, если они будут впоследствии собраны в Фигуру.
_______
*** Уважаемые читатели, вы простите меня за столь подробный рассказ, но понимание структуры представления векторной графики в той или другой программе важно для тех, кто ею активно пользуется, и тем более это будет интересно тем, кто занимается программированием подобных вещей.
Мне, например, приходилось выдумывать всё самому, хотя если бы подобные вещи публиковались бы в интернете, то я с удовольствием почитал бы про это. Однако ничего подобного я в интернете не нашёл.
Рассмотрим теперь кривые другого вида, представленные на иллюстрации.
Второй идёт кривая, нарисованная при Градиенте=6 и цифре 7 на кнопке «Плотность». 7 – это опция при которой заданная толщина кривой уменьшается по мере роста параметра Т, что создаёт изображение растущей от дерева веточки ( очень простое и удачное применение для кривой Безье).
Третья кривая ( Градиент=6 Плотность=8) это то же самое, только начальная толщина кривой увеличивается (возводится в квадрат), и такое изображение подходит для рисования листочков или других объёмистых вещей.
Четвёртая кривая ( Градиент=6 Плотность=9) заострена с обоих концов. Она подойдёт как для рисования листочков, так и для рисования черт лица, таких, как губы, брови или веки.
И последней идёт фигура Безье. Хоть и выглядит она так же как и первая кривая, и в состав её действительно входит только одна кривая, но оформлена она по-другому. И не только логотипом 38 она отличается, в ней стоят нули на последних позициях второй строки. Стало быть, индивидуальный цвет для этой кривой не задан, и следовательно, кривая будет принимать те общие цвета (активный и фоновый), которые принимает фигура при её запоминании с перекрашиванием.
Фигура Безье создаётся с опциями Градиент=7, 8 или 9, которые соответствуют фигуре с закраской сегментов цветом фона, активным цветом, или без закраски. В последнем случае в 5-й позиции первой строки будет стоять 0.
Разнообразие видов кривых Безье позволяет получать и разнообразную графику. Кривые Безье в составе фигур можно перемещать как единое целое.
Более того, элементы векторной графики и фигуры Безье в том числе, можно объединять в группы и перемещать в составе групп по рисунку.
Поступая подобным образом можно делать анимацию методом перекладки.
Маленький мультфильм, сделанный таким способом, можно посмотреть тут - http://yadi.sk/i/MWvBmbqshlTAZw
Любопытно, что при создании этой анимации я не двигал отдельные части головы относительно друг друга и специально не изменял их. Однако, при многочисленных последовательных передвижениях векторной графики, и особенно, при её небольших поворотах постепенно накапливаются ошибки. Связаны эти ошибки с тем, что координаты точек при поворотах вычисляются с использованием чисел с плавающей запятой, а затем, при закреплении графики, эти значения огрубляются до целочисленных. И это для создания анимации совсем неплохо - у черт лица появляется живая мимика. Пусть эта мимика получается случайно, но случаем нужно уметь пользоваться.
Точно также, кстати сказать, мы и стихи пишем - рифмы приходят к нам случайно, но мы ими умело пользуется.
_________
11.07.2020
Свидетельство о публикации №220071100672