Published
Edited
Apr 11, 2019
3 stars
equations = [
(j, t) => 45 * j + j * (360 / n) + t,
(j, t) => j * (360 / n) + t,
(j, t) => (1 - j) * (360 / n) + t,
(j, t) => Math.sin(j) * (360 / n) + t,
(j, t) => j * (360 / n) + Math.sin(t / 100) * 360
]
{
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
let t = 0;
while (true) {
yield Promises.delay(10).then(() => {
++t;
context.clearRect(-width, -width, width * 2, width * 2);
const m = [0, 0, width / 3];
const points = [];
for (let i = 0; i < n; ++i) {
const coord_i = pointOnCircle(m, (i * 360) / n);
const point_i = [...coord_i, width / (1.5 * n)];
circle(point_i, context, {
fill: false,
dash: [2, 10]
});
points.push([i, point_i]);
}
const outerPoints = [];
for (let [j, point] of points) {
const coord_j = pointOnCircle(point, equations[eq](j, t));
const point_j = [...coord_j, 3];
circle(point_j, context);
outerPoints.push(point_j);
}
for (let i = 0; i < n; ++i) {
const point_j = outerPoints[i];
const point_j1 = outerPoints[(i + n / 2 + 1) % n];
line(point_j, point_j1, context, { dash: [10, 0] });
}
return context.canvas;
});
}
}
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.
