Покадровая анимация с использованием канвы

Дмитрий Маштаков
  Как вышивать по канве крестиком, интуитивно понятно всем.
  Оказывается, что таким же способом можно делать и анимацию.
  Канва в анимации представляет собой тонкие, в 1 пиксель, линии, горизонтальные и вертикальные, и этим она похожа на канву для вышивания. Сквозь прорехи канвы проступает рисунок. Но, в отличие от вышивания, поверх канвы с прорехами можно создавать рисунок, несколько отличающийся от того, что лежит снизу – смещать некоторые его детали, добавлять или удалять отдельные штрихи, в общем – делать очередной кадр анимации, ориентируясь на кадр предыдущий.

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

  Анимация по канве может делаться как простым рисованием, так и с использованием векторной графики. Рассмотрим оба этих случая на примере анимации в программе DM_Paint.

     РАБОТА ПО КАНВЕ

  Канвой в программе DM_Paint управляет кнопка «разрежение следа», расположенная на верхней панели (см.иллюстрацию). Кнопка имеет двойное назначение – клики левой кнопкой мыши или левой клавишей под тач-панелью ноутбука переключают цифры на этой кнопке. Соответственно цифре делаются пропуски в обработке событий движения мыши по пикселям рисунка.
  Если обработка заключается в рисовании следа, то след становится разреженным, линия – ломаной, а пятна не следуют друг за другом плотно, а разделяются промежутками в один, два или три пикселя.
  Клики правой кнопкой мыши по кнопке «разрежение следа» управляют канвой.

  Чтобы создать «буфер канвы» переводим кнопку в положение с цифрой 3, двумя кликами по рисунку показываем диагональные углы «зоны канвы», и кликаем правой кнопкой мыши по кнопке «разрежение следа». Канва тут же набрасывается на указанную зону, а кнопка переходит в состояние 0 и становится чуть более жёлтой.
  Канва имеет цвет фона, если мы хотим, чтобы она имела белый цвет, то надо установить этот цвет как цвет фона перед набрасыванием канвы.
  Если перед набрасыванием канвы в её зоне было что-то нарисовано, то при набрасывании канвы это что-то вначале закрепляется на рисунке, а затем мы увидим это что-то в ослабленном виде – в прорехах между нитями.

  Теперь, прямо поверх полученной фактуры можно рисовать следующий кадр, предназначенный для анимации. Те детали рисунка, которые не изменяются, можно даже не рисовать, а восстановить их изображения с помощью «синего ластика». «Сиреневый ластик» рисует цветом фона, поэтому им можно стирать неправильно нарисованные детали. «Розовый ластик» переносит на рисунок фрагменты с поля 2, поэтому и это поле можно использовать в помощь своему рисованию.

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

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

  Как видите, возможностей для удобного рисования, а также для исправления нарисованного, в методе «работы по канве» имеется много.

    ВЕКТОРНАЯ ГРАФИКА В РАБОТЕ ПО КАНВЕ

  Особые удобства для создания линий и контуров анимационных фигур даёт векторная графика. Элементы векторной графики легко передвигаются, а форма контуров легко меняется простым движением стилуса.
  В программе «DM_Paint» для целей анимации хорошо подходит ломаная линия. Видео про то, как можно изменять её контур, имеется тут - http://youtu.be/LOCxg-Qvrdw  Естественно, что переводя фазы такого изменения в кадры мультфильма, было бы легко делать анимацию персонажа.
  Единственно, чего в этом процессе не хватает, так это ослабленного изображения предыдущего кадра, именно такого, которое используется при работе с каймой. Но препятствие это кажущееся, и оно легко обходится следующим образом:

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

- произведя правку, кликаем по кнопке «разрежение следа» правой кнопкой мыши и получаем новое изображение, которое и запоминаем как следующий кадр анимации.

- затем вновь набрасываем канву
- запоминаем результат на поле_6
- вновь правим контур, и так далее…

  Вы видите, что работа по канве с векторной графикой ничуть на сложнее, чем работа по канве методом простого рисования. При работе с графикой требуется только одно дополнительное действие – нам нужно запомнить рисунок с наброшенной канвой на поле_6, и только после этого вносить в него изменения.

     ИСПОЛЬЗОВАНИЕ БУФЕРА КАЙМЫ

  С «зоной каймы», размеры и расположение которой устанавливаются в момент клика по кнопке «разрежение следа» с цифрой 3 на ней, связан численный буфер каймы. Двухмерный массив длинный целых чисел.
  В действиях, перечисленных выше, этот массив, правда, никак не используется. Тем не менее, наличие буфера очень полезно в ряде случаев.

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

  Итак, загружаем кадр, на котором должен появиться персонаж, набрасываем на него канву и рисуем персонаж на том месте, где он должен быть. Удаляем прорехи и получаем изображение персонажа на чистом белом фоне.
  Затем нажимаем клавишу «k» латинское на клавиатуре ноутбука и ждём.
  Белое поле с персонажем записывается в буфер канвы. А поскольку в этот момент в качестве цвета фона у нас установлен белый цвет, то именно этот цвет будет считаться прозрачным, и пиксель с этим цветом не будет считываться при чтении изображения из буфера.
  Теперь мы вновь загружаем этот же кадр (без персонажа и без канвы), и считываем изображение находящееся в буфере канвы, нажав клавишу «L» латинское на нижнем регистре. Немного ждём, и наш кадр готов.
  Поставив на кнопку «Плотность» цифру, меньшую 9, и нажав клавишу «L» латинское на верхнем регистре, мы  получим наложение в полупрозрачном виде. Если хотите таким способом делать дымы или призраки – то, пожалуйста.

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


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

  Используя буфер канвы, можно помещать персонажи на неподвижный фон – задний план. Пользуясь техникой увеличения, можно приближать или удалять задний план, увеличивать или уменьшать размер персонажа и передвигать его - http://youtu.be/jkxxOahjgsI 
  То есть, для всех этих целей совсем не нужно перерисовывать персонаж, достаточно иметь в виде рисунков несколько фаз его движения.

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

  Канва является альтернативой другим методам покадровой анимации, таким, как использование ослабленного изображения предыдущего кадра - http://proza.ru/2019/09/23/84 морфинга - http://proza.ru/2020/01/02/1387 копирования с переносом изображения - http://proza.ru/2019/10/20/1299 и проч.
  Но я обратил бы ваше внимание именно на канву, поскольку работа с ней происходит быстро, и в этом она на порядок превосходит иные методы, связанные с по-пиксельным преобразованием кадров анимации.

Видео на тему статьи находится тут - http://youtu.be/XtLrNSkPJG4
_________
10.2.2022