itp spacebrew workshop - spring 2014
DESCRIPTION
Presentation from my weekend-long Spacebrew workshop at NYU ITP, 2/1-2/1/14.TRANSCRIPT
![Page 1: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/1.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew2/1/14 + 2/2/14
![Page 2: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/2.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
ScheduleToday • Now-10:30: - Quick Introductions • 10:30-12:00 - Introduction to Spacebrew • 12-12:30 - Lunch break • 12:30-2:00 - Spacebrew exercise • 2:00-3:00 - Advanced Spacebrew • 3:00-5:00 - Assignment: Brainstorm, jam session
!
Tomorrow • 12:00-12:45 - Demos • 12:45-1:45 - Documentation
![Page 3: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/3.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew Basics
![Page 4: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/4.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Setup TimeSoftware Basics • Processing • Arduino • a Text Editor • openFrameworks
Spacebrewhttps://github.com/Spacebrew/
• spacebrew • spacebrewP5 • ofxSpacebrew • ofxLibwebsockets
• spacebrew.js
![Page 5: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/5.jpg)
Spacebrew Workshop - NYU ITP - Brett RenferObligatory hype video!
![Page 6: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/6.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew…• is a service and toolkit for choreographing interactive spaces !
• makes it easy to connect interactive things to one another !
• was developed to support prototyping-driven design efforts
![Page 7: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/7.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
client app
client app
client app
client app
Client-Server ModelEach client can feature one or more publishers and subscribers. The server can be hosted online or run on a local network (more on that later).
![Page 8: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/8.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
client app
client app
client app
client app
Client-Server ModelClients communicate with the server via WebSockets. All data is formatted as JSON
![Page 9: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/9.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Client-Server ModelThe server routes all publishers and subscribers. Routes can be edited via a switchboard-like interface
![Page 10: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/10.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Data TypesThree standard types allow for quick and easy routing. Custom types are also supported
= true or false
= 0-1023
= “some text”
![Page 11: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/11.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Data TypesEach publishers and subscribers announces its type, allowing for automatic routing between different apps
= true or false
= 0-1023
= “some text”
![Page 12: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/12.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
JS
LibrariesSpacebrew aims to be implementation agnostic.We want to use the right tools at the right time!
![Page 13: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/13.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Why?• We’ve used a lot of “glue” languages/toolkits in the past, but there wasn’t one that was truly cross-platform/cross-toolkit.
• Wanted to build a toolkit with a low floor and a high ceiling: easy for speed prototypes, advanced enough to handle commercial applications.
![Page 14: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/14.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Using Spacebrew
![Page 15: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/15.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew LibrariesEach Spacebrew library: • Connects to a Spacebrew server via WebSockets • Has an API to declare its publisher(s) and subscriber(s)
• Receives messages from Spacebrew and dispatches events accordingly
![Page 16: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/16.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew LibrariesConnecting to Spacebrew in each Library • Create a Spacebrew Object • Tell your object the IP or hostname of the Spacebrew server
• Declare any publishers and subscribers • Connect
![Page 17: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/17.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew + Processing• spacebrewP5 is a Spacebrew-supported library
• install the library at ~/Documents/Processing/libraries (make the folder if it doesn’t exist!)
• restart Processing if it was open
• open the spacebrew_base example to get started!
![Page 18: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/18.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew + Javascript• spacebrew.js is a stand-alone script that can run in any browser that supports WebSockets
• this includes: Chrome (OS X, Windows, Android, iOS), Safari (OS X, iOS), Firefox, Opera, IE 10
• open the spacebrew slider example in your text editor
• open http://bit.ly/sbslide on your smartphone
• also try http://bit.ly/sbaccel
![Page 19: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/19.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew + openFrameworks• ofxSpacebrew connects to Spacebrew via ofxLibwebsockets
• once you have both installed, you can create ofxSpacebrew projects via the OF project generator
• let’s look at example_button
![Page 20: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/20.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Spacebrew + Arduino• Two routes:
• the easy road: use Processing + Serial
• the road less travelled: Spacebrew Arduino libhttp://github.com/labatrockwell/spacebrew-arduino-library
• requires Arduino Ethernet shield • notoriously difficult to debug!
![Page 21: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/21.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Thinking About Apps• We try to silo apps whenever possible • Create specialized apps that are easy to re-use • Allows for multiple languages for each need • Quickly and easily move between machines/networks when necessary
• Allows for easy prototypes in the future!
![Page 22: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/22.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Questions?
![Page 23: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/23.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Lunch O’Clock
![Page 24: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/24.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Zip! Zap! Zow!Everybody stand up!
![Page 25: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/25.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
ExerciseZip! Zap! Zow! 2.0
![Page 26: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/26.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
ZZZ2.0• use any library you wish
!• create an app that has one publisher and one subscriber, both of which are range type
• Your app must change states when it receives a range.
• Your app must have a trigger to send out its value! (e.g. mouse click, key press, sensor read)
![Page 27: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/27.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Custom Types
![Page 28: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/28.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Custom Types• Spacebrew supports arbitrary type names and data (anything that reads as valid JSON will work) !
• Similar to built-in types, you can only route to matching names (e.g. we might know that “float” could probably route to “int”, but to Spacebrew they’re wholly different)
![Page 29: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/29.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
![Page 30: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/30.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Example: Ultrabook Tree• Each input station sent a custom “bloom” object:
• Which image (id) • Number of laptops • Radius • Relative position (x,y) • Velocity • Rotation
![Page 31: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/31.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Quick Brainstorm• What are some scenarios you might use custom types for?
![Page 32: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/32.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Custom Type Demo• JSON in spacebrew.js, ofxSpacebrew, and spacebrewP5 !
• Why JSON? • It’s a simple way to send arbitrary objects • Spacebrew uses it, so all libs have some sort of JSON library included (if there isn’t one built in)
![Page 33: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/33.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
You Got Served
![Page 34: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/34.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Running Your Own Server• Why?
• sandbox.spacebrew.cc is on the slowest AWS tier !
• Running over the internet introduces some level of latency !
• Running a local server OR a remote server allows a level of control: only people you choose can route/reroute, break your routes, etc !
• Allows you to customize the server code if you choose!
![Page 35: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/35.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Running Your Own Server• How?
!• Setup! Only needs to be done once
• Download and install nodejs: www.nodejs.org !
• Install node dependencies: !
• npm install ws • npm install forever-monitor
![Page 36: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/36.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Running Your Own Server• How?
!• Run! What you’ll do every time:
• In terminal, cd to the spacebrew directory !
• Run: node node_server_forever.js
![Page 37: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/37.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Running Your Own Server• How?
!• If you want to set up your own remote server, we recommend this tutorial (by fellow ITPers!):https://vimeo.com/60001410
![Page 38: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/38.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Persistence• Another advantage of running your own server is you can use the persistent admin !• The persistent admin is a separate service that lets you edit, save, load, and persist routes !
• It allows you to specify specific app routings:coolApp -> coolPub to lameApp -> lameSub !
• It also allows for powerful wild card routings:.* -> coolPub to .* -> lameSub
!• This routes any app that publishes “coolPub” to any other app that subscribes to “lameSub”
![Page 39: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/39.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Persistence• You can run the persistent admin from the spacebrew directory:node node_persistent_admin.js !
• From the command line, you can list, add, remove, load, and save routes: !• list: ls
• add: add client1Name,pub,client2Name,sub • use .* to create a wildcard
• remove: remove [index] • you can find an index after add or by listing
• save / load (just that!) • load is called on start automatically
![Page 40: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/40.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Admin
![Page 41: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/41.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
The Admin API• You don’t just have to use our web interface!
!• Javascript, openFrameworks and Cinder (Processing soon) support the Admin API
!• The Admin API subscribes to Spacebrew similar to a client, firing events each time a client connects/disconnects or changes its pub/sub map !• It allows you to view, edit, and add any and all routes in real time! !
• This allows for apps like the Admin Randomizer from the Zip! Zap! Zow! exercise
![Page 42: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/42.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
The Admin API• Try it out: http://bit.ly/sbslider-admin
• Let’s look at the Admin API in Javascript
![Page 43: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/43.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Jam Session
![Page 44: ITP Spacebrew Workshop - Spring 2014](https://reader033.vdocument.in/reader033/viewer/2022051112/557d4e25d8b42ae3298b4d82/html5/thumbnails/44.jpg)
Spacebrew Workshop - NYU ITP - Brett Renfer
Assignment• For tomorrow:
• option A: • brainstorm an interaction scenario that would require (at least) 3 separate input/output stations
• create a prototype using spacebrew!
• option B: • build a prototype that physicalizes spacebrew routes (and uses the admin API)
• demonstrate it routing/re-routing with the built in examples