Published
Edited
Aug 15, 2019
1 star
{
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
let t = 0;
let trace = [];
while (true) {
yield Promises.delay(50).then(() => {
t += 1;
context.clearRect(-width / 2, -width / 2, width, width);
const oc = [0, 0, innerRadius];
circle(oc, context, {
fill: false,
color: "rgba(150,150,150,0.8)"
});
const ic = [...pointOnCircle(oc, t), outerRadius];
circle(ic, context, {
fill: false
});
let positions = [];
for (let i = 0; i < nOuter; ++i) {
const p = [...pointOnCircle(ic, (360 / nOuter) * i - t), 3];
circle(p, context);
positions.push(p);
}
trace.push(positions);
if (trace.length >= 400) trace.shift();
drawTrace(trace, context);
return context.canvas;
});
}
}
function drawTrace(trace, context) {
for (let i = 0; i < trace.length - 1; ++i) {
for (let j = 0; j < trace[i].length; ++j) {
line(trace[i][j], trace[i + 1][j], context);
}
}
}
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.
