Web developer and autodidact with an interest in creative coding.
/*
function render(imgData, w, h, ox = .5, oy = .5) {
const ds = new Uint32Array(imgData.data.buffer);
const dt = new Uint32Array(w * h);
const fn = (v, s, o) => lerp(...segment(v, s), o);
const fnx = v => fn(v, w, ox);
const fny = v => fn(v, h, oy);
for(let i0 = 0; i0 < ds.length; i0++) {
const x0 = (i0 % w) / w * 2 - 1;
const y0 = (i0 / w | 0) / h * 2 - 1;
const x1 = clamp(0, w-1, Math.round((fnx(x0) * .5 + .5) * w));
const y1 = clamp(0, h-1, Math.round((fny(y0) * .5 + .5) * h));
const i1 = x1 + y1 * w;
dt[i0] = ds[i1];
}
const c = DOM.context2d(w, h, 1);
c.putImageData(new ImageData(new Uint8ClampedArray(dt.buffer), w), 0, 0);
return c.canvas;
}
*/
/*
// Remainder and floor.
const rx = x % s, fx = (x / s | 0) * s;
const ry = y % s, fy = (y / s | 0) * s;
// Offset switches.
const mx = ((x / s | 0)) % 2;
const my = ((y / s | 0)) % 2;
const tx = mod(fx + (mx ? s - rx : -s + rx) + cx, w);
const ty = mod(fy + (my ? s - ry : -s + ry) + cy, h);
const ti = tx + ty * w;
dt[i] = ds[ti];
*/
/*{
const cols = 10, rows = 10;
const w = 3, h = 3, s = 10;
const samples = [];
for(let y = 0; y < rows; y++) {
for(let x = 0; x < cols; x++) {
const tx = x/(cols-1), ty = y/(rows-1);
const c = render(imgData, w, h, tx, ty);
c.style.imageRendering = 'pixelated';
c.style.width = `${w*s}px`;
c.style.margin = '2px';
samples.push(c);
}
}
return html`<div style="display:grid;grid-template-columns:5">${samples}`;
}*/
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.
