{
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
let m = 100;
let s = -1;
while (true) {
yield Promises.delay(10).then(() => {
context.clearRect(-width / 2, -width / 2, width, width);
const c = [0, 0, r];
circle(c, context, { fill: false });
if (m < -turnAfter || m > turnAfter) s *= -1;
m += s;
for (let i = startR; i < endR; i += stepR) {
const sq = square(r + i, m);
drawSquareAndInverted(sq, c, context);
}
return context.canvas;
});
}
}
function drawSquareAndInverted([p1, p2, p3, p4], c, context) {
const cr = 1.5;
const BLACK = circleSprite('black', cr * 2);
const RED = circleSprite('red', cr * 2);
for (let x = p2[0]; x <= p1[0]; x += step) {
[p1, p3].forEach(p => {
BLACK.draw(context, x, p[1]);
RED.draw(context, ...invertOnCircle(c, [x, p[1], cr]));
});
}
for (let y = p3[1]; y <= p2[1]; y += step) {
[p3, p4].forEach(p => {
const c_i = [p[0], y, cr];
BLACK.draw(context, p[0], y);
RED.draw(context, ...invertOnCircle(c, [p[0], y, cr]));
});
}
}
function circleSprite(color, size, pad = 1) {
const s = Math.ceil(size + pad * 2), r = size / 2, m = s / 2;
const c = DOM.context2d(s, s, 1);
c.fillStyle = color;
c.moveTo(m + r, m);
c.arc(m, m, r, 0, Math.PI * 2);
c.fill();
c.canvas.draw = (context, x, y) => {
context.drawImage(c.canvas, x - m, y - m);
}
return c.canvas;
}
function square(r, m) {
const p1 = [r + m, r + m];
const p2 = [-r - m, r + m];
const p3 = [r + m, -r - m];
const p4 = [-r - m, -r - m];
return [p1, p2, p3, p4];
}
function invertOnCircle([x, y, r], [px, py]) {
const d = dist2D([x, y], [px, py]);
const lenP = (r * r) / d;
return pointOnLine([[x, y], [px, py]], lenP / d);
}
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.
