THU | Control Flow & Conditional Statements

Week 02 | Control Flow | Conditional Statements #

Inspiration #

Zach Liebermann

p5js: mouseIsPressed and keyIsPressed #

There are two new system variables built into p5js that we are going to need to use this week:

  • mouseIsPressed
  • keyIsPressed

Conditional Statements #

A very large part of your code will depend on being able to set rules on when certain pieces of your code will run. That is where conditionals come into play.

Comparison Operators #

When setting up your conditions for if statements, you need to compare values in different ways. These are the different comparison operators that we are going to need:

Do not mix these with the arrow function => which does something very different. We are nowhere near the stage where we would actually need to use or even understand the arrow function. For now, just don’t mix it up with the comparison operators above.

if #

if statement flowchart

A very common structure in programming is the “if this then that” structure. You ask the code if some expression is true, if it is, then we execute a specific block of code.

if (condition) {
  // do something

The code inside the curly brackets is the block of code that runs if the condition evaluates to true. Or in JavaScript, I should say when the condition is truthy.

For example, you could ask if the x position of the mouse is less or greater than a certain value, or you could check if a specific key on the keyboard is pressed, or you could connect a light sensor to your code and trigger a sound file to play when the light level goes below a certain level.

A simple way to test how if statements work is to use the mouse. Just like mouseX and mouseY, mouseIsPressed is a system variable in p5js. It stores the information if the mouse button is pressed or not. The value is a boolean value, so it is either true or false.

The code below will simply print out a message in the console if the mouse button is pressed. If you you put this code inside your draw() function, the message will be printed as long as you hold down the button.

if (mouseIsPressed == true) {
  console.log("mouse is pressed!");

Example #01 | Drawing when mouse is pressed #

The simple drawing program we made during the last class can be extended by using mouseIsPressed and if.

if/else #

if and else statement flowchart

In many cases, just using if is enough, but you will soon run into situations where it is also necessary to have two different states in your program. That is where else comes in very handy. Use else to specify a block of code to be executed if the condition in the previous if is false.

For example, do two different things depending on if the mouse button is pressed or not.

Or check which side of the screen the mouse cursor is on.

Example #02 | Dividing the canvas in half #

This example continues on the previous one with the following additions:

  • The size of the brush changes depending on which side of the canvas we draw on
  • We use keyIsPressed to clear the drawing. You can press any key.
  • We add some randomness to the color of the brush to make it a bit more interesting.
let circleSize = 60;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(130, 80, 130);

function draw() {
  if (keyIsPressed == true) {
    background(130, 80, 130);
  // check which side of the cavas the mouse is on
  if (mouseX < width / 2) {
    circleSize = 80;
  } else {
    circleSize = 20;

  if (mouseIsPressed == true) {
    fill(random(10, 100));
    circle(mouseX, mouseY, circleSize);
  text("click and drag to draw\npress space to clear",20,50);

if/else if/else #

If you need to have three or more options, you can use the else if.

if, else if, and else statement flowchart

if (mouseX < width/4) {
  console.log("left side: zone one");
}else if(mouseX < width/2){
  console.log("left side: zone two");
  console.log("right side");

This structure can get a litlle bit confusing. Especially, when you are just starting to work with code. I would recommend using separate if statements for now instead of the else if.

Example #

Coming soon….

map() #

Another very useful function that we are going to need all the time is the map() function. It allows you to convert values from one range to another. For example, if you would like to have the mouseX control a color value and you would want to use the full width of your canvas to have an effect on the value.

Resources #

To learn more about this topic, go through the following links: