Create your blog and photo album with postbit
Create your blog and photo album

Create new post


Upload a picture:
Tags (keywords separated by comma)

Save Cancel
Processing Bits - Rodrigo Siqueira processing:   Followers: 3 ; Following: 0

Explore Processing Bits - Rodrigo Siqueira's photo albums:
Processing frames (6)

Processing.js - Turning Squares Animation

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.

This is a GIF animation (with 115 frames) created from the original Processing animation. The frames were captured from the canvas html5 object with the following javascript commands:
// Create image using Data URI scheme (data:image/png;base64,....)
var img = document.getElementById('canvas_id').toDataURL("image/png");
document.write('<img src="'+img+'"/>');

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.

Post by Processing Bits - Rodrigo Siqueira (2011-09-02 17:57)

Post your comment:

Name: Email: Site:

| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |

Copyright © 2018 -