<aside> ⚠️ No submission for the tutorials, but you’ll need to complete them to do the p5.js exercises

</aside>

<aside> ✨ Use this p5.js template to edit p5.js locally in your code editor. Alternatively, you can just use the p5.js web editor (recommended).

p5 template.zip

</aside>

Watch these p5.js Tutorials

The Coding Train by Dan Shiffman, a professor at NYU’s ITP program, is an amazing resource for learning how to code creatively - particularly with p5.js.

• Watch this video from The Coding Train and follow along with your code editor
• Watch this video from KhanAcademy. Covers roughly the same content as The Coding Train video, but I think the redundancy is helpful
• Try this simple snowman challenge after to test your knowledge

Code Dissections

Study these code examples and see how they’re working

1. Logging: Write a console.log(’asdad’) statement within the draw() function. Open DevTools to the ‘Console’ tab and observe the output

   • What you should see

2. Intro to loops: Add this code to your setup() function, and answer these questions

   • What exactly does width reference here? See the p5.js documentation to answer this
   • What is this code doing? How many times is running?
   • Change the size of the circle to 5 pixels
   • Play with the x+= 50 portion of the code, and change the number 50 to be higher and lower. What’s happening here?

   for (let x = 0; x <= width; x += 50) {
           fill(255, 0, 200);
           ellipse(x, 300, 25, 25);
       }
   

3. Intro to variables: Copy-paste this code, and use console.log() to view the output of z.

let x = 5;
let y = 6;
let z = x + y;

1. Intro to conditionals: Guess what will be printed here before doing anything. After, copy-paste this code into your setup() function, and view the output in DevTools console.

   let year = 2019;
   
   if (year == 2015) {
     console.log("you're 6 years off my friend");
   } else if (year == 2016) {
     console.log("you're 5 years off my friend");
   } else if (year == 2017) {
     console.log("you're 4 years off my friend");
   } else if (year >= 2018) {
     console.log('uh close enough');
   } else {
     console.log('idk man');
   }
   

2. Intro to functions Guess what will be printed here before doing anything. After, copy-paste this code into your setup() function, and view the output in DevTools console.

function testFunction(p1, p2) {
  return p1 * p2;
}
let x = 5, y = 6;
let z = testFunction(5, 6)
console.log(z);