Recap

<aside> 💡

Drawing a happy face on the p5.js canvas

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

function draw() {
  background(220);
	
	// draw a happy face
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(200, 200, 200);
  line(170, 170, 170, 190);
  line(230, 170, 230, 190);
  arc(200, 220, 60, 60, 0, PI);
}

https://editor.p5js.org/clement.zheng/sketches/ipoeALpy3

</aside>

<aside> 💡

Using a function to draw the face

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

function draw() {
  background(220);

  drawHappyFace();
}

// function to draw a happy face
function drawHappyFace() {
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(200, 200, 200);
  line(170, 170, 170, 190);
  line(230, 170, 230, 190);
  arc(200, 220, 60, 60, 0, PI);
}

https://editor.p5js.org/clement.zheng/sketches/3Yx3KTSoI

</aside>

<aside> 💡

Using a variables and conditionals to control which face is drawn

var mood = 0; // use "mood" variable to control drawn face

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

function draw() {
  background(220);
  
  if (mood < 30) { // if mood is less than 30
    drawAngryFace();
  } else if (mood < 70) { // else if mood is less than 70
    drawNeutralFace();
  } else { // else, for all other conditions
    drawHappyFace();
  }
  
}

function drawHappyFace() {
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(200, 200, 200);
  line(170, 170, 170, 190);
  line(230, 170, 230, 190);
  arc(200, 220, 60, 60, 0, PI);
}

function drawNeutralFace() {
  fill(255, 200, 150);
  strokeWeight(15);
  stroke(0);
  circle(200, 200, 200);
  line(170, 170, 170, 190);
  line(230, 170, 230, 190);
  line(170, 230, 230, 230);
}

function drawAngryFace() {
  fill(255, 80, 0);
  strokeWeight(15);
  stroke(0);
  circle(200, 200, 200);
  line(160, 170, 180, 180);
  line(240, 170, 220, 180);
  arc(200, 240, 60, 60, PI, 0);
}

https://editor.p5js.org/clement.zheng/sketches/vD2UfFoXc

</aside>

Transformations and Drawing

<aside> 💡

Transformations globally change the coordinate system (i.e. “reference point”) when drawing in p5.js

Reference section on transformations

Reference

</aside>

<aside> 💡

Types of transformations in p5

⚠️ order of transformations matter: what happens when you change the order of transformations?

Try p5.js transformations here:

transformations custom by clement.zheng -p5.js Web Editor

https://editor.p5js.org/clement.zheng/sketches/qiGYm3Lwx

Transformations affect all drawing functions called after the transformation.

Use push() and pop() to contain transformations.

Use resetMatrix() to reset transformations back to the p5.js default.

https://editor.p5js.org/clement.zheng/sketches/qiGYm3Lwx

</aside>

<aside> 💡

Transformations and Functions

Compare the following two code snippets. How are they similar or different?

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

function draw() {
  background(220);

  drawHappyFace(mouseX, mouseY);
}

// function to draw a happy face
function drawHappyFace(x, y) {
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(x, y, 200);
  line(x - 30, y - 30, x - 30, y - 10);
  line(x + 30, y - 30, x + 30, y - 10);
  arc(x, y + 20, 60, 60, 0, PI);
}

https://editor.p5js.org/clement.zheng/sketches/kzsfeiCVy

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

function draw() {
  background(220);

  drawHappyFace(mouseX, mouseY);
}

// function to draw a happy face
function drawHappyFace(x, y) {
  push();
  translate(x, y);
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(0, 0, 200);
  line(-30, -30, -30, -10);
  line(30, -30, 30, -10);
  arc(0, 20, 60, 60, 0, PI);
  pop();
}

https://editor.p5js.org/clement.zheng/sketches/vKL4K6a9I

</aside>

<aside> 💡

Combining transformations with conditionals and variables

var mood = 0; // use "mood" variable to control drawn face

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

function draw() {
  background(220);

  if (mood < 30) {
    // if mood is less than 30
    drawAngryFace(mouseX, mouseY);
  } else if (mood < 70) {
    // else if mood is less than 70
    drawNeutralFace(mouseX, mouseY);
  } else {
    // else, for all other conditions
    drawHappyFace(mouseX, mouseY);
  }
}

function drawHappyFace(x, y) {
  push();
  translate(x, y);
  fill(255, 255, 0);
  strokeWeight(15);
  stroke(0);
  circle(0, 0, 200);
  line(-30, -30, -30, -10);
  line(30, -30, 30, -10);
  arc(0, 20, 60, 60, 0, PI);
  pop();
}

function drawNeutralFace(x, y) {
  push();
  translate(x, y);
  fill(255, 200, 150);
  strokeWeight(15);
  stroke(0);
  circle(0, 0, 200);
  line(-30, -30, -30, -10);
  line(30, -30, 30, -10);
  line(-30, 30, 30, 30);
  pop();
}

function drawAngryFace(x, y) {
  push();
  translate(x, y);
  fill(255, 80, 0);
  strokeWeight(15);
  stroke(0);
  circle(0, 0, 200);
  line(-40, -30, -20, -20);
  line(40, -30, 20, -20);
  arc(0, 40, 60, 60, PI, 0);
  pop();
}

https://editor.p5js.org/clement.zheng/sketches/MIZqb8zKb

</aside>