Home / 🗓 Schedule / 🛠 Examples / 💫 Guides / 💎 Resources

🤔 Conditionals {

✨ Conditionals are the key way we can make a program do different things based on the current situation! ✨

Learning objectives

• Understanding what “conditions” are in a program and how to write them out with if-statements
• Increasing our expressive power with logic operators

Template

• template-p5-project.zip

Modules

Vimeo playlist for Conditionals

(Inline links below are for YuJa)

• Introducing conditionals
  • Watch the video
  • Read the Introducing conditionals notes
• Conditionals in practice 1: Creature loves mouse
  • Download the Creature Loves Mouse Project
  • Watch the video
  • Read the Conditionals in practice 1: Creature loves mouse notes
• Booleans
  • Download the Lightswitch and Growhole projects
  • Watch the video
  • Read the Booleans notes
• Introducing logic operators
  • Watch the video
  • Read the Introducing logic operators notes
• Conditionals in practice 2: Creature loves massage
  • Download the Creature Loves Massage Project
  • Watch the video
  • Read the Conditionals in practice 2: Creature loves massage notes
• Conditionals in practice 3: Death by boredom
  • Download the Death By Boredom Project
  • Watch the video
  • Read the Conditionals in practice 3: Death by boredom notes
• Debugging conditionals
  • Download the Debugging Conditionals Project
  • Watch the video
  • Read the Debugging Guide

Extra! Extra!

• Images
  • Read the Loading and displaying images notes
  • 📖 You can also read the documentation for loadImage() and image() 📖

Examples

• Overlapping Circles
• Overlapping Rectangles
• random() and probability (Loot drops!)
• Screen Wrap
• Basic States

🔥 Hot tip: Text

We can store text in variables (or object properties) by using quotation marks:

let myName = "Gladiolus";

We can display text by using p5’s text() function along with some text-styling functions:

let myName = "Gladiolus";

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

function draw() {
    background(0);
    
    push();
    // Set text colour with fill
    fill(255, 0, 0);
    // Set text size with textSize()
    textSize(64);
    // Set text align with textAlign()
    textAlign(CENTER, CENTER);
    // Set text styling with textStyle()
    textStyle(BOLD);
    // We can display text by just putting it directly in quotes
    text("Hi, my name is:", 200, 180);
    // We can display text inside a variable
    text(myName, 200, 220)
    pop();
}

📖 Read the Typography documentation in the reference for more information. 📖

}