Getting started with CINDER

You know what I like about CINDER?

Tinderbox (, which creates a Visual Studio Project for me – actually works.
There isn’t much I hate more than messing with paths and dependencies.

CINDER (  is one of those creative-coding-environments, like Processing (, or OpenFrameworks (
It’s new, it’s free, it’s C++ and I like it a lot.

When you create a CINDER project, you get five methods:


– prepareSettings: Called at the very beginning, before even a Window is created
(so here’s how to tell the PC how to render)
– setup: Once, at the beginning of an ap
– update: in a loop, during the runtime.
– draw: as well. It’s pretty obvious what you are suppoesed to do..
– shutdown: Well, shutdown..

Of those, Tinderbox gave me

void setup();
void mouseDown( MouseEvent event );
void update();
void draw();

There are a number of different callbacks for mouse, keyboard, touch,..

So, starting to do my UI, I first added the prepareSettings method.

void dSignatureApp::prepareSettings(Settings *settings)
// settings->setWindowSize(1000,800);
settings->setTitle("3D signature");

There’s a number of things you can do, and I suggest you to look here:

As a next step, I need to allow my function to exit.
Exit() is not the best idea, because it seems to disregard the shutdown() function.
So instead of that, I use quit().
And attach that to ‘Enter’.

void dSignatureApp::keyDown(KeyEvent event )
//quits on enter

So, what I’ve got is an app that does nothing but show a blank screen and quits on ‘Enter’.

What I’m not using, is the draw function.

First, I change the screen to some nice-looking color.
And then I draw a String, which is done by the following OpenGL function:

void drawString (const std::string &str, const Vec2f &pos, const ColorA &color=ColorA(1, 1, 1, 1), Font font=Font())
Draws a string str with its lower left corner located at pos. Optional font and color affect the style.

(see here:

The entire function is something like this:

void dSignatureApp::draw()

gl::clear( Color( 0.17f, 0.24f, 0.31f ) );
cinder::Color textcol=Color( 1.0f, 0.24f, 0.31f );
cinder::Font textfont=Font(“Calibri”,76);
gl::drawString(“Test”,Vec2f(100,100), textcol,textfont);




One comment

  1. […] ‹ Getting started with CINDER […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: