creating the interfaces of the future with the apis of today
DESCRIPTION
TRANSCRIPT
![Page 1: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/1.jpg)
Create the interfaces of the future with the web APIs of today
@gebille
![Page 2: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/2.jpg)
Two “futuristic” interfaces using web APIs
![Page 3: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/3.jpg)
+ web sockets + device orientation =
+ WebGL!!
![Page 4: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/4.jpg)
remote.js teapot.js
server.jsα, β, ɣ α, β, ɣ
![Page 5: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/5.jpg)
web sockets
![Page 6: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/6.jpg)
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:
![Page 7: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/7.jpg)
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);
![Page 8: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/8.jpg)
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); }; };});
![Page 9: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/9.jpg)
![Page 10: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/10.jpg)
socket.io
![Page 11: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/11.jpg)
device orientation
![Page 12: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/12.jpg)
//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:
![Page 13: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/13.jpg)
![Page 14: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/14.jpg)
![Page 15: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/15.jpg)
![Page 16: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/16.jpg)
![Page 17: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/17.jpg)
slideshare.net/gerbille/device-disorientation
![Page 18: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/18.jpg)
WebGL
![Page 19: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/19.jpg)
three.js
![Page 20: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/20.jpg)
![Page 21: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/21.jpg)
// 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();
![Page 22: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/22.jpg)
// 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;
![Page 23: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/23.jpg)
// 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);}
![Page 24: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/24.jpg)
![Page 25: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/25.jpg)
+ getUserMedia =
+ WebGL!!
![Page 26: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/26.jpg)
getUserMedia
![Page 27: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/27.jpg)
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;
![Page 28: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/28.jpg)
![Page 29: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/29.jpg)
headtrackr.js
![Page 30: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/30.jpg)
<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>
![Page 31: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/31.jpg)
// 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
![Page 32: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/32.jpg)
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)
![Page 33: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/33.jpg)
WebGL
![Page 34: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/34.jpg)
three.js
![Page 35: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/35.jpg)
//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);
![Page 36: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/36.jpg)
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);
![Page 37: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/37.jpg)
![Page 38: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/38.jpg)
github.com/auduno/headtrackr
auduno.github.com/headtrackr/examples/targets.html
github.com/luzc/wiimote
slideshare.net/gerbille/device-disorientation
![Page 40: Creating the interfaces of the future with the APIs of today](https://reader033.vdocuments.mx/reader033/viewer/2022051513/545c50f8af7959c8098b4735/html5/thumbnails/40.jpg)
@gerbille
github.com/luzc
slideshare.net/gerbille