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)

Mercator Projection with Processing.js

"The latest project in Triposo labs section is made with Processing. We created an interactive vector based world map - the interactive part is that the user can decide which places are used as North and South poles in the Mercator style projection. The result shows quite clearly how distorted Mercator style maps are."

You can find Triposo Labs with interactive world map (Mercator projection) written with Processing.js here:

Mercator projection - Greenland is much smaller in this view:

Mercator projection - common standard world map projection:

Post by Processing Bits - Rodrigo Siqueira (2012-02-02 14:43)

Post your comment:

Name: Email: Site:

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:

Welcome to the Postbit of Processing.js

This is the Postbit blog and photo album from a Processing.js programmer (Rodrigo Siqueira, from Brazil).
I use the Processing language to create digital art, geometric forms, fractals, animations and to visualize equations, data sets and other graphics.

Post by Processing Bits - Rodrigo Siqueira (2011-09-02 10:13)

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 -