• Save
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Connected Spaces IoT: Ring by Invisible Light Network

on

  • 163 views

Elliot Blanchard from Invisible Light Network gave a presentation at NYCCHI Presents: Connected Spaces - the Internet of Things in September 2013 at Parsons School of Design. ...

Elliot Blanchard from Invisible Light Network gave a presentation at NYCCHI Presents: Connected Spaces - the Internet of Things in September 2013 at Parsons School of Design.

Elliot Kealoha Blanchard is an award-winning director, designer, and animator. He leads Invisible Light Network, an integrated creative studio involved in unique motion design, interactive work and short films. Invisible Light Network's clients include Google, UNICEF, Vitamin Water, and GE.

INVISIBLE LIGHT NETWORK: For South By Southwest 2013, Invisible Light Network built Ring - a connected space that represented a new way to measure grassroots buzz. Ring tracked Twitter and Tumblr activity for all 1800+ bands performing at SXSW Music, mapping the network of retweets and Tumblr reblogs that move initial posts through the social media world in a beautiful, biologically inspired metaphor - and allowing visitors to interact with the data through a touchscreen interface. And because Ring was built from the ground up as a hardware-accelerated Chrome app, anyone in the world was able to experience Ring using a Chrome browser.

Invisible Light Network also thought beyond the screen with their Nu project. Nu transformed music into a unique piece of wearable art - using sophisticated audio analysis, generative 3D code, and 3D printing, Nu transformed the fundamental musical elements of a song into a unique physical structure.

See Eventbrite for more details: http://www.eventbrite.com/e/nycchi-presents-connected-spaces-the-internet-of-things-tickets-7898234833?aff=eorg

Statistics

Views

Total Views
163
Views on SlideShare
163
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Connected Spaces IoT: Ring by Invisible Light Network Presentation Transcript

  • 1. Thursday, September 5, 13
  • 2. INTRODUCING ILN We are an integrated creative studio based in sunny Brooklyn. Our clients include Starwood Resorts, Google, GE, and UNICEF. We ♥ broadcast, interactive, and experience design. Thursday, September 5, 13
  • 3. INTRODUCING RING Thursday, September 5, 13
  • 4. INTRODUCING RING Want to understand the buzz around SXSW 2013? Ask Ring. Ring was an installation project commissioned by eMuze and Learned Evolution. Ring debuted at the #FEED space for SXSW 2013. Ring trackedTwitter andTumblr activity for all 1800+ bands performing at SXSW Music, mapping the network of retweets andTumblr reblogs that move initial posts through the social media world. Ring represented a completely new way to measure how much grassroots buzz bands were getting going into SXSW – independent from conventional press coverage - and how that changed during the festival run. Thursday, September 5, 13
  • 5. GOALS With Ring, we wanted to erase the distinction between an installation and a laptop experience. Ring is a connected space that you can experience anywhere. Building Ring as a hardware-accelerated Chrome app made this possible. But it took careful thought about how to design the system - and a lot of work on optimization. Big message: start thinking about the GPU and hardware acceleration. Thursday, September 5, 13
  • 6. BUZZ AND BIOLOGY Thursday, September 5, 13
  • 7. How do you turn a metaphor into an interface? Getting your client onboard for exploration. How do you bring a connected space to the laptop? How do you build an interface that encourages exploration? Talking things through before anything else. And then Photoshop. The best inspiration: a tight deadline and a small team. THE DESIGN PROCESS Thursday, September 5, 13
  • 8. Node.js running on a VPS (virtual private server) crawls and stores relevant twitter and tumblr posts in a PostgreSQL database.  Client computer requests data and stores/organizes it using Backbone.js then visualizes it using three.js. Ring was designed to work with the API limits thatTwitter andTumblr impose. TECHNICAL OVERVIEW Thursday, September 5, 13
  • 9. Thursday, September 5, 13
  • 10. Node.js is server-side javascript.  Large adoption by companies such as Linkedin, Microsoft, eBay, etc.  Allows these companies to share developer resources across both client and server.  We chose postgreSQL for it's ease of use with node.js and Mac OSX Care was taken on how and how often the database was queried, since it quickly grew to over 200,000 posts.  SERVER-SIDE ARCHITECTURE Thursday, September 5, 13
  • 11. Tumblr API is pull-driven, where the crawler makes a request for all of the relevant search terms andTumblr responds with a JSON representation of that data.  Twitter API is push-drive, where the crawler registers all of the key terms that it would like to listen for anTwitter sends relevant tweets as they come in.  Twitter calls it a firehose Tumblr has a generous limit of 10,000+ requests per day of any type.  Twitter breaks down the limit by type of request, but is much stingier.The "firehose" option is unlimited though.  API INTEGRATION Thursday, September 5, 13
  • 12. Using traditional web frameworks aided in development time since traditional UI such as buttons, sliders and text are very simple to do in the browser and less simple in other frameworks.  Also gave us the ability to develop the installation and the web experience with a huge amount of code overlap. CLIENT-SIDE ARCHITECTURE Thursday, September 5, 13
  • 13. Three.js Three.js is built on a new web technology called WebGL, which allows for graphics card processing through javascript.  It was the only way to get thousands of posts visualized and smoothly animated in the browser.  It also gave us the ability to write a custom shader for added performance.  CLIENT-SIDE ARCHITECTURE Thursday, September 5, 13
  • 14. WebGL WebGL has big implications for UI/UX.  Ability to visualize and manipulate large data sets in the browser with excellent performance. (and in 3d!) Though not a widely adopted standard at this time. :( CLIENT-SIDE ARCHITECTURE Thursday, September 5, 13
  • 15. Blending of HTML with frameworks that draw from gaming and 3d. Understanding how the GPU works will become more important in the future - our optimization work lead to a system that functioned on both a high-end desktop and a mac air. Building UX that works in a touchscreen space and on a laptop. WHY THIS MATTERS Thursday, September 5, 13
  • 16. USER TESTING Thursday, September 5, 13
  • 17. SETUP Thursday, September 5, 13
  • 18. IN ACTION Thursday, September 5, 13
  • 19. IN ACTION Thursday, September 5, 13
  • 20. IN ACTION Thursday, September 5, 13
  • 21. IN ACTION Thursday, September 5, 13
  • 22. IN ACTION Thursday, September 5, 13
  • 23. IN ACTION Thursday, September 5, 13
  • 24. IN CLOSING A new way to look at buzz - trying to see beyond what the press is covering. Bridge the gap between the connected space and the personal experience.You can experience Ring at SXSW - or anywhere in the world. Clients love this. Your future is on the GPU. You can’t go wrong with GIF animation. Ring’s design is as much about showcasing what the fan community loves about their artists as anything else. Thursday, September 5, 13
  • 25. INTRODUCING NU Thursday, September 5, 13
  • 26. INTRODUCING NU Nu: A bracelet created by sound. Designing a physical interface to your music collection. Nu transforms music into a unique piece of wearable art. Nu uses sophisticated audio analysis, generative code, and 3D printing to understand the fundamental musical elements of a song, and then use those elements to define the structure of a physical object: every song leads to a completely unique form. Thursday, September 5, 13
  • 27. GOALS Create a family of form that's beautiful, significant, and ever unique. Attempt to create a new way for musicians to connect and communicate with their audience. Really take advantage of 3D printing - instead of generating many copies of the same object - why not make every object unique?This is the big advantage over traditional manufacturing. Thursday, September 5, 13
  • 28. The most important design goal: avoid the cliche of the waveform. Searching for a new family of forms that is visually relevant. What do you measure that makes sense - and shows significant variation (AKA the BPM problem)? Nu’s custom fabrication code uses six pieces of musical data: • BPM: folding pattern complexity  • Beat emphasis: left right fold ratio • Syncopation: front back fold ratio • Beat intensity: fold depth • Song length: hole extent • Rhythmic complexity: inner to outer scale • Frequency distribution: inner depth WHAT IS THE FORM OF A SONG? Thursday, September 5, 13
  • 29. 1. Audio analysis software(s) 2. Rhino: NURBS-based 3D software package. Popular in architecture and industrial design. Can design to the exact tolerances needed for fabrication. 3. Grasshopper: Parametric visual programming environment for Rhino. Generates the form of Nu from the audio data. CODE PIPELINE Thursday, September 5, 13
  • 30. CODE PIPELINE Thursday, September 5, 13
  • 31. CODE PIPELINE Thursday, September 5, 13
  • 32. CODE PIPELINE Thursday, September 5, 13
  • 33. NU was manufactured by Shapeways, our production partner. Brand new facility in Long Island City. PRODUCTION PIPELINE Thursday, September 5, 13
  • 34. PRODUCTION PIPELINE Thursday, September 5, 13
  • 35. PRODUCTION PIPELINE Thursday, September 5, 13
  • 36. PRODUCTION PIPELINE Thursday, September 5, 13
  • 37. PRODUCTION PIPELINE Thursday, September 5, 13
  • 38. FINISHED PRODUCT Thursday, September 5, 13
  • 39. FINISHED PRODUCT Thursday, September 5, 13
  • 40. FINISHED PRODUCT Thursday, September 5, 13
  • 41. FINISHED PRODUCT Thursday, September 5, 13
  • 42. IN CLOSING New manufacturing lowers the barriers to the digital to become physical. Mass production becomes mass customization. Think about how your users can stay connected to the brand when they’re not connected. Thursday, September 5, 13
  • 43. (not a cult) ILN THANKSYOU Thursday, September 5, 13
  • 44. elliot@invisiblelightnetwork.com yotammann@gmail.com @invisLightNet Thursday, September 5, 13