​

var brightOne1 = 0;

var brightOne2 = 0;

var brightOne3 = 0;

var brightOne4 = 0;

var brightOne5 = 0;

var brightOne6 = 0;

var brightOne7 = 0;

var brightOne8 = 0;

​

var brightTwo1 = 0;

var brightTwo2 = 0;

var brightTwo3 = 0;

var brightTwo4 = 0;

var brightTwo5 = 0;

var brightTwo6 = 0;

var brightTwo7 = 0;

var brightTwo8 = 0;

​

var brightThree1 = 0;

var brightThree2 = 0;

var brightThree3 = 0;

var brightThree4 = 0;

var brightThree5 = 0;

var brightThree6 = 0;

var brightThree7 = 0;

var brightThree8 = 0;

​

var brightFour1 = 0;

var brightFour2 = 0;

var brightFour3 = 0;

var brightFour4 = 0;

var brightFour5 = 0;

var brightFour6 = 0;

var brightFour7 = 0;

var brightFour8 = 0;

​

var brightFive1 = 0;

var brightFive2 = 0;

var brightFive3 = 0;

var brightFive4 = 0;

var brightFive5 = 0;

var brightFive6 = 0;

var brightFive7 = 0;

var brightFive8 = 0;

​

var brightSix1 = 0;

var brightSix2 = 0;

var brightSix3 = 0;

var brightSix4 = 0;

var brightSix5 = 0;

var brightSix6 = 0;

var brightSix7 = 0;

var brightSix8 = 0;

​

var brightSeven1 = 0;

var brightSeven2 = 0;

var brightSeven3 = 0;

var brightSeven4 = 0;

var brightSeven5 = 0;

var brightSeven6 = 0;

var brightSeven7 = 0;

var brightSeven8 = 0;

​

var brightEight1 = 0;

var brightEight2 = 0;

var brightEight3 = 0;

var brightEight4 = 0;

var brightEight5 = 0;

var brightEight6 = 0;

var brightEight7 = 0;

var brightEight8 = 0;

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  // background is black

   background(0);

​

  // All rectangles always fade

  brightOne1 = brightOne1 - 2;

  brightOne2 = brightOne2 - 2;  

  brightOne3 = brightOne3 - 2;

  brightOne4 = brightOne4 - 2;  

  brightOne5 = brightOne5 - 2;

  brightOne6 = brightOne6 - 2;  

  brightOne7 = brightOne7 - 2;

  brightOne8 = brightOne8 - 2; 

  brightTwo1 = brightTwo1 - 2;

  brightTwo2 = brightTwo2 - 2;  

  brightTwo3 = brightTwo3 - 2;

  brightTwo4 = brightTwo4 - 2;  

  brightTwo5 = brightTwo5 - 2;

  brightTwo6 = brightTwo6 - 2;  

  brightTwo7 = brightTwo7 - 2;

  brightTwo8 = brightTwo8 - 2;

  brightThree1 = brightThree1 - 2;

  brightThree2 = brightThree2 - 2;  

  brightThree3 = brightThree3 - 2;

  brightThree4 = brightThree4 - 2;  

  brightThree5 = brightThree5 - 2;

  brightThree6 = brightThree6 - 2;  

  brightThree7 = brightThree7 - 2;

  brightThree8 = brightThree8 - 2; 

  brightFour1 = brightFour1 - 2;

  brightFour2 = brightFour2 - 2;  

  brightFour3 = brightFour3 - 2;

  brightFour4 = brightFour4 - 2;  

  brightFour5 = brightFour5 - 2;

  brightFour6 = brightFour6 - 2;  

  brightFour7 = brightFour7 - 2;

  brightFour8 = brightFour8 - 2;

  brightFive1 = brightFive1 - 2;

  brightFive2 = brightFive2 - 2;  

  brightFive3 = brightFive3 - 2;

  brightFive4 = brightFive4 - 2;  

  brightFive5 = brightFive5 - 2;

  brightFive6 = brightFive6 - 2;  

  brightFive7 = brightFive7 - 2;

  brightFive8 = brightFive8 - 2;  

  brightSix1 = brightSix1 - 2;

  brightSix2 = brightSix2 - 2;  

  brightSix3 = brightSix3 - 2;

  brightSix4 = brightSix4 - 2;  

  brightSix5 = brightSix5 - 2;

  brightSix6 = brightSix6 - 2;  

  brightSix7 = brightSix7 - 2;

  brightSix8 = brightSix8 - 2;  

  brightSeven1 = brightSeven1 - 2;

  brightSeven2 = brightSeven2 - 2;  

  brightSeven3 = brightSeven3 - 2;

  brightSeven4 = brightSeven4 - 2;  

  brightSeven5 = brightSeven5 - 2;

  brightSeven6 = brightSeven6 - 2;  

  brightSeven7 = brightSeven7 - 2;

  brightSeven8 = brightSeven8 - 2;  

  brightEight1 = brightEight1 - 2;

  brightEight2 = brightEight2 - 2;  

  brightEight3 = brightEight3 - 2;

  brightEight4 = brightEight4 - 2;  

  brightEight5 = brightEight5 - 2;

  brightEight6 = brightEight6 - 2;  

  brightEight7 = brightEight7 - 2;

  brightEight8 = brightEight8 - 2; 

  // Fill color and draw each rectangle

  noStroke();

  fill(brightOne1);

  rect(0, 0, 50, 50);

  fill(brightOne2);

  rect(50, 0, 50, 50);

  fill(brightOne3);

  rect(100, 0, 50, 50);

  fill(brightOne4);

  rect(150, 0, 50, 50);

  fill(brightOne5);

  rect(200, 0, 50, 50);

  fill(brightOne6);

  rect(250, 0, 50, 50);

  fill(brightOne7);

  rect(300, 0, 50, 50);

  fill(brightOne8);

  rect(350, 0, 50, 50);

  fill(brightTwo1);

  rect(0, 50, 50, 50);

  fill(brightTwo2);

  rect(50, 50, 50, 50);

  fill(brightTwo3);

  rect(100, 50, 50, 50);

  fill(brightTwo4);

  rect(150, 50, 50, 50);

  fill(brightTwo5);

  rect(200, 50, 50, 50);

  fill(brightTwo6);

  rect(250, 50, 50, 50);

  fill(brightTwo7);

  rect(300, 50, 50, 50);

  fill(brightTwo8);

  rect(350, 50, 50, 50);

  fill(brightThree1);

  rect(0, 100, 50, 50);

  fill(brightThree2);

  rect(50, 100, 50, 50);

  fill(brightThree3);

  rect(100, 100, 50, 50);

  fill(brightThree4);

  rect(150, 100, 50, 50);

  fill(brightThree5);

  rect(200, 100, 50, 50);

  fill(brightThree6);

  rect(250, 100, 50, 50);

  fill(brightThree7);

  rect(300, 100, 50, 50);

  fill(brightThree8);

  rect(350, 100, 50, 50); 

  fill(brightFour1);

  rect(0, 150, 50, 50);

  fill(brightFour2);

  rect(50, 150, 50, 50);

  fill(brightFour3);

  rect(100, 150, 50, 50);

  fill(brightFour4);

  rect(150, 150, 50, 50);

  fill(brightFour5);

  rect(200, 150, 50, 50);

  fill(brightFour6);

  rect(250, 150, 50, 50);

  fill(brightFour7);

  rect(300, 150, 50, 50);

  fill(brightFour8);

  rect(350, 150, 50, 50); 

​

  fill(brightFive1);

  rect(0, 200, 50, 50);

  fill(brightFive2);

  rect(50, 200, 50, 50);

  fill(brightFive3);

  rect(100, 200, 50, 50);

  fill(brightFive4);

  rect(150, 200, 50, 50);

  fill(brightFive5);

  rect(200, 200, 50, 50);

  fill(brightFive6);

  rect(250, 200, 50, 50);

  fill(brightFive7);

  rect(300, 200, 50, 50);

  fill(brightFive8);

  rect(350, 200, 50, 50);  

  fill(brightSix1);

  rect(0, 250, 50, 50);

  fill(brightSix2);

  rect(50, 250, 50, 50);

  fill(brightSix3);

  rect(100, 250, 50, 50);

  fill(brightSix4);

  rect(150, 250, 50, 50);

  fill(brightSix5);

  rect(200, 250, 50, 50);

  fill(brightSix6);

  rect(250, 250, 50, 50);

  fill(brightSix7);

  rect(300, 250, 50, 50);

  fill(brightSix8);

  rect(350, 250, 50, 50);  

  fill(brightSeven1);

  rect(0, 300, 50, 50);

  fill(brightSeven2);

  rect(50, 300, 50, 50);

  fill(brightSeven3);

  rect(100, 300, 50, 50);

  fill(brightSeven4);

  rect(150, 300, 50, 50);

  fill(brightSeven5);

  rect(200, 300, 50, 50);

  fill(brightSeven6);

  rect(250, 300, 50, 50);

  fill(brightSeven7);

  rect(300, 300, 50, 50);

  fill(brightSeven8);

  rect(350, 300, 50, 50);  

  fill(brightEight1);

  rect(0, 350, 50, 50);

  fill(brightEight2);

  rect(50, 350, 50, 50);

  fill(brightEight3);

  rect(100, 350, 50, 50);

  fill(brightEight4);

  rect(150, 350, 50, 50);

  fill(brightEight5);

  rect(200, 350, 50, 50);

  fill(brightEight6);

  rect(250, 350, 50, 50);

  fill(brightEight7);

  rect(300, 350, 50, 50);

  fill(brightEight8);

  rect(350, 350, 50, 50); 

​

  // depending on the mouse location, a different rectangle is set to brightness 255

  //First Row

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

    brightOne1 = 255;

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

    brightOne2 = 255;

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

    brightOne3 = 255;

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

    brightOne4 = 255;

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

    brightOne5 = 255;

  } else if (mouseX > 250 && mouseX < 300 && mouseY > 0 && mouseY < 50) {

    brightOne6 = 255;

  } else if (mouseX > 300 && mouseX < 350 && mouseY > 0 && mouseY < 50) {

    brightOne7 = 255;

  } else if (mouseX > 350 && mouseX < 400 && mouseY > 0 && mouseY < 50) {

    brightOne8 = 255;

  //Second Row

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

    brightTwo1 = 255;

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

    brightTwo2 = 255;

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

    brightTwo3 = 255;

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

    brightTwo4 = 255;

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

    brightTwo5 = 255;

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

    brightTwo6 = 255;

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

    brightTwo7 = 255;

  } else if (mouseX > 350 && mouseX < 400 && mouseY > 50 && mouseY < 100) {

    brightTwo8 = 255;

​

  //Third Row 

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

    brightThree1 = 255;

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

    brightThree2 = 255;

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

    brightThree3 = 255;

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

    brightThree4 = 255;

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

    brightThree5 = 255;

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

    brightThree6 = 255;

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

    brightThree7 = 255;

  } else if (mouseX > 350 && mouseY < 400 && mouseY > 100 && mouseY < 150) {

    brightThree8 = 255;

    //Fourth Row

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

    brightFour1 = 255;

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

    brightFour2 = 255;

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

    brightFour3 = 255;

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

    brightFour4 = 255;

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

    brightFour5 = 255;

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

    brightFour6 = 255;

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

    brightFour7 = 255;  

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

    brightFour8 = 255;

   //Fifth Row

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

    brightFive1 = 255;

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

    brightFive2 = 255;

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

    brightFive3 = 255;

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

    brightFive4 = 255;

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

    brightFive5 = 255;

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

    brightFive6 = 255;

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

    brightFive7 = 255;

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

    brightFive8 = 255;

    //Sixth Row 

  } else if (mouseX > 0 && mouseX < 50 && mouseY > 250 && mouseY < 300) {

    brightSix1 = 255;

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

    brightSix2 = 255;

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

    brightSix3 = 255;

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

    brightSix4 = 255;

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

    brightSix5 = 255;

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

    brightSix6 = 255;

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

    brightSix7 = 255;

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

    brightSix8 = 255;

    //Seventh Row

    } else if (mouseX > 0 && mouseX < 50 && mouseY > 300 && mouseY < 350) {

    brightSeven1 = 255;

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

    brightSeven2 = 255;

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

    brightSeven3 = 255;

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

    brightSeven4 = 255;

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

    brightSeven5 = 255;

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

    brightSeven6 = 255;

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

    brightSeven7 = 255;

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

    brightSeven8 = 255;

    //Eight Row

  } else if (mouseX > 0 && mouseX < 50 && mouseY > 350 && mouseY < 400) {

    brightEight1 = 255;

  } else if (mouseX > 50 && mouseX < 100 && mouseY > 350 && mouseY < 400) {

    brightEight2 = 255;

  } else if (mouseX > 100 && mouseX < 150 && mouseY > 350 && mouseY < 400) {

    brightEight3 = 255;

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

    brightEight4 = 255;

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

    brightEight5 = 255;  

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

    brightEight6 = 255;

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

    brightEight7 = 255;

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

    brightEight8 = 255;   

}}