0: p5.js editor UI

1: Basic graphics in p5.js

<aside> 💡 p5.js reference:

reference | p5.js

</aside>

1.1: p5.js program structure

// global space
// e.g. define global variables, objects, functions here

function preload() {
	// Run order: 1
	// Runs once
	// Use it to load large assets, such as audio files or image files
}

function setup() {
	// Run order: 2
	// Runs once
	// Use it to set up objects, such as the drawing canvas

	createCanvas(400, 400); // this creates a 400px by 400px drawing canvas
}

function draw() {
	// Run order: 3
	// Runs continuous as a loop from top to bottom

	// Use it to control interaction logic and graphic rendering 
	// while the program is running
}

1.2: Drawing things in p5.js

<aside> ✒️ Try it out!

1. Refer to the p5.js reference
2. Find the section on shapes
3. Drawing shapes on the canvas (by writing code in the draw() function)
   1. e.g. rect(20, 30, 60, 40)
4. Questions to explore:
   1. What shapes / graphics can you draw?
   2. How do you position a shape?
   3. How do you change the color of a shape’s fill?
   4. How do you change the color of a shape’s stroke?
   5. How do you remove stroke / fill? </aside>

2: Draw a face that changes expression based on a variable

2.1: Let’s draw a face

<aside> 👉 Example

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

function draw() {
  background(255);
  
  // 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);
}

</aside>

<aside> 👉 Result:

</aside>

2.2: Draw different expressions. Control these expressions with a variable.