Drawing random lines between a grid of ellipses.

Programming Questions

grmblshi

Drawing random lines between a grid of ellipses.

in Programming Questions • 2 years ago

I have created a grid of ellipses, and I would like to draw lines between the centers of these ellipses. However, I want to randomise where each line begins and where each line ends--all beginning points and ending points being the centers of ellipses.

Below is the code I have used to create the grid of ellipses.

I have tried including the line drawing code within the nested for statements, but I can't seem to figure out how to restrict the lines' points to the ellipses' origins. I have a feeling I might need to use a two-dimensional array to accomplish this, but I am not quite sure how to go about setting up said array.

Also, it appears that my method of centering the grid within the screen isn't accurate. What would be a more accurate and efficient way of accomplishing this?

Any other improvements upon what I have so far would be greatly appreciated. Thank you!

void setup() {
size(300, 500);
background(100);
noStroke();
smooth();
for (int i = (width/8); i <= (width*0.875); i = i+30) {
for (int j = (height/8); j <= (height*0.875); j = j+30) {
fill(255);
ellipse(i, j, 2.5, 2.5);
fill(255, 30);
ellipse(i, j, 20, 20);
}
}
}

Replies(5)

Greger

Re: Drawing random lines between a grid of ellipses.

2 years ago

About centering your grid

I see you are using a lot of constants in your drawing loop. That might not be very wise. And you are drawing the amount of ellipses based on their size? It would be better to decide on how many ellipses you need, and then draw that in, adjusting their position and size, depending on your canvas.

Like, for width, do something like:

int ellipsesX = 8
float colWidth = (width*0.875)/(float)ellipsesX;
for(int i = 0; i < ellipsesX; i++)
{
int x = i * colWidth + colWidth/2.0;
}

You can figure out the Y coordinate yourself. ;-)

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.

Drawing random lines

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:

int numLines = 10;
for(int l = 0; l < numLines; l++)
{
int x0 = (int)random(ellipsesX) * colWidth + colWidth/2.0;
int y0 = (int)random(ellipsesY) * rowHeight + rowHeight/2.0;
int x1 = (int)random(ellipsesX) * colWidth + colWidth/2.0;
int y1 = (int)random(ellipsesY) * rowHeight + rowHeight/2.0;
line(x0, y0, x1, y1);
}

grmblshi

Re: Re: Drawing random lines between a grid of ellipses.

2 years ago

Thank you for replying, Greger.

I'm attempting to utilize your code, but so far I'm running into a "cannot convert to float from int" error on what is line 7 here.

Why have you included the "(float)ellipsesX" part rather than just calling the variable?

Do I need to have the loop for the Y coordinate nested within the first loop for X? As I have it written currently, only one ellipses will be printed with one set of x, y coordinates, correct?

I also wasn't sure how to use line 2 as you said to determine the size of the ellipses.

int ellipsesX = 8;
int ellipsesY = 12;
float colWidth = (width*0.875)/(float)ellipsesX;
for (int i = 0; i < ellipsesX; i++) {
int x = i * colWidth + colWidth/2.0;
}
float colHeight = (height*0.875)/(float)ellipsesY;
for (int j = 0; j < ellipsesY; j++) {
int y = j * colHeight + colHeight/2.0;
}
noStroke();
fill(255);
ellipse(x, y, 10, 10);
}

Greger

Re: Drawing random lines between a grid of ellipses.

2 years ago

I would take a wild guess, and say you mean that it says "cannot convert from float to int" on line 7.

Fix:

int x = (int)(i * colWidth + colWidth/2.0);

And yes, you need to nest the loops

So You'll have

for(int i = 0; i < ellipsesX; i++)
{
for(int j = 0; j < ellipsesY; j++)
{
// Calculate x and y here
ellipse(x, y, 20, 20);
}
}

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.

grmblshi

Re: Drawing random lines between a grid of ellipses.

2 years ago

Using (int) fixed that error. I nested the loops, and I'm able to get a grid output. However, the grid is not centered within the screen; it's very near the top-left corner. I've also noticed that the column width is not equal to the row height.

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.

void setup() {
size(500, 800);
background(75);
smooth();
int ellipsesX = 17;
int ellipsesY = 20;
for (int i = 0; i < ellipsesX; i++) {
for (int j = 0; j < ellipsesY; j++) {
float colWidth = (width*0.875)/(float)ellipsesX;
int x = (int)(i * colWidth + colWidth/2.0);
float rowHeight = (height*0.875)/(float)ellipsesY;
int y = (int)(j * rowHeight + rowHeight/2.0);
noStroke();
fill(255, 30);
ellipse(x, y, colWidth*0.75, rowHeight*0.75);
}
}
}

Greger

Re: Drawing random lines between a grid of ellipses.

2 years ago

Regarding the lack of having the grid in centre, that is my bad.

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

float marginX = (width * (1 - 0.875)) / 2.0;

and Y

float marginY = (height * (1 - 0.875)) / 2.0;

So that when you then draw it will be:

ellipse(x + marginX, y + maginY....

As for the size, you need to figure out the ratio between width/height to know the number of rows/columns.

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.

ellipse(x + marginX, y + marginY, colWidth*0.75, colWidth*0.75);

EDIT:

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

int ellipsesX = 17; // Set number of columns
float colWidth = (width*0.875)/(float)ellipsesX; // Find column width
int ellipsesY = (int)((height*0.875)/colWidth); // Find how many rows can fit on height

You only need to calculate colWidth and rowHeight before the loops start.

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

Top Reply