How to draw things mirrored in CINDER / OpenGL

So I’ve been working with the Intel PCSDK and CINDER for the past hours, and one of my first questions was:

How do I flip my input stream? In fact, how do I mirror anything in CINDER or OpenGL?

If you want to do gesture-controlled apps, it’s quite important to give your user visual feedback. Unfortunately, cameras provide a “mirrored” image (that is, rotated by 180 degree) of what you see. Lift your right arm and you see the arm on the left side moving..

Now, my first idea was to solve the problem based on the fact that CINDER / OpenGL / basically any of those frameworks work with some kind of camera/viewpoint. So the idea is that you simple look at your scene “from the other side”.

I could have used one of those fancy OpenGL tutorials (, and in fact, they work well and are quite logical once you get through them, but since I’m writing a  CINDER app, I figured I’d try the native solution.

CINDER offers two kinds of cameras:

A perspective camera (How to use this:, and the orthographic camera (Documentation:

I used the later one,because I explicitely don’t want perspective, I just want to turn my point of view.

First, include the file:

#include "cinder/Camera.h"

Then, create a member variable for your App-class:

ci::CameraOrtho mCamera;

Go to your setup() method, and add the following

mCamera.setOrtho(getWindowWidth(), 0,getWindowHeight(),0 , 1,-1);

setOrtho is trivial, once you get to look at the spec:

void setOrtho (float left, float right, float bottom, float top, float nearPlane, float farPlane)

You simply redefine what is left and right in “absolute” coordinates.

Well, and as a final step, you add this to your draw function:

gl::setMatrices( mCamera );


Great. Your things should now appear flipped in your window.

CINDER is that easy. 🙂


Except when it’s not.

You start playing around with your stuff and make the coordinates work, and then you realise that you want to draw some text, maybe in OpenGL.

And so you do this:

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

And I probably don’t even need to tell you what happens:

Flipped Text

Ugly, uh?

So while flipping the entire viewpoint in the beginning can be a good idea, it probably isn’t.

Fortunately, there’s OpenGL to help:

cinder::Color textcol=Color( 1.0f, 0.24f, 0.31f );
cinder::Font textfont=Font("Calibri",76);

gl::translate( Vec3f(getWindowWidth()/2,getWindowHeight()/2,0) );
gl::rotate( Vec3f(0,180,0) );

gl::drawString(“Test”,Vec2f(100,100), textcol,textfont);



Mirrored again

Flip anything, rotate, translate, mirror anything! Yay!

(But I really, really don’t recommend you to start with a mirrored POV and just flip everything back. Coordinate systems get a bit scary that way ;-))


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: