Decision

Making

Workshop Intro

True or false?

Programming the computer to make decisions based on a series of conditions

Dark outside?

True

False

START

Simple decision making

Dark outside?

True

False

Dark mode

Light Mode

ACTION

DECISION

CONDITION

START

END

Simple decision making

Dark outside?

True

False

Dark mode

Light Mode

ACTION

DECISION

CONDITION

START

END

Simple decision making

Is key '1' pressed?

Is key '2' pressed?

Is key '3' pressed?

Type out '1'

START

END

Type out '2'

Type out '3'

Multiple decisions making

CONDITION 1

CONDITION 2

CONDITION 3

ACTION 1

ACTION 2

ACTION 3

if (condition 1 is true) {

then this result happens

}

else

{

'normal' state happens }

Code example

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

function draw() {
  background(220);
  line(200,0, 200, 400);
  line(0,200,400,200);
  
  if (mouseX<200 & mouseY<200) {
    textAlign(CENTER);
    text('1', 100, 100);
  }
  
  if (mouseX>200 & mouseY<200) {
    textAlign(CENTER);
    text('2', 300, 100);
  }
  
  if (mouseX>200 & mouseY>200) {
    textAlign(CENTER);
    text('3', 300, 300);
  }
  
  if (mouseX<200 & mouseY>200) {
    textAlign(CENTER);
    text('4', 100, 300);
  }
}

Number appears

based on mouse location

mouseX

mouseY

See it in action

Code example

See it in action

Activity 4.3

diameter = 50;

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

function draw() {
  background(220);

  if (keyIsDown(187)) {
    diameter += 1;
  }

  if (keyIsDown(189)) {
    diameter -= 1;
  }
  
  ellipse(200, 200, diameter, diameter);
}

Using the keyboard to control a size of an object

keyIsDown(#)

See it in action

Code example

Find out the Javascript Key Code of a key

See it in action

Activity 4.3

col = 255

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

function draw() {
  background(col);
  
  if (mouseIsPressed === true) {
    col = 255;
    textAlign(CENTER);
    textSize(50);
    fill(0);
    text('hello world :)', 200, 200);
  } else {
    col = 0;
    fill(255);
    text('click here!', 200, 200);
  }
}

Pressing the mouse creates a different condition

mouseIsPressed === true

See it in action

Code example

See it in action

Activity 4.3

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

function draw() {
  background(220);
  textSize(32);
  fill(0, 102, 153);

  if (mouseIsPressed) {
    text("mouse is pressed", 10, 30);
  } else if (keyIsDown(SHIFT)) {
    text("shift is clicked", 10, 30);
  } else if (keyIsDown(ENTER)) {
    text("enter is pressed", 10, 30);
  } else {
    text("hello", 10, 30);
  }
}

Creating more than 2 conditions

if , else if , else

See it in action

Code example

See it in action

Activity 4.3

Try to code something from scratch using

mouseX/mouseY
keyIsDown(#)
mouseIsPressed

Activity 4.3

Deliverables

activity-4-3_1.jpg

activity-4-3_2.jpg

activity-4-3_3.jpg

Images

activity-4-3_decision-making.mp4

Video

Activity 4.3 Deliverables

Decision

Making

Recap on Conditionals

What are conditionals?

What are the methods used in p5js?

Why do we use conditionals?

Recap

See it in action

Recap

Make a shape.
You can use beginShape() and endShape() OR you can use other shapes like ellipse(), rect(), etc.
Create an animated loop. Use frameCount or sin() to create repetitions of your shape.
Create a conditional. Using keyPressed(), mousePressed(), etc to create an output for your shape.
Create a loop. Use the for loop to create a loop only within your conditional.