Connected Spaces IoT: Ring by Invisible Light Network

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

INTRODUCING RING

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.

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.

BUZZ AND BIOLOGY

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

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

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

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

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

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.

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. :(

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

USER TESTING

SETUP

IN ACTION

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.

INTRODUCING NU

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.

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.

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?

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

CODE PIPELINE

NU was manufactured by Shapeways, our production partner.
Brand new facility in Long Island City.
PRODUCTION PIPELINE

PRODUCTION PIPELINE

FINISHED PRODUCT

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.

(not a cult)
ILN THANKSYOU

elliot@invisiblelightnetwork.com
yotammann@gmail.com
@invisLightNet

Connected Spaces IoT: Ring by Invisible Light Network

Recommandé

Recommandé

Contenu connexe

Plus de Oxford Tech + UX

Plus de Oxford Tech + UX (15)

Dernier

Dernier (20)

Connected Spaces IoT: Ring by Invisible Light Network