NerdDRUM

Frontend Meetup Budapest 2016 by @TimPietrusky

DRUMS

University

DANCING

FESTIVALS

DO IT!

Kazzo

BE CREATIVE

WITH THE WEB

Web Audio

Web MIDI

Canvas

WebSocket

2014

LED

2015

Visualization

2016

Music

June 2016

XDrum DD-530

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

LED CURTAIN

NeoPixel

FadeCandy

Wires

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

github.com/NERDDISCO/NerdDrum

webvj.ninja

T h a n k y o u !

@TimPietrusky