creating the interfaces of the future with the apis of today
DESCRIPTION
TRANSCRIPT
Create the interfaces of the future with the web APIs of today
@gebille
Two “futuristic” interfaces using web APIs
+ web sockets + device orientation =
+ WebGL!!
remote.js teapot.js
server.jsα, β, ɣ α, β, ɣ
web sockets
var websocketServerUrl = 'ws://10.112.0.139:8080/';window.addEventListener('DOMContentLoaded', function init() { //init websocket connections //device orientation sync socket var ws = new WebSocket(websocketServerUrl); ws.onopen = function() { ws.opened = true; }; //listen to device orientation window.addEventListener('deviceorientation', function(e) { if (ws.opened) { ws.send(JSON.stringify({ alpha: e.alpha, beta: e.beta, gamma: e.gamma })); } });});
remote.js:
server.js:
// ws servervar ws = require('websocket-server');var wsServer = ws.createServer();wsServer.addListener('connection', function(connection){ connection.addListener('message', function(msg) { wsServer.broadcast(msg); });});wsServer.listen(8080);
teapot.js:
window.addEventListener('DOMContentLoaded', function init() { //connect to server using websockets var ws = new WebSocket('ws://10.112.0.139:8080/'); ws.onopen = function() { ws.onmessage = function(e) { var data = JSON.parse(e.data), avalue = data.alpha / 180 * Math.PI, bvalue = data.beta / 180 * Math.PI, gvalue = data.gamma / 180 * Math.PI; teapot.rotation.set(gvalue, avalue, -bvalue); }; };});
socket.io
device orientation
//listen to device orientation window.addEventListener('deviceorientation', function(e) { angles.innerHTML = 'alpha: ' + e.alpha + ', beta: ' + e.beta + ', gamma: ' + e.gamma; if (ws.opened) { ws.send(JSON.stringify({ alpha: e.alpha, beta: e.beta, gamma: e.gamma })); } });
remote.js:
slideshare.net/gerbille/device-disorientation
WebGL
three.js
// scene sizevar WIDTH = 724, HEIGHT = 512;// get the DOM element to attach tovar container = $('container');// create a WebGL renderer, set its size and append it to the DOMvar renderer = new THREE.WebGLRenderer();renderer.setSize(WIDTH, HEIGHT);renderer.setClearColorHex(0x111111, 1);renderer.clear();container.appendChild(renderer.domElement);// create a scenevar scene = new THREE.Scene();
// camera settings: fov, aspect ratio, near, farvar FOV = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;// create a camera and position camera on z axis (starts at 0,0,0)var camera = new THREE.PerspectiveCamera( FOV, ASPECT, NEAR, FAR);camera.position.z = 100;// add the camera to the scenescene.add(camera);// create some lights, position them and add it to the scenevar spotlight = new THREE.SpotLight();spotlight.position.set( 170, 330, -160 );scene.add(spotlight);ambilight = new THREE.AmbientLight(0x333333);scene.add(ambilight);//enable shadows on the rendererrenderer.shadowMapEnabled = true;
// add an object (teapot) to the scenevar teapot;
var loader = new THREE.JSONLoader(), createScene = function createScene( geometry ) { var material = new THREE.MeshFaceMaterial(); teapot = new THREE.Mesh( geometry, material ); teapot.scale.set(8, 8, 8); teapot.position.set( 0, -10, 0 ); scene.add( teapot ); console.log('matrix ' + teapot.matrix); console.log('rotation ' + teapot.rotation.x); };
loader.load('teapot-model.js', createScene );
// drawrenderer.render(scene, camera);animate();
//animatefunction animate() { requestAnimationFrame(animate); renderer.render(scene, camera);}
+ getUserMedia =
+ WebGL!!
getUserMedia
var video = document.getElementById("camera");navigator.getUserMedia({ video: true }, function(stream) { video.src = window.URL.createObjectURL(stream) || stream;}, function() { //error...});
<video id="camera" autoplay></video>
** to make sure your code works in ALL browsers add these two lines:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
headtrackr.js
<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas><video id="inputVideo" autoplay loop></video><script> var videoInput = document.getElementById('inputVideo'); var canvasInput = document.getElementById('inputCanvas'); var htracker = new headtrackr.Tracker(); htracker.init(videoInput, canvasInput); htracker.start();</script>
// set up camera controller for head-coupled perspectiveheadtrackr.controllers.three.realisticAbsoluteCameraControl(camera, 27, [0,0,50], new THREE.Vector3(0,0,0), {damping : 0.5}); * @param {THREE.PerspectiveCamera} camera * @param {number} scaling size of screen in 3d-model relative to vertical size of computer screen in real life * @param {array} fixedPosition array (x,y,z) w/ the position of the real life screen in the 3d-model space coordinates * @param {THREE.Vector3} lookAt the object/position the camera should be pointed towards * @param {object} params optional object with optional parameters
document.addEventListener('headtrackingEvent', function(event) {scene.fog = new THREE.Fog(0x000000, 1+(event.z*27), 3000+(event.z*27));}, false);* x : position of head in cm's right of camera as seen from users point of view (see figure)* y : position of head in cm's above camera (see figure)* z : position of head in cm's distance from camera (see figure)
WebGL
three.js
//top wallplane1 = new THREE.Mesh(new THREE.PlaneGeometry(500, 3000, 5, 15), new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe : true }));plane1.rotation.x = Math.PI/2;plane1.position.y = 250;plane1.position.z = 50-1500;scene.add(plane1);
var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, -80000))); geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 0, z))); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0xeeeeee })); line.position.x = x; line.position.y = y; scene.add(line);
github.com/auduno/headtrackr
auduno.github.com/headtrackr/examples/targets.html
github.com/luzc/wiimote
slideshare.net/gerbille/device-disorientation
@gerbille
github.com/luzc
slideshare.net/gerbille