Creative Coding with Cinder & Xcode - Getting Started

Of all the “creative coding” languages out there I’ve decide to give Cinder a try.

I could go back to Actionscript but that’s still a few years away from feeling like coding a vintage language. I could try again Processing but I feel like Processing still needs to graduate to the next level. I’ve heard of VVVV (or ‘V4’) and, even though, it feels refreshing to try a node-base language, it seems to me that the node metaphor is best suited for VJs but not for non-real-time coding. So then we have OpenFrameworks and Cinder. Since I’m new to both, and Cinder seems to be more actively developed these days, I’ll give it a try.

Cinder?

Cinder is a free, opensource library for creative coding, originally created by the Barbarian Group.

In their own words:

Cinder provides a powerful, intuitive toolbox for programming graphics, audio, video, networking, image processing and computational geometry. Cinder is cross-platform, and in general the exact same code works under Mac OS X, Windows and a growing list of other platforms — most recently the iPhone and iPad.

Running the sample projects

I’m using Mountain Lion but Cinder should work on previous versions of the Mac OS.X. I have upgraded Xcode, which now must be done through the app store, or else random errors might popup (thanks Apple). All Cinder development in the Mac takes place inside Xcode.

Step #1 - Download Cinder for Mac: http://libcinder.org/download/

Step #2 - Try to run a sample demo Cinder comes with a welcome guide, sample demos and a tutorial. When I first tried to run the demos I got the following error when launching the .xcodeproj file:

It turns out that the Cinder demos and tutorials target 10.5 OS and Xcode under Mountain Lion is not happy about that. In order to get these projects running you must have the SDK for the OS you are targeting. My Xcode setup had SDKs for 10.7 and 10.8.

You’ll find the configurations paths to change under:

Project/BuildSettings/Architecture/Base SDK/

Targets/Build Settings/Architecture/Base SDK/

With those fixes in place all the Cinder XCode project should work

Starting a project from scratch

The easiest way to start a new project is using the TinderBox app, found in the tools folder. Since you can install the Cinder library on any folder the TinderBox requires the user to point to the folder where the Cinder library is to be found.

The TinderBox app creates simple apps to create standard desktop apps, IOS apps and screensavers. It is definitely the easiest to start a new project since it takes care of setting up all the dependencies, SDK paths, libraries, etc.

The basic structure of a Cinder app

First of all, Cinder is written on C++. It’s years I write C or C++. We have to deal with pointers (yuk) and the separation of declaration (header files) and definition (source files). Besides that, C++ is object oriented and really fast (great for interactive visualizations, managing large number of objects, large sets of data, video processing, etc).

A Cinder app has three main functions. These functions will look very familiar to those that have used Processing before. They basically define the elements of the app and then the routines to be executed on an endless loop. Cinder, like Processing, runs an infinite loop where graphics can be updated to create animations and interaction.

• setup() where the initialization takes place (similar to Processing’s setup)
• update() called every frame of the execution loop, intended to handle your calculations
• draw() similar to update in that it gets executed once per frame, but intended to deal only with graphics

(image via http://libcinder.org/docs/v0.8.4/anatomypage.html)

Having both update and draw function allows for separation of logic and presentation layer, while keeping the main app loop very simple.

And… go!

That cover all the basics. The Hello, Cinder tutorial is a good place to see some of the possibilities of the language.

December 9, 2012 ☼ code