Web developer and autodidact with an interest in creative coding.
Published
Edited
Jul 1, 2022
3 stars
{
const {width: w, height: h} = imageData;
const c = DOM.context2d(w, h, 1);
c.putImageData(imageData, 0, 0);
const boxW = clamp(1, w, Math.round(w*s/2)*2),
boxH = clamp(1, h, Math.round(h*s/2)*2);
let x = 0, //Math.floor(Math.random() * (w-boxW)),
y = 0, //Math.floor(Math.random() * (h-boxH)),
dx = boxW >= w ? 0 : 1,
dy = boxH >= h ? 0 : .33;
const boxD = c.getImageData(x, y, boxW, boxH);
while(1) {
c.putImageData(boxD, x, y);
if(!inRange(0, w - boxW, x + dx)) dx = -dx;
if(!inRange(0, h - boxH, y + dy)) dy = -dy;
x += dx;
y += dy;
const d = c.getImageData(x, y, boxW, boxH);
boxD.data.set(d.data);
rotate(d, (i, n) => viewof r.value);
c.putImageData(d, x, y);
yield c.canvas;
}
function clamp(a, b, v) {
return v < a ? a : v > b ? b : v;
}
function inRange (a, b, v) {
return v >= a && v <= b;
}
}
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.
