My Fragment (3).. WIP

If you want to experiment with this program, try changing the values assigned to the variables at the top of the draw() function. You can alter the number of columns or rows, the spacing, and the maximum or minimum height or width of the ellipses.

The bottom part of the draw() function is where the real work is done. The outer for loop executes once for each column, and the inner one for each ellipse in a row within the column. The left and top variables store the position, which is calculated by multiplying the loop variable with the width of the column or row and then adding the appropriate border.

The height and width variables store the size of the ellipse's bounding box. On the first column, col=0 and so width = minwidth, which is the minimum width. On subsequent columns, the width is increased until the column on the far right, where col=numberOfCols-1 and the way the maths works out is that width = maxwidth. The height works in a similar way.

As you may have guessed, the start and stop variables control the angles of the arc. On the first column, col=0 and start=0. As col increases, the start angle increases until finally it becomes TWO_PI. The stop angle is the same but it adds on a term which mutliplies TWO_PI by (row+1)/numberOfRows, which represents the proportion of the ellipse that is covered by the arc. It starts off as quite small but eventually becomes 1, i.e. the bottom row is an ellipse rather than an arc.

You may have noticed the cast to a float, using the (float) syntax. This is necessary because the other variables are integers, and in integer arithmetic values are rounded down to whole number, which is not what we want.

Lastly, you may have noticed that the stop angle can exceed TWO_PI, i.e. be more than 360 degrees. In fact, it is not a problem if either the start or stop angle take large values; what effectively happens is that a whole number multiple of TWO_PI is subtracted from the angle to make it within the acceptable range.

My Fragment (2).. WIP

Curves in action

Now, lets look at some more interesting examples...

void setup() {
 size(650, 600); 
} 

void draw() { 
 //variables control the number of shapes, the sizes, spacing.. 
 int numberOfCols = 6; 
 int numberOfRows = 5; 
 int leftborder = 25; 
 int topborder = 25; 
 int colwidth = 100; 
 int rowheight = 110; 
 float minwidth = 50; 
 float maxwidth = 100; 
 float maxheight = 100; 
 float minheight = 50; 


 //declare working variables, set background and ellipse mode 
 float left, top, height, width, start, stop; 
 background(102); 
 ellipseMode(CORNER); 


 //does the drawing... 
 for(int col=0; col
  for(int row=0; row
   left = leftborder + col*colwidth; 
   top = topborder + row*rowheight; 
   height = minwidth+row*(maxheight-minheight)/(numberOfRows-1); 
   width = minwidth+col*(maxwidth-minwidth)/(numberOfCols-1); 
   start = TWO_PI*(col/((float) numberOfCols-1)); 
   stop = start+TWO_PI*((row+1)/((float) numberOfRows)); 
   arc(left,top,width,height,start,stop); 
  } 
 }
}