{ reset; const { width: w, height: h, data: sourceData } = sourceImageData, data = new Uint32Array(sourceData.slice().buffer), outputData = data.slice(), imageData = new ImageData(new Uint8ClampedArray(outputData.buffer), w), rgbLength = sourceRgbLength.slice(), EMPTY = color2uint(`#f00`); for (let i = 0, min = cutoff[0], max = cutoff[1]; i < rgbLength.length; i++) { if (rgbLength[i] >= min && rgbLength[i] <= max) data[i] = EMPTY; } const c = DOM.context2d(w, h, 1); c.canvas.style.maxWidth = '100%'; c.canvas.style.background = 'red'; c.canvas.style.border = '1px solid #aaa'; c.canvas.tabIndex = 0; const move = (i, i2) => { if (data[i] !== EMPTY) return; data[i] = data[i2]; data[i2] = EMPTY; }; const len = w * h; const directions = { down: () => { for (let j = len; j > w; j -= w) for (let i = j - w; i < j; i++) move(i, i - w); for (let j = len; j > w; j -= w) for (let i = j - w + 1; i < j; i++) move(i, i - w - 1); for (let j = len; j > w; j -= w) for (let i = j - w; i + 1 < j; i++) move(i, i - w + 1); }, up: () => { for (let j = w; j < len; j += w) for (let i = j - w; i < j; i++) move(i, i + w); for (let j = w; j < len; j += w) for (let i = j - w + 1; i < j; i++) move(i, i + w - 1); for (let j = w; j < len; j += w) for (let i = j - w; i + 1 < j; i++) move(i, i + w + 1); }, right: () => { for (let j = w - 1; j > 0; j--) for (let i = j; i < len; i += w) move(i, i - 1); for (let j = w - 1; j > 0; j--) for (let i = j + w; i < len; i += w) move(i, i - 1 - w); for (let j = w - 1; j > 0; j--) for (let i = j; i + w < len; i += w) move(i, i - 1 + w); }, left: () => { for (let j = 0; j < w - 1; j++) for (let i = j; i < len; i += w) move(i, i + 1); for (let j = 0; j < w - 1; j++) for (let i = j + w; i < len; i += w) move(i, i + 1 - w); for (let j = 0; j < w - 1; j++) for (let i = j; i + w < len; i += w) move(i, i + 1 + w); } }; let dragDir, dragOrigin = null; const updateDragDir = (x, y) => { const [ox, oy] = dragOrigin; const dx = Math.abs(ox - x), dy = Math.abs(oy - y); if (dx === dy || Math.max(dx, dy) <= window.devicePixelRatio) return dragOrigin; if (dx !== dy) dragDir = dx > dy ? (x < ox ? 'left' : 'right') : y < oy ? 'up' : 'down'; return [x, y]; }; c.canvas.onpointerup = () => { dragDir = dragOrigin = null; }; c.canvas.onpointerdown = e => { dragOrigin = [e.clientX, e.clientY]; }; c.canvas.onpointermove = e => { if (!dragOrigin) return; e.preventDefault(); dragOrigin = updateDragDir(e.clientX, e.clientY); }; let raf; const loop = () => { const dir = viewof direction.value || dragDir; if (dir) for (let i = 0; i < steps; i++) directions[dir](); update(); raf = window.requestAnimationFrame(loop); }; update(); Promises.delay( viewof direction.value ? chance.floating({ min: 250, max: 750 }) : 0 ).then(() => { invalidation.then(() => window.cancelAnimationFrame(raf)); loop(); }); return c.canvas; function update() { copy(data, outputData); c.putImageData(imageData, 0, 0); } function copy(a, b) { const BG = viewof bgColor.value; for (let i = 0; i < a.length; i++) b[i] = a[i] === EMPTY ? BG : a[i]; } }