pixel flipper, data sifter. trying to see what I can while I'm here
viewof midi = {
let h = 300
let x = DOM.canvas(width, h)
let ctx = x.getContext("2d")
x.value = {}
ctx.fillRect(0, 0, width, h)
webmidi.enable(function(err) {
if(err) {console.log(err); return;}
console.log(webmidi.inputs);
console.log(webmidi.outputs);
// let midiDeviceName = 'OP-1 Midi Device'
// const input = webmidi.getInputByName(midiDeviceName)
const input = webmidi.inputs[0]
console.log("input", input)
input.addListener('noteon', 'all', function(e) {
console.log(e.note.name + e.note.octave, e)
x.value[e.note.name] = e.note
x.value.lastNote = e.note
x.dispatchEvent(new CustomEvent("input", { bubbles: true }));
let c = colors[e.note.name]
let des = d3.hsl(c)
des.l = 0.5 + 0.5 * (x.value["c1"] || 0)/127
ctx.fillStyle = des
ctx.fillRect(0, 0, width, h)
// ctx.arc()
})
input.addListener('controlchange', 'all', function(e) {
console.log(e.value)
x.value["c" + e.controller.number] = e.value
x.dispatchEvent(new CustomEvent("input", { bubbles: true }));
})
})
yield x
}
colors = {
return {
'A': 'red',
'B': 'orange',
'C': 'yellow',
'D': 'blue',
'E': 'purple',
'F': 'indigo',
'G': 'magenta'
}
}
d3 = require("d3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
