Week 2: p5.js workshop

0: p5.js editor UI

1: Basic graphics in p5.js

💡 p5.js reference page:

reference:p5.js

p5 cheatsheet

p5 playground

https://yining1023.github.io/p5PlayGround/

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 Basic Drawing Functions

Shapes

rect(x, y, w, h) - Draw a rectangle
ellipse(x, y, w, h) - Draw an ellipse/circle
line(x1, y1, x2, y2) - Draw a line
triangle(x1, y1, x2, y2, x3, y3) - Draw a triangle
quad(x1, y1, x2, y2, x3, y3, x4, y4) - Draw a quadrilateral
arc(x, y, w, h, start, stop) - Draw an arc

Colors & Styles

fill(r, g, b) - Set fill color (RGB values 0-255)
stroke(r, g, b) - Set stroke color
strokeWeight(weight) - Set stroke thickness
noFill() - Remove fill
noStroke() - Remove stroke

Transformations

translate(x, y) - Move origin point
rotate(angle) - Rotate by angle (in radians)
scale(x, y) - Scale drawing
push() - Save current drawing style
pop() - Restore previous drawing style

Text

text(str, x, y) - Draw text
textSize(size) - Set text size
textAlign(align) - Set text alignment

1.3: Drawing things in p5.js

✒️ ### Try it out!

Refer to the p5.js reference

Find the section on shapes

Drawing shapes on the canvas (by writing code in the draw() function)

e.g. rect(20, 30, 60, 40)

Questions to explore:

What shapes / graphics can you draw?

How do you position a shape?

How do you change the color of a shape’s fill?

How do you change the color of a shape’s stroke?

How do you remove stroke / fill?

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

2.1: Let’s draw a face

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

👉 Result:

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

Mood Range	`mood < 30`	`30 ≤ mood < 70`	`70 ≤ mood`
Image

Example Code

```jsx

var mood = 0;

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

function draw() {
  background(255);
  
  if (mood < 30) {
    drawAngryFace();
  } else if (mood < 70) {
    drawNeutralFace();
  } else {
    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);
}

```

2.3: Create interaction logic for `mood` variable value

Program mood variable value to decrease over time.
Print the value of the mood variable in the console panel.
Increase mood variable when mouse clicks.

✨ Bonus: Increase mood variable only when mouse clicks inside the face.

Example Code

```jsx

var mood = 100;

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

function draw() {
  background(255);

  if (mood < 30) {
    drawAngryFace();
  } else if (mood < 70) {
    drawNeutralFace();
  } else {
    drawHappyFace();
  }

  mood = mood - 0.2;

  if (mood < 0) {
    mood = 0;
  }

  print(mood);
}

function mousePressed() {
  
  print("clicked");
  mood = mood + 5;
  
  if (mood > 100) {
    mood = 100;
  }

  // BONUS

  //   if (dist(mouseX, mouseY, 200, 200) < 100) {
  //     print("clicked");
  //     mood = mood + 5;
  //     if (mood > 100) {
  //       mood  = 100;
  //     }
  //   }
}

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

```

2.4: Using images

Happy Face	Neutral Face	Angry Face

Create a folder in the sketch directory and upload image files into the folder.
Load images in preload using loadImage
p5.js image reference:
1. https://p5js.org/reference/#/p5/image

Example Code

var imageHappy;

function preload() {
  imageHappy = loadImage("img/happy-face.png");
}

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

function draw() {
  background(255);
  
  imageMode(CENTER);
  image(imageHappy, width / 2, height / 2, 200, 200);
}

2.4.1: Using an animated GIF

Animated Face

You can use the image function to draw an animated GIF as well.

Example Code

  var animatedFace;
    
  function preload() {
    animatedFace = loadImage('./assets/animated-face.gif');
  }
    
  function setup() {
    createCanvas(400, 400);
  }
    
  function draw() {
    background(255);
    image(animatedFace, 100, 100, 200, 200);
  }

3: Abstracting Graphics with Functions

Look at the code below. What is the relationship between all the numbers that are bolded and underlined?

They are all related to the horizontal center coordinate of the face!

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

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

3.1: Variables as abstract properties

We can write functions that take inputs (”arguments”). The value of these inputs affect the function’s output.

e.g.

function drawHappyFace(x, y) {
	// This function has two arugments: x and y
	// In this case, we want to use x and y to determine the center of the face
}

Write code inside the drawHappyFace function block above such that it draws a happy face based on the value of the x and y arguments.

Example code

  function setup() {
  	createCanvas(400, 400);
  }
    
  function draw() {
  	background(255);
  	drawHappyFace(150, 150);
  }
    
  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);
  }

💡 Reflection:

What other properties of this drawing can we abstract into an argument for the function?

Why should we abstract functions in this way?

3.2: Functions that “return” an output

We can also write functions that runs through a series of instructions and returns a response.

This is achieved with the return command.

Example: returning the state of the face based on a numerical input (e.g. mood).

var mood = 100;
var state = returnState(mood);

function returnState(value) {
	if (value < 30) {
		return "ANGRY";
	} else if (value < 70) {
		return "NEUTRAL";
	} else {
		return "HAPPY";
	}
}