Category: Cinder

Cinder + Box2D

Box2D is a popular 2D physics engine for C++.  It’s free and open source and pretty easy to integrate with Cinder.  I recently tried out another engine called MSAPhysics and wrote a tutorial on setting it up with Cinder.  It’s a great little library, super easy to get up and running, and can even do a good job of 3D physics, however it lacks some advanced features and there’s very little community contributed code behind it.  So I thought I’d try out an alternative and see how they compare.  My friends at OneDayItWillMake and Wu-Media had spoken highly of Box2D and have used it in iOS games and with Cinder in Eclipse on OSX.  In this post, I attempt to integrate it with Cinder in VisualStudio 2010 on Windows 7.

Using b2cinder

First, I tried out a sorta Cinder block in progress called b2cinder by David Wicks (aka sansumbrella).  His sample project already takes care of some of the code needed to convert Box2D objects to Cinder objects and vice versa.  No coding needed for this part…

2.  Place sc-Box2D in cinder/blocks folder
3.  Open BasicBox2D sample app in vc10 folder
4.  Make sure these properties have correct paths:
    C/C++ –> General –> Additional Include Directories
    Linker –> General –> Additional Library Directories
5.  Had to add “using namespace ci;” to the following code files:
6.  In Solution right-click Header Files and Add Existing…
    Add all files and sub-directories within sc-Box2D/include/b2Cinder and sc-Box2D/include/Box2D.
Now you should be able to run the app and this is what it looks like.
Integrating Box2D From Scratch
Next I wanted to try out the latest and greatest version of Box2D, since sansumbrella’s version was slightly older.  
1. Create BasicApp in TinderBox called Box2DTest
2. Download Box2D from 
3. Open vc10 .sln file and build Box2D project.
4. Copy Box2D.lib file created into new folder in Box2DTest called “lib”

5. In Linker –> General –> Additional Library Directories

    add path to “lib” folder you just created
    In C/C++ –> General –> Additional Include Directories 
    add path to Box2D_v2.2.1
    Note: be sure to add these to both Debug and Release run configs

6. Add this to top of code file:
    #include <Box2D/Box2d.h>
7. Under “Header Files”, add all .h and .cpp files to Solution.
8. Create a Box2D World with gravity.
    b2Vec2 gravity(0.0f, 10.0f);
    b2World world(gravity);
9. Add the file Conversions.h from b2cinder lib which does pretty good job of converting between box2d and cinder floats, vec2f, and more.
10. Code
Here is the source code on GitHub for a quick example I created using these steps:
Another screenshot:

Cinder + MSAPhysics

is a simple and light-weight physics engine for Cinder or OpenFrameworks created by Memo Aktens.  I downloaded it from his git repository where he hosts a bunch of useful C++ libraries and decided to try it in conjunction with Cinder in VisualStudio 2010.  Unfortunately the VS2010 sample apps that came with it, didn’t work right away.  The MSAPhysics lib hasn’t been kept up to date in a couple of years.  For this reason many prefer to go with Box2D for a better supported, fully featured, and robust physics engine.  MSAPhysics is a great alternative if you want to do something really quick in a 2D or 3D world.  Here are the simple steps for first getting MSAPhysics samples working and then to add the MSAPhysics library to a new project.  This requires setting up Cinder as described here, as well as VisualStudio 2010.

Get msaPhysicsBasic Cinder Sample App Working

The sample app is very useful for learning how to use MSAPhysics and see it’s potential.

1. Open the vc10 solution msaPhysicsBasic

2. Fix the following properties.  Adjust the paths to point to your cinder directories…
    C/C++ –> General –> Additional Include Directories
    Linker –> General –> Additional Library Directories (added extra ../ in my case)
3. Copy all the .h and .cpp files found in the following mslibs src folders
    Paste into the sample projects include folder
4. Now right-click Sln –> Header Files and add all the files you just copied.  Looks like this now:
5. In MSACore.h, uncomment this line: #define MSA_HOST_CINDER
6. Make sure both of the following are included in your main app:
    #include “MSAPhysics.h”
    #include “MSAPhysics3D.h”
7. Make following replacements in the main app:
    Physics::World3D physics;
    Physics::Particle3D mouseNode;
    //Physics::World physics;
    //Physics::Particle mouseNode;
    Also change all occurrences of Particle, Spring, and more to Particle3D, Spring3D, etc
9. Change anywhere you have something like 
10. Change loadResource() call to loadAsset() and put ball.png into a folder called “assets” in sample app folder
Get MSAPhysics into a new Cinder App
1. Create Basic App in TinderBox (which comes with the windows distribution of Cinder 0.84)
2. Copy all the .h and .cpp files found in the following mslibs src folders
    Paste into the sample projects include folder

3. Add the files you just copied under Sln -> Header Files (see screenshot above).

4. In MSACore.h, uncomment this line:  #define MSA_HOST_CINDER
5. Add this line to the top of your main cpp file:  #include “MSAPhysics2D.h”
    Optionally add this line:  using namespace MSA;
6. Code
A Quick Test App I Created
Here is some source code from my own experiments with MSAPhysics.  I wanted to be able to abstract out a particle system that uses MSAPhysics.  I define the Physics::World2D in the main app.  Then, when initializing the ParticleController, I pass in a reference to World2D.  Then when creating each Particle, the ParticleController also creates a Physics::Particle2D, and passes it’s reference to its corresponding Particle instance to store.  This way a Particle can draw itself using data from the physics world, as well as it’s own member data such as a color.
Here is the end result

Ableton Live Talks OSC to Cinder

The goal here is to have Ableton Live transmit all track data and user actions to a C++ program which can use that data to generate unique visuals.  If you want to create interactive visuals for a music performer, the obvious way is to use a live audio feed.  However you can only do so much with such a feed and visuals end up only responding to the master level.  With the help of a tool called LiveOSC, it’s possible to get OSC data out of Ableton Live.  OSC or Open Sound Control is a data format which is usually transmitted over a wifi using a protocol called UDP, and this data can be picked up by a C++ application.  In this case we’re using a C++ framework called Cinder and the OSC is interpreted into visualizations.  This OSC data can tell us stuff like:

– when the set begins or ends
– when each beat occurs (as in once a second for 60 bpm)
– when any track level or the master level is changed
– when the user switches to the next track
– when the user tweaks any knob

I’m using the following tools to accomplish this task.

Ableton Live 8.2.6 (OSX in my case)
XCode or VisualStudio 2010 (or Eclipse which I’m using, but that’s a whole other topic)

Ableton Live gets LiveOSC

LiveOSC is a simple way to get OSC data out of Live.  It’s hosted here by its creator:

There’s not much help on the site, but it really is that simple to get it working.

1. install python 2.5.1 (Do not skip!)
2. place LiveOSC in Live.App/Contents/App-Resources/MIDI Remote Scripts/
3. go to Preferences -> MIDI Sync and select LiveOSC as a Control Surface

Live should now be transmitting OSC data over UDP on port 9001, as well as listening on port 9000.  However we don’t yet have a way of listening to the transmission.  You could probably use some sort of network monitoring tool to check if it’s working.  But it’s actually easier to proceed with setting up the next tool, Cinder, since it comes with a sample app called OSCListener which will pick up this OSC data and parse and display it.

[As an aside, by default LiveOSC seems to transmit to it’s own host machine’s IP, my next goal is to make it transmit to a different IP]

Listening with Cinder

Cinder is an excellent C++ framework that makes it a breeze to make complex interactive and visual apps. You can download it for free and it comes with many sample apps as well as a set of tutorials by a talented artist, Robert Hodgin.  My preferred way of setting up Cinder is with Git, using these instructions.

Once you are setup correctly, you should be able to launch any of the sample apps that the Cinder library comes with.  Go into cinder/blocks/osc/samples/OscListener/ and then launch either the Xcode or VS2010 app depending on your platform of choice.

Now in the source file OscListenerApp.cpp, make one simple change.  Look for the following line and change the port number from 3000 to 9001:


Now run OscListenerApp and then go to Ableton Live and move the master level slider up and down.  You should see some OSC data pop up in you Xcode console!

The master level slider will also effect the OscListener app screen.  The white part of the window should extend to the right as you increase the volume.  This slider will have this effect while others may not.  In the code the simple visual effect is only performed when the first argument is a float.

Making sense of the OSC

I’m still figuring out the nitty gritty of interpreting the OSC messages from LiveOSC.  Most of it is pretty self explanatory.  Here’s an example.  The output is reformatted so it looks more readable (to me)
–> /live/play  #args:1  [0]int32: 2  
–> /live/beat  #args:1  [0]int32: 1  
–> /live/beat  #args:1  [0]int32: 2  
–> /live/beat  #args:1  [0]int32: 3  
–> /live/beat  #args:1  [0]int32: 4  
–> /live/beat  #args:1  [0]int32: 5  
–> /live/beat  #args:1  [0]int32: 6  
–> /live/scene  #args:1  [0]int32: 3  
–> /live/clip/info  #args:3  [0]int32: 0  [1]int32: 2  [2]int32: 3  
–> /live/beat  #args:1  [0]int32: 7  
–> /live/clip/info  #args:3  [0]int32: 0  [1]int32: 1  [2]int32: 1  
–> /live/clip/info  #args:3  [0]int32: 0  [1]int32: 2  [2]int32: 2  
–> /live/beat  #args:1  [0]int32: 8  
–> /live/beat  #args:1  [0]int32: 9  
–> /live/beat  #args:1  [0]int32: 10  
–> /live/beat  #args:1  [0]int32: 11  
–> /live/play  #args:1  [0]int32: 1

Things to note:
– we get a message on start and stop with the address /live/play
– we get a message on every beat with the address /live/beat
– we get a message when switching tracks with the address /live/clip/info
– the last argument in some cases is an int that represents the following values:

0 = empty
1 = stopped
2 = playing
3 = triggered

So the 3 /live/clip/info messages were sent when I triggered the new clip, the old clip stopped, and the new clip started.

TouchOSC talks to Cinder

This section is not really related to the above, but is another simple proof of concept.  Another way to send OSC signals to a Cinder app is to use your phone.  Just install an app called TouchOSC (free on Android, $5 and more full featured on iOS).  Make sure your phone and computer are connected to the same wifi network, open up TouchOSC, and configure it with the following settings:

Host:             Port (outgoing):  9001
Port (incoming):  9000

Now just start up one of the touch layouts in TouchOSC, start up your OscListener app, and like magic, you should see messages coming in to your Cinder app.