Растровые элементы в векторной графике

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

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

  Рассказываю подробно.
  Мы входим в программу DM_Paint и прежде всего кликаем по кнопке «1=>2» и по кнопочке записи на поле6 на левой панели внизу. Это нужно, если мы хотим делать небольшой рисунок. А если мы делаем рисунок в размер экрана или больше, то таких предварительных действий можно и не делать.

  Теперь кнопкой «рис1.bmp» выбираем рисунок с растровыми изображениями и грузим его в программу, кликнув кн.«Load».
  Растровые изображения на рисунке хранятся в паттернах – квадратах 100х100 пикселей каждый. Паттерны пронумерованы, и их номера можно задать, используя кнопочки установки зелёного и синего компонент цвета на верхней панели.

  Если рисунка с паттернами у нас нет, то мы можем легко его сделать.
  Распахнём рисунок во всё окно, установим цвет фона белый, и нажав кн.«Cls», заполним белам цветом всё поле рисунка. Кликнув ПРАВОЙ кнопкой мыши по кнопке «2=>1», закрепим графику.
  Включим редактор. Для этого кликнем по кнопке «графика» и в раскрывшемся меню кликнем по строке «Редактор G». Меню окрашивается в белый цвет, а кнопка «закр» становится большой и жёлтой.
  Теперь кликнем по небольшой бесцветной кнопочке на верхней панели (на иллюстрации она окрашена малиновым). Но кнопке появятся значки ++++, а рисунок будет разлинован на паттерны. Поменять цвет этих тонких линий легко – установите нужный цвет и ещё три раза кликните по той же кнопочке. Теперь можете рисовать в паттернах всё, что угодно, и сохранять этот лист, как обычный рисунок bmp формата.


        СОЗДАНИЕ ЭЛЕМЕНТА ПАТТЕРН

    Итак, у нас включён редактор, на верхней кнопочке стоит значок ++++, а на широком поле рисунка имеются паттерны с изображениями, которые мы хотим связать с элементом векторной графики под названием «Паттерн».

    Установим опцию создания паттернов –кнопка опций рисования должна быть жёлтой с буквой «а» на ней, кнопка опций черчения над большой буквой О должна иметь вид редких вертикальных чёрточек, а кнопка Градиент – установлена в положение 6. Если вы это сделали правильно, то в верхнем информационном поле появится надпись « Прям. и Паттерны».

    Выбираем паттерн, для чего кликаем по белому фону вокруг изображения ПРАВОЙ кнопкой мыши ( номер выбранного паттерна появляется на кнопках вверху). Опускаем стилус на планшет, обозначая точку перемещения и поворота, тянем стилус на центр паттерна и там отрываем.
    У нас появилось две точки – точка перемещения ( она же – центр поворота) и точка, указывающая на центр паттерна. Если эти точки нас не устраивают, то кликаем «cls» и проводим операцию заново. Если всё в порядке, то кликаем «закр». Успешность наших действий подтверждается надписью «записано в строку …».
    Кстати, задавать эти две опорные точки можно не на паттерне, а в любом месте рисунка, и тогда изображение с паттерна появится сразу там.


       КАК ПАТТЕРНЫ РИСУЮТСЯ

    Если прямо сейчас кликнуть строки «Нарисовать» и «Показать», то изображения не появятся. Появятся только точки, маркирующие эти изображения. Чтобы изображения с паттернов были видны, нужно лист с паттернами загрузить в числовой массив. И это делается точно также, как загружается фактурный фон для рисования по нему – снова загружаем лист с паттернами на поле рисунка и кликаем ПРАВОЙ кн.мыши по той кнопочке, где у нас появлялись значки ++++. Теперь эта кнопочка окрашивается в зелёный цвет, а через 8 секунд становится малиновой. Это значит, что изображения в числовой массив помещены, и мы теперь будем их видеть.
    Поскольку изображения нарисованы на прозрачном фоне, а прозрачным считается цвет чёрный или белый, то будут считываться не все точки, а только точки с цветом, отличным от белого и чёрного, и поэтому считывание будет происходить быстро. Тем не менее, при перемещениях, сам паттерн не рисуется. Взамен него рисуется чёрточка – линия, соединяющая те самые две точки, которые мы обозначили при создании паттерна.

 
        КАК ПАТТЕРН ПЕРЕМЕЩАЕТСЯ

    Все перемещения графических элементов делаются в режиме Показа.
    Прежде всего, начальную точку паттерна нужно найти, а затем выбрать.
    Если Вы знаете, где эта точка находится, то кликайте ПРАВОЙ кнопкой мыши прямо там, и паттерн будет выбран. А если вы этого н знаете, то кликайте ПРАВОЙ кнопкой по свободному полю, и тогда начальные точки всех графических элементов будут показаны.
    Итак, Вы выбираете элемент, и у вас верху появляется сообщение – строка такая-то, элемент такой-то. «Такой-то» это логотип элемента – то число, которым он условно обозначается в программе. Для паттерна это число 16.
     Теперь, используя уже левую кнопку мыши, мы можем таскать элемент по полю за начальную точку и поворачивать элемент, а также менять масштаб его изображения, перемещая маркер поворота. Поставив линию, символизирующую паттерн, в нужное место и придав ей нужную ориентацию, закрепляем наше действие, кликнув по кнопке «закр».
      Если нам не нужно изменение масштаба при поворотах, то в нижнее текстовое поле ставим русскую строчную букву «м». Сделать это можно, нажав горячую клавишу «М» латинское. Число перед буквой «м», если оно будет поставлено, зафиксирует угол поворота, а число, поставленное после буквы «м», зафиксирует масштаб. В этом состоянии угол поворота можно менять не вручную, а изменять его пошагово, нажимая горячие клавиши «<» и «>». Шаг изменения берётся с кнопки «w» на верхней панели.

       Точно также можно пошагово перемещать элемент в нужную сторону, кликая между чёрной и красной окружностями на специальной панели, которая выдвигается из кнопки блокировки рисования, если кликнуть по этой кнопке ПРАВОЙ кн.мыши.
  Клики вне окружностей по правым углам панели поворачивают и закрепляют элемент, а клики по левым углам – меняют масштаб, меняя тем самым размер элемента. С помощью кнопки «w» на верхней панели регулируется размер шага для всех перечисленных действий.

       Графические элементы могут быть объединены в группы с иерархией по десяткам и сотням. Например, показанным на иллюстрации двум элементам можно присвоить одинаковые номера 10, поместив их в группу 10. Тогда, поставив сиреневый ластик, и выбрав начальную точку, находящуюся на плече, можно будет поднимать и поворачивать руку целиком, а не только отдельный плечевой элемент.
  Использование пошагового перемещения в совокупности с иерархией групп делает очень удобным создание мультипликации методом покадровой перекладки графических элементов.
  О групповых перемещениях есть клип, который можно посмотреть тут - http://youtu.be/lWpFxt3VWe8
  А вот - http://yadi.sk/i/CHRd3HTkugw9gQ  первая проба по части анимации.


       ПРЕДСТАВЛЕНИЕ ПАТТЕРНА В ЧИСЛЕННОМ ВИДЕ

  Кликнув по строке «---просм», мы можем просмотреть содержимое числового массива, в котором находятся все графические элементы. В нашем случае таких элементов только два. На распечатке, в начале строки показывается её номер, за ним следует логотип элемента и его координатная часть.
  Поскольку массив целочисленный, то число, обозначающее масштаб, увеличено в 1000 раз. Также, для повышения точности, и угол поворота в градусах обозначается числом, увеличенным в 100 раз. Из распечатки видно, что первый паттерн у нас не повёрнут, а второй паттерн повёрнут на угол 47 градусов.
  Замыкает строку тройка чисел – активный цвет, цвет фона и размер точки. Из этой тройки используется только активный цвет – им красится линия, замещающая паттерн при его перемещениях.

  Точно в таком же тестовом виде хранится графика и во внешних файлах. Поэтому эти файлы можно читать в Блокнотике, если захотите разобраться с тем, что записано в них. Любопытно, что создав некий персонаж из одних паттернов, можно переодеть его в другие паттерны, превратив, например, из мужчины в женщину, если приготовить аналогичный лист паттернов с женским лицом и одеждой, и загрузить в программу его - http://yadi.sk/i/dXJhifQ8dv4KVg


        СОСТАВНЫЕ ПАТТЕРНЫ

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

  Кроме того неплохо и сблизить паттерны друг с другом искусственно, проведя правку в том файле, в котором они хранятся –
Векторные элементы типа Паттерн для солнышка очень похожи друг на друга:
        1>     16  313  211 -53 -51  1000  0  22  20480  32767  5
        2>     16  313  211 -53  49  1000  0  32  20480  32767  5
        3>     16  312  211  48 -51  1000  0  23  20480  32767  5
        4>     16  312  211  48  49  1000  0  33  20480  32767  5
отличаются они только номерами паттернов - 22, 32, 23, 33 и расстояниями от точки поворота до центров  паттернов. Если эти расстояния унифицировать - поставить вместо -53, -51 числа -49, -49 и т.д. чуть-чуть придвинув паттерны друг к другу и отклоняясь от точного значения 50, - тогда ни при каких перемещениях составные элементы смещаться друг относительно друга не будут, и щели между ними никогда не будет. Такую правку легко сделать, поскольку все элементы векторной графики хранятся в обычном текстовом файле. Сделать совершенно одинаковыми нужно и координаты точки поворота. Поставить, например, везде 313, 211.

Про анимацию солнышка можно посмотреть тут - http://youtu.be/9BjyyaoWf-k   

_________
18.07.2020

ДОПОЛНЕНИЕ
клип "Растровые элементы в векторной графике" смотрим тут - https://youtu.be/hULXwSqkYl8

  Сейчас возможности использования паттернов расширены - число на 9-й позиции в строке теперь используется в качестве кода для деформации паттерна путём его изгиба. Изгиб паттерна вправо-влево и вверх вниз делается нажатием клавиш со стрелочками на клавиатуре компьютера.
  На иллюстрации справа показано, как с помощью такого изгиба растровое изображение руки оказывается способным к некой жестикуляции. Нажатие на клавишу <end> сбрасывает код, возвращая изображение в его первоначальное недеформированное состояние.
__________
25.09.2020