Altering the real world with JavaScript - Framsia
0 likes892 views
The document outlines creative ways to interact with the real world using JavaScript, including visualizing data from devices and generating music. It discusses projects like a juggling visualizer, a baby monitor using beacons, and a drone controllable via web apps and Bluetooth. The presentation emphasizes leveraging sensor data and upcoming web technologies such as Web Bluetooth.
![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/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-11-320.jpg)
![Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'],
6 [1/2, 1/2, 1/4, 1/4, 1/2]
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;](https://image.slidesharecdn.com/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-18-320.jpg)
![Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich'],
6 [1/4, 1/4, 1/4, 1/2].rnd()
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;](https://image.slidesharecdn.com/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-19-320.jpg)
![Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich'],
6 [1/4, 1/4, 1/4, 1/2].rnd()
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;](https://image.slidesharecdn.com/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-20-320.jpg)
![Scanning beacons
1 var adapter = navigator.mozBluetooth.defaultAdapter
2 adapter.startLeScan([]).then(handle => {
3 handle.ondevicefound = e => {
4 // handle e.scanRecord
5 }
6
7 setTimeout(() => {
8 adapter.stopLeScan(handle)
9 }, 5000)
10 }, err => console.error(err))](https://image.slidesharecdn.com/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-29-320.jpg)
![10 // Set up the connection
11 e.device.gatt.connect().then(() => {
12 return e.device.gatt.discoverServices();
13 }).then(() => {
14 // devices have services, and services have characteristics
15 var services = e.device.gatt.services;
16 console.log('services', services);
17
18 // find the characteristic that handles flying the drone
19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), [])
20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0];
21
22 // take off instruction!
23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]);
24 c.writeValue(buffer).then(() => {
25 console.log('take off successful!');
26 });
27 });](https://image.slidesharecdn.com/framsia-150924135815-lva1-app6891/85/Altering-the-real-world-with-JavaScript-Framsia-37-320.jpg)
Altering the real world with JavaScript - Framsia
- 1. altering the real world with JavaScript Jan Jongboom Framsia 23-09-2015
- 7. BORING!
- 9. Accelerometer Real purpose: Turn to mute
- 10. Juggling visualizer Measure z-forces on device Plot it in graph over time Juggle with multiple devices
- 11. 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 });
- 12. Weight scale
- 16. 1 a = Drums('x*o*x*o-') Gibber
- 17. Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5
- 18. Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'], 6 [1/2, 1/2, 1/4, 1/4, 1/2] 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;
- 19. Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;
- 20. Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;
- 21. So much phones!
- 23. Gibber
- 24. Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = Phone.X https://github.com/janjongboom/jsconf-us/blob/master/gibber/gibber-phone.js
- 25. Getting data out of the real world
- 27. iBeacons Long battery life Cheap Unique identifier
- 28. Coming to a web browser near you https://bugzilla.mozilla.org/show_bug.cgi?id=1063444
- 29. Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))
- 30. JavaScript baby monitor Tag your baby with a phone Get three beacons Some math
- 32. Physical Web Walk up and use anything
- 36. Drone Web App Physical Web to discover Web App gets reference to device Connect using WebBluetooth Fly!
- 37. 10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });
- 38. -
- 40. Get hacking! Grab a phone and use sensor data Take beacon or Nordic dev kit WebBluetooth is coming! Be prepared!