We’re learning Serial Communication with p5.js because it’s a (relatively) easy tool to use for drawing graphics, playing media, coding interactions and games, and even creating 3D scenes, and it’s all accessible through their editor online. Most of the basic drawing functions are very straightforward, including shapes, colors, stroke, etc., and a lot of basic programming terminologies are also applyed here, like variables, for loops, functions, etc.
In contact of Physical Computing, p5.js (and Processing) allows for full resolution screen based output on a computer or projector that would be difficult or impossible using microcontrollers. In general, this is not the focus of the class, but sometimes it is an easier output for your idea, and luckily there are many resources out there to learn to utilize it for your own use.
Follow the Get Started page on the official p5.js website, and make your first sketch (on your own)! You’ll be introduced to working with background and ellipse().
Then, there are a couple of good resources to follow:
Check out the amazing YouTube channel, the Coding Train by Daniel Shiffman. Start from this video about shapes and drawing. In this tutorial, you’ll learn to work with rect() and line()
Optional: p5 has some really cool built-in tools for easy interactivity. Follow this text tutorial by Allison Parrish if you’re interested to explore using logic and boolean (things we covered for Arduino programming) with mouse interaction.
Lastly, poke through the p5.js Reference page and Examples page for examples of things that interest you. For starters, there’s a whole reference page dedicated to color(), and another dedicatde to text()
After finishing the tutorials, make a simple sketch that uses shapes, lines, and colors, share that on your blog. It can be a design, a self potrait, or just a composition that interests you. You can also alter the existing examples that were shared above.