Web Sensors
Web Sensors is a wrapper around a handful of common web APIs. It provides a simple way to add real-world sensors to a web application. This library was developed to make creative web coding easier. It also includes streams for perlin and simplex noise.
Installation
npm install web-sensors --save
Testing
Currently only tested on Chrome for OSX. PRs welcome!
npm run test
(then open http://localhost:8080 in browser)
Example Usage
import { sight, click, mouse, simplexnoise } from 'web-sensors'
sight().subscribe((light) => {
state.update('retinas', light)
})
click().subscribe((ev) => {
state.update('click', ev)
})
mousemove().map((ev) => {return {x: ev.clientX, y: ev.clientY}})
.subscribe((location) => {
state.update('mouse', location)
})
simplexnoise({shape: [5, 5, 5]}).subscribe((3DnoiseArray) => {
state.update('noise', 3DnoiseArray)
})
Documentation
time
observe the passing of time...
Parameters
framerate
number? optional framerate. defaults to 0, which uses requestAnimationFrame (optional, default0
)
Returns Observable stream of the current UTC time in ms
sight
a wrapper to make getting a webcam feed much easier than the standard getUserMedia API
Parameters
$0
Object
Returns Observable pixel array stream
sound
a wrapper to make getting a microphone feed much easier than the standard getUserMedia API
Parameters
$0
Object
Returns Observable Uint8Array stream
geolocation
watch the user's current GPS coordinates
Returns Observable {lat, lng} stream
resize
watch for changes in the user's browser window size
Parameters
throttleRate
number? optional interval to throttle this stream by. (optional, default100
)
Returns Observable {width, height}
scroll
Parameters
throttleRate
number? optional interval to throttle this stream by. (optional, default2
)
Returns Observable {scroll event}
mousedown
Returns Observable document mousedown event
mousemove
Returns Observable mousemove event
mouse
a simple version of mousemove that only returns the clientX and clientY location
Returns Observable {x, y} of the mouse position
mouseup
Returns Observable document mouseup event
click
Returns Observable document click event
dblclick
Returns Observable document double click event
keydown
Returns Observable document keydown event
keypress
Returns Observable document keypress event
keyup
Returns Observable document keyup event
touchstart
Returns Observable document touchstart event
touchmove
Returns Observable document touchmove event
touch
Returns Observable document touchmove event
touchend
Returns Observable document touchend event
random
generates a stream of random numbers
Parameters
$0
Object$0.seed
number? optional seed for the generator. (optional, defaultMath.random()
)$0.shape
array? the dimensionality of the returned value shape[0] corresponds to the length of the x axis, shape[1] corresponds to the length of the y axis, shape[2] corresponds to the length of the z axis. Shape array can be any length between 1 and 3, so [5, 5], for example, would return a 5x5 array of random values between 0 and 1 (optional, default[1,0,0]
)$0.framerate
number? optional framerate. defaults to 0, which uses requestAnimationFrame (optional, default0
)
Returns Observable stream of random numbers or an array of random numbers
simplexnoise
generates a stream of values using simplex noise
Parameters
$0
Object$0.seed
number? optional seed for the generator. (optional, defaultMath.random()
)$0.shape
array? the dimensionality of the returned value shape[0] corresponds to the length of the x axis, shape[1] corresponds to the length of the y axis, shape[2] corresponds to the length of the z axis. Shape array can be any length between 1 and 3, so [5, 5], for example, would return a 5x5 array of simplex noise values (optional, default[1,0,0]
)$0.framerate
number? optional framerate. defaults to 0, which uses requestAnimationFrame (optional, default0
)
Returns Observable stream of simplex values
perlinnoise
generates a stream of values using perlin noise
Parameters
$0
Object$0.seed
(optional, defaultnull
)$0.shape
(optional, default[1, 0, 0]
)$0.framerate
(optional, default0
)
$0.$0.seed
number? optional seed for the generator. (optional, defaultMath.random()
)$0.$0.shape
array? the dimensionality of the returned value shape[0] corresponds to the length of the x axis, shape[1] corresponds to the length of the y axis, shape[2] corresponds to the length of the z axis. Shape array can be any length between 1 and 3, so [5, 5], for example, would return a 5x5 array of perlin noise values (optional, default[1,0,0]
)$0.$0.framerate
number? optional framerate. defaults to 0, which uses requestAnimationFrame (optional, default0
)
Returns Observable stream of perlin values