Worksheet Review

Switch

let lightIsOn = false;
let mouseInZone = false;
let pmouseInZone = false;

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

function draw() {
  background(220);

  // is the mouse in the area? 
  if (mouseX > (width / 3) * 2) {
    mouseInZone = true;
  } else {
    mouseInZone = false;
  }

  // if the mouse is in the area and it was previously out of the area
  if (mouseInZone == true && pmouseInZone == false) {
    // if the light is on
    if (lightIsOn) {
      lightIsOn = false;
    } else {
      lightIsOn = true;
    }
  }

  // if the light is on make it red
  if (lightIsOn) {
    fill(255, 0, 0);
  } else {
    fill(0);
  }

  // draw it
  rect((width / 3) * 2, 0, width / 3, height);
  
  // keep track of the previous mouse
  pmouseInZone = mouseInZone;
}

https://editor.p5js.org/icm-nun/full/yD8uo8qyi

Slide

let xPos, min, max;
let mouseIsInside = false;
let buttonSize = 30;
let isDragging = false; // New flag to track dragging state

function setup() {
  createCanvas(400, 400);
  min = width / 5;
  max = (width / 5) * 4;
  xPos = min; // starting position
  stroke(255, 0, 0);
  strokeWeight(5);
}

function draw() {
  let bgCol = ((xPos - min) / (max - min)) * 255; // manual mapping
  background(bgCol);
  line(min, height / 2, max, height / 2);

  // Check if mouse is inside the ellipse
  if (dist(mouseX, mouseY, xPos, height / 2) < buttonSize / 2) {
    mouseIsInside = true;
  } else {
    mouseIsInside = false;
  }

  // Check if the mouse is pressed and inside the circle
  if (mouseIsPressed && (mouseIsInside || isDragging)) {
    isDragging = true; // Set dragging to true when mouse is pressed inside
    xPos = constrain(mouseX, min, max); // Update the position
  }

  // Draw the ellipse at the current position
  ellipse(xPos, height / 2, buttonSize);

  // When the mouse is released, stop dragging
  if (!mouseIsPressed) {
    isDragging = false;
  }
}

function mousePressed() {
  xPos = constrain(mouseX, min, max); // Update the position
}

millis()

https://editor.p5js.org/icm-nun/full/zw4N09zzO

let interval = 500;
let currentTime;
let lastTime = 0;

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

function draw() {
  background(220);
  currentTime = millis();
  if (currentTime - lastTime > interval) {
    lastTime = currentTime;
    rect(width / 2, height / 2, width / 2, height / 2);
  } 
}

https://editor.p5js.org/icm-nun/full/USN_jNBmhK

Introducing modulo %

<aside> ✏️

9%8 = 1 (9/8 = 1 remainder 1)

14%5 = 4 (14/5 = 2 remainder 4)

10%3 = 1 (10/3 = 3 remainder 1)

if (frameCount % 2 == 0) → every 2 frames

if (frameCount % 10 == 0) → every 10 frames

</aside>

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

function draw() {
  console.log(frameCount);
  if (frameCount % 2 == 0) {
    background(0);
  } else {
    background(255);
  }
}

https://editor.p5js.org/icm-nun/full/rZP7WpfAp

10 print (bonus)

Using random and conditional statements, we can create very complex patterns

let x = 0;
let y = 0;
let cellW = 25; // cell width

function setup() {
  createCanvas(250, 250);
  background(220);
  angleMode(DEGREES);
}

function draw() {
  if (random(1) > 0.5) {
    line(x, y, x + cellW, y + cellW); // draw "\\"
  } else {
    line(x + cellW, y, x, y + cellW); // draw "/"
  }
  
  x += cellW; // move to the right
  
  if (x > width) { // if it reaches the end of the canvas on the right
    x = 0; // go to the left
    y += cellW; // go to the next row
  }
}

https://editor.p5js.org/icm-nun/full/ypdE3iggP

What are different techniques for making conditionals surprising?

• Random
• Multiple layers of conditions
• Inconsistent rules