colorjs = import("https://colorjs.io/dist/color.js")
Color = colorjs.default
colorcodes = new Color("#000").steps("#fff", {space: "oklab", outputSpace: "srgb", steps: 12}).map(x => x.toString({format: "hex"}))
scalenames = ['C', 'Df', 'D', 'Ef', 'E', 'F', 'Gf', 'G', 'Af', 'A', 'Bf', 'B']
scale = {
let s = {}
scalenames.forEach((n, i) => s[n] = colorcodes[i])
s['Fs'] = s['Gf']
return s
}
Cmajor = ['C', 'D', 'E', 'F', 'G', 'A', 'B'].map(n => scale[n])
function showScale(scale) {
return htl.html`<div style="border: 1px solid black">
${scale.map(c => html`<div style="background: ${c}; height: 30px"></div>`)}
</div>
`
}
Cminor = notes(['C', 'D', 'Ef', 'F', 'G', 'Af', 'Bf'])
showScale(Cminor)
cofCc = ['C', 'G', 'D', 'A', 'E', 'B', 'Fs'].map(n => scale[n])
// circle of fifth C clockwise
cofCcc = ['C', 'F', 'Bf', 'Ef', 'Af', 'Df', 'Gf'].map(n => scale[n])
// circle of fifth C counter-clockwise
function notes(symbols) {
return symbols.map(s => scale[s])
}
ionian = notes(['F', 'C', 'G', 'D', 'A', 'E', 'B'])
lydian = notes(['C', 'G', 'D', 'A', 'E', 'B', 'Fs'])
showScale(mixolydian)
aeolian = notes(['Af', 'Ef', 'Bf', 'F', 'C', 'G', 'D'])
showScale(aeolian)
dorian = notes(['Ef', 'Bf', 'F', 'C', 'G', 'D', 'A'])
showScale(dorian)
phrygian = notes(['Df', 'Af', 'Ef', 'Bf', 'F', 'C', 'G'])
showScale(phrygian)
locrian = notes(['Gf', 'Df', 'Af', 'Ef', 'Bf', 'F', 'C'])
showScale(locrian)
tangram(ionian)
tangram(dorian)
tangram(phrygian)
tangram(lydian)
tangram(mixolydian)
tangram(aeolian)
tangram(locrian)
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.
