var Ball1;

var Ball2;

var Ball3;

var Ball4;

var Ball5;

var Ball6;

var Ball7;

var Ball8;

var Ball9;

var Ball10;

var Ball11;

var Ball12;

var Ball13;

var Ball14;

var Ball15;

var Ball16;

​

//Variables for counting

var i = 0;

var j = 0;

​

//Color selection

var color1 = 70;

var color2 = 120;

var color3 = 170;

var color4 = 220;

var colors;

​

//Color value variables for each block

var c1;

var c2;

var c3;

var c4;

var c5;

var c6;

var c7;

var c8;

var c9;

var c10;

var c11;

var c12;

var c13;

var c14;

var c15;

var c16;

​

​

function setup() {

​

  createCanvas(400, 400);

​

​

  //Set color selection arrays

  colors = [color1, color2, color3, color4];

​

​

  //Assign colors to top left block

  c1 = random(colors);

​

  c2 = random(colors);

  while (c2 == c1) {

    c2 = random(colors);

  }

​

  c5 = random(colors);

  while (c5 == c1 || c5 == c2) {

    c5 = random(colors);

  }

​

  c6 = random(colors);

  while (c6 == c1 || c6 == c2 || c6 == c5) {

    c6 = random(colors);

  }

​

​

  //Assign colors to bottom left block

  c3 = random(colors);

​

  c4 = random(colors);

  while (c4 == c3) {

    c4 = random(colors);

  }

​

  c7 = random(colors);

  while (c7 == c3 || c7 == c4) {

    c7 = random(colors);

  }

​

  c8 = random(colors);

  while (c8 == c3 || c8 == c4 || c8 == c7) {

    c8 = random(colors);

  }

​

​

  //Assign colors to top right block

  c9 = random(colors);

​

  c10 = random(colors);

  while (c10 == c9) {

    c10 = random(colors);

  }

​

  c13 = random(colors);

  while (c13 == c9 || c13 == c10) {

    c13 = random(colors);

  }

​

  c14 = random(colors);

  while (c14 == c9 || c14 == c10 || c14 == c13) {

    c14 = random(colors);

  }

​

​

  //Assign colors to bottom right block

  c11 = random(colors);

​

  c12 = random(colors);

  while (c12 == c11) {

    c12 = random(colors);

  }

​

  c15 = random(colors);

  while (c15 == c11 || c15 == c12) {

    c15 = random(colors);

  }

​

  c16 = random(colors);

  while (c16 == c11 || c16 == c12 || c16 == c15) {

    c16 = random(colors);

  }

​

  //Create block instances

  Ball1 = new Ball(i, j, c1);

  Ball2 = new Ball(i, j + 100, c2);

  Ball5 = new Ball(i + 100, j, c5);

  Ball6 = new Ball(i + 100, j + 100, c6);

​

  Ball3 = new Ball(i, j + 200, c3);

  Ball4 = new Ball(i, j + 300, c4);

  Ball7 = new Ball(i + 100, j + 200, c7);

  Ball8 = new Ball(i + 100, j + 300, c8);

​

  Ball9 = new Ball(i + 200, j, c9);

  Ball10 = new Ball(i + 200, j + 100, c10);

  Ball13 = new Ball(i + 300, j, c13);

  Ball14 = new Ball(i + 300, j + 100, c14);

​

  Ball11 = new Ball(i + 200, j + 200, c11);

  Ball12 = new Ball(i + 200, j + 300, c12);

  Ball15 = new Ball(i + 300, j + 200, c15);

  Ball16 = new Ball(i + 300, j + 300, c16);

​

​

  //Draw blocks

  Ball1.display();

  Ball2.display();

  Ball3.display();

  Ball4.display();

  Ball5.display();

  Ball6.display();

  Ball7.display();

  Ball8.display();

  Ball9.display();

  Ball10.display();

  Ball11.display();

  Ball12.display();

  Ball13.display();

  Ball14.display();

  Ball15.display();

  Ball16.display();

​

}

​

​

function draw() {

    //Changes color from white to the base value of the color

  if (Ball1.color >= c1) {

    Ball1.color = Ball1.color - 2;

  }

​

  if (Ball2.color >= c2) {

    Ball2.color = Ball2.color - 2;

  }

​

  if (Ball3.color >= c3) {

    Ball3.color = Ball3.color - 2;

  }

​

  if (Ball4.color >= c4) {

    Ball4.color = Ball4.color - 2;

  }

​

  if (Ball5.color >= c5) {

    Ball5.color = Ball5.color - 2;

  }

​

  if (Ball6.color >= c6) {

    Ball6.color = Ball6.color - 2;

  }

​

  if (Ball7.color >= c7) {

    Ball7.color = Ball7.color - 2;

  }

​

  if (Ball8.color >= c8) {

    Ball8.color = Ball8.color - 2;

  }

​

  if (Ball9.color >= c9) {

    Ball9.color = Ball9.color - 2;

  }

​

  if (Ball10.color >= c10) {

    Ball10.color = Ball10.color - 2;

  }

​

  if (Ball11.color >= c11) {

    Ball11.color = Ball11.color - 2;

  }

​

  if (Ball12.color >= c12) {

    Ball12.color = Ball12.color - 2;

  }

​

  if (Ball13.color >= c13) {

    Ball13.color = Ball13.color - 2;

  }

​

  if (Ball14.color >= c14) {

    Ball14.color = Ball14.color - 2;

  }

​

  if (Ball15.color >= c15) {

    Ball15.color = Ball15.color - 2;

  }

​

  if (Ball16.color >= c16) {

    Ball16.color = Ball16.color - 2;

  }

​

  //Draw the squares again

  Ball1.display();

  Ball2.display();

  Ball3.display();

  Ball4.display();

  Ball5.display();

  Ball6.display();

  Ball7.display();

  Ball8.display();

  Ball9.display();

  Ball10.display();

  Ball11.display();

  Ball12.display();

  Ball13.display();

  Ball14.display();

  Ball15.display();

  Ball16.display();

​

​

  //Check for mouse position and make the square white

  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {

    print("1");

    Ball1.white();

  } else if (mouseX > 0 && mouseX < 100 && mouseY > 100 && mouseY < 200) {

    print("2");

    Ball2.white();

  } else if (mouseX > 0 && mouseX < 100 && mouseY > 200 && mouseY < 300) {

    print("3");

    Ball3.white();

  } else if (mouseX > 0 && mouseX < 100 && mouseY > 300 && mouseY < 400) {

    print("4");

    Ball4.white();

  }

​

  if (mouseX > 100 && mouseX < 200 && mouseY > 0 && mouseY < 100) {

    print("5");

    Ball5.white();

  } else if (mouseX > 100 && mouseX < 200 && mouseY > 100 && mouseY < 200) {

    print("6");

    Ball6.white();

  } else if (mouseX > 100 && mouseX < 200 && mouseY > 200 && mouseY < 300) {

    print("7");

    Ball7.white();

  } else if (mouseX > 100 && mouseX < 200 && mouseY > 300 && mouseY < 400) {

    print("8");

    Ball8.white();

  }

​

  if (mouseX > 200 && mouseX < 300 && mouseY > 0 && mouseY < 100) {

    print("9");

    Ball9.white();

  } else if (mouseX > 200 && mouseX < 300 && mouseY > 100 && mouseY < 200) {

    print("10");

    Ball10.white();

  } else if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY < 300) {

    print("11");

    Ball11.white();

  } else if (mouseX > 200 && mouseX < 300 && mouseY > 300 && mouseY < 400) {

    print("12");

    Ball12.white();

  }

​

  if (mouseX > 300 && mouseX < 400 && mouseY > 0 && mouseY < 100) {

    print("13");

    Ball13.white();

  } else if (mouseX > 300 && mouseX < 400 && mouseY > 100 && mouseY < 200) {

    print("14");

    Ball14.white();

  } else if (mouseX > 300 && mouseX < 400 && mouseY > 200 && mouseY < 300) {

    print("15");

    Ball15.white();

  } else if (mouseX > 300 && mouseX < 400 && mouseY > 300 && mouseY < 400) {

    print("16");

    Ball16.white();

  }

​

}

​

​

//This block is the class for Blocks. Its called balls because I was on 4 hours of sleep.

class Ball {

  constructor(x, y, c) {

    this.x = x; // x location of square 

    this.y = y;

    this.color = c;

  }

​

  display() {

    // Display the square 

    fill(this.color);

    rect(this.x, this.y, 100, 100);

  }

​

  white() {

    this.color = 255;

    fill(this.color);

    rect(this.x, this.y, 100, 100);

  }

}