Draw and paint with the computer


Okay, so your goal is to write code that lets you draw and paint with the computer: this is a really good place to start, in my humble opinion. Drawing things with a program provides visual feedback on what is and isn’t working, and when things go right, you get something that looks satisfying, as opposed to a bunch of algorithms running under the hood and spitting out a response.

p5.js is a web-based version of the Processing language. I think it’s spectacularly cool because you can use it to progam all sorts of cool visuals like the original flavor of Processing, which you have to run locally…

example of the Proessing development environment

…but instead p5.js it runs in the web browser. Meaning you can create and share things like this:

Want to tinker with that? There’s even a web editor.

Every p5.js sketch is based on this simple setup:

function setup() {
    // setup code goes here--things that only run once
}

function draw() {
    // drawing code goes here--this is where the main part of the program goes
}

You can get an idea of how the basic rules for drawing shapes in this example, Hello P5 : shapes:

This is a small step or two more complicated than the Khan Academy course, but the programming environment for the two are similar.

In the Hello P5 : animate example, you can start to see how drawing shapes and moving them around starts to become animation:

Add lines + movement + input from pressing the mouse, and you get interactivity, like in Input : MouseIsPressed:

One more: p5.js has separate inputs for the mouse and for touchscreens. This Mobile : Simple Draw example turns a whole phone screen into a canvas. Here it is in a box (juct click and drag or touch and drag inside):

The full list of example sketches in the web editor will let you play with all kinds of the drawing functions, more complex animations, and the various ways that the language can handle sound.

The Examples page on the p5.js main site covers the same territory, but is better organized and shows off even more of the functionality.

Even though the examples start to get complicated really fast, you can also go look at the public projects people share at OpenProcessing.

Click and drag on this one:

Happy drawing.