Category: code

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 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:

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

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.

Launch Sublime Text from the command line

To file under 1-minute-fixes.

I find it extremely helpful to open files directly from the command line while in Terminal. Sublime Text —unlike TextMate— doesn’t set up a command for this, but this is easy enough to fix.

Sublime Text Logo Icon by omarrr

The documentation explains how to create a link to sublime in your local bin via:

$ ln -s "/Applications/Sublime Text" /usr/local/bin/subl

which allows you to open files from the terminal like this:

$ subl ~/.profile


Text Mode for Chrome

There is so much clutter in many of the sites I visit (social plugins, banner ads, and all kinds of visual noise) that it is becoming increasingly hard to concentrate to read articles or even find the text on the page. So, to give me back some peace and zen, I made Text Mode, a little buddy for Chrome.

Text Mode is a Chrome extension that allows users to browse the web without distractions via clean simple text based pages.

Text Mode for Chrome

Text Mode declutters the web by loading all pages in text form (no images, animation or video) so content is easier to scan and read.

This is how the landing page for the International Herald Tribune looks like when Text Mode is enabled. Who needs images of bad news anyways?

Text Mode for Chrome

Here are some key features:

  • View text only pages
  • Images, Video, flash, are never loaded
  • Color-free pages are easier on the eye
  • Reduce pages load
  • One-click easy access
  • Removes 99% of the ads with no extra software

You can install the
Chrome Extension
or fork the
GitHub Repo.

That’s all.

Code linting for JS, CoffeeScript & CSS with Sublime

Code linters are tools that analyze code and flag suspicious portions of it. It encourages proper usage of the language and can detect flaws that compilers can’t by enforcing best practices.

SublimeLinter brings linting to the Sublime Text code editor. It supports JS, CoffeeScript and CSS (among others).


Save yourself some trouble and install SublimeLinter via Sublime’s Package Control plugin.

Interestingly enough JS (and CSS) linting runs on JS and therefore needs a JS engine (Mac OS X comes with JavaScriptCore but you will be using node.js in 99% of the cases)


If you need to edit your setup you’ll do so on the user file: SublimeLinter.sublime-settings (Preferences->Package Settings->SublimeLinter->Settings - User). Here you can indicate, for instance, the path to node.js if it’s not found in its default location.

JS Linter

JS linting is built both via jslint and jshint and can be configured as follows:

"javascript_linter": "jshint",

If you don’t have an opinion on jsHint vs. jsLint, you are probably better off sticking to jsLint. And if you are curious you can read about their differences and (all the drama).

The main advantage of jsHint is that it is highly configurable (see details:

    "curly": true,
    "evil": true,
    "regexdash": true,
    "browser": true,
    "wsh": true,
    "trailing": true,
    "sub": true

CSS Linter:

Can be configured as well through csslint_options.

CoffeeScript Linter:

Will run without any special setup as long as the coffee package has been installed in your machine globally. If CoffeeScript is not installed in your machine, you can easily intall it running the following command (you should have Node Package Manager installed):

npm install -g coffee-script

How to use

If everything went ok while installing you should be all set once you restart Sublime. Offending lines will be highlighted and the status bar will give more details just by hovering those lines.

Sublime Text code hinting

Support Sublime.

Book review: Mobile First

Introduction to mobile best practices, intended for designers/UX folks with limited mobile exposure. The book failed to convince me that “mobile first” is valid premise.

Good read but not a book for coders really.

My favorite quote from the book is this:

Your time is precious so this book is short and to the point.

And so is this review.


  • Level: beginner/intermediate
  • Who is this book for: designers/UX folks with limited mobile exposure.
  • Rating: ★★★ (3/5)