14 May 2011

Author

Jan Vantomme

Tags

Processing Month, Day 14 - Manipulating Circles

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 sinewave or cosinewave, 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();    
    }
}

Examples

The sketch is also available on OpenProcessing.

A grid with manipulated circles with a radius of 10 pixels

A grid with manipulated circles with a radius of 20 pixels

A grid with manipulated circles with a radius of 30 pixels

A grid with manipulated circles with a radius of 50 pixels

A grid with manipulated circles with a radius of 60 pixels

A grid with manipulated circles with a radius of 100 pixels

Download

Download the example for Procesing Day 14, Manipulating Circles.

Comments (0)

Commenting is closed for this article.
Commenting is not available in this channel entry.