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.
Work through the activities in this page to complete the week!
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:
Get ready to write some code!
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:
Tell the computer what to do.
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:
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!