p5js Unit 2

LA 1.1 Conditionals and If Statements

Als de muis aan de linker kant van het scherm is, veranderd de kleur van de cirkel van roze naar paars. Als de muis aan de onderkant van het scherm is veranderd de diameter van de cirkel van 60 naar 30

https://editor.p5js.org/mereBuzzard6/sketches/ff42nyy1r

function setup() {
  createCanvas(600, 200);
}

function draw() {
  var x = 60;
  fill(115, 67, 148);
  background(220);
  if (mouseY > height / 2) {
    x = 30;
  }

  if (mouseX > width / 2) {
    fill(255, 0, 98);
  }
  ellipse(width / 2, height / 2, x, x);
}

---

LA 1.2 Conditionals and If, Else If, Else Statements

Exercise 1: Use If and Else

https://editor.p5js.org/mereBuzzard6/sketches/mi5UrDERh

function setup() {
  createCanvas(400, 400);
}

function draw() {
  rectMode(CENTER)
  background(220);
  fill(175, 35, 235)
  
if (mouseX > 200) {
    ellipse(width / 2, height / 2, 40, 40);
  } else {
    rect(width / 2, height / 2, 40, 40);
  }
}

---

Exercise 2: Debug If Else

https://editor.p5js.org/mereBuzzard6/sketches/OiM09XUsa

function setup() {
  createCanvas(600, 120);
}

function draw() {
  background(0);
  fill(58, 220, 252)
  
  if (mouseX > 500) { 
    ellipse(550, 60, 20, 20); 
  } else if (mouseX > 400) {
    ellipse(450, 60, 20, 20); 
  } else if (mouseX > 300) {
    ellipse(350, 60, 20, 20); 
  } else if (mouseX > 200) {
    ellipse(250, 60, 20, 20); 
  } else if (mouseX > 100) {
    ellipse(150, 60, 20, 20); 
  } else {
    ellipse(50, 60, 20, 20); 
  }

  
}

Exercise 3: Make a traffic light

https://editor.p5js.org/mereBuzzard6/sketches/wZZyZUdgI

function setup() {
  createCanvas(400, 400);
}

function draw() {
  var redLight = (255, 255, 255)
  var yellowLight = (255, 255, 255)
  var greenLight = (255, 255, 255)
  background(220);
  
  rectMode(CENTER)
  fill(112, 112, 112)
  
  rect(width/2, height/2, 50, 100)
  
  if (mouseY > (height / 2 + 20)) { 
        greenLight = 'green' 
    }
    else if (mouseY > height / 2 - 20){ 
        yellowLight = 'yellow'; 
    }
    else {
        redLight = 'red';
    }

    fill(redLight);
    ellipse(width / 2, height / 2 - 25, 20, 20);
    fill(yellowLight);
    ellipse(width / 2, height / 2, 20, 20);
    fill(greenLight);
    ellipse(width / 2, height / 2 + 25, 20, 20);
}