Scene 1. p5.js, canvas and 2D graphics

p5.js web editor

Let’s get signed up to p5.js web editor

🏭 Guided activity
Tour of the web editor UI

p5.js

• What is p5.js? Where did it come from?
• What is a “library” anyway?
• Lauren McCarthy’s JavaScript version of Casey Reas’ and Ben Fry’s Processing.
• Open Source, so community matters hugely!!
• But what is “open source”?
• Processing Foundation

See Soon+Cox (2020) Æsthetic Programming start() in Chapter 1.

The p5.js reference documentation

p5.js reference 🔍 → https://p5js.org/reference/

The reference documentation is just like a dictionary; you’ll learn which words exist, and how to use them.

🏭 Guided activity
Explore the p5.js reference documentation. The examples are interactive.

See also Soon+Cox (2020) Æsthetic Programming Reading the reference guide in Chapter 1.

Dan Shiffman

Dan Shiffman is, among other things, a youtube creator of educational videos about p5.js. His channel is called 🚂 The Coding Train 🚂. Make sure to check it out, and see some of his videos.

• https://thecodingtrain.com/
• https://thecodingtrain.com/tracks/code-programming-with-p5-js
• https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

Canvas and 2D graphics

• setup() and draw() as basic elements of almost all p5.js programs
• canvas
• coordinates, with (0, 0) in top-left corner
• circle. Let’s look at the reference

🏭 Guided activity
Make four, individual sketches of which the first draws a small circle near top-left corner, the second a medium sized near the middle, the third a tiny two-third down near the bottom right area, and the final a very large partially off-screen.

See Soon+Cox (2020) Æsthetic Programming My first program in Chapter 1.

🖼 background()

🖌 stroke() and 🪣 fill()

Also noStroke() and noFill(). What would you think strokeWeight() does?

🎨 color()

[!note] Color itself is an amazing topic, worth a life of study.

[!tip] Think of the current state “Which brush am I holding right now? Is it up or down? Where is it? Which fill is active?”

🐭 mouseX and mouseY

The graphical p5.js “Hello World!” is a circle drawn at mouseX and mouseY.

Here is a more involved example for simple interaction with mouse. Can you read through the code? Try vocalizing the code.

https://editor.p5js.org/mace/sketches/3gs4vNoq3

🏭 Guided activity
Discuss why do we typically place a background() in the beginning of draw()?

Exploration of p5.js, canvas and 2D graphics

1. Scroll 5 meters of #p5js hashtag on Twitter or Instagram.
2. Watch any one of Dan Shiffman’s videos.
3. Combining ideas from this lecture, make 3 little programs out of circles.
   • Get familiar with the p5.js reference documentation.

function setup() {
  createCanvas(333, 333);
  rot = 0;
}

function draw() {
  bgcolor = color(111, 222, 30, 10);
  background("#ffffff22");

  stroke("white")
  line(111, 222, mouseX, mouseY);

  translate(mouseX, mouseY);
  rotate(rot);
  textAlign(CENTER);
  text("Thanks", 0, 0);
  rot = rot + 0.02;
}