Beginner question: Wilson Grids

Programming Questions

mrpoxycat

Beginner question: Wilson Grids

in Programming Questions • 2 years ago

Hi there processing people,

DISCLAIMER:

I'm totally new to processing and programming in general, just started with the processing handbook a week ago.

My problem is a question of understanding. More specifically the Wilson Grids example (Synthesis 1, p152).

size(600, 600);
background(255);
int sqNum = 12;
int sqSize = width/sqNum;
int halfSize = sqSize/2;
for (int y = halfSize; y < width; y = y+sqSize) {
for (int x = halfSize; x < height; x = x + sqSize) {
rect(x-halfSize+2, y-halfSize+2, sqSize-4, sqSize-4);
}
}

This is the first part of the example.

What I'm trying to get my head around is the idea behind offsetting x and y and the setting it back when drawing the rectangles, instead of just drawing the rectangles from (0,0) like this:

for (int y = 0; y < width; y = y+sqSize) {
for (int x = 0; x < height; x = x+sqSize) {
rect(x+2, y+2, sqSize-4, sqSize-4);
}
}

I'm guessing there is a perfectly good reason for doing it the other way, I'm just not smart enough to figure out why...

HELP!

Replies(4)

allonestr..

Re: Beginner question: Wilson Grids

2 years ago

Normally when you draw a rectangle, you provide the co-ordinates of the top left corner, together with the width and height. Shown here in my top diagram.

(There are other ways of specifying a rectangle, but this is the default way.)

In the picture in the book, especially in the first row, he has the squares centred on some invisible grid lines. I've made these visible in my second diagram.

To do that, he's said, move the x co-ordinate to the left a bit, and the y co-ordinate up a bit. In fact move them half as much as the size of the square, so that half of the square ends up on the left of that invisible grid line, and half above it. Ah, and so centering the square on the grid.

Did you try running your version to see the difference? All the squares ended up 2 pixels right and 2 pixels down from that invisible grid.

To see the invisible grid, stick the following either before or after your for loop.

for (int y = halfSize; y < width; y = y + sqSize)
{
line(0, y, width, y);
for (int x = halfSize; x < height; x = x + sqSize)
{
line(x, 0, x, height);
}
}

Ask again if that doesn't make sense.

mrpoxycat

Re: Beginner question: Wilson Grids

2 years ago

I see. So the reason for this is the fact that they are all scaled randomly later on, in relation to this "invisible" grid?

allonestr..

Re: Beginner question: Wilson Grids

2 years ago

Yes, I expect so.

Regardless of the square's size it'll always be centred by using this method.

The parameters of the for loop will be different, for example as follows

size(600, 600);
background(255);
int numSquares = 12;
int gridSize = width / numSquares;
int halfGridSize = gridSize / 2;
for(int y = halfGridSize; y < width; y = y + gridSize)
{
line(0, y, width, y);
for(int x = halfGridSize; x < height; x = x + gridSize)
{
line(x, 0, x, height);
}
}
for(int y = halfGridSize; y < width; y = y + gridSize)
{
for(int x = halfGridSize; x < height; x = x + gridSize)
{
float squareSize = random(gridSize / 2, gridSize - 4);
rect(x - squareSize / 2, y - squareSize / 2, squareSize, squareSize);
}
}

Again, ask if this doesn't make sense.

mrpoxycat

Re: Beginner question: Wilson Grids

2 years ago

Thanks alot!

Guess it helps to look at what you're actually trying to do :)

Top Reply