// A Procedural Algorithm

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 100);

}

​

function draw() {

  background(0);

  //grid

  fill(255);

  stroke(255);

  line(width/2, 0, width/2, height);

  line(0, height/2, width, height/2);

  //rectangles

  //mouse is in top left corner

  if (mouseX < width/2 && mouseY < height/2){

    rect(0, 0, width/2, height/2)

  } 

  //mouse is in top right corner

  else if (mouseX > width/2 && mouseY < height/2){

    rect(width/2, 0, width/2, height/2);

  } 

  //mouse is in bottom left corner

  else if (mouseX < width/2 && mouseY > height/2){

    rect(0, height/2, width/2, height/2);

  } 

  //mouse is in bottom right corner

  else {

    rect(width/2, height/2, width/2, height/2);

  }

}