Processing Month, Day 14 - Manipulating Circles

Posted by Jan Vantomme on 14 May 2011.
Tags:

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 circleShapefloat radiusint numSpikes )
{
    float amp 
random0.050.5 );
    
beginShape();
    for (
int i 0360i++) {
        float a 
=  (amp cos(radians(numSpikes)));
        
float x cos(radians(i)) * radius a;
        
float y sin(radians(i)) * radius a;
        
vertex(xy);
    
}
    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 010i++) {
    
for (int j 09j++) {
        pushMatrix
();
        
translate5050 );
        
rotaterandomTWO_PI ));
        
circleShaperfloor(random(36)) );
        
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 100 pixels

Download

Download the example for Procesing Day 14, Manipulating Circles.

Tweet this article