Processing Month, Day 14 - Manipulating Circles

Posted on 2011-05-14 by Jan Vantomme
Tags: processing, tutorial

Yesterday we've drawn regular polygons. If you draw a regular polygon with 360 points, you get something that gets really close to a circle. If we take that same function, and manipulate the radius with a sine wave or cosine wave, we can get really interesting results. This is the full function to draw a manipulated circle:

void circleShape( float radius, int numSpikes )
{
    float amp = random( 0.05, 0.5 );
    beginShape();
    for (int i = 0; i < 360; i++) {
        float a =  (1 + amp * cos(radians(i * numSpikes)));
        float x = cos(radians(i)) * radius * a;
        float y = sin(radians(i)) * radius * a;
        vertex(x, y);
    }
    endShape(CLOSE);
}

I'm drawing the circles in a grid of 50 pixels. You can do this easily with nested for-loops. In the examples, I tried drawing them with a different radius to get interesting results.

for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 9; j++) {
        pushMatrix();
        translate( i * 50, j * 50 );
        rotate( random( TWO_PI ));
        circleShape( r, floor(random(3, 6)) );
        popMatrix();    
    }
}