A Golden Clock from Red Paper Heart on Vimeo.

The Company, Bring To Light NYC from Andrea Cuius on Vimeo.

Creative coding has blossomed into a full-fledged movement for getting expressive with screens, sound, and media. While much software remains a commercial, proprietary activity, these tools have demonstrated what a collective, free model can do.

For the most part, those tools complement non-free tools. But just as Processing and OpenFrameworks have matured, Cinder is now at a point where it boasts features that could attract even seasoned users of old standby Flash. Under the unassuming name “0.8.4,” a big release last month brought smarter handling of shapes, a powerful timeline, enhanced samples and tutorials, and other features. Cinder is free and runs on Mac, Windows, and iOS. Copious samples and design-oriented features meant that it’s comfortable for designers wanting to learn code, not just dedicated developers.

Showcase, from top: “A Golden Clock,” by redpaperheart.com, “The Company” by Andrea Cuius, Roland Ellis

Full details are on the Cinder site, but here are some highlights:

  • SVG parser, complete with features like gradients and embedded images, for using this popular graphic interchange format for vector images.
  • Timeline API, for sophisticated easing, tweening, and other animation features, “in the spirit of the popular TweenLite engine for Flash.”
  • New JSON read/write.
  • Assets for managing files associated with a project.
  • New examples show you how to take advantage of cool stuff like multithreaded network support, 3D, and the SVG and Timeline features.
  • Polygon boolean operations, seen below.
  • Shape2D tools for figuring out collision / click detection with complex shapes.
  • Maths! Planes, frustra, affine matrices in 2D.
  • File functionality: Various file path and encode/decode/buffer features.

There are various other fixes and additions, as well – gaussian-distributed random numbers, anyone?


Free software isn’t free to produce. The Barbarian Group, designers who use the tools, helped underwrite development. But that’s a reminder that free software is, at its heart, a model for how software is created and used. It doesn’t have to mean that people don’t earn value for their work – and I’ve never, ever heard a free software advocate argue that; it’s largely a misconception from people who lack experience actually working with the tools.

You can add all these goodies to significant improvements introduced in summer of 2011, including an extensive tutorial by talented artist Robert Hodgin, text and texture tools, XML (leading to this year’s JSON developments), OBJ (the 3D equivalent of SVG’s 2D interchange format), path and shape, and other nice features.

So, Which Tool Should You Use?

In fact, Cinder, OpenFrameworks, and Processing are so good at this point, it can often be intimidating to artists deciding which to choose. The good news is, I don’t think you’d regret any of the three choices – and just by devoting energies into one, you’ll undoubtedly develop some your coding and design skills, so making that choice is itself a vital step.

Processing clearly has the most documentation for absolute beginners, especially once you add the excellent books and courses out there. It might easily be mistaken as the “beginner” choice, but with high-performance libraries for 3D and video, it should still be taken seriously.

Processing runs in Java; Cinder and OpenFrameworks in C++. That generally makes the C++ options faster, though it’s possible to work on the GPU in Processing for operations that need high performance. More likely, you might choose because of a langauge preference, or because you want to work with a library for a specific environment.

Processing and OpenFrameworks support more platforms. Both support Mac, Windows, Linux, and Android. OpenFrameworks also supports iOS development; the JavaScript branch of Processing, Processing.js, works in a browser with nearly-identical syntax (though different language support).

But, while I wholeheartedly endorse focusing on one and getting some work done when you’re starting out, I think it’s best to understand these three tools more in terms of what they have in common than how they differ. The three communities have some tight connections, and all three are pushing forward the use of code in design and art. Users and developers tend to inspire each other with the work they do. And some friendly competition between them couldn’t be more healthy.

In fact, it’s worth mentioning that there was a bit of a misunderstanding in a comment thread on CDM recently. Golan Levin described some different goals for OpenFrameworks examples, making them a teaching tool rather than a showcase, per se. (That’s something I’ve struggled with; I’ve sometimes made examples as boring as I possibly can, just to make them easier to share with students or friends.) But in a demonstration of how interconnected these tools are, Golan tells CDM he teaches Cinder in his classes alongside OpenFrameworks, even as he contributes to development of the latter. Once you do become comfortable with one of these tools, playing with another is far less daunting – though, again, that’s to me further reason to encourage focusing on fluency in one as a starting point.

I think the whole movement is only at its beginning. We’d certainly welcome both tutorials and examples of work here on CDM. In particular, I think we’re a unique case in that other sites covering creative coding tend not to focus on live performance applications for music and visuals. Because those applications are real-time – and in front of an audience – they pose unique challenges. (And, you know, they’re uniquely fun, too!)

I hope we’ll expand this conversation over 2012. I can’t wait.

More great Cinder-built examples:

Urban Future from Kollision on Vimeo.

“Urban Future” by BIG, Kollision and Schmidhuber + Partner

Planetary (voiceover) from Bloom Studio, Inc. on Vimeo.

Planetary, by Bloom

  • haseeb ahmed