p5.js Web Editor | Week 4 - Worksheet 2d copy

xxxxxxxxxx
function setup() {
  createCanvas(400, 400);
}
​
function draw() {
  background(220);
  stroke(255);
  rectMode(CORNER);
​
  //Without a loop
  if (mouseX > 0 && mouseX < 20 && mouseY > 0 && mouseY < height / 3) {
    fill(255);
    rect(0, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(0, 0, width / 20, height / 3);
  }
  if (mouseX > 20 && mouseX < 40 && mouseY > 0 && mouseY < height / 3) {
    fill(245);
    rect(20, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(20, 0, width / 20, height / 3);
  }
  if (mouseX > 40 && mouseX < 60 && mouseY > 0 && mouseY < height / 3) {
    fill(234);
    rect(40, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(40, 0, width / 20, height / 3);
  }
  if (mouseX > 60 && mouseX < 80 && mouseY > 0 && mouseY < height / 3) {
    fill(225);
    rect(60, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(60, 0, width / 20, height / 3);
  }
  if (mouseX > 80 && mouseX < 100 && mouseY > 0 && mouseY < height / 3) {
    fill(215);
    rect(80, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(80, 0, width / 20, height / 3);
  }
  if (mouseX > 100 && mouseX < 120 && mouseY > 0 && mouseY < height / 3) {
    fill(205);
    rect(100, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(100, 0, width / 20, height / 3);
  }
  if (mouseX > 120 && mouseX < 140 && mouseY > 0 && mouseY < height / 3) {
    fill(195);
    rect(120, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(120, 0, width / 20, height / 3);
  }
  if (mouseX > 140 && mouseX < 160 && mouseY > 0 && mouseY < height / 3) {
    fill(185);
    rect(140, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(140, 0, width / 20, height / 3);
  }
  if (mouseX > 160 && mouseX < 180 && mouseY > 0 && mouseY < height / 3) {
    fill(175);
    rect(160, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(160, 0, width / 20, height / 3);
  }
  if (mouseX > 180 && mouseX < 200 && mouseY > 0 && mouseY < height / 3) {
    fill(165);
    rect(180, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(180, 0, width / 20, height / 3);
  }
  if (mouseX > 200 && mouseX < 220 && mouseY > 0 && mouseY < height / 3) {
    fill(155);
    rect(200, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(200, 0, width / 20, height / 3);
  }
  if (mouseX > 220 && mouseX < 240 && mouseY > 0 && mouseY < height / 3) {
    fill(145);
    rect(220, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(220, 0, width / 20, height / 3);
  }
  if (mouseX > 240 && mouseX < 260 && mouseY > 0 && mouseY < height / 3) {
    fill(135);
    rect(240, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(240, 0, width / 20, height / 3);
  }
  if (mouseX > 260 && mouseX < 280 && mouseY > 0 && mouseY < height / 3) {
    fill(125);
    rect(260, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(260, 0, width / 20, height / 3);
  }
  if (mouseX > 280 && mouseX < 300 && mouseY > 0 && mouseY < height / 3) {
    fill(115);
    rect(280, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(280, 0, width / 20, height / 3);
  }
  if (mouseX > 300 && mouseX < 320 && mouseY > 0 && mouseY < height / 3) {
    fill(105);
    rect(300, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(300, 0, width / 20, height / 3);
  }
  if (mouseX > 320 && mouseX < 340 && mouseY > 0 && mouseY < height / 3) {
    fill(95);
    rect(320, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(320, 0, width / 20, height / 3);
  }
  if (mouseX > 340 && mouseX < 360 && mouseY > 0 && mouseY < height / 3) {
    fill(85);
    rect(340, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(340, 0, width / 20, height / 3);
  }
  if (mouseX > 360 && mouseX < 380 && mouseY > 0 && mouseY < height / 3) {
    fill(75);
    rect(360, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(360, 0, width / 20, height / 3);
  }
  if (mouseX > 380 && mouseX < 400 && mouseY > 0 && mouseY < height / 3) {
    fill(65);
    rect(380, 0, width / 20, height / 3);
  } else {
    fill(0);
    rect(380, 0, width / 20, height / 3);
  }
​
  //With a while loop
  nono = 10; //color fill
  woohoo = 0; //x axis of rectangle
  while (woohoo < width) {
    if (
      mouseX > woohoo &&
      mouseX < woohoo + width / 20 &&
      mouseY > height / 3 &&
      mouseY < (height / 3) * 2
    ) {
      fill(200, nono, 80);
      rect(woohoo, height / 3, width / 20, height / 3);
    } else {
      fill(0);
      rect(woohoo, height / 3, width / 20, height / 3);
    }
    woohoo = woohoo + width / 20;
    nono = nono +20;
  }
​
  //With a for loop
  ohwow = 20; //colorfill
  for (woohoo = 0; woohoo < width; woohoo = woohoo + width / 20) {
    if (
      mouseX > woohoo &&
      mouseX < woohoo + width / 20 &&
      mouseY > (height / 3) * 2 &&
      mouseY < height
    ) {
      fill(ohwow, 80, ohwow);
      rect(woohoo, 2 * (height / 3), width / 20, height / 3);
    } else {
      fill(0);
      rect(woohoo, 2 * (height / 3), width / 20, height / 3);
    }
      ohwow = ohwow + 35;
  }
}
​
Cookies

Sketch Files

Console

Preview
