39
altering the real world with JavaScript Jan Jongboom JSConf.US 2015

Altering the real world with JavaScript - JSConf.US 2015

Embed Size (px)

Citation preview

Page 1: Altering the real world with JavaScript - JSConf.US 2015

altering the real worldwith JavaScript

Jan Jongboom JSConf.US 2015

Page 2: Altering the real world with JavaScript - JSConf.US 2015

Telenor R&D

@janjongboomMozilla

Page 3: Altering the real world with JavaScript - JSConf.US 2015

We're on the verge of a new era

Page 4: Altering the real world with JavaScript - JSConf.US 2015

alert('Hello ' + prompt('Your name?'))

Page 5: Altering the real world with JavaScript - JSConf.US 2015

take code into the real world

Page 6: Altering the real world with JavaScript - JSConf.US 2015

JUSTthe revolution is

getting started

Page 7: Altering the real world with JavaScript - JSConf.US 2015
Page 8: Altering the real world with JavaScript - JSConf.US 2015

Audience participation!

and GIFs!

Page 9: Altering the real world with JavaScript - JSConf.US 2015

Computer generated

music

Page 10: Altering the real world with JavaScript - JSConf.US 2015
Page 11: Altering the real world with JavaScript - JSConf.US 2015

http://gibber.mat.ucsb.edu/

Page 12: Altering the real world with JavaScript - JSConf.US 2015

1 a = Drums('x*o*x*o-')

Gibber

Page 13: Altering the real world with JavaScript - JSConf.US 2015

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5

Page 14: Altering the real world with JavaScript - JSConf.US 2015

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

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

So much phones!

Page 17: Altering the real world with JavaScript - JSConf.US 2015
Page 18: Altering the real world with JavaScript - JSConf.US 2015

Go to http://192.168.158.139:9321

Gibber

(JSConf2015_Track_A)

Page 19: Altering the real world with JavaScript - JSConf.US 2015

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

Getting data out of thereal world

Page 21: Altering the real world with JavaScript - JSConf.US 2015

Bluetooth beaconsBroadcasting their existence

Page 22: Altering the real world with JavaScript - JSConf.US 2015

Bluetooth beaconsLong battery life

Cheap URLs, sensor values, etc.

Page 23: Altering the real world with JavaScript - JSConf.US 2015

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

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

JavaScript baby monitorTag your baby with a phone

Get three beacons Some math

Page 26: Altering the real world with JavaScript - JSConf.US 2015

http://janos.io

Page 27: Altering the real world with JavaScript - JSConf.US 2015
Page 28: Altering the real world with JavaScript - JSConf.US 2015

DEMO TIMEhttp://192.168.159:139:9321

Page 29: Altering the real world with JavaScript - JSConf.US 2015

One more thing...

Page 30: Altering the real world with JavaScript - JSConf.US 2015

Firefox OS isnot just aboutphones

Page 31: Altering the real world with JavaScript - JSConf.US 2015

BLE, VR, WebCL

Page 32: Altering the real world with JavaScript - JSConf.US 2015

WearableAugmenting reality Hyperlocal services

Open standards

Page 33: Altering the real world with JavaScript - JSConf.US 2015

mozillaglass

Page 34: Altering the real world with JavaScript - JSConf.US 2015

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

Camera module

Display & sensors

WebRTC

Mirror

Page 36: Altering the real world with JavaScript - JSConf.US 2015
Page 37: Altering the real world with JavaScript - JSConf.US 2015

We can't predict the future(It's 2015, where's my hoverboard?!)

Page 38: Altering the real world with JavaScript - JSConf.US 2015
Page 39: Altering the real world with JavaScript - JSConf.US 2015

THANK YOU!

@janjongboomgithub.com/janjongboom/jsconf-us