Web and Physical Computing-Forward to Reality-

TCNJ Dynamic Web Week 14Jean Chu

Trend of Digital Design

AnalogRealRaw

TangibleEngaging / Experiential

Mixed RealityMerge to Real

In my personal opinion… you do not have to agree

DigitalVirtualMobile

Merging to Real Life

MP3 played on spotifyAt a party

Music played by a band At a party

Example

Spotify box

Music Streamed By radio

Spartify (Guests choose song playlist)

Future of the Media-Merge to Real-

Tangible, Engaging, Mixed Reality

In my personal opinion… you do not have to agree

Tangible / Fluid

http://tangible.media.mit.edu/

Tangible Media Labhttp://fluid.media.mit.edu/

Fluid Interface Group

Engaging / Experiential

Flashmob Using Web to enhanceParticipation to Events

http://en.wikipedia.org/wiki/Flash_mobhttp://www.spartify.com/

Mixed Reality

Machinima

Augmented Reality Game

http://www.facebooksitcom.com/

Facebook sitcom

http://www.blasttheory.co.uk/bt/index.php

http://en.wikipedia.org/wiki/Machinima

http://en.wikipedia.org/wiki/Mixed_reality

Why does this matter?

To enhance engagement and interactions, and to make unforgettable content and experience, merging closer to our real lives!

So… let’s get started !

Web and Physical Computing

Spotify Box

http://blog.zenona.com/

SPOTIFY BOX by Jordi Parra

So how do you give someone a mix tape in a world where all music is digital?Spotify Box is a device and a way to interact with digital music in the physical world.

Botanicals

http://www.botanicalls.com/

BOTANICALSBy Rob Faludi, Kate Hartman, and Kati London

The Botanicalls project is about communication between plants and people.

Twitter Mood Light

The Twitter Mood Light shows the current mood of Twitter.The lamp monitors certain keywords, such as “love”,“hate”,“surprising” andsoon,ontwitter.com and lights up different colors depending on the mood of the tweets.

TWITTER MOOD LIGHTBy Random Matrix

http://www.instructables.com/id/Twitter-Mood-Light-The-Worlds-Mood-in-a-Box/

Paypal Vending Machine

PayPal made a experimental system utilizing QR codes, Arduino and smart-phones to let their users pay with their PayPal account in the physical world.

http://blog.makezine.com/2010/10/27/paypal-vending-machine/

PAYPAL VENDING MACHINE by PayPalLabs

THE VERBALIZER

The Verbalizer connects wirelessly to your computer and triggers google voice search.

THE VERBALIZER by Breakfast

http://breakfastny.com/2011/06/verbalizer-open-source-toy-googles-voice-search/

INSTAPRINTER

Instaprinter is a digital photobooth tapping into the mobile photo-sharing service, Instagram, and in real time prints out every picture taken at a specific location.

INSTAPRINT by Breakfast

http://breakfastny.com/projects/2011/instaprint/

Candy Grabber

The Candy Grabber is controlled by an Arduino which lets online users remotely interact with the machine via a website.

CANDY GRABBER by odvratno.zgodan

http://www.instructables.com/id/Arduino-Candygrabber/

Examples Referneced from

• http://www.slideshare.net/MediaFront/forward-to-reality-physical-computing-the-next-level-of-web-interaction

• http://breakfastny.com/projects/

HOW TO DO PHYSICAL COMPUTINGLet’s Try it!

Physical Computing

Physical computing, in the broadest sense, means building interactive physical systems by the use of software and hardware that can sense and respond to the analog world.

-

wikipedia-

http://en.wikipedia.org/wiki/Physical_computing

Why Arduino?

• Creativity, Sharing and Collaboration

Arduino

open-source electronics prototyping platform based on flexible, easy-to-use hardware and software

http://www.arduino.cc/

Brain :

Energy : Power – 5v power supplied via USB Cable

+

Hardware- Arduino Board (Micro Contoller)

Knowledge : Software - Arduino Program and Codes

or

External 5v Power Supply

Body Part : physical Computing (Wires, LED, Motors, ETC)

How to connect Arduino and the Web

• 1. Download the Software. It is Free

http://arduino.cc/en/Main/Software

How to connect Arduino and the Web

• 2. Buy the basic Hardware for Arduino

Micro Controller

Arduino Board Standard A-B USB Cable More for physical computing…

(Wires, LED lights, Sensors, Switches, LCD Panel, etc)

To Connect the Arduino Board to the Computer For Physical Computing

http://arduino.cc/en/Main/ArduinoBoardUno

How to connect Arduino and the Web

• 2. Buy more for Arduino to connect to Web

Ethernet Shield Ethernt Cable

http://arduino.cc/en/Main/ArduinoEthernetShield

Where to buy?

• Arduino stuffs :– Arduino Store

• Official Arduino store (Not stable yet. Europe. I don’t recommend.) http://store.arduino.cc/ww/index.php

– Distributors • Sparkfun (More Stable. USA I recommend here)

– http://www.sparkfun.com/categories/103

• General electronics stuffs can be found at Radio Shack or Sparkfun