NerdDRUM
Frontend Meetup Budapest 2016 by @TimPietrusky
DRUMS
University
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2283346/tim_pietrusky_as_a_child_playing_his_drums.jpg)
DANCING
FESTIVALS
DO IT!
Kazzo
BE CREATIVE
WITH THE WEB
Web Audio
Web MIDI
Canvas
WebSocket
2014
LED
2015
Visualization
2016
Music
June 2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2980722/61fb4104774f895effb41237308d6_1.jpg)
XDrum DD-530
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2980722/61fb4104774f895effb41237308d6_1.jpg)
USB
WEB MIDI
MIDIMessageEvent
Rx.Observable.filter
reactivex.io/rxjs
this.mapping = {
snare : 38,
tom1 : 48,
tom2 : 45,
tom3 : 43,
hihat_open : 46,
hihat_closed : 42,
hihatControl : 44,
crash : 49,
ride : 51,
kick : 36
};
Snare
Canvas
Draw
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2981532/snare.jpg)
LED CURTAIN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2981437/neopixel_stripe_small.jpg)
NeoPixel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/1342831/fadecandy_by_Adafruit_small.jpg)
FadeCandy
Wires
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2981437/neopixel_stripe_small.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/1342831/fadecandy_by_Adafruit_small.jpg)
USB
Map Canvas to NeoPixel
let leds = [
255, 0, 0, // Red
0, 255, 0, // Green
0, 0, 255 // Blue
]
Canvas
let data = ctx.getImageData(
selector.x,
selector.y,
1, // px per LED -> x
8 * 30 // px / LED -> y
);
DEMO
T h a n k y o u !
NerdDrum @ Frontend Meetup Budapest 2016
By Tim Pietrusky
NerdDrum @ Frontend Meetup Budapest 2016
- 1,972