p5.js is a creative coding library that makes a wonderful introduction to coding for students. The graphical component helps illuminate fundamental concepts (loops! variables! arrays!), and there’s so much room for student creativity! It also plays nicely with other libraries and frameworks so you can continue to build on it.

Below is a small selection of some of the examples I created and used in class, both simple and more complex.

Fun with Trigonometry!

I attended CCFest (Creative Coding Fest) in Los Angeles in 2018. One workshop I attended inspired the “fun with trig” lesson, which was a way of getting students to loosen up and have fun and try stuff, even if they weren’t sure what the outcome would be.

Code here.

Multiplayer Pictionary Game

Combines p5.js with Socket.io to make a neat little multiplayer pictionary game (like Skribbl.io!).

The Basics: Flappy Bird

Very simple version of Flappy Bird to illustrate collisions.

Code here.

The Basics: To-Do List

Illustrating arrays, collisions, and simple UI elements.

Code here.

The Basics: “Catch” Game

Game where the blue square “catches” the pink ball, with scorekeeping.

Code here.