Week 2: p5.js workshop

0: p5.js editor UI

Untitled

1: Basic graphics in p5.js

💡 p5.js reference page:

reference:p5.js

p5 cheatsheet

p5 cheatsheet

p5 cheatsheet(advanced)

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!

  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?

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:

happy_face_basic

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

Mood Range mood < 30 30 ≤ mood < 70 70 ≤ mood
Image angry_face_mood neutral_face_mood happy_face_mood
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

  1. Program mood variable value to decrease over time.
  2. Print the value of the mood variable in the console panel.
  3. 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
happy-face neutral-face angry-face
  1. Create a folder in the sketch directory and upload image files into the folder.
  2. Load images in preload using loadImage
  3. 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

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:

  1. What other properties of this drawing can we abstract into an argument for the function?
  2. 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";
	}
}