WIDTH = Math.min(600, width)
HEIGHT = WIDTH
DURATION_MS = 3000
PAUSE_MS = 1000
PATTERNS = [
[50, 50, 50, 50], // chequerboard
[60, 30, 30, 60], // herringbone
[70, 70, 30, 30], // Pythagorean
]
clock = {
while (1) {
const ts = Date.now() % ((DURATION_MS + PAUSE_MS) * PATTERNS.length) / (DURATION_MS + PAUSE_MS);
yield ts;
}
}
a = Math.floor(clock)
b = (a + 1) % PATTERNS.length
t = ease(clock - Math.floor(clock))
A = interpolateArrays(t, PATTERNS[a], PATTERNS[b])
{
const ct = canvas.ct;
const { sin, cos } = Math;
ct.fillStyle = "#f00";
ct.fillRect(-WIDTH/2, -HEIGHT/2, WIDTH, HEIGHT);
for (let i = -20; i < 20; i++) {
for (let j = -20; j < 20; j++) {
const x = i * A[0] + j * A[2];
const y = j * A[1] - i * A[3];
ct.strokeStyle = "#78A";
ct.strokeRect(x, y, A[0], A[1]);
ct.strokeStyle = "rgba(0,0,0,0.5)";
ct.strokeRect(x, y, -A[2], A[3]);
ct.fillStyle = "#346";
ct.fillRect(x, y, A[0], A[1]);
}
}
// ct.beginPath();
// ct.arc(0, 0, 10, 0, 7);
// ct.fillStyle = "#009";
// ct.fill();
return this || html`(<i>the drawing function</i>)`;
}
function easeSin(t) {
return (Math.sin((t - .5)*Math.PI) + 1) / 2;
}
function easePad(p, f) {
return function(t) {
if (t < p) return 0;
if (t > 1-p) return 1;
return f((t-p)/(1-2*p));
};
}
ease = easePad(PAUSE_MS/(DURATION_MS+PAUSE_MS)/2, easeSin);
function interpolateArrays(t, a, b) {
return a.map((_, i) => a[i] * (1-t) + b[i] * t);
}
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.
