let cols = 10;

let rows = 10;

let boxSize; // for individual boxes

let palette=[

  '#5F0F40',

  '#9A031E',

  '#FB8B24',

  '#E36414',

  '#0F4C5C'

]; //colour palette for the boxes

​

function setup() {

  createCanvas(600, 600);

  boxSize = width / cols;

  grid = createGrids(cols, rows);

  initializeGrid();

}

​

function draw() {

  background(220);

  drawGrid();

}

​

//to create a grid layout for boxes

function createGrids(cols, rows) {

  let ar = new Array(cols);

  for (let i = 0; i < ar.length; i++) {

    ar[i] = new Array(rows);

  }

  return ar;

}

​

function initializeGrid() {

  for (let i = 0; i < cols; i++) {

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

      grid[i][j] = {

        color: color(random(palette)),

        pattern: int(random(2))

      };

    }

  }

}

​

function drawGrid() {

  for (let i = 0; i < cols; i++) {

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

      let x = i * boxSize;

      let y = j * boxSize;

      fill(grid[i][j].color);

      rect(x, y, boxSize, boxSize);

      drawPattern(x, y, grid[i][j].pattern);

    }

  }

}

​

//options for pattern inside box:

// either ellipse or a strike 

function drawPattern(x, y, patternType) {

  push();

  stroke(0);

  strokeWeight(2);

  switch (patternType) {

    case 0:

      line(x, y, x + boxSize, y + boxSize); //strike pattern

      break;

    case 1:

      ellipse(x + boxSize / 2, y + boxSize / 2, boxSize / 2); //ellipse pattern

      break;

  }

  pop();

}

​

//to change colours and patterns when mouse is pressed

function mousePressed() {

  let i = int(mouseX / boxSize);

  let j = int(mouseY / boxSize);

  if (i >= 0 && i < cols && j >= 0 && j < rows) {

    grid[i][j].color = color(random(palette)); //to change colour

    grid[i][j].pattern = int(random(2)); //to change pattern

  }

}

​