Over the past few months I've been screwing around a lot with Javascript drawing libraries for a software/research project that involves displaying hierarchical trees (family trees, archetypically) that don't look like total shit. Which turns out to be a hard problem that computer scientists have been wrestling with for about as long as they've been able to draw graphics on screens (50-ish years) and have still only solved imperfectly.

While working on this has involved a great deal of hair pulling, it also involves a lot of P5.js, which is way fun. P5 is a relatively recent addition to the Javascript drawing scene and counts as the JS implementation of the Processing programming language—itself a highly popular venue for creating dynamic digital art and cool visualizations. Like Processing, P5 is a really good time just out of the box and easy to get into. Unlike Processing, P5 is built for the internet and is implemented in an internet language whose kind of mushy peculiarities and syntactical leniency tend to work well for what people like to call "creative coding."

This, friends, is animation

In other words, in about 30 minutes you could be posting your creations to the internet for all to see. So, let's do that. Note that this will be easier overall than the previous Python-based Hack This tutorials, but will still involve some basic, basic coding.

Prerequisites: Like Processing, P5 has its very own code editor "sketchpad" thing, which is new and still fairly limited. Its basic utility is to quickly and automatically render P5 sketch files on a locally-hosted web page. By default, these pages are then viewed via the P5 editor's own little built-in browser. Let's start just by having the P5 editor downloaded and installed on your system. Note also that you can access tons of examples under the file menu.

0) Draw a shape, any shape

Before actually drawing anything, let's make a stop over at the P5 API. Here you'll find everything that P5 actually does. These are all functions that enable all of the cool stuff that P5 can do. This includes drawing, but also lots of stuff with sounds, images, video, and user interaction. Some things are more obvious than others, and some of those that seem obvious are or can be very complex. Sometimes it just depends on the context.

So, pick a shape. I'd start with a circle (ellipse) or rectangle (rect). Click the link in the P5 API and you'll get some examples and a nice page of documentation—a quick guide for using that particular shape (or other P5 function). Here, let's assume you picked an ellipse to draw and now we can head back over to the P5 editor.