Your SlideShare is downloading. ×
0
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Connected Spaces IoT: Ring by Invisible Light Network
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Connected Spaces IoT: Ring by Invisible Light Network

136

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×