Mixing algorithmic (procedural) and hand drawn animation

Hi again, after few posts hers about 1 year ago, I didn’t post anything, I was busy to learn some graphics capabilities, mainly with Lua and TIC-80 fantasy computer, that is a 16bits like computer, with 1980~90s resolution, and really limited capabilities. This (and COVID related confinement) helped me to concentrate on basics things, to go again on programming graphics things, as I didn’t done for about 20 years. I made several procedural generation animation, and mix of hand drawn lowres pixel art and algorithmic animation. But as I like to paint/draw. More recently I started to go back on C and to explore languages I never used, Python and Verilog (FPGA❤️). I started to learn SDL with C and LÖVE, that use Lua as TIC-80. Lua allow to experiment really quickly without lot of constraints of lower level language and LÖVE is an advanced 2d game engine with textures, meshes, shaders, etc… I so tried to mix some Pencil2D, mainly MyPaint branch, made animation , some time finishing drawing with MyPaint, due to problems with current state of Pencil2D MyPaint branch, and Lua programming in LÖVE.

The Grid and Camera picture dimensions capabilities of Pencil2D helped me to fix the size of the picture for technical constraints (try to use multiple of 8x8 pixel base shapes, that can simplify some computations, I export animation, in multiple PNG, and then make a “spritesheet” from them with Image Magick.

As example, this is a splash animation made (and finished) with Pencil2D: eclaboussuresheet_z

one frame is 64×128 pixels, I save as separate PNG, and assembled them with Imagemagick command called “montage” with the following arguments, as multiple image output extracte one picture by frame, I need to select key images I set in my animation:

montage sprite0001.png sprite0006.png sprite0010.png -tile 3x1 -geometry 64x128 spritesheet.png

For the monster I used the same technique. There is only 2 frame here (mouth opened and closed), my goal with to validate proof of concept of programming algorithm first with quick sketchs I would be able to add frames, then finish drawing.


And here is what done the final animation. Monster use Mesh on this picture, that is bended.

The long green stuff is a non animated picture, made with pencil2d-mypaint-branch. the picture is wrapped for the movement, a shader add a zoom along the path, and a light sinusoidal move at then end, and it is then rotated following the shape of the monster. The splash is added at the end of this throwed thing by cycling among the 3 pictures, and several are drown with mirror to give the illusion of diversity. The final result of this test:

Looks like remote mp4 can’t be displayed, Here is the link of the remote video. You can see the different animations in this blog post.

Another animation, only drawn one picture in Pencil2D there, and finished it with Mypaint. I think about several steps or independent animated elements made with Pencil2D that can be added by the program:


An hand drawn animation, I will include with the other part. I’m not totally happy with the result for now it will allow to place things.


Validated the mix of hand drawn animation with the computed deformed drawing. Flowers are drawn using a mesh too (just a 4 vertices square now) that will to have more generic mixing and deformation, like wind in flower here or some other external thing that bend it. The right flower is scaled and tainted as a try. There is a simple loop, for testing, but the goal is to have each flower open only one time :)


The mp4 version (3 times littler 3 times more time, works better and without dithering)

1 Like

Finished a bit the rendering of the flower, but at the reduced size, the color are not really visible. I just noticed I missed a frame in my export => spritesheet conversion, and then duplicated the one before last, so the last picture was not the end of the animation, not sure people will see this, but finish on a strangely shapped flower then.


After assembling the spritesheet (redusced from 256×256 to 128×128 it take 200KB, that’s a bit huge for one element. Some solution that could be take into account:

  • zopflipng -m allow to reduce to ~150KB.
  • There is huge, useless empty place around the flower, but I believe PNG compress it efficiently
  • considering to separate the stem and the flower would gain a lot, creating a flat stem, bended by mesh, and adding only the animated flower itself would gain lot of place, it would have the benefits, to have algoritmically created stem, with forking, etc… and interchanging several flowers shapes/colors without affecting stem color.
1 Like


In context video

1 Like

@Popolon Wow I don’t know why but this is the first time I’ve seen this thread! really interesting work :smile:

1 Like

That i amazing! I can never animate that well!

Nice work!

The flower animation kinda “snaps.” It was close, then it was totally open. Was this what was intended?

Yes, that was the goal to train a bit on dynamics effects. After doing this, I thought it would have been better if I had put a bit of a time lag in the movement between the different petals

1 Like

Don’t think so, this animation is not very good :) Only drawing probably shows some years of training on models. But anyone can manage it, it only take years (of months for drawers with more affinities with this). I only draw with my right hand looking at my left hand here ^^. The probably most difficult part, in drawing after model, is to don’t draw what you think you see, but instead, just draw what you look at. Like a copy-paste. To help at it try to compare directions, verticals, diagonals, horizontals lines/extremities. A good help is “triangulation” take 3 most distant points, id the angle of line between them are like what you see that’s good, then you can refine some inner details the same way.

I just made the start and the end, and then interpolated one in-between just at the middle so the dynamic is not really good.