aka DJ Bouche
drawNoteRing = (context, cx, cy, t, hueShift = null) => {
const j = Math.sin(t / 15 / Math.PI * 2)
const k = Math.sin(t / 20 / Math.PI * 2)
const scale = 1 + bounceScale * j
const rotOffs = wiggleDeg * k
const noteRotOffs = noteNames.map((_, i) => {
return noteWiggleDeg * Math.sin(i / noteCount / 2 * Math.PI * 2 + t / 27 / Math.PI * 2)
})
// lines
for (let i = 0; i < noteCount; i++) {
// relation
for (let r = 1; r < noteCount / 2 + 1; r++) {
drawRelation(context, cx, cy, i, r, scale, rotOffs, noteRotOffs);
}
}
// notes
for (let i = 0; i < noteCount; i++) {
const [x, y] = noteIndexToPosition(cx, cy, i, scale, noteRotOffs[i] + rotOffs)
drawNote(context, x, y, i, scale, rotOffs, 0.65, hueShift);
}
}
drawNote = (context, x, y, index, scale = 1, rotOffs = 0, light = 0.65, hueShift = null) => {
// Bubble
context.beginPath();
context.lineWidth = noteLineWidth;
context.fillStyle = noteColorStyle(index, 0.5, light, rotOffs, hueShift);
context.strokeStyle = noteColorStyle(index, 0.5, light * 0.9, rotOffs, hueShift);
context.arc(x, y, (noteRadius * scale) - noteLineWidth / 2, 0, Math.PI * 2, false);
context.fill();
context.stroke();
// Label
const name = noteNames[index]
context.font = `bold ${textSize * scale}px Arial`;
context.textAlign = "center";
context.fillStyle = 'hsl(0, 100%, 100%)';
context.fillText(name, x, y + textYOffset * scale);
}
drawRelation = (context, cx, cy, i, r, scale = 1, rotOffs = 0, noteRotOffs = Array(12).fill(0)) => {
const [x, y] = noteIndexToPosition(cx, cy, i, scale, noteRotOffs[i] + rotOffs)
const i2 = noteIndexForRelation(i, r)
const [x2, y2] = noteIndexToPosition(cx, cy, i2, scale, noteRotOffs[i2] + rotOffs)
context.lineWidth = relationLineWidth
context.strokeStyle = relationStyle
context.beginPath();
context.moveTo(x, y);
context.lineTo(x2, y2);
context.stroke();
}
import {quickAnimate, quickRender} from '@maddievision/simple-canvas'
import {select, slider, number, checkbox, color} from "@jashkenas/inputs"
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.
