​

//rect 1

let hue1 = 120;

let s1 = 60;

let l1 = 65;

​

//rect 2 

let hue2 = 0;

let s2 = 100;

let l2 = 47;

​

//rect 3 

let hue3 = 211;

let s3 = 100;

let l3 = 60;

​

//rect 4 

let hue4 = 34;

let s4 = 100;

let l4 = 57;

​

//text variables

let text1 = "click"

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

   colorMode(HSL, 360, 100, 100, 100);

}

​

function draw() {

  background(220);

  textSize(30);  

  textAlign(CENTER);

​

//Break Into Quarters 

//Rect 1 

fill(hue1, s1, l1)// green

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

  //text 1

  fill(255);

  text(text1, width*.25, height*.25);

​

  //Rect 2

fill(hue2, s2, l2)// red

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

  //text 2

  fill(255);

  text("now", width*.25, height*.75);

​

//Rect 3 

fill(hue3, s3, l3) //blue

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

    //text 3

  fill(255);

  text("here", width*.75, height*.25);

​

//Rect 4

fill(hue4, s4, l4) //orange 

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

  //text

  fill(255);

  text("please", width*.75, height*.75);

}

// click to change color 

//click rect 4 to change rect1

function mousePressed() {

  if (mouseX > width / 2 && mouseY > height / 2 && hue1 == 120) {

    hue1 = 311;

    s1 = 75;

    l1 = 69;

    text1 = "haha";

  } else if (mouseX > width / 2 && mouseY > height / 2 && hue1 == 311) {

    hue1 = 120;

    s1 = 60;

    l1 = 65;

    text1 = "click";

  }  else if (mouseX < width / 2 && mouseY < height / 2 && hue4 == 34) {

    hue4 = 280;

    s4 = 100;

    l4 = 57;

  } else if (mouseX < width / 2 && mouseY < height / 2 && hue4 == 280) {

    hue4 = 34;

    s4 = 100;

    l4 = 57;

  } else   if (mouseX < width / 2 && mouseY > height / 2 && hue3 == 211) {

    hue3 = 204;

    s3 = 5;

    l3 = 51;

  } else if (mouseX < width / 2 && mouseY > height / 2 && hue3 == 204) {

    hue3 = 211;

    s3 = 100;

    l3 = 60;

  } else  if (mouseX > width / 2 && mouseY < height / 2 && hue2 == 0) {

    hue2 = 57;

    s2 = 100;

    l2 = 52;

  } else if (mouseX > width / 2 && mouseY < height / 2 && hue2 == 57) {

    hue2 = 0;

    s2 = 100;

    l2 = 47;

  }

}

​