​

var rows = 13;

var columns = 13;

​

var randomColor;

var randomText;

​

//variables for steps

var stepX;

var stepY;

​

function setup() {

​

​

  createCanvas(600, 600);

  background(255);

​

  //background(219, 44, 255);

​

  rectMode(CORNER);

​

  //noStroke();

​

  stepX = width / columns;

  stepY = height / rows;

​

  //noLoop();

​

}

​

function draw() {

  textSize(36);

​

​

  //for loop to iterate columns

  for (var i = 0; i < columns; i++) {

    //for loop to iterate rows

    for (var j = 0; j < rows; j++) {

​

​

​

      //Grid

​

​

      //Text

​

​

​

      // horizontal displacement only 

​

      textAlign(CENTER, CENTER);

      textFont("Arial", 36);

​

      // placement of the text

​

      text(letters[0], random(13) * stepX, stepY - 20);

      text(letters[1], random(13) * stepX, stepY + 25);

      text(letters[2], random(13) * stepX, stepY + 70);

      text(letters[3], random(13) * stepX, stepY + 120);

      text(letters[4], random(13) * stepX, stepY + 160);

      text(letters[5], random(13) * stepX, stepY + 210);

      text(letters[6], random(13) * stepX, stepY + 260);

      text(letters[7], random(13) * stepX, stepY + 300);

      text(letters[8], random(13) * stepX, stepY + 350);

      text(letters[9], random(13) * stepX, stepY + 395);

      text(letters[10], random(13) * stepX, stepY + 440);

      text(letters[11], random(13) * stepX, stepY + 490);

      text(letters[12], random(13) * stepX, stepY + 535);

​

      //noStroke();

      strokeWeight(0.5);

      noFill();

      rect(i * stepX, j * stepY, stepX, stepY);

​

​

    }

  }

​

}