Sam Wray & Tim Pietrusky
{Live:JS}
Part 1: Sam
Game Boy music
Web Audio API
Analysing Sound
let source =
context.createMediaElementSource(audio);
let context = new AudioContext();
let audio = new Audio();
Source
Destination
source.connect(
context.destination
);
Source
Destination
Analyser
let analyser =
context.createAnalyser();
source.connect(analyser);
Meyda
RMS
Energy
ZCR
Amplitude Spectrum
Power Spectrum
Spectral Centroid
Spectral Flatness
Spectral Slope
Spectral Rolloff
Spectral Spread
Loudness
Perseptual Spread
Perceptual Sharpness
Mel-Freq Cepstral Coeffic.
Spectral Skewness
Spectral Kurtosis
Meyda
ZCR
RMS



Canvas 2D




Three.JS
WebGL
WebGL
OpenGL Shader Language (GLSL)
Modules
Part 2: Tim

MIDI
Musical Instrument Digital Interface
Web MIDI API

navigator.requestMIDIAccess();
MIDIMessageEvent
LED Curtain
8 x LED Strips

FadeCandy

Raspberry PI 3

WIFI


[
255, 0, 0 /* 1. LED */
];
[
255, 0, 0, /* 1. LED */
0, 255, 0 /* 2. LED */
];
FadeCandy to LED
1.
2.
DMX512
DMX Universe
Sender
Device 2
Device 1
Device n



DMX USB Interface
2 x PAR Lights
Bubble Machine

USB




{ /* Address: 1 */
0: 255, 1: 0, 2: 0
};
{ /* Address: 1 */
0: 255, 1: 0, 2: 0,
/* Address: 4 */
3: 0, 4: 255, 5: 0
};
{ /* Address: 1 */
0: 255, 1: 0, 2: 0,
/* Address: 4 */
3: 0, 4: 255, 5: 0,
/* Address: 16 */
15: 255, 16: 255
};
Part 3: 🤓 + 🤓







{Live:JS}
Hack Weekend
+ Web MIDI
+ Grab Canvas Data
+ Control LED / DMX
{Live:JS}
livejs.network
The End.
@livejs_network
LiveJS : FrankenJS 2017
By Tim Pietrusky
LiveJS : FrankenJS 2017
- 2,246