Processing Month, Day 26 - Data Visualisation

Posted by Jan Vantomme on 26 May 2011.
Tags: ,

Today I’ll be mixing two sketches we did this month: the data visualisation sketch we did yesterday and the one about using PDF files for lasercutting. I’ll share the algorithm I used to create these beautiful tangible datasets.

Data visualisation made with Processing and a lasercutter

Data visualisation made with Processing and a lasercutter

The algorithm for drawing the polygon is similar to the one we used yesterday for drawing the bars. We’ll use beginShape() and we need to draw two vertices each time we go through the loop.

void renderPolygon()
    float closeX 
float closeY 0;
    for (
int i 0values.lengthi++) {
        float r 
        if ( 
== {
cos(angle) * r;
closeY sin(angle) * r;
        float x1 
cos(angle) * r;
float y1 sin(angle) * r;
float x2 cos((1) * angle) * r;
float y2 sin((1) * angle) * r;
ellipse00minRadiusminRadius );

The function for the circles uses the minimum and maximum radius and the lerp() function to calculate the radius for each circle. The distance between each circle is 10%, so the values for each bar will still be readable when the objects are cut.

void renderCircles()
    float diff 
maxRadius minRadius;
    for (
int i 010i++) {
        float r 
lerpminRadiusmaxRadius10.0 ) * 2;
00maxRadius 2maxRadius );

The output of the sketch looks like this. If you combine this algorithm with the technique I’ve used to output everything to a PDF file, you’ll be able to make beautiful objects made from data.

The output from our sketch, ready for lasercutting


Download the sketch for day 26, Data Visualisation.

Tweet this article

Oldskool Comments (1)

Gravatar for Ian Bowman

From: Ian Bowman
Date: 26.05.2011

So awesome. I've been slacking on the remixes, but I still read and learn from these sketches. Thanks Jan!

Top · Permanent link to this comment