Altering the real world with JavaScript - JSConf.US 2015
-
Upload
jan-jongboom -
Category
Internet
-
view
792 -
download
0
Transcript of Altering the real world with JavaScript - JSConf.US 2015
![Page 1: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/1.jpg)
altering the real worldwith JavaScript
Jan Jongboom JSConf.US 2015
![Page 2: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/2.jpg)
Telenor R&D
@janjongboomMozilla
![Page 3: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/3.jpg)
We're on the verge of a new era
![Page 4: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/4.jpg)
alert('Hello ' + prompt('Your name?'))
![Page 5: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/5.jpg)
take code into the real world
![Page 6: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/6.jpg)
JUSTthe revolution is
getting started
![Page 7: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/7.jpg)
![Page 8: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/8.jpg)
Audience participation!
and GIFs!
![Page 9: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/9.jpg)
Computer generated
music
![Page 10: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/10.jpg)
![Page 11: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/11.jpg)
http://gibber.mat.ucsb.edu/
![Page 12: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/12.jpg)
1 a = Drums('x*o*x*o-')
Gibber
![Page 13: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/13.jpg)
Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5
![Page 14: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/14.jpg)
Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['J', 'S', 'Conf'], 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;
![Page 15: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/15.jpg)
Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['J', 'S', 'Conf'], 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;
![Page 16: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/16.jpg)
So much phones!
![Page 17: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/17.jpg)
![Page 18: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/18.jpg)
Go to http://192.168.158.139:9321
Gibber
(JSConf2015_Track_A)
![Page 19: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/19.jpg)
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
Go to http://192.168.158.139:9321
![Page 20: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/20.jpg)
Getting data out of thereal world
![Page 21: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/21.jpg)
Bluetooth beaconsBroadcasting their existence
![Page 22: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/22.jpg)
Bluetooth beaconsLong battery life
Cheap URLs, sensor values, etc.
![Page 23: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/23.jpg)
Coming to a web browser near youhttps://bugzilla.mozilla.org/show_bug.cgi?id=1063444
![Page 24: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/24.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))
![Page 25: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/25.jpg)
JavaScript baby monitorTag your baby with a phone
Get three beacons Some math
![Page 26: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/26.jpg)
http://janos.io
![Page 27: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/27.jpg)
![Page 29: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/29.jpg)
One more thing...
![Page 30: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/30.jpg)
Firefox OS isnot just aboutphones
![Page 31: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/31.jpg)
BLE, VR, WebCL
![Page 32: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/32.jpg)
WearableAugmenting reality Hyperlocal services
Open standards
![Page 33: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/33.jpg)
mozillaglass
![Page 34: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/34.jpg)
mozilla glassWorks with any glasses No extra device required Voice controlled Self build kit ~$300
![Page 35: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/35.jpg)
Camera module
Display & sensors
WebRTC
Mirror
![Page 36: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/36.jpg)
![Page 37: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/37.jpg)
We can't predict the future(It's 2015, where's my hoverboard?!)
![Page 38: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/38.jpg)
![Page 39: Altering the real world with JavaScript - JSConf.US 2015](https://reader036.fdocuments.net/reader036/viewer/2022081514/55b6d837bb61eb2d0f8b47c7/html5/thumbnails/39.jpg)
THANK YOU!
@janjongboomgithub.com/janjongboom/jsconf-us