Анимация векторной графики

   Вопрос "как сделать хорошо и как не сделать плохо" всегда стоит в начале каждой новой разработки.
   Чтобы ответить на этот вопрос, нужно, внимательно посмотреть на то, что когда-то и кем-то было сделано. Программ для анимации имеется масса, и кажется, что если люди работают в этом направлении так долго и упорно, то и изобрести нечто лучшее на этом пути вряд ли получится? Нет, это не так. Смотрите внимательно себе под ноги, на совершенно ровном и исхоженном всеми месте, возможно, зарыт ключ к успеху, и нужно только начать копать...
    Ну что же, давайте займёмся этим.

            В чём состоит проблема?

   Удобство использования элементов векторной графики при создании анимации сомнений не вызывает.
   Сомнительно другое. Сомнительна простота этого процесса.
   И в самом деле - имея изображение, составленное из многих деталей, трудно не только управлять формой этих деталей, но и переходить от одной детали к другой, поскольку, если детали мелкие, то трудно выделить одну из множества других, расположенных рядом.
   
   Но как же решается эта проблема в существующих современных редакторах?
   Она не решается. Она ещё больше затрудняется. Для того, чтобы работать с мелкими деталями, изображение попросту увеличивается, и на этом увеличенном изображении выбирается та или иная деталь, выбирается опция смещения, и деталь перемещается, затем выбирается опция поворота и деталь поворачивается, затем выбирается опция изменения формы, и контуры детали редактируются самым неудобным способом - на поле чертежа появляются многочисленные рычаги и усики (попробуй ещё догадаться, какой усик к какой кривой относится), но, двигая их, аниматор добивается своей цели. Затем он уменьшает рисунок, с тем, чтобы посмотреть на него целиком, и понимает, что сделал что-то не то.
   Но лошадка уже убежала, и как вернуться обратно? О, и такая опция есть. Возвращаемся назад, вновь увеличиваем рисунок и "суши мочало, начинай с начала". Захватывающий процесс! Он вас не пугает?
   Да, труд аниматора непрост и кропотлив. И я, понимая всё это, постарался сделать программу предельно простой.

   Итак, основная концепция - предельная простота функционирования и никаких усиков, рычагов и рамочек, сбивающих с толку и загромождающих чертёж. Но возможно ли такое?
   Возможно, об этом и рассказываю.

        ПРОСТОТА И УДОБСТВО ВНУТРЕННЕГО ПРЕДСТАВЛЕНИЯ ГРАФИКИ

   Простота и удобство - это то, чего, на мой взгляд, недостаёт  современным программам анимации с использованием векторной графики. Начнём с самого первого - с представления векторной графики внутри программы.

   Структура представления векторной графики внутри программы, как правило, неизвестна и не нужна пользователю. Он общается с этой структурой опосредственно - через имена (символы), которые даются векторным объектам, через многочисленные меню, управляющими формой объектов, их раскраской и расположением.
   Тем самым, между графическими объектами и пользователем создаётся некая оболочка, интерфейс, вроде бы удобный, но, вместе с тем и громоздкий. А удобна ли эта громоздкость? Вот и приходит мысль – интерфейс убрать, и внутреннюю структуру векторной графики использовать в таком виде, в котором она реально существует:

X  просмотр массива G  31-кр.Безье  36,38-Фигура  16-Паттерн    Nстрок= 37
 ____ 13-Прям-к  14-Круг  22-Прямая  25-Веер  26-Мног-к  27-Полилиния ___

        1>     38  450  292  2  2  6  0  0  7352  703  2  # 2
   2      0  450  292  445  278  374  249  351  278  7352  703
   3      0  451  291  484  326  392  303  354  278  7352  703
        4>     31  585  353  5  0  6  0  0  7352  703  2
   5      0  585  353  564  270  421  267  450  321  7352  703
        6>     31  471  326  7  0  6  0  0  7352  703  2
   7      0  471  326  475  328  493  409  491  331  7352  703
        8>     31  447  317  9  0  6  0  0  7352  703  2
   9      0  447  317  456  316  433  419  479  325  7352  703
        10>     31  517  338  11  0  6  0  0  7352  703  2
   11      0  517  338  520  364  517  419  541  329  7352  703
        12>     31  515  338  13  0  6  0  0  7352  703  2
   13      0  515  338  571  422  544  355  540  327  7352  703
        14>     31  611  330  15  0  6  0  0  7352  703  2  # 1
   15      0  611  330  595  246  524  324  552  330  7352  703
        16>     31  611  330  17  0  6  0  0  7352  703  2  # 1
   17      0  611  330  595  246  524  324  552  330  7352  703
        18>     31  550  331  19  0  6  0  0  7352  703  2  # 1
   19      0  550  331  548  343  602  372  608  332  7352  703
        20>     31  586  295  21  0  6  0  0  7352  703  2  # 1
   21      0  586  295  584  252  569  291  573  290  7352  703
        22>     31  587  317  23  0  6  0  0  7352  31710  2  # 1
   23      0  587  317  581  286  568  312  575  317  7352  31710
        24>     31  587  330  25  0  6  0  0  7352  351  2  # 1
   25      0  587  330  594  341  607  336  605  326  7352  351
        26>     22  571  335  544  348  0  0  0  0  351  2  # 1
        27>     22  572  340  552  358  0  0  0  0  351  2  # 1
        28>     22  577  343  566  364  0  0  0  0  351  2  # 1
        29>     22  609  324  626  318  0  0  0  0  351  2  # 1
        30>     22  610  330  626  328  0  0  0  0  351  2  # 1
        31>     22  607  335  623  339  0  0  0  0  351  2  # 1
        32>     31  595  312  33  0  6  0  0  7352  31710  2  # 1
   33      0  595  312  594  306  592  285  604  307  7352  31710
        34>     31  560  315  35  0  6  0  0  7352  703  2  # 1
   35      0  560  315  535  274  567  295  572  308  7352  703
        36>     14  583  313  5  2  7  0  0  0  0  2  # 1
        37>     14  599  309  5  2  7  0  0  0  0  2  # 1

Так выглядит изображение котика во внутреннем представлении программы.

А вот – то же самое изображение переведённое в формат svg графики:

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 450 292 c-5-14-76-43-99-14" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 451 291 c 33 35-59 12-97-13" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 585 353 c-21-83-164-86-135-32" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 471 326 c 4 2 22 83 20 5" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 447 317 c 9-1-14 102 32 8" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 517 338 c 3 26 0 81 24-9" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 515 338 c 56 84 29 17 25-11" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 611 330 c-16-84-87-6-59 0" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 611 330 c-16-84-87-6-59 0" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 550 331 c-2 12 52 41 58 1" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 586 295 c-2-43-17-4-13-5" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<path d="M 587 317 c-6-31-19-5-12 0" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 240, 240, 240)"/>
<path d="M 587 330 c 7 11 20 6 18-4" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 80, 0)"/>
<line x1=" 571" y1=" 335" x2=" 544" y2=" 348" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<line x1=" 572" y1=" 340" x2=" 552" y2=" 358" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<line x1=" 577" y1=" 343" x2=" 566" y2=" 364" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<line x1=" 609" y1=" 324" x2=" 626" y2=" 318" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<line x1=" 610" y1=" 330" x2=" 626" y2=" 328" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<line x1=" 607" y1=" 335" x2=" 623" y2=" 339" stroke="rgb( 0, 0, 0)" stroke-width=" 2"/>
<path d="M 595 312 c-1-6-3-27 9-5" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 240, 240, 240)"/>
<path d="M 560 315 c-25-41 7-20 12-7" stroke="rgb( 192, 40, 56)" stroke-width=" 2" fill="rgb( 248, 168, 0)"/>
<circle cx=" 583" cy=" 313" r=" 5" stroke="rgb( 0, 0, 0)" stroke-width=" 2" fill="rgb( 0, 0, 0)"/>
<circle cx=" 599" cy=" 309" r=" 5" stroke="rgb( 0, 0, 0)" stroke-width=" 2" fill="rgb( 0, 0, 0)"/>
</svg>

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

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

    УДОБСТВО ВЫБОРА И ПЕРЕМЕЩЕНИЯ

  В программе, о которой я рассказываю, есть два основных действия, производимые строками меню. Это «Нарисовать» и «Показать».

  Действие «Нарисовать» инициирует чтение строк численного массива, хранящего элементы векторной графики, и эти элементы рисуются на фоне, который перед этим был на рисунке. Элементы рисуются поочерёдно, один за другим, в той последовательности строк, в которой они находятся в массиве. Они перекрывают друг друга. По этой причине элемент с логотипом 38, представляющий хвост и находящийся в первой строке, рисуется первым, а остальные графические элементы, будут частично перекрывать его.
  А вот когда котик повернётся к нам спиной, тогда хвост его нужно будет переместить на последнюю строку массива. Действие понятное и легко прослеживаемое и по номеру строки, который показывается при выборе элемента, и по распечатке строк массива, которую всегда можно получить, кликнув строку «просмотр».
  Действие «Нарисовать» формирует кадр, который можно ретушировать обычными средствами растрового рисования и записывать в качестве очередного кадра анимации.

  Действие «Показать» переводит редактор в режим показа, в котором средства растрового рисования не действуют, но в котором можно перемещать и править графические элементы, как вместе, так и по отдельности.
  Видео с котиком на тему "как это делается" можно посмотреть тут - http://youtu.be/7PlCI8dXqDo

  В чём состоит удобство выбора и перемещения элементов в режиме показа?
  Элементы показываются их начальными точками.
  Если на нарисованном изображении начальных точек нет, то можно кликнуть по свободному полю правой кнопкой мыши, и точки появятся.
Далее кликаем по одной из точек, выбирая элемент. Особенно точно кликать не нужно – нажав левую кнопку мыши, слегка подвигаем элемент. Если поймём, что выбрали не то, то ещё раз кликнем правой кнопкой по этому же месту – будет выбран другой элемент.
   Какой элемент выбран, можно узнать также по номеру строки и по логотипу. Например, логотип 31 это кривая Безье, 14 – круг, 22 – прямая линия. Выбрав элемент, перемещаем его, а двигая появившуюся при выборе квадратную метку справа от элемента, мы можем поворачивать элемент. Приближая метку к элементу, мы уменьшаем его, удаляя – увеличиваем.
   Прежний элемент при этом никуда не делся, мы видим его, можем сравнить. Более того, клавишами стрелок на клавиатуре компьютера мы перемещаем вторую оттягивающую точку кривой Безье. Делая то же с нажатым Shift, перемещаем третью оттягивающую точку. Тем самым мы меняем форму графического элемента. И всё это параллельно, всё это одновременно, всё это мы видим на рисунке.
   Заметьте, ни увеличения рисунка, ни смены опций нам для этого не потребовалось. Удобно ли это? На мой взгляд, очень удобно.
   Кликнули по свободному полю левой кнопкой мыши – все метки исчезли, остались только прежний рисунок и новый элемент в его новом положении. Можно оценить правильность своей работы.
   Кликнули по свободному месту правой кнопкой мыши – метки появились, можем продолжить.
Опять заметьте, никаких горячих клавиш, только мышь, стилус или тач-панель под пальцами руки.

   И удобства, казалось бы мелкие. Но как они облегчают жизнь аниматора.
   Далее я планирую сделать персонаж более сложным, чем простой котик, и попробую поработать с ним. Как получиться – про это расскажу позже.

__________
29.08.2020