Introduction: Control OpenFrameworks W/ Phone + Spacebrew

About: We're a group of designers, coders, and makers -- Alex Tosti, Lucy Matchett, Nicole Messier, and Joselyn McDonald. We enjoy physical computing, coding, Snacks, Our Mac books, surprising interactions, Listeni…

Hi all,

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:

    1. a smartphone with accelerometer (iPhones and Androids work just fine)
    2. SpaceBrew Library for openFrameworks (two links) __> 12
    3. openFrameworks (we give an example sketch)
    4. a web hosting site of your choice
    5. basic html and css knowledge (we give an example!)

    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.

    **NOTE**

    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.

    Step 3: Spacebrew and Javascript

    Download the Spacebrew Javascript package on GITHUB : spacebrew.js

    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!

    1. Run your oF sketch!
    2. Open your phone interaction slider .html page on your phone's browser!
    3. Connect the two via Spacebrew's public session called: SpaceBrew Sandbox

    Voila! Your sketch is now responsive to your phone's movements! Enjoy.

    Sensors Contest

    Participated in the
    Sensors Contest