Introduction: Control OpenFrameworks W/ Phone + Spacebrew
In this Instructable we're going to detail how you can use Spacebrew toolkit to connect your smartphone (via its built in accelerometer) to manipulate aspects of your openFrameworks sketch.
We created an installation and allowed participants to shake a cell phone to change the size and shape of an oF mesh sketch. However, participants could easily just load the page on their own wifi/3G enabled device to manipulate the sketch's variables.
You will need the following:
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: Download Spacebrew Libraries for OF
1st library : ofxLibwebsockets
2nd library: ofxSpacebrew
Implement them in your openFrameworks sketch however you like, but we used oF's Project Generator and selected these in the "addon" menu. It is a really easy way to seamlessly put addons in your sketches.
Make sure you follow the directions on the GITHUB READMEs for both of these libraries. You have to delete a line to use the Project Generator. It's not hard, just easy to overlook.
Step 2: Create Your OF Sketch
We used this tutorial to understand how to make a dynamic mesh sketch in openFrameworks : Mesh Tutorial .
You could choose not to use a mesh, but our example sketch uses one, so you might want to look the tutorial over.
Alternatively, you could use the values coming in from your smartphone's accelerometer to manipulate any number of variables for your own oF sketch i.e. size of objects, shape, color, etc.
Here is the code for our oF mesh sketch: GITHUB - pay special attention to all the places where we call spacebrew.(whatever) and at the very bottom where we call void testApp::onMessage( Spacebrew::Message & m ). This is how you will be able to talk to oF via your phone and the Spacebrew online server.
We'd love to see your sketches! Post links to them if you make an interactive phone installation.
Follow the directions on the README file.
Open the examples and look at the slider example. We essentially used that example as a template for our interactivity. We added jquery mobile to read the phone's inner accelerometer's output and use it in the sketch. Here is our example sketch: GITHUB.
Make sure you change the name of your sketch before you run it or it could get confused with another person running our example sketch. Unique naming helps a lot when you're connecting nodes in the Spacebrew server.
Step 4: Put Your Spacebrew Html ONLINE!
You'll need to put your .html file with the slider interaction (like our example) online so any phone can access it when you're doing your installation. We suggest using a url shortener, like bit.ly, to allow people to access the page quickly.
Use your hosting website of choice, but we like blueHost and we use Cyberduck to get files online fast.
Step 5: Connect Your OF Sketch and .html Site Via Spacebrew!
Here's where the magic happens. Let's make these two sketches start talking!
- Run your oF sketch!
- Open your phone interaction slider .html page on your phone's browser!
- Connect the two via Spacebrew's public session called: SpaceBrew Sandbox
Voila! Your sketch is now responsive to your phone's movements! Enjoy.
Participated in the