Week 2: p5.js workshop

0: p5.js editor UI

1: Basic graphics in p5.js

💡 p5.js reference page:

reference:p5.js

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

✒️ 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:

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

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 mouseClicked() {
  
  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

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

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

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