Like, for width, do something like:

What happens in line 2 is we calculate how much space there will be for each ellipse (so you can use that to decide on ellipse size).

In line 5 we multiply i with the width of the column, to find how far from the left the column starts, then add HALF a column, to find the center of the ellipses point.

Do the same thing for Y, and then draw ellipse at those two coordinates.

For drawing the random lines, what you can do is use the calculated x and y column size again, and just do a loop with the amount of lines you want to draw, and then draw between the points, multiplied with the number of the column and row you want to.

something like:

Fix:

So You'll have

putting (float) in front of a variable converts it from an int to float.

I do this in the (width*0.875)/(float)ellipsesX to make sure that it does a floating point division.

It has to do about precision.

The difference is like so:

This returns an integer: 5 / 2  giving the result as 2

This returns a float: 5 / 2.0  giving the result as 2.5

This is the same as the previos line 5 / (float)2, since (float)2 will give you 2.0

Since colWidth/rowHeight is something that will be multiplied it is wise to have it as a float, to not get accumulating errors

If we had, as in my example above used 5 / 2, and then multiplied that by 4, you'd get 8.

With floating point (5/2.0) * 4, we would get 10.0

See?

Also, you can use, say, colWidth to make ellipses that are half the width of the column, when drawing, like:

ellipse(x, y, colWidth/2, colWidth/2);

Or something like that.

I adjusted the number of rows and columns to exaggerate the difference. Using the variables as you mentioned to determine ellipse size, I tried to designate the width according to the columns and the height according to the rows. This is how I first noticed the size difference--I wasn't getting perfect circles. I then printed both the colWidth and rowHeight variables and saw that there was about 10 pixels difference.

You need to add, to the x and y coordinates, half of the width/height you want to use as a margin.

You had in your initial code

width*0.875, which I guess you did do only draw on 87.5 percent of the width.

So, we need to add to x half of the margin, to move it to the right.

So, half of 12.5% of the width, or to write it out in math

and Y

I am maybe making this a bit more complicated for you than what it could be. 

BUT, for the size of the ellipses, use the same calculation on both width and height:

eg.

EDIT:

To get the number of rows to match columns, you can first decide on columns:

EDIT2:

     

To get near pixel perfect matching of width/height/columns/rows, it might be wise to decide on some sizes first.

Say you want 5 columns, and 10 rows, then you should pick a size for the sketch that matches, and just add some pixel value for margin.. Take 50 as a size for the ellipses. width = 5*50 + margin, height = 10 * 50 + margin

Let margin be 500 on each side.. we'll get width = 750 and height = 1000

then you calculate colWidth = (width-500)/(float)ellipsesX, instead of doing the *0.875