Fun with JavaScript and sensors - AmsterdamJS April 2015
2 likes890 views
This document discusses using various sensors in mobile devices for creative purposes beyond their typical uses. It describes how sensors like accelerometers, gyroscopes, ambient light sensors, and magnetometers can be accessed through JavaScript to build applications like a Theremin music instrument controlled by ambient light levels or tracking real-world device movement in 3D. It also covers experimental uses of beacons and connecting devices to visualize juggling. The document encourages developers to think creatively about how sensor data could enable new types of applications on mobile platforms.
![Track real life movement
1 var front = new THREE.MeshBasicMaterial({ map: loadTexture('front.jpg') });
2 var back = new THREE.MeshBasicMaterial({ map: loadTexture('back.jpg') });
3 var border = new THREE.MeshBasicMaterial({ color: 0xffe04526 });
4
5 var materials = [ border, border, border,
6 border, front, back ];
7
8 var geometry = new THREE.BoxGeometry(2, 4, 0.3);
9 var cube = new THREE.Mesh(geometry,
10 new THREE.MeshFaceMaterial(materials));
11 scene.add(cube);](https://image.slidesharecdn.com/amsterdamjs-april-2015-150421110737-conversion-gate02/85/Fun-with-JavaScript-and-sensors-AmsterdamJS-April-2015-28-320.jpg)
![Juggling visualizer
1 window.addEventListener('devicemotion', function(e) {
2 var serie = getGraphSerieForDevice(e.data.deviceId);
3 serie.addPoint([ e.data.timestamp, Math.abs(e.data.z) ]);
4 });](https://image.slidesharecdn.com/amsterdamjs-april-2015-150421110737-conversion-gate02/85/Fun-with-JavaScript-and-sensors-AmsterdamJS-April-2015-32-320.jpg)
Fun with JavaScript and sensors - AmsterdamJS April 2015
- 1. Fun with sensors AmsterdamJS 21 April 2015
- 4. Before mobile revolution… Limited input methods
- 9. Bend sensor
- 12. BORING!
- 17. WiFi Connection Real purpose: internet connection
- 18. Hide & Seek! Hider sets up a WiFi hotspot Seekers use dBm to triangulate
- 19. Hide & Seek! 1 var req = navigator.mozWifiManager.getNetworks(); 2 req.onsuccess = function() { 3 var seeker = this.result.find(n => n.ssid === 'seeker'); 4 if (!seeker) { 5 console.log('Too far out!'); 6 } 7 else { 8 console.log(network.relSignalStrength); 9 } 10 };
- 20. Device Light Real purpose: adjust brightness
- 21. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
- 22. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
- 23. 1 var context = new AudioContext(); 2 var oscillator = context.createOscillator(); 3 oscillator.connect(context.destination); 4 oscillator.start(0); 5 6 window.addEventListener('devicelight', function(e) { 7 oscillator.frequency.value = e.value * 10; 8 }); Music
- 24. Gyroscope Real purpose: rotate screen
- 25. Gyroscope Real purpose: rotate screen
- 26. Track real life movement Draw 3D model of phones Measure gyroscope data Show real life state on screen
- 28. Track real life movement 1 var front = new THREE.MeshBasicMaterial({ map: loadTexture('front.jpg') }); 2 var back = new THREE.MeshBasicMaterial({ map: loadTexture('back.jpg') }); 3 var border = new THREE.MeshBasicMaterial({ color: 0xffe04526 }); 4 5 var materials = [ border, border, border, 6 border, front, back ]; 7 8 var geometry = new THREE.BoxGeometry(2, 4, 0.3); 9 var cube = new THREE.Mesh(geometry, 10 new THREE.MeshFaceMaterial(materials)); 11 scene.add(cube);
- 29. Track real life movement 1 window.addEventListener('deviceorientation', function(e) { 2 cube.rotation.x = e.beta / 60; 3 cube.rotation.y = e.gamma / 60; 4 cube.rotation.z = e.alpha / 60; 5 });
- 30. Accelerometer Real purpose: Turn to mute
- 31. Juggling visualizer Measure z-forces on device Plot it in graph over time Juggle with multiple devices
- 32. Juggling visualizer 1 window.addEventListener('devicemotion', function(e) { 2 var serie = getGraphSerieForDevice(e.data.deviceId); 3 serie.addPoint([ e.data.timestamp, Math.abs(e.data.z) ]); 4 });
- 33. Weight scale
- 35. Beacons Tag everyone with a beacon Cross-reference facebook Phone alerts you who to talk to
- 36. Beacons 1 var Bleacon = require('bleacon'); 2 3 Bleacon.startScanning(); 4 5 Bleacon.on('discover', function(b) { 6 console.log('found', b.major, b.minor, b.distance); 7 }); Work in progress in Firefox OS & Firefox for Android (https://bugzilla.mozilla.org/show_bug.cgi?id=1063444)
- 39. Linux Kernel
- 42. Linux Kernel Gecko HTML5 UI Has all phone APIs in JS
- 43. Linux Kernel Gecko Has all phone APIs in JS
- 48. Linux Kernel Gecko Has all phone APIs in JS
- 49. Linux Kernel Gecko JanOS Has all phone APIs in JS
- 50. Linux Kernel Gecko JanOS Has all phone APIs in JS
- 52. JanOS Fork of Firefox OS For phones & Rpi Runs without display
- 55. Get hacking! Grab a phone that has latest Chrome / Firefox Use that sensor data Think outside the box