Published
Edited
Nov 17, 2021
2 forks
20 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
canvas = {
const context = DOM.context2d(width, height);
context.fillStyle = "#fff";
context.strokeStyle = "#000";

function stack(da, i0, i1) {
for (let i = i0; i < i1; ++i) {
const a = i / n * 2 * Math.PI;
context.save();
context.rotate(a);
context.translate(0, radius);
context.rotate(a * turns / 4 + da);
context.fillRect(-radius2, -radius2, 2 * radius2, 2 * radius2);
context.strokeRect(-radius2, -radius2, 2 * radius2, 2 * radius2);
context.restore();
}
}

while (true) {
const da = (Date.now() / 10000) % 1 * 2 * Math.PI;
context.clearRect(0, 0, width, height);

context.save();
context.beginPath();
context.rect(0, height / 2, width, height / 2);
context.clip();
context.translate(width / 2, height / 2);
stack(da, n / 2, n * 3 / 2);
context.restore();

context.save();
context.beginPath();
context.rect(0, 0, width, height / 2);
context.clip();
context.translate(width / 2, height / 2);
stack(da, 0, n);
context.restore();

yield context.canvas;
}
}
Insert cell
height = Math.min(width, 640)
Insert cell
radius0 = Math.min(width, height) / 2
Insert cell
radius = radius0 * (1 - k * Math.SQRT1_2)
Insert cell
radius2 = radius0 * k / 2
Insert cell

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.
Learn more