What is physical computing?

IS IT

THE INTERNET OF THINGS ?

WEARABLES ?

AUGMENTED/VIRTUAL/ARTICIAL REALITY ?

INTERACTIVE INSTALLATIONS ?

NATURAL USER INTERFACES ?

TANGIBLE MEDIAS ?

IMMERSIVE SPACES ?

MECHATRONICS ?

TANGIBLE BITS ?

INTERACTIVE MEDIAS ?

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.

* According to Wikipedia (https://en.wikipedia.org/wiki/Physical_computing)

... building interactive physical systems by the use of software and hardware that can sense and respond to the analog world.

The web-based
physical computing ecosystem
(a tiny sample)

Demo time !

Step 1: Create the Manifest for NW.js (package.json)



{

    "name": "js-montreal-going-round-demo",
    "main": "index.html",

    "window": {
        "width": 960,
        "height": 600
    }

}

Step 2: Install the phidgets Node.js Module



npm install phidgets --save

                        


{

    "name": "js-montreal-going-round-demo",
    "main": "index.html",

    "window": {
        "width": 960,
        "height": 600
    },

    "dependencies": {
        "phidgets": "^0.5.0-alpha.18"
    }

}

Step 3: Create the index.html page



<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>JavaScript & Physical Computing: The Going 'round Demo</title>
        <style>
            html, body, img {
                width: 100%;
                height: 100%;
                margin: 0;
                background-color: pink;
            }
            img {
                opacity: 0;
            }
        </style>
        <script src="script.js"></script>
    </head>

    <body>
        <img src="round-and-around-and-around-and-around-we-go.gif" alt="I'm Dizzy!"/>
    </body>

</html>

Step 4: Add Some Code (script.js)


window.onload = function() {

    var min = 150,
        max = 450;

    var phidgets = require('phidgets');
    var pik = new phidgets.PhidgetInterfaceKit();

    function onSensorData(emitter, event) {

        if(event.index !== 0) return;

        var opacity = 0;

        if (event.value > max) {
            opacity = 1;
        } else if (event.value >= min) {
            opacity = (event.value - min) / (max - min);
        }

        document.getElementsByTagName("img")[0].style.opacity = opacity;

    }

    pik.on('sensor', onSensorData);
    pik.open();

};

Now... let's get real!

Photo: Maison Louis-Cyr © Jean Chevrette

http://tinyurl.com/gt6rrxs

http://tangiblejs.com
@tangiblejs

http://cote.cc
@jpcote
GitHub https://github.com/cotejp

Merci.