Making the web tangible

Introduction to Internet of Things

I am George Profenza
Creative Technologist for Hirsch&Mann
(Occasionally software guy for TWSU ^_^)

HIRSCH&MANN PROFILE
We collaborate with organisations to build the future by
imagining, making and participating in it.

ART
Asks
Questions

TECH
Offers
Possibility

DESIGN
Creates
Solutions

CUSTOMERS
Develop
Businesses

** Evolution of John Maedas How Art, Tech and Design inform creative leaders

Hirsch&Mann works at the intersection of people, technology

and business needs.
We work with organisations to understand and build
compelling physical technology interactions through brand to
empower human experiences by creating emotional
connections.
We do this by rapid prototyping products, strategies &
experiences that are based on user insights and blend digital
and physical technology. This approach helps us and our clients
to learn by doing and create outcomes immediately.
Our client list includes: Aol, Beats By Dre, Golin Harris, Google,
Rehab Studios, Jason Bruges Studio, KK Outlet, LBi, Mr
President, MRM Meteorite, Nike, Poke London, Red Stripe,
Siemens, Skype, Squint Opera, Stink Digital, TBWA, Technology
Will Save Us, The Science Museum, The Victoria & Albert
Museum, The W.I.R.E., Wieden Kennedy, and Wolff Olins

What am I going to talk about today?

Project Ive been involved with related to web
technologies
What is this whole IoT thing about
Physical Computing
Web Development
web connected physical things
Perhaps a little demo (yay!)

Xperia Vs Fashion, Sony - London, UK (2013)

Hirsch&Mann collaborated with Ryan Hopkinson to make a beautiful vision of a spiral time slice become a reality by creating an amazing custom spiral rig of 100 Sony
Xperia smartphones. A model was then filmed walking along the catwalk whilst items of clothing from Christopher Raeburns SS14 collection were pulled off him. The
resulting time slice imagery is extraordinary. A bespoke software application was created to bring this idea to life. All physical, electronic and digital elements were
custom designed, built and delivered via Xperia phones.

Xperia Z Versus Fashion

Sony - London, UK (2013)
Background
Can we create an amazing technology experience that can
capture timeslice films of a fashion show using smartphones?
The H&M Process
We love technology, but it can not be alone; it needs to bring
magic to peoples lives. Through our strategic ideation approach
we identified fashion as a key lifestyle trait for Sonys audience.
Working with Ryan Hopkinson and fashion designer
Christopher Raeburn we fused art, technology and fashion to
bring that sense of magic to frozen
moments in time.
Result
Created a custom mobile software application that enabled
synchronized photography and visualisation across 100+
phones.
As the objective was to get people talking a considerable
amount of Social media coverage and hundreds of thousands
of youtube views were delivered.
Outcome

1st bullet time smartphone spiral rig

100 x Sony Xperia Z phones
phones = clients, 1 computer = server (FTP, OSC(TCP,UDP))
UDP+confirmation for fast messages(take photo, change mode, flash, animate background color sequence,etc.)
TCP socket queue to transfer previews and high res images
Java SDK for Android app/Processing for Server/SureMDM for phone management

LED Jacket
Intel - London, UK (2012 & 2014)
We were invited to collaborate with Christian Joy on the creation of an LED covered jacket that
could be used for live music performance. The initial prototype demonstrated the magic of having
a sound responsive light covered fashion item - and resulted in a commission to produce two more
later stage prototypes that could be worn on stage during live music performances.

LED Jacket
Intel
London, (2012 & 2014)
Background
We were approached by Intel who had a fashion designer, a
musician and a question. Can technology power an amazing
performance for indie rockers the Yeah Yeah Yeahs?
The H&M Process
We collaborated with US based fashion designer Christian Joy to
identify the interaction opportunity for their jacket design. In a
strategic ideation process we evolved their initial designs to a
concept of a sound responsive piece.
We had one week to prototype a bespoke easily controllable
sound analysis software using an intel ultrabook to power LED
add-ons that would bring the jacket and the performer to life
on stage.
We simplified the system and designed the jacket to be more
flexible to make it fit for the performers. To simplify the
experience we created software that could run on Intel
powered android smart phones. We created two fully functional
jackets - ready for live performance.
Result

Android SDK application using Serial port communication to Arduino nano micro controller (DMX controller)
Android app is also a websocket server allowing remote control from any modern browser
The phone runs an HTTP server offering a minimal html interface to the app.
FFT sound analysis was used to map sound frequencies to light

Chuck Hack - Google Creative Labs & Converse

Google Creative Labs - London, UK (2013)
Hirsch&Mann collaborated with Google Creative Labs, Amplify and Converse to create a digital and real life
hacking garage with a line up of workshops in east London for fans of Converse to express their creativity. This
included collaborating with the talented spatial designers We Like Today to design and build the space. For the
final space, we created a number of responsive technology pieces. This included a LED tweet ticker to stream live
tweets in real time, an animated GIF maker for people to share their creations as well as Lampshot - four
connected desk lamp and webcam combinations - to stream all peoples creations live on Google+

Chuck Hack
Google Creative Labs & Converse
London, UK (2013)
Background
Hirsch&Mann were approached by Google Creative Labs to create an
old school hacking garage with a connected technology twist. The
work we produced was in collaboration with their team and the teams
at We Like Today and Amplify.
The H&M Process
Exploration of the social behaviour of our creative Converse fans
identified a few key elements to how they streamed their creativity
online. Use of Twitter hashtags, instagram and other social sharing
tools inspired the design and build of a live LED ticker which pulled in
data from social media platforms to show comments to the
participants as they were hacking chucks. GIFs of all the creations
were captured and automatically uploaded to the Converse G+
community page - a link was generated and printed out so the maker
could easily share the GIF with friends - and attract more users to the
community page. In order to capture the making process, we created
the Lampshots - four web connected lamps that both illuminated the
workbench area and created a streamed recording of the whole
workshop experience. All the content created was shared on the
Converse g+ community page.
Result
The Chuck hacks were shared globally using Googles powerful
sharing platform. The creations had their own voices, and created a
greater impact on behalf of the brands than might have happened if
this was more brand focused. The Chuck Hack event created a large
amount of customised content that drove traffic to their community

GIF Booth
a modified turntable with a webcam
would record a 360 of your
#chuckhack, upload it to G+ and
print you a short url to it on a receipt

2 grayscale LED Tickers powered by

G+ and Twitter comments

Workshop Lamps contain 4 webcams which recorded

workshops, generated a timelapse summary of each one
and uploaded the result to G+

Discovery Wall
Weill Cornell Medical College - NYC, USA (2014)
A wall-sized digital artwork created from thousands of tiny screens and lenses forms the
centrepiece of a major new biomedical research centre just opened in New York City. This piece
celebrates the work being delivered in this new research centre by displaying a potentially infinite
collections of dynamically changing content. All physical, electronic, digital and software elements
of this piece were custom designed, built and delivered by Hirsch&Mann

Discovery Wall
Weill Cornell Medical College New York, USA (2014)
Background
WCMC approached H&M with a simple brief to create a video
wall to communicate the research that they produced in their
research labs.
The H&M Process
H&M collaborated with a number of WCMCs management
team and our good friends at Squint Opera to identify the
interaction opportunity. Our process looked to discover a
deeper understanding of who the main audience was. This
process lead to a change in brief that focused on an even bigger
audience than first identified.
Result
A large scale interaction that communicates individual research
projects and the support of donors as well as the greater
collective efforts of the institution.

2800 ipod nano screens on custom PCBs

Node.js + CouchDB CMS (variable.io)
high speed serial communication

What is Physical Computing ?

You can think of it as marrying the analog world we live in
to the digital world.
This happens all around us in an urban environment:
street lights turn on at night
tapping your oyster card to travel
moving your hands closer to a public sink to turn on water
reading and writing = sensing and actuating
Sensor examples: LDR, flex sensor, pressure sensor, temperature sensor, weight
sensor, humidity sensor, etc.
(ADC)
Actuator examples: dc motors, servo motors, linear actuators, muscle wire, etc.

Connecting Physical Computing to the Web

Its getting easier and easier these days and there a lot of options.
Here a few:
Arduino Yun
Spark Core
Electric Imp
Demo time:

1.
2.

Connect to Yun network

Open this page on your browser: 192.168.40.1/go

Thank you for your attention!

http://github.com/orgicus/
http://twitter.com/orgicus/
http://twitter.com/hirschandmann