Deriving the Grid

---

first published on classmite. click here.

Language used

We are using Processing from www.processing.org

Note : Canva starts 0,0 at top left

Problem Statement

We want to draw grids. we create line by :

line(x1, y1, x2, y2);

---

Logic Exploration

We see in the picture horizontal and vertical lines. However, drawing all those lines might take us lots of lines of code . . .

line(x1, y1, x2, y2);

line(x1, y1, x2, y2);

line(x1, y1, x2, y2);

line(x1, y1, x2, y2);

…

many lines — many values needed.

we need many values > we can use a loop

the spaces between the lines are equal > a loop again, like x = x+10;

we know the begining and ending point of each line >  a for loop

Common points and difference between lines

Let us take vertical lines for instance.

 

(0,0)
|   |   |

|   |   |

|   |   |

we see that :

the y-coordinate of the lines are the same  : 0 and the height of the window.

what changes is the x coordinates. so we change only the x coordinates with our for loop.

Here is our starting code :

void setup()
{
size(500,500);
}

void draw()
{
background(0); //black

}

we don’t use fill( ) with lines, we use stroke()

stroke(255);

that gives white. you can also use it with format stroke(r, g, b)

now our line with for loop :

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

see we put our y as 0 and height, here it equals 500.

result :

 

 

now for our horizontal lines :

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

see for horizontal lines, it goes from x=0 to x=width, what only changes is the height !

 

Full code :

void setup()
{
size(500,500);
}

void draw()
{
background(0);
stroke(255);
  for(int x=0; x<width; x+=10)
  {
  line(x,0,x,height);
  }
  
  for(int y=0; y<height; y+=10)
  {
  line(0, y, width, y); 
  }
}

Live demo with interaction :

visit it here