{
const height = 400;
const cell = 50;
const c2 = cell/2;
const c4 = cell/4;
const c8 = cell/8;
const rad = Math.PI / 180;
const ctx = DOM.context2d(width, height);
ctx.clearRect(0, 0, width, height);
ctx.strokeStyle="#5a5a5a";
ctx.fillStyle="#5a5a5a";
ctx.globalCompositeOperation = 'xor';
let step = 0;
let points = [];
for (let y=-c2; y<height+cell; y+=cell) {
for (let x=-c2; x<width+cell; x+=cell) {
points.push({ x, y });
}
}
do {
ctx.clearRect(0, 0, width, height);
for (let p of points) {
ctx.save();
ctx.beginPath();
ctx.translate(p.x, p.y);
ctx.moveTo(0, 0);
ctx.rotate(step * rad);
ctx.ellipse(c4,c2,c2+Math.sin(step*rad)*c2,c2+Math.cos(step*rad)*c2, Math.PI / 4, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
ctx.restore();
}
step += .5;
yield ctx.canvas;
} while( true );
yield ctx.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.
