SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
Web Facilitated Play
in the Real World
Sketching in Hardware
Portland – 20 July, 2012




@ajfisher
Play enhances our lives




Image (CC) flickr – Duncan / kkseema / Adam Jones / mzagozda
How we play today




Image (CC) flickr – Henry Stratford
Civic spaces need an upgrade




Image (CC) flickr – Jesus Leon
Time to level up




Image (CC) flickr – ipdegirl
1. Web Sockets overview
2. Real time web in a real time real world
3. Applications & demos
Websockets
Websockets




Image (CC) flickr – InertiaCreeps
PubSub messaging


                        Publisher    Produces Messages



{a:event, x:123,...}


                       Web Sockets
                                     Processor / Broker
                         Server


{a:event, x:321,...}



                       Subscriber    Consumes Messages
Common pattern

                 Publishers




Broker




                 Subscribers
Websocketing things




Image (CC) flickr – rfranklinaz
Real time data capture
Architecture for play

Interface




                                Django
Consolidation / processing                       Websockets server
                               SocketIO




                                                 Something to control


                             Network connected
Benefits

Web interfaces have wide reach
No “app” downloads
Mobile devices have numerous sensors
Can access other parts of the web app
(eg Authentication)
Web scaling well known problem with solutions
Debug in browser BEFORE going to hardware
Time to play




Image (CC) flickr – kalexanderson
Tank Tag
Tug of war
Tug of war
Multiplayer lighting
Play with the lights

Point a browser at


ajf.io/sketch12

Live demoed at conference
Multiplayer lighting
Applications
Resources

Examples
github.com/ajfisher/sketching-conf-demo
Websocket Client for Arduino
github.com/krohling/ArduinoWebsocketClient
Django Socket IO
github.com/stephenmcd/django-socketio
Socket IO Library
socket.io
WebSockets Background
dev.w3.org/html5/websockets/
Web Facilitated Play
in the Real World
Sketching in Hardware
Portland – 20 July, 2012




@ajfisher
github.com/ajfisher
slideshare.net/andrewjfisher

Weitere ähnliche Inhalte

Ähnlich wie Web Facilitated Play in the Real World

dotnet Cologne 2015 - Azure Service Fabric
dotnet Cologne 2015 - Azure Service Fabric dotnet Cologne 2015 - Azure Service Fabric
dotnet Cologne 2015 - Azure Service Fabric Sascha Dittmann
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch
 
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep diveITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep diveITCamp
 
Open innovation in software means Open Source (2011 remix)
Open innovation in software means Open Source (2011 remix)Open innovation in software means Open Source (2011 remix)
Open innovation in software means Open Source (2011 remix)Bertrand Delacretaz
 
HTML5 and web platform
HTML5 and web platformHTML5 and web platform
HTML5 and web platformdynamis
 
Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko3D
 
Open Innovation means Open Source
Open Innovation means Open SourceOpen Innovation means Open Source
Open Innovation means Open SourceBertrand Delacretaz
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardwareAndrew Fisher
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13Enough Software
 
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...ITCamp
 
Building Application Dashboards Using Wire Cloud
Building Application Dashboards Using Wire CloudBuilding Application Dashboards Using Wire Cloud
Building Application Dashboards Using Wire CloudFIWARE
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web PlatformSwapSkills
 
WebCodecs in WebKit With GStreamer!
WebCodecs in WebKit With GStreamer!WebCodecs in WebKit With GStreamer!
WebCodecs in WebKit With GStreamer!Igalia
 
UplinQ - qualcomm® snapdragon™ processors a super gaming platform
UplinQ - qualcomm® snapdragon™ processors a super gaming platformUplinQ - qualcomm® snapdragon™ processors a super gaming platform
UplinQ - qualcomm® snapdragon™ processors a super gaming platformSatya Harish
 
Qualcomm Snapdragon Processors: A Super Gaming Platform
Qualcomm Snapdragon Processors: A Super Gaming Platform Qualcomm Snapdragon Processors: A Super Gaming Platform
Qualcomm Snapdragon Processors: A Super Gaming Platform Qualcomm Developer Network
 

Ähnlich wie Web Facilitated Play in the Real World (20)

dotnet Cologne 2015 - Azure Service Fabric
dotnet Cologne 2015 - Azure Service Fabric dotnet Cologne 2015 - Azure Service Fabric
dotnet Cologne 2015 - Azure Service Fabric
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
Deep Dive into WinRT
Deep Dive into WinRTDeep Dive into WinRT
Deep Dive into WinRT
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep diveITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
 
Open innovation in software means Open Source (2011 remix)
Open innovation in software means Open Source (2011 remix)Open innovation in software means Open Source (2011 remix)
Open innovation in software means Open Source (2011 remix)
 
HTML5 and web platform
HTML5 and web platformHTML5 and web platform
HTML5 and web platform
 
Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++Minko - Scripting 3D apps with Lua and C++
Minko - Scripting 3D apps with Lua and C++
 
Open Innovation means Open Source
Open Innovation means Open SourceOpen Innovation means Open Source
Open Innovation means Open Source
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
 
Encode Club Hackathon
Encode Club Hackathon  Encode Club Hackathon
Encode Club Hackathon
 
Guides To Analyzing WebKit Performance
Guides To Analyzing WebKit PerformanceGuides To Analyzing WebKit Performance
Guides To Analyzing WebKit Performance
 
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...
Programming on Windows 8.1: The New Stream and Storage Paradigm (Raffaele Ria...
 
Building Application Dashboards Using Wire Cloud
Building Application Dashboards Using Wire CloudBuilding Application Dashboards Using Wire Cloud
Building Application Dashboards Using Wire Cloud
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web Platform
 
WebCodecs in WebKit With GStreamer!
WebCodecs in WebKit With GStreamer!WebCodecs in WebKit With GStreamer!
WebCodecs in WebKit With GStreamer!
 
UplinQ - qualcomm® snapdragon™ processors a super gaming platform
UplinQ - qualcomm® snapdragon™ processors a super gaming platformUplinQ - qualcomm® snapdragon™ processors a super gaming platform
UplinQ - qualcomm® snapdragon™ processors a super gaming platform
 
Qualcomm Snapdragon Processors: A Super Gaming Platform
Qualcomm Snapdragon Processors: A Super Gaming Platform Qualcomm Snapdragon Processors: A Super Gaming Platform
Qualcomm Snapdragon Processors: A Super Gaming Platform
 

Mehr von Andrew Fisher

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Andrew Fisher
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScriptAndrew Fisher
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014Andrew Fisher
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?Andrew Fisher
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving ExperienceAndrew Fisher
 
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineThe Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineAndrew Fisher
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user contextAndrew Fisher
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesAndrew Fisher
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the WebAndrew Fisher
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physicalAndrew Fisher
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added funAndrew Fisher
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersAndrew Fisher
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobileAndrew Fisher
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the BusinessAndrew Fisher
 

Mehr von Andrew Fisher (14)

Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.Datatium - using data as a material for contextually responsive design.
Datatium - using data as a material for contextually responsive design.
 
Building Droids with JavaScript
Building Droids with JavaScriptBuilding Droids with JavaScript
Building Droids with JavaScript
 
A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014A Device API Safari - Web Directions Code 2014
A Device API Safari - Web Directions Code 2014
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?
 
Designing a Moving Experience
Designing a Moving ExperienceDesigning a Moving Experience
Designing a Moving Experience
 
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic MachineThe Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
 
Responsive content and user context
Responsive content and user contextResponsive content and user context
Responsive content and user context
 
Datatium - radiation free responsive experiences
Datatium - radiation free responsive experiencesDatatium - radiation free responsive experiences
Datatium - radiation free responsive experiences
 
Getting Touchy Feely with the Web
Getting Touchy Feely with the WebGetting Touchy Feely with the Web
Getting Touchy Feely with the Web
 
How the web is going physical
How the web is going physicalHow the web is going physical
How the web is going physical
 
Device API - now with added fun
Device API - now with added funDevice API - now with added fun
Device API - now with added fun
 
ad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailersad:tech Melbourne - Mobile and social strategies for retailers
ad:tech Melbourne - Mobile and social strategies for retailers
 
The future of Australian mobile
The future of Australian mobileThe future of Australian mobile
The future of Australian mobile
 
Cloud Sourcing the Business
Cloud Sourcing the BusinessCloud Sourcing the Business
Cloud Sourcing the Business
 

Kürzlich hochgeladen

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Kürzlich hochgeladen (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Web Facilitated Play in the Real World

Hinweis der Redaktion

  1. Hi. My name's Andrew Fisher and my background is as an interaction developer and today I want to talk to about web facilitated play in the real world.
  2. Play is fundamental to our lives. From our earliest childhood through to being an adult. Play is a core part of what defines our humanity. Technology and play are somewhat symbiotic and each one helps to drive the other forward and evolve. http://www.flickr.com/photos/duncan/79106711/sizes/o/ http://www.flickr.com/photos/kkseema/2042946052/sizes/o/ http://www.flickr.com/photos/adam_jones/3794676268/sizes/o/ http://www.flickr.com/photos/mzagozda/4242006639/sizes/l/
  3. So I was on a train the other day going to work and saw someone that looked like this. Headphones in, iPhone out, Totally immersed in what was obviously a multiplayer game. This is a familiar view of the modern world. At times I'm this person. The technologist in me loves the fact we have the technical capability for someone to play a multiplayer game from their phone in Melbourne with others in Madrid and Moscow. However, I can't help but feel we've had to give something up as a result as we tune out the world around us so totally. Image: http://www.flickr.com/photos/henry_stradford/5348910688/sizes/o/
  4. I think our shared spaces are causing some of this as well. How often do you stand on a train station platform and see advertising 6 months or in some cases 6 years out of date. Our civic environment hasn't kept pace with technology and is becoming ever more boring just as our phones become ever more interesting – is it any wonder we tune out? Image: http://www.flickr.com/photos/jesusleon/6932806609/sizes/o/
  5. We have hit an interesting time though. With a nearly billion smartphones in people's pockets and a billion more not far away. With physical computing devices increasing in capability and increasingly networked with all the benefits that confers And all of this coupled with the web! Now we have the technologies at our disposal to reshape the nature of play or at least of interaction in our shared spaces using digital tooling. So what could this do for play as a result? Image: http://www.flickr.com/photos/ipdegirl/5327066487/sizes/o/
  6. So today I want to show you how this can work. I'll give a brief intro to web sockets, then show you the technical architecture for doing this and then round up with some examples and a demo at the end.
  7. So the technology that enables real world play is called web sockets. Is anyone here familiar with it? Has anyone actually used it in a project? Okay so very quickly web sockets is part of the suite of tech that makes up HTML 5. Thought it's not actually HTML. http://www.flickr.com/photos/inertiacreeps/1414845543
  8. Web sockets is an upgrade to the standard HTTP connection Getting rid of the traditional request / response method. Instead it opens a long lived, bi directional network connection that data can be passed along. This lends itself well to scenarios where you are passing small packets of data very frequently over connections open for long periods like minutes or hours. Often we use this for messaging use cases and the most frequent pattern is pub / sub.
  9. As you can see we have a publisher that produces a message and sends it to the web sockets server which acts as a broker and it passes that on to subscribers who consume the message and do something with it. Now in web sockets world most messages are passed around using JSON because it's lightweight, many libraries exist, it's expressive and flexible.
  10. So this architecture scales well and you can have many publishers and subscribers just producing and consuming messages. Many topologies exist for different needs but this is one of the most common. Now you understand a bit about web sockets let's talk about how we can use it to connect objects in the real world.
  11. So what's interesting about web sockets is that it's a protocol and as such anything that can talk it can become a publisher or a subscriber and work with messages. http://www.flickr.com/photos/88548643@N00/139617711/
  12. For example we could have an arduino with a temperature sensor on it that broadcasts temperature readings every 100 milliseconds to the broker. The subscribers could be a real time logging database for later processing and a web client for real time graphing of the data. Now scale the arduino out and have 10 sensor nodes, 100, 1000 all producing data in real time that could be used by a dozen subscribers all doing different things with it. As interesting as that facet is, I came here to talk about play. For play, then, we can turn all of this on it's head. So here's a view of the stack I use to do this.
  13. At the top we have web browsers across phone, tablet or desktop with interfaces that create messages. These get sent to the web sockets server for processing. I use Django Socket IO as I'm a python guy but there's things like Node.JS which are conceptually similar. The broker then forwards on messages to the subscribers which in this case is an arduino running Kevin Rohling's excellent WebSockets library and it then turns that data into some type of physical control.
  14. There's a lot of benefits to using this stack which you can see here, however the main one I want to call out is that as the system is web based and messages are JSON it means I can prototype and simulate EVERYTHING in the browser. This means I can get the web interaction rock solid and the networking totally debugged BEFORE going to hardware which then becomes a decoupled and more straightforward implementation on the physical side.
  15. Now you understand how the architecture works I have three examples I want to share, including one I've brought with me that you can play with. http://www.flickr.com/photos/kalexanderson/5315471388/sizes/o/
  16. My first iteration of this was purely digital in order to assess the viability of the stack under real world conditions. Tank tag uses the tilt sensor in a phone to drive a tank around on a screen; and the touch screen to fire, so you can tag other players. The key is that the phone is now the controller and everyone plays together on a shared space on a screen or via a projector. The largest scale I've had about 100 people playing this on a 40ft projected screen at once. I tried for bigger once and got nearly 150 before the network seized up for volumes of data being shifted.
  17. For my next iteration, I wanted to incorporate something much more physical but also create a sense of team work and focus in the space amongst the players. The tug of war concept was used for this and again players interact with their mobile phones. After hitting a web page the players are divided into a red and green team with their own goals to pull a magnet towards.
  18. This time the accelerometer is used for input and players have to shake their phones as hard as possible. The team that is collectively pulling the hardest at any time will pull the magnet towards their goal and eventually light it up. This was a lot of fun and really starts to create a sense of shared use in the space given the focus and requirements for team work and it's all facilitated by web enabled devices that people already have in their pockets.
  19. The third example I've actually brought with me from Australia. It's quite simple so it was travel proof but hopefully it will serve to illustrate to you the direction this can all go.
  20. If you want to play with this then point a web browser on any device to 10.0.1.1 This won't work in Internet Explorer however so use something else. Click on the circles and away you go. As you all can have different colours they should mix somewhat if you hit the same lights at once. As you can see the interaction is near instant and again there's almost no barrier to someone interacting with this. ---- HOPEFULLY PEOPLE CLICKING NOW!
  21. So if you consider my original points about creating interactive spaces by bringing mobile, physical computing and web together this is how we can do it. Imagine something like this scales up to say 10 metres across and hung on the side of a building and all you'd need is a phone with a web browser in order to interact with it.
  22. This stack will work in any context where we want to create interaction on a semi mass scale but where physical proximity is important. So it could be used for interactive advertising for shared user experiences, general civic space upgrades or for spaces like museums to create points of interaction with exhibits via smartphones without having to worry about downloaded apps.
  23. In summary, I've walked you through a tech stack that gives you the ability to harness the real time web and allow it to interact with the real world. I've got some resources here which I'll send around as a link and all the code is in my git hub for the demos I've shown today. Obviously come and talk to me about this if you're interested and I can show you code etc if you want to see it.
  24. I hope this gives a slightly different view on how we can bring together mobile with physical devices and use the web to facilitate play in the real world.