p5.js Web Editor | Column Red=20

xxxxxxxxxx
//no loop
​
let w, h, y;
​
function setup() {
  createCanvas(500, 500);
  h = height;
  w = width / 20;
  y = 0;
}
​
function draw() {
  background("white");
​
  if (mouseX > 0 && mouseX <= w) {
    fill("red");
  } else {
    fill("white");
  }
  rect(0, y, w, h);
​
  if (mouseX > w && mouseX <= w * 2) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w, y, w, h);
​
  if (mouseX > w * 2 && mouseX <= w * 3) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 2, y, w, h);
​
  if (mouseX > w * 3 && mouseX <= w * 4) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 3, y, w, h);
​
  if (mouseX > w * 4 && mouseX <= w * 5) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 4, y, w, h);
​
  if (mouseX > w * 5 && mouseX <= w * 6) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 5, y, w, h);
​
  if (mouseX > w * 6 && mouseX <= w * 7) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 6, y, w, h);
​
  if (mouseX > w * 7 && mouseX <= w * 8) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 7, y, w, h);
​
  if (mouseX > w * 8 && mouseX <= w * 9) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 8, y, w, h);
​
  if (mouseX > w * 9 && mouseX <= w * 10) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 9, y, w, h);
​
  if (mouseX > w * 10 && mouseX <= w * 11) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 10, y, w, h);
​
  if (mouseX > w * 11 && mouseX <= w * 12) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 11, y, w, h);
​
  if (mouseX > w * 12 && mouseX <= w * 13) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 12, y, w, h);
​
  if (mouseX > w * 13 && mouseX <= w * 14) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 13, y, w, h);
​
  if (mouseX > w * 14 && mouseX <= w * 15) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 14, y, w, h);
​
  if (mouseX > w * 15 && mouseX <= w * 16) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 15, y, w, h);
​
  if (mouseX > w * 16 && mouseX <= w * 17) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 16, y, w, h);
​
  if (mouseX > w * 17 && mouseX <= w * 18) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 17, y, w, h);
​
  if (mouseX > w * 18 && mouseX <= w * 19) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 18, y, w, h);
​
  if (mouseX > w * 19 && mouseX <= w * 20) {
    fill("red");
  } else {
    fill("white");
  }
  rect(w * 19, y, w, h);
}
​
Cookies

Sketch Files

Console

Preview
