p5.js exercises

<aside> ⚠️ Please include answers as prompted on your student page, under ‘p5.js warm up’

</aside>

I recommend using the p5.js web editor here. Work through each of the examples below.

Example 0 - Make a circle

Place a circle somewhere on the page! See p5.js documentation for help.

• Hints

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

function draw() {
	//place your circle somewhere here
} 

Example 1 - Basic Set-up

• Try this code. Why does the color keep changing?
• What do the setup() and draw() functions do?
  • —> Include an answer to this on your student page

//this function runs one
function setup() {
  createCanvas(400, 400);
}

function draw() {
	fill(random(255), random(255), random(255));
  ellipse(width/2, height/2, 50, 50)
}

Example 2 - Frame by frame movement

• Why does the circle that moves leave a ‘trail’? Try to remove this trail
• Try changing the speed of the circle as it moves across the screen
  • —> Explain how you did this on your student page

let x = 0;

function setup() {
	createCanvas(500, 500)
  background(100);  
}

function draw() {
  ellipse(x, height/2, 20, 20);
  x = x + 1;
}

Example 3 - Mouse Interactivity

Taken from p5.js examples

Try this out, no submission

function setup() {
  createCanvas(500, 500);
  background(230);
  strokeWeight(2);
}

function draw() {
  if (mouseIsPressed) {
    stroke(255);
  } else {
    stroke(237, 34, 93);
  }
  line(mouseX - 66, mouseY, mouseX + 66, mouseY);
  line(mouseX, mouseY - 66, mouseX, mouseY + 66);
}