Monthly Archives: May 2011


It was raining today so I built an image processing application. It builds on an old flash experiment I did a few years ago but now uses processing.js, jquery, some ajax, html5 and css3 all instead of flash.

So what does it do? Well, to get a better idea of how Circle Art process images, compare the source image (top left) with three processed versions:

Look at all those circles! Essentially, we’re using the source image to paint a new interpreted image, where the brush is affected by the contrast in a given area. If it sounds complicated, just give it a try and start clicking. You’ll see how it works in no time.

You can see it in action here:

It may look like the app is just randomly placing shapes around your mouse cursor, but that’s actually a bit more to it. The size of the circle is derived from the contrast within the area around your mouse. For instance – painting over someone’s eyes (high contrast) will draw smaller circles and result in greater detail, meanwhile drawing on their cheek (lower contrast) will result in larger circles.

You have some options to control the app more specifically as well:

Randomizer affects how big of a range around your mouse the app will pick as its starting point. You’ll notice if you click and hold in one location the app doesn’t always draw on the exact pixel you’ve selected. Generally, the larger your Max Size option, the bigger this should be so even big circles can look adequately scattered.

The Iterations is a hard working slider. Turn it up to draw up to 50 circles each frame. You’ll be a Circle Art making machine!

Max Size defines the largest circle that can be drawn. It’s often nice around tight areas to impose some limits. Know your boundaries!

Threshold defines how much contrast is required before the app draws the shape. For painterly effects, turn this up, but realize you will lose some detail in your drawings. I sometimes crank this on a first pass and then slowly add layers of refining details with smaller circles.

You can also choose whether to draw outlined/filled/outlined+filled circles and rectangles, along with the alpha of each. I’ll probably add some more shapes in the future. After all, pentragrams never go out of fashion. Compare the circle outlines (above) to circle fills (below) here:

Circle Art with Outlined CirclesCircle Art with Filled Circles

Well what are you waiting for? Give it a try now!

Circle Art is built by Lucas Swick