xxxxxxxxxx
62
// Divide the canvas into columns.
// 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);
}
}