// inspired by Josef Albers

// press play, then click canvas to regenerate

​

let grid;

​

function setup() {

  createCanvas(600, 600);

  randomizeGrid();

}

​

function draw() {

  background(255);

  displayGrid();

}

​

function mousePressed() {

  randomizeGrid();

}

​

// Creates rectangles with randomized colour and width, but at a fixed point

function randomizeGrid() {

  grid = [];

​

  // Define the initial grid with some rectangles

  grid.push({ x: 0, y: 0, w: width, h: height, color: color(255) });

​

  // Number of rectangles = 4

  grid.push({ x: 50, y: 50, w: random(100, width-100), h: random(50, height-100), color: color(random(255), random(255), random(255)) });

  grid.push({ x: 300, y: 50, w: random(50, width-400), h: random(50, height-100),color: color(random(255), random(255), random(255)) });

  grid.push({ x: 50, y: 300, w: random(250, width-100), h: random(50, height-400),color: color(random(255), random(255), random(255)) });

  grid.push({ x: 300, y: 300, w: random(150, width-400), h: random(50, height-350),color: color(random(255), random(255), random(255)) });

}

  // height/width - x - 50 so rectangle does not exceed 50px white border

​

function displayGrid() {

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

    fill(grid[i].color);

    noStroke();

    rect(grid[i].x, grid[i].y, grid[i].w, grid[i].h);

  }

}

​

​