Setting up a Grid System

The foundation of every grid-system in Processing is a two-dimensional for-loop. To write a two-dimensional for-loop, you need write a simple one and nest another one into it. If you don’t know what i am trying to explain here it probably a good idea to take a look at my course Mastering the For-Loop and in particular this lesson. Let’s take a look at the following example.

//Processing
for (int x = 0; x < 10; x++) {
  for (int y = 0; y < 10; y++) {
    
  }
}

//P5.js
for (let x = 0; x < 10; x++) {
  for (let y = 0; y < 10; y++) {

  }
}

What you see here is a nested (or two-dimensional) for-loop with variables called x and y. This makes sense, because they represent the axes of a coordinate-system. What you also see is that the condition for executing the for-loops is defined with x < 10 and y < 10. This means that the grid we’re about to create consists of 10 tiles on both axes. To make this piece of code a little bit more elegant and easier to read, i will define variables for the amount of tiles on each axis.

//Processing
float tilesX = 10;
float tilesY = 10;

for (int x = 0; x < tilesX; x++) {
  for (int y = 0; y < tilesY; y++) {
    
  }
}

//P5.js
let tilesX = 10;
let tilesY = 10;

for (let x = 0; x < tilesX; x++) {
  for (let y = 0; y < tilesY; y++) {
    
  }
}

In the next steps i want to distribute rectangles on my sketch-window. I’ll do so by writing the rect-function inside of the nested for-loop. But before i have to calculate the dimensions of the tiles to know, where to put the rectangles to distribute them across the sketch window. I’ll do so by creating two more variables: tileW represents the width of a tile and tileH represents the height of a tile.

//Processing
float tilesX = 10;
float tilesY = 10;
float tileW = width / tilesX;
float tileH = height / tilesY;

for (int x = 0; x < tilesX; x++) {
  for (int y = 0; y < tilesY; y++) {
    
  }
}

//P5.js
let tilesX = 10;
let tilesY = 10;
let tileW = width / tilesX;
let tileH = height / tilesY;

for (let x = 0; x < tilesX; x++) {
  for (let y = 0; y < tilesY; y++) {
    
  }
}

Now i am ready to put the rect-function in there. To distribute each rectangle accordingly, i have to multiply x with tileW and y with tileH.

//Processing
float tilesX = 10;
float tilesY = 10;
float tileW = width / tilesX;
float tileH = height / tilesY;

for (int x = 0; x < tilesX; x++) {
  for (int y = 0; y < tilesY; y++) {
    rect(x*tileW, y*tileH, 10, 10);
  }
}

//P5.js
let tilesX = 10;
let tilesY = 10;
let tileW = width / tilesX;
let tileH = height / tilesY;

for (let x = 0; x < tilesX; x++) {
  for (let y = 0; y < tilesY; y++) {
    rect(x*tileW, y*tileH, 10, 10);
  }
}

Processing

void setup() {
  size(1200, 900);
}

void draw() {
  background(#f1f1f1);
  strokeWeight(3);
  float tilesX = 10;
  float tilesY = 10;
  float tileW = width / tilesX;
  float tileH = height / tilesY;
  
  for (int x = 0; x < tilesX; x++) {
    for (int y = 0; y < tilesY; y++) {
      rect(x*tileW, y*tileH, tileW, tileH);
    }
  }
}

P5.js

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background('#f1f1f1');
  strokeWeight(2);
  let tilesX = 10;
  let tilesY = 10;
  let tileW = width / tilesX;
  let tileH = height / tilesY;
  
  for (let x = 0; x < tilesX; x++) {
    for (let y = 0; y < tilesY; y++) {
      rect(x*tileW, y*tileH, tileW, tileH);
    }
  }
}

Basically, this is the code base you need to build a grid system. Next, let’s look at how the decision logic for selecting components in the grid cells works.

---

Related Links

• Nested Loops