I love tools for creative expression. As part of a hackathon project at Facebook, I wanted to create a feature that let users make drawings on their screens to share with other users. Without getting into the product details, it was important to me that the drawing tools be fun, unintimidating and quickly yield results that looked beautiful and realistic. Today there are many examples of good drawing tools, but none of them offered quite what I was looking for, so I decided to try and roll my own.

We shape our tools, and thereafter our tools shape us.

— Marshall McLuhan

All of the drawing tools I’ve used seem a little static. In the real world, ink and paint gently set into the paper as they’re absorbed, changing subtly in quality as they dry. The result is a kind of imperfect wabi sabi aesthetic. This is the effect I wanted to replicate. It’s aesthetically beautiful and, at the same time, liberating to use because you can’t get obsessively precise with it.

I am not a programmer. Still, I was able to prototype the effect described above using Quartz Composer (Origami). Here’s a sped-up gif that shows the watercolor effect in action. Note the drying effect.

The watercolor effect in action at 4x speed — note the realistic drying effect

And here’s a full video that shows the effect in real time (along with a pencil tool and a simple color picker I created for the demo as well).

A Quartz Composer prototype showing watercolor, pencil and color picker tools

As you can see it’s pretty fun and yields rich and interesting drawings without a lot of fuss.

So how does it work?

To create this, I used something called an accumulator, which is a little-known and poorly-documented tool inhabiting a dark corner of Quartz Composer. Apple describes accumulators this way: “An accumulator enables feedback-based image processing for such things as the iterative painting operations or fluid dynamics simulations.”

Iterative painting was what got me interested.

Basically the accumulator lets you accumulate images on top of one another using a blending mode like you find in Photoshop. It’s really a lot like painting. When you paint, you accumulate paint on a canvas as you move the brush around. With the accumulator, you add images to the canvas instead of paint. Here’s how you hook it up to create a simple painting application:

An extremely simple painting application using an accumulator (the “Simple Brush” is just a circle patch inside of a layer group — you’ll eventually want to build more sophisticated drawing tools but that’s a topic for another article)

What’s interesting about the accumulator is that since it’s a feedback loop, you can add filters to the loop that will be applied iteratively over time. That sounds confusing, but chain up some Core Image patches and you’ll see what I mean. This is how I built the watercolor effect, and it lets you experiment with a new temporal dimension that unlocks many new kinds of drawing effects.

I can imagine using an accumulator to create the look of marker ink settling into paper over time, or combining it with a particle effect to create the subtle effect of lead chipping off from a soft pencil.