Prototype – Magic Door

A prototype for a door-triggered interaction with browser-based projections. For sample code, go to https://github.com/redpaperheart/Prototype-Magic-Door

Overview:

This prototype is to demonstrate the feasibility of using the opening and closing of a door as the input for a projected graphics installation. A door is mounted with a sensor that is read by an Arduino. On each door close, the Arduino sends out a serial signal.  This signal is read from the node.js server using a node module called serialport. When the server receives this serial message, it sends it to the client app via WebSockets, so that the browser page can react in real time.  The canvas on this webpage is rear-projected onto a screen in the doorway.

Step 1: Setting up the Arduino

Ideally, the best suited door sensor would be a magnetic contact switch. For the purposes of our prototype we used a photo resistor, but the logic remains the same. The Arduino reads each door close and open which switches a boolean and sends out a ‘0’ via serial.

Step 2: Setting up the Server

Using Node.js, we were able to start a server locally and  listen to our native serial port using the node module, serialport.   Because Node.js is asynchronous and event-driven, it is very easy to implement events that can trigger aspects of our front-end client-side app.  A websocket  is opened that is relaying serial messages in real time to the front-end, triggering the canvas changes.  While a door opening is only simple event, this set up allows for a large range of messages, such as multiple 10-bit sensor readings, to be interpreted in real time on the front-end.

V1. Colors

This prototype switches the background color to a random color from an array on each door close.

V2. Street View

This prototype uses Google Maps API to switch to a randomly selected street view locations from a JSON data set each time the door is closed.

To use Google Maps as a visual you will first need to set up your Google App API key to use the Google Maps API. More info can be found here: https://developers.google.com/maps/documentation/javascript/tutorial

V3. StreetView-Head Tracking

This app uses the same Google Street View feature, but also incorporates Head Tracking with headtrackr.js so the user can look left and right in the Street View Panorama. On each head tracking event, we were taking the head’s center and scaling it to the field of view from the streetview panorama, and then we set the panorama’s heading by adding the mapped value to the previous heading.

//mapping event.x and event.y to between -20 and 20 degrees
xVel = convertToRange(event.x,[20,300],[-20,20]); 
yVel = convertToRange(event.y,[50,250],[-20,20]); 

//adds the x and y rotation to the current heading (x-axis) and pitch (y-axis)
var newHead = curHead + xVel;                    
var newPitch = curPitch + yVel;

//sets new POV
panorama.setPov({                               
		heading: newHead,
		pitch: newPitch 
});

This example also uses PerspectiveTransform.js to scale and skew the canvas to the projected surface, so we can projection map directly in the browser. See below.

Step 3: Starting the Server

1) Upload the Door Trigger Arduino Code to your Arduino and edit app.js file to reflect your Arduino’s serial port.

2) For the the StreetView folders, add your Google Map API Key to the index.html file

3) In terminal, navigate to your folder and install your Node.js modules:

npm install express
npm install serialport
npm install ws

4) Enter “node app.js” in Terminal and the Node server is running

5) Go to “localhost:8000” in your browser

Technologies

Arduino
Node.js
WebSockets
Google Maps API
PerspectiveTransform.js
headtrackr.js