p5.js OOP Workshop: Abstracting Emoji Face Drawing

Week02: Review

This was the code of drawing the happy face from Week02.

https://editor.p5js.org/didny/sketches/LlUf74Niw

All parameters are written directly as numbers. We call this “hardcoded” values.　

    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);
    }

By introducing x and y variables as arguments to the function, we can draw the face at any position on the canvas.

    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);
    }

By introducing the translate(x, y) function that moves the origin of the coordinate system to the specified position. With this edit, we can centralize the x,y coordinates in one place, making it easier to modify individual facial features.

With push() and pop() functions, we can contain the changes to the coordinate system within the function.

    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();
    }

What are the key properties of the face drawing? Represent it as a JS object

JS objects:

Working with objects - JavaScript | MDN

  • Properties of the happy face drawing.

    Property Example Value
    position x 200
    position y 200
    diameter 200
    mood 76
    state “HAPPY”

Objects in JavaScript

Objects in JavaScript are organized as key: value pairs inside a block { … }

e.g.

var myCar = {
	color: "white",
	make: "VW",
	model: "jetta",
	year: 2012,
	license: "ABC1234Z"
};

These “keys” are the properties of the object. We can access the property of an object using dot notation:

print(myCar.color) // prints "white"
print(myCar.license) // prints "ABC1234Z"

Write the face drawing as a JavaScript object with all its properties

var face = {
	...
};
Example Code 
```jsx
var face = {
	x: 200,
	y: 200,
	diameter: 150,
	mood: 100,
	state: "HAPPY"
};
```

Example Code: Face Object

5.3: Creating object templates: Classes

Coding up each individual object can be tedious—especially if they have the same underlying structure! We can make such object creation more efficient with the use of Classes.

Anatomy of a JavaScript Class:

class Car {
	
	// define object properties and their values
	constructor(maker, model, color) {
		this.maker = maker;
		this.model = model;
		this.color = color;
	}

	// object methods

	drive() {
		print("Driving");
	}

	stop() {
		print("Stopping");
	}

}

let myCar = new Car("TOYOTA", "Prius", "white");
let myEVCar = new Car("Tesla", "Model 3", "red");

myCar.drive();
myEVCar.drive();

Face Class

https://editor.p5js.org/didny/sketches/HVSqwSqvS

class Face {
  constructor(x, y, diameter, mood) {
    this.x = x;
    this.y = y;
    this.mood = mood;
  }

  draw() {
    if (this.mood > 50) {
      this.drawHappyFace(this.x, this.y);
    } else if (this.mood > 25) {
      this.drawAngryFace(this.x, this.y);
    } else {
      this.drawSadFace(this.x, this.y);
    }
  }

  setMood(mood) {
    this.mood = mood;
  }

  update() {
    this.mood = this.mood - 1;
    if (this.mood < 0) {
      this.mood = 0;
    }
  }

  drawHappyFace(x, y) {
     // Implement angry face drawing logic here
    }

  drawAngryFace(x, y) {
      // Implement angry face drawing logic here
    }

  drawSadFace(x, y) {
      // Implement sad face drawing logic here
    }
}

Using the Face Class 


let face;

function setup() {
  createCanvas(400, 400);
  // create a face object at position (200, 200) with a diameter of 150 and a color of [255, 255, 0]
  face = new Face(200, 200, 150, 100); // Happy face
  
}

function draw() {
  background(220);
  face.draw();
  face.setMood(75);
}

　🦾 ** Try yourself! **

  1. add a slider to control the mood of the face
  2. add one more face object to the canvas and control its mood

🚨 Homework: Complete the JS class for the face object

  • submit the p5.js OOP Emoji Face code you have created during the p5.js workshop.