Teaching / Intro to Creative Web Dev / Intro to p5.js - Week 01

p5.js - Week 01


Welcome to week 1 of Intro to Web Dev!

This week is all about getting set up and diving into writing code.

Work through the activities in this page to complete the week!


p5.js

First, read through these tutorials:


Quiz

Think about your answers to these questions:

  1. In your own words, what is a function?
  2. What’s your favorite p5.js variable or function, and what does it do?

    Note: There is no wrong answer to this question. If you don’t have a favorite, pick one you used most often, or one that surprised you.

  3. What does the p5.js quad() function do?

    Note: This function was not mentioned in any of this week’s content. I’m testing that you can research and read about new p5.js functions you haven’t seen before. Feel free to use a search engine and resources like the p5.js reference to answer this question.

  4. What do you do when your code has an error?
  5. Where can you go if you have a question or want some help debugging?

Project

Congratulations, you now know how to write code!

To practice that, you’ll be creating a p5.js sketch and sharing it with the class on Friday.

Your sketch must run without any errors. Your sketch must contain at least ten function calls. You can draw the same shape multiple times (e.g. 10 circles, or 5 circles and 5 squares), and you can have more than 10 function calls. But I’ll be looking for a minimum of ten.

What you draw is up to you, but here are some ideas:

  • Draw your favorite emoji 😺
  • Draw a digital selfie 🤳
  • Draw your favorite food 🥪

I’m not grading on design, so don’t worry about making it look perfect! Focus on writing code that runs without any errors, and have fun!