p5.js - Week 05
Welcome to week 5 of Intro to Web Dev!
So far, you’ve learned about two coding languages: HTML, which lets you specify a webpage’s content, and CSS, which lets you style that content.
This week, we’re pivoting to a completely different language called p5.js, which lets you write code that draws stuff to the screen.
Why: Although p5.js might seem unrelated to web development, secretly what you’re learning is JavaScript. I think p5.js is a fun way to learn the fundamentals of JavaScript, which will come in handy when we start using JavaScript in week 9.
Work through the activities in this page to complete the week!
p5.js
First, read through these tutorials:
This first tutorial introduces the concept of coding. Some of it’s review because you already know how to code in HTML and CSS, but this guides also contains important environment setup:
Note: For the next few weeks, you should use the p5.js editor instead of Replit!
After you have your p5.js environment setup, then read through this tutorial, which provides more information on how to use p5.js:
Project
Congratulations, you now know how to write p5.js 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!