Посмотрел у «Прочитал нарисовал» (https://dzen.ru/shorts/68da55ca4b61de53db5e9d36?source=channel ) про оживление классических иллюстраций с помощью ИИ. Захотелось рассказать о кривых Безье. Придуманы они были для проектирования кузовов автомобиля, мило задаются параметрическими уравнениями. Но меня интересует сейчас их использование в компьютерной графике для оживления рисунка.
Итак, кривая Безье (ограничусь кривой 2го порядка) задаётся тремя точками.
Точки 1 и 3 задают начало и конец, точка 2 (контрольная) «придавливает» кривую, она всегда находится внутри оболочки, образованной опорными точками. Построить кривую можно по алгоритму Кастельжо, но мне кажется полезнее для начала просто потренироваться с онлайн тренажёром типа https://learn.javascript.ru/bezier-curve (Алгоритм «де Кастельжо»).
Однако уже и так очевидны полезные свойства кривых — гладкость (по построению), наглядность (сразу ясно как примерно пойдёт кривая), компактность (3 точки на кривую! cравните с пиксельным представлением).
Как это можно использовать без всякого ИИ.
Меня вдохновил пост habr.com/ru/articles/344814 («Кривые Безье и Пикассо»). И я поступил так:
1) Занёс таксу Пикассо в КорелДро. Добавил слой и обвёл нужный фрагмент рисунка. Сохранил фрагмент в формате svg. Получил координаты всех точек кривой Безье (в кореле кривые 3го порядка, но это подробности).
2) Отрисовал собаку и цветок в html (правильнее рисовать на разных слоях подвижные и неподвижные части рисунка или неподвижные загнать в фон. ). В ява скрипт движение, например носа, задать просто – вращаю одну точку, остальные подстраиваются сами [типа ($sin ф-ция j=j+1 )
Y3Nos=240 - 8*$sin*$sin;
ctx.beginPath(); //Nose
ctx.moveTo( 199 , 190 );
ctx.bezierCurveTo( 172 , 214 , 192 , 204 , 135 , Y3Nos ); ]
3) Чтобы превратить рисунок в gif, открываю. html`ку, захватываю рисунок с экрана, сохраняю и перегоняю в gif.
Результат я поместил в начало поста. Можно не переводить в gif, а оставить захват экрана в МП4 и добавить звук, качество будет только лучше.