Decision Making

Workshop 3: Introduction to Conditionals in p5.js

Session 1

SESSION 1

Introduction to conditionals

Session 1

  1. What are Conditionals?
  2. What are Booleans?
  3. Examples of Conditionals in p5.js
  4. Activity Sketch
  5. Wrap-Up

Session 2

  1. Quick review & sketch to refresh
  2. Introduction to final deliverables
  3. Code walkthrough
  4. Showcase
  5. Wrap-Up

conditionals

What are conditionals?

 

Conditionals are like making choices in everyday life. They let your program:

(1) ask a question and then,

(2) do something different depending on the answer.

 

Example: If it's raining, take an umbrella. Else, wear sunglasses.

 

In coding, this is how we make our sketches respond in different ways.

conditionals

if(condition)

checks to see if condition is true

condition

condition

happens

condition does NOT happen

{this happens}

rest of code

conditionals

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

function draw() {
  if (condition) {
    //this happens when the condition is true
  } else {
    //this is the fallback code
  }
}

Setting up one simple conditional

conditionals

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

function draw() {
  if (condition) {
    //this happens when the condition is true
  } else if (condition2) {
    //if the first condition is not met, and the second condition is true, then code inside here happens
  } else {
    //else this is the fallback code
  }
}

Setting up a several simple conditionals

conditionals

Why do we use conditionals?

 

Conditionals turn a sketch from static into interactive.

 

The sketch can respond to different situations and bring flexibility and interactivity. It allows code to react to the users, data or states which make our creative work feel more alive.

 

Examples are like changing color when your mouse moves, or switching shapes when a key is pressed.

examples of conditionals in p5.js

Demo A

Change the background color if the mouse is on one side of the screen.

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

function draw() {
  if (mouseX < width / 2) {
    background(60, 120, 255);
  } else {
    background(255, 220, 60);
  }
}

Operators we can use:

==

!=

<

>

<=

>=

 

&&

||

!

equal to

not equal to

less than

greater than

less than or equal to

greater than or equal to

 

AND

OR

NOT (flips true to false, and vice versa)

10 mins

Booleans

What are booleans?

 

Booleans are a special type of value that can only be true or false. Think of them as tiny on/off switches that power decisions in your code. 

 

Example: Is my mouse pressed? True or False?

 

Booleans are the answers that conditionals use to decide what happens.

Booleans

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(255);

  if (keyIsPressed) {
    console.log("Key is pressed?", keyIsPressed, "You Pressed:", key);
  }
}

Checking the value of boolean variables

examples of conditionals in p5.js

Demo B

Show a different shape when using Boolean variables

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

function draw() {
  background(240);
  fill(0);
  noStroke();
  if (keyIsPressed && key === "w") {
    //if conditions is met, this code in the curly braces will happen
    rect(width / 2, height / 2, 200);
  } else {
    //default mode. if the condition is not met in the 'if', then this will happen
    fill(100);
    ellipse(width / 2, height / 2, 100);
  }
}

keyIsPressed

A built-in Boolean variable in p5.js. It is true whenever any key on the keyboard is being held down, and false when no key is pressed.

key === "w"

A condition that checks if the specific key being pressed is the letter w. It only becomes true if the w key is pressed.

mouseIsPressed

True while any mouse button is being held down

A built-in Boolean variable in p5.js. True while any mouse button is being held down

10 mins

examples of conditionals in p5.js

Demo C

Change the size of a shape using event functions

let size = 100;

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

function draw() {
  background(240);
  fill(0);
  noStroke();
  rect(width / 2, height / 2, size);
}

function keyPressed() {
  size = 200;
}

function keyReleased(){
  size = 100;
}

keyPressed()

Runs Once at the exact moment a key is pressed. It is NOT a variable but a function.

mousePressed()

Runs the mouse button is pressed

True while any mouse button is being held down

10 mins

keyReleased()

Runs once when a key is released

examples of conditionals in p5.js

Demo D

Using switch and case

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

function draw() {
  if (mouseIsPressed) {
    switch (key) {
      //d for draw
      case "d":
        fill(0, 120, 255, 150);
        noStroke();
        ellipse(mouseX, mouseY, 20);
        break;
      //e for erase
      case "e":
        fill(255);
        noStroke();
        ellipse(mouseX, mouseY, 30);
        break;
      default:
        break;
    }
    console.log(key);
  }
}

switch(key)

A core JavaScript feature that p5.js uses (like if, else, for loops). A switch() statement is another way to write conditionals.

10 mins

key

A built-in variable, storing the most recently pressed keyboard key as a string, like "a", "b", "1", etc. 

case

Part of Javascript. Runs the code under each case if the case defined matches the (key).

Exercise

Logic Playground

 

This sketch will let you change brushes, colors, and modes using keys and conditionals.

 

Try experimenting, break things, and see how small changes in rules affect the outcome.

 

The goal is to practice and have fun, not to make something perfect.

40 mins

Starter Code

click for link

Wrap-up

What did we learn today?

  • Conditionals let your program make choices

 

  • Booleans are the true/false answers that drive these choices

 

  • Conditionals make your sketches interactive by responding to inputs

SESSION 2

Introduction to conditionals

Session 1

  1. What are Conditionals?
  2. What are Booleans?
  3. Examples of Conditionals in p5.js
  4. Activity Sketch
  5. Wrap-Up

Session 2

  1. Quick review & sketch to refresh
  2. Introduction to final deliverables
  3. Code walkthrough
  4. Showcase
  5. Wrap-Up

quick review

Let's revisit last session.

 

  • Conditionals let your sketch make choices.
  • Booleans are true/false switches that power those choices.
  • if, else if, else, and switch give your sketch different paths to follow.

 

We’ll warm up with a small recap sketch to refresh your memory and get coding again.

 

Afterwards, we will look at some work for inspiration on how artists use conditionals!

TeamLab

JF x Ben Heim

Sougwen Chung

PLINK!

Patatap

Loop Waveform Visualizer

MUSIC VISUALIZER

Examples from previous years

QUICK REVIEW

Event/Variable When it Works What it Means Example use
keyIsDown() When the key is being held down (checked inside draw()) "Is this key still pressed right now? Grow/shrink a circle while + or – is held
keyPressed() Runs once at the moment the key is pressed "A key was just pressed!" Switch to a new brush mode when 1 is pressed
keyReleased() Runs once at the moment a key is released "A key was just let go!" Reset a value back to normal when a key is released
mousePressed() Runs once the moment the mouse button is pressed "The mouse was just clicked!" Change color or start a new drawing stroke
mouseReleased() Runs once the moment the mouse button is reeased "The mouse button was just let go!" Reset values or stop drawing when you release

QUICK REVIEW

Adjust the code to your own desire.

 

This sketch changes between two different modes depending on whether the mouse is pressed.

 

When the mouse is pressed → the background turns light, the opacity lowers, and random red circles appear across the canvas.

 

When the mouse is not pressed → the background turns dark, and white ellipses rotate around the center, creating a glowing, animated pattern.

 

10 mins

c = 255;
o = 100;

function setup() {
  createCanvas(600, 600);
  textAlign(CENTER);
  textSize(50);
}

function draw() {
  background(c, o);

  if (mouseIsPressed === true) {
    c = 255;
    o = 5;
    fill(255, 0, 0, 50);
    noStroke();
    ellipse(random(0, 600), random(0, 600), random(10, 100));
  } else {
    c = 0;
    o = 50;
    fill(255);
    translate(300, 300);

    push();
    rotate(frameCount * 0.1);
    fill(255, 10);
    noStroke();
    ellipse(100, 100, random(10, 150));
    ellipse(0, 100, random(10, 150));
    ellipse(100, 0, random(10, 150));
    pop();
  }
}

function keyPressed() {
  if (key === "s") {
    saveCanvas();
  }
}

QUICK REVIEW

Adjust the code to your own desire.

 

This sketch shows how we can use conditionals to control shapes with the keyboard:

  • Press + or - to grow and shrink the circle.

  • Hold down a to make the circle big (300), and release to reset it back to 50.

  • Press 1 to change the brush color to red.

  • Press s to save the canvas as an image.

  • By using keyPressed(), keyReleased(), and keyIsDown(), we can make shapes respond differently when keys are pressed, held, or released.

10 mins

let diameter = 50;
let col = 255;

function setup() {
  createCanvas(800, 800);

  // draw background once in setup
  background(0);
}

function draw() {
  // press +
  if (keyIsDown(187)) {
    diameter += 1;
  }

  // press -
  if (keyIsDown(189)) {
    diameter -= 1;
  }

  //low opacity fill
  fill(col, 1);
  noStroke();
  ellipse(mouseX, mouseY, diameter);
}

function keyPressed() {
  if (key === "s") {
    saveCanvas();
  }

  if (key === "a") {
    diameter = 300;
  }
  
  if (key === "1"){
    col = color(255,0,0, 1);
  }
}

function keyReleased() {
  if (key === "a") {
    diameter = 50;
  }
  
  col = 255;
}

QUICK REVIEW

Adjust the code to your own desire.

 

This sketch uses switch(key) to make the ellipse behave differently depending on which number key you press.

Press 1 → the circle grows slowly in white.

Press 2 → the circle grows faster with a soft red color.

Press 3 → the background fades with trails, and the circle pulses in and out using a sine wave for smooth animation.

Press Q → tall blue rectangles with random widths are drawn; releasing Q clears and resets them.

Press S → saves the canvas as an image.

10 mins

let sz = 10;
let rectW = 0;

function setup() {
  createCanvas(800, 800);

  // draw background once in setup
  background(0);
}

function draw() {

  noStroke();
  
  if (keyIsPressed) {
    switch (key) {
      case "1":
        fill(255);
        sz = sz + 3;
        break;
      case "2":
        fill(255, 0, 0, 10);
        sz = sz + 10;
        break;
      case "3":
        background(0,10);
        fill(0, 0, 100,10);
        sz = sin(frameCount * 0.05) * 800;
        break;
      default:
        sz = 0;
        break;
    }
  }

  ellipse(400, 400, sz);
  rect(0, 0, rectW, 800);
}

function keyPressed() {
  if (key === "s") {
    saveCanvas();
  }

  if (key === "q") {
    background(0, 10);
    fill(0, 0, random(100, 255));
    rectW += random(0, 800);
  }
}

function keyReleased() {
  if (key === "q") {
    background(0, 50);

    rectW = 0;
  }
}

NEXT

What is due for today?

 

The goal for today is to make a music visualizer. It will respond to keyboard and mouse inputs to change visuals based on different conditions. 

 

You will combine everything we've covered: conditionals, Booleans and user interaction.

 

This is your main deliverable for Workshop 3.

DELIVERABLES

FInal Deliverables

What is due for today?

 

Make a sketch with:

  • One condition/state when mouse is being pressed.
  • Different conditions/states for keys 1, 2 and 3.
  • Visually appealing states that respond well to the music chosen
  • Able to be played live with the music.

 

Export a 15-20 second clip for your digital portfolio and upload it here.

FInal Deliverables

Details

  • 15-20 second video clip of visuals responding to music (.mp4 only)
  • Maximum 40 MB per file.
  • Use only p5.js to create visuals
  • You may use video editing softwares to edit your final video.
  • No text
  • Do not use copyrighted music. Use free-to-use music from sites like this.
  • To compress file size and convert file types, follow steps from this column of slides.

FInal Deliverables

Today's schedule

 

10:30am - 12:15pm

Making, troubleshooting, consultations
Exporting, compressing, converting

Preparing for class showcase
 

12:15pm - 12:30pm

Class showcase. Let's walk around and test out the interactivity of each other's sketches!

A FEW TIPS

 

Start small. Start with one base condition, and build up from there. 

 

Make sure that you are challenging yourself and infusing your own aesthetic choices in your sketches. Be experimental, explore, and have fun with it!

Load a sound

Combining sound with visual changes

 

Press the spacebar → a sound plays, the circle turns red, and it grows larger.

Release the spacebar → the circle goes back to black and shrinks to its normal size.

 

This shows how event-driven conditionals (keyPressed and keyReleased) can link keyboard actions to both audio and visual feedback, making sketches more interactive and immersive.

let mySound;
let sz = 200;
let col = 0;

function preload() {
  mySound = loadSound("/assets/notified.mp3");
}

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

function draw() {
  background(220,10);
  noStroke();
  
  fill(col);
  ellipse(200, 200, sz);
}

function keyPressed() {
  //if spacebar is pressed
  if (key === " ") {
    mySound.play();
    col = color(255, 0, 0, 10);
    sz = 400;
  }
}

function keyReleased() {
  if (key === " ") {
    col = 0;
    sz = 200;
  }
}

DIGITAL PORTFOLIO

Images (process and experimentations)

workshop-3_process-1.jpg

workshop-3_process-2.jpg

workshop-3_process-3.jpg

 

Images (final)

workshop-3_final-1.jpg

workshop-3_final-2.jpg

workshop-3_final-3.jpg

 

Video

workshop-3_decision-making.mp4

2526-cid-workshop3

By Jo Ho

2526-cid-workshop3

  • 215

More from Jo Ho