// Make each column turn red when you hover over it.

​

let columnWidth;

let rectRadius = 100

let colors = ["#11826e", "#edd92a", "#e957b2","#3161a3", "#f7583a","#95c531", "#5b37cb", "#f8943e", "#a247be"]

function setup() {

  createCanvas(800, 800);

  columnWidth = width / 4;

  canvasHeight = height / 2;

}

​

function draw() {

  background(240);

  noStroke();

​

​

​

  if (mouseX < columnWidth * 1 && mouseY < canvasHeight*1) {

    fill(colors[0])

    rect(columnWidth * 0, 0, columnWidth, height/2, rectRadius);

​

  } else if (mouseX < columnWidth * 1 && mouseY < canvasHeight*2) {

    fill(colors[1])

    rect(columnWidth * 0, height/2, columnWidth, height/2, rectRadius);

// col 2

  } else if (mouseX < columnWidth * 2 && mouseY < canvasHeight*1) {

    fill(colors[2]);

    rect(columnWidth * 1, 0, columnWidth, height/2, rectRadius);

​

  } else if (mouseX < columnWidth * 2 && mouseY < canvasHeight*2) {

    fill(colors[3])

    rect(columnWidth * 1, height/2, columnWidth, height/2, rectRadius);

    // col 3

  }else if (mouseX < columnWidth * 3 && mouseY < canvasHeight*1) {

    fill(colors[4])

    rect(columnWidth * 2, 0, columnWidth, height/2, rectRadius);

​

  } else if (mouseX < columnWidth * 3 && mouseY < canvasHeight*2) {

    fill(colors[5])

    rect(columnWidth * 2, height/2, columnWidth, height/2, rectRadius);

  // col 4

  }else if (mouseX < columnWidth * 4 && mouseY < canvasHeight *1) {

    fill(colors[6])

    rect(columnWidth * 3, 0, columnWidth, height/2, rectRadius);

​

  }else if (mouseX < columnWidth * 4 && mouseY < canvasHeight*2) {

    fill(colors[7])

    rect(columnWidth * 3, height/2, columnWidth, height/2, rectRadius);

  } 

  // col 5

  else if (mouseX < columnWidth * 5 && mouseY < canvasHeight*1) {

    fill(colors[8])

    rect(columnWidth * 4, 0, columnWidth, height/2, rectRadius);

​

  } else if (mouseX < columnWidth * 5 && mouseY < canvasHeight*2) {

    fill(colors[8])

    rect(columnWidth * 4, height/2, columnWidth, height/2, rectRadius);

  } 

}

​