Creative Coding With Processing and p5.js

I recently attended a taster workshop, ran by Alex McLean (@yaxu, http://slab.org), along with a rather diverse group of creative types, university lecturers, artists, sound engineers and novices. All of them were eager to get into the world of visual arts or to learn what’s possible with the Processing (Processing.org) language.

We discussed the pedagogy of programming; specifically that it’s not something you can easily teach, but more of a series of concepts to be grasped and then self-taught – particularly in the realm of creative coding.

McLean explained that asking ‘How do you write a piece of software?’ is like saying ‘How do you write a novel?’.

This is something with which I’m sure all developers can associate.

(First you learn words, then sentences, then letters, then spelling, then metaphors, then typing etc.)

TIME FOR A LITMUS TEST

a = 5 b = a + 6 a = 7 What is b?
Of course we know that it’s 11, but for regular humans, this throws people right off. It’s always worth remembering that grasping code is actually quite counter-intuitive, so the benefits of using a relatively high-level language such as Processing is a nice short step between creativity and creation (without too much limitation).

The way people describe computers and programming concepts is very militaristic and mechanical (load, push, cast, etc), which was logical back in ye olden times when computers were as big as skyscrapers or whatever. Nowadays, however, languages are high level enough that we can perhaps try to move away from physical metaphors; particularly in terms of visual arts. In doing so, we can encourage amateurs to pick up / understand programming more easily.

We must never underestimate how much laypeople can believe coding to be an arcane, dark art.

The honest question “Do you need a special keyboard for coding?” was a nice little highlight of that.

So, grab your special keyboard and download Processing at https://processing.org/download to have a play. Note – If you want to skip ahead to web-based stuff, don’t bother with this example!

SIMPLE SHAPES EXAMPLE

Paste the code below into your Processing editor and hit Ctrl-R to run it. It is a very basic example indeed but it shows you a typical structure of a graphical program.

   // Runs once:
    void setup() {
        // Set width and height of the graphical window
        size(200, 200);
    }
    // Runs every frame:
    void draw() {
        // Clear window by drawing a background
        background(200, 200, 230);
        // Call the drawFace function below
        drawFace();
    }
    void drawFace() {
        // Set colour (r, g, b) for the proceeding shape
        fill(255, 255, 255); // white

        // Draw ellipses (x, y, width, height)
        ellipse(50,  50, 20, 20); // eye
        ellipse(150, 50, 20, 20); // eye

        fill(255, 0, 0); // red
        // Draw a rectangle (x, y, width, height)
        rect(50, 150, 100, 10); // mouth
    }

Within this environment you can expand programs to process interactions from the keyboard and mouse or even a microphone or video camera via the many free libraries available to import.

As a frontend web developer, however, I’m personally interested in the concept of generative web design, which doesn’t really exist yet – but it could be amazing!

The next big thing?

Who knows?

Okay, probably not, but it could conjour up some inherently unique sites.

So for that reason, let’s scrap this Java-based Programming IDE (It’s naff anyway) and sink our teeth into the Javascript port of Processing – p5.js (http://p5js.org)…

BROWSER-BASED PROCESSING EXAMPLE

Here we have a full example using the p5.js library. Although it seems relatively simple; demonstrating a blob bouncing around, it actually incorporates lots of good, tasty p5.js/Processing/ES6 code.

The program contains functions such as setup, draw and ellipse that we’re already familiar with and then expands on it all by creating a Blob object which contains factory functions. These functions, for example update and render, are called from within the typical draw function, which change the properties of the blob on each frame and re-draw it to a canvas element which contains all our graphical output.

It also includes some simple user-interaction by way of utilising the mouseX and mouseY variables, which change as the mouse is moved over the canvas, to affect the blob’s velocity.

Working with user-interaction in such a simple way, plus the fact that Processing is a fully-fledge graphical system (see https://p5js.org/examples) makes it perfect for beginners and professionals alike.

Let’s create some creative creations!