Animation name: Nine Turning Squares
Created with the Processing.js language
By Rodrigo de Almeida Siqueira
Technical information to generate the animation file:
First I wrote a Processing.JS script to create an animation (I will post sample code to create similar animations in later posts) that loops with the last frame being the same of the first frame.
Inside the main loop I capture the frames from the canvas element, where the animation runs.
// Create image using Data URI scheme (data:image/png;base64,....)
var img = document.getElementById('canvas_id').toDataURL("image/png");
I uploaded (using ajax) all generated "img" objects to the server so I could save all captured frames at once.
Then the final gif animation was generated with the following ImageMagick convert command:
convert -layers optimize-plus -delay 4 -colors 64 +dither -scale 50% -loop 0 *png animation.gif
This is how to create a gif animation from the processing.js animation.