Swarmpaint was made as an example of what digital drawing tools can be when we let go of just replicating physical media. But more importantly, it’s meant as an inspiration and a challenge to artists everywhere – what if you re-invent your own digital paintbrush?

Tweaking dials and settings in Swarmpaint is only a taste of what’s really possible.

Swarmpaint was developed using the free, open source software Processing. Anyone can download Processing and create their own drawing software for both their computer or an Android device.*

To get you started, I’ve created a couple of very simple interactive sketches on the code-sharing site OpenProcessing.  OpenProcessing lets you code for the Javascript edition of Processing directly in your browser, and if you create your own account you can ‘tweak’ other people’s code into your own variations.  While some Processing.js code can be Javascript-specific (and therefore not work right away if you paste it into the Processing IDE), I’ve stuck with just the standard core language that should work in both.

“Bubble sketch” lets you draw slightly-randomized circles across the screen.  Go take a look at it on OpenProcessing, test it out, and take a look at the code.  (It’s short!)

While I won’t try to walk through the whole program here, let’s try for the highlights:

The program doesn’t store any data about where you’ve clicked. It just draws onto the screen buffer without erasing it. This is different than most programs, including Processing sketches, which will redraw some or all of an image for every frame of an animation or interaction.  The nice thing about this is that it’s simple. We treat the sketch area like a blank sheet of paper, and whatever we draw, we draw.  (Sometimes ink drawings are more liberating than pencil.)  And we don’t have to create data structures to remember where we’ve been.

The curly-braces {} are used to create blocks of code. They might define the contents of one function, or smaller blocks that are chosen by an if statement or something similar.

The setup function is automatically run once by Processing at the start of a sketch. This is usually where you tell Processing what size of window you want, turn on options like image smoothing, and give any global variables (like our ‘counter’) a starting value.

The draw function is run once every frame. If you want something animated or interactive, it probably goes here.

Processing makes handling mouse input relatively simple through the mouseX, mouseY, and mousePressed variables. mouseX and mouseY tell you where the pointer is, and mousePressed tells you if there’s a button pressed.  It also remembers where the mouse cursor was in the previous frame using pmouseX and pmouseY, which is handy if we want to do something like draw a line from where the mouse used to be to where it is now.

I added a keyPressed function, which is another special function called by Processing when a keyboard key is pressed. It checks if you pressed the spacebar, and if you did it clears the screen.

Take a look at the code and try changing something. If you want to look up more information, the Processing language reference and the tutorials may help.  Try changing the color of the circles (the fill command sets that).  Or try changing the circles into squares.  Add lines somewhere.  What happens if you put ‘mouseX’ in for one of the values in the fill statement?

OpenProcessing lets you save your ‘tweaks’ in a way that links them to the original sketch.  I’ve already created two other sketches based on this one – you can see them by clicking on the ‘Tweaks’ tab underneath where the sketch plays.  See if you can follow the changes I’ve made.  How does adding lines between the circles change the feel of the drawing tool?

* Getting up-and-running building for Android takes a bit more work than running Processing sketches on your computer, but it’s not too painful. The steps can be found here: http://wiki.processing.org/w/Android