Виды кривых Безье и их оцифровка

   Кривую Безье можно рисовать по разному. В одних случаях это просто кривая, имеющая свой цвет и толщину, и более ничего. В других случаях сегменты кривой заливаются цветом фона.
 
  Однако можно и поразнообразить графическое представление кривых - поскольку вычерчиваются они параметрически ( параметр Т меняется от 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