aka DJ Bouche
drawNoteRing = (context, cx, cy, t) => {
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);
}
}
drawNote = (context, x, y, index, scale, rotOffs) => {
const deg = noteDegree(index)
let colorDeg = modDegrees(colorOffs + deg + rotOffs)
if (flipColors) {
colorDeg = modDegrees(360 - colorDeg)
}
const name = noteNames[index]
context.beginPath();
context.lineWidth = noteLineWidth;
context.fillStyle = `hsl(${colorDeg}, 50%, 65%)`;
context.strokeStyle = `hsl(${colorDeg}, 50%, 45%)`;
context.arc(x, y, (noteRadius * scale) - noteLineWidth / 2, 0, Math.PI * 2, false);
context.fill();
context.stroke();
context.font = `bold ${textSize}px Arial`;
context.textAlign = "center";
context.fillStyle = 'hsl(0, 100%, 100%)';
context.fillText(name, x, y + textYOffset);
}
function render (context, width, height, t) {
context.fillStyle = 'white'
context.fillRect(0, 0, width, height);
drawNoteRing(context, width / 2, height / 2, t)
}
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.
