Making the Web Tangible

20
Making the web tangible Introduction to Internet of Things

description

Talk given at Designers Fiesta 2014(http://designersfiesta.com/#speakers) on the Internet of Things and physical projects connected to the Internet done at Hirsch&Mann

Transcript of Making the Web Tangible

  • Making the web tangibleIntroduction 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.

    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

    ARTAsks

    Questions

    DESIGNCreates

    Solutions

    TECHOffers

    Possibility

    CUSTOMERSDevelop

    Businesses+ + +

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

  • What am I going to talk about today?

    Project Ive been involved with related to web technologiesWhat is this whole IoT thing about

    Physical ComputingWeb Developmentweb 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.

    http://www.ryanhopkinson.co.uk/

  • Xperia Z Versus FashionSony - London, UK (2013)

    BackgroundCan we create an amazing technology experience that can capture timeslice films of a fashion show using smartphones?

    The H&M ProcessWe 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.

    ResultCreated 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

    https://www.youtube.com/watch?v=Udk3HRQHqrYhttps://www.youtube.com/watch?v=Udk3HRQHqrY

  • 1st bullet time smartphone spiral rig100 x Sony Xperia Z phonesphones = 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 imagesJava SDK for Android app/Processing for Server/SureMDM for phone management

  • LED JacketIntel - 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 JacketIntelLondon, (2012 & 2014)

    BackgroundWe 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 ProcessWe 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

    https://drive.google.com/a/hirschandmann.com/#folders/0B1cDp9ESEP8dYkpLZi1aakppb3chttps://drive.google.com/a/hirschandmann.com/#folders/0B1cDp9ESEP8dYkpLZi1aakppb3c

  • 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 browserThe 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 & ConverseGoogle 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 HackGoogle Creative Labs & ConverseLondon, UK (2013)

    BackgroundHirsch&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 ProcessExploration 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.

    ResultThe 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 page.

  • 2 grayscale LED Tickers powered by G+ and Twitter comments

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

    Workshop Lamps contain 4 webcams which recorded workshops, generated a timelapse summary of each oneand 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 WallWeill Cornell Medical College - New York, USA (2014)

    BackgroundWCMC 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 ProcessH&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.

    ResultA 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 PCBsNode.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 into the digital world.

    This happens all around us in an urban environment:street lights turn on at nighttapping your oyster card to travelmoving 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 CoreElectric Imp

    Demo time:

    1. Connect to Yun network2. 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