31:T4ee,simulation = { reset; const {element: canvas, step, update} = createSimulation( sourceImageData, createMask(sourceRgbLength, ...cutoff) ); const dragTo = draggable(canvas), $direction = viewof direction, $bgColor = viewof bgColor, maxDelay = 1000 / 20, initialDelay = $direction.value ? 500 : 0; canvas.style.cssText = 'max-width: 100%; background: red; border: 1px solid #aaa; touch-action: none'; canvas.tabIndex = 0; let raf, oldBg = $bgColor.value; Promises.delay(initialDelay).then(() => { invalidation.then(() => window.cancelAnimationFrame(raf)); loop(); }); update(oldBg); return canvas; function loop() { let n = 0, dir = $direction.value; const cursor = dir ? 'default' : 'move'; if(canvas.style.cursor !== cursor) canvas.style.cursor = cursor; if(dir) for(let i = 0; i < steps; i++) n++, step[dir](); else { const start = performance.now(); while(dir = dragTo()) { n++, step[dir](); if(performance.now() - start > maxDelay) break; } } if(n || oldBg !== $bgColor.value) { oldBg = $bgColor.value; update(oldBg); } raf = window.requestAnimationFrame(loop); } }32:T78c,// data: Array // stride: grid width (i.e., pixels per row) // mask: Array of size data.length that contains falsy values for every empty pixel. function algorithm(data, stride, mask) { const w = stride, l = data.length; return {down, up, right, left}; // Returns Chebyshev distance in pixels. Used for debugging. function distance(i1, i2) { const x1 = i1 % w, y1 = i1 / w | 0, x2 = i2 % w, y2 = i2 / w | 0; return Math.max(Math.abs(x2 - x1), Math.abs(y2 - y1)); } function flip(arr, i, i2) { const tmp = arr[i]; arr[i] = arr[i2]; arr[i2] = tmp; } function move(i, i2) { if(!mask[i] && mask[i2]) { //if(distance(i, i2) > 1) debugger; flip(mask, i, i2); flip(data, i, i2); } } // Step size: +stride function down() { for(let j = l; j > w; j -= w) for(let i = j-w; i < j; i++) move(i, i-w); for(let j = l; j > w; j -= w) for(let i = j-w+1; i < j; i++) move(i, i-w-1); for(let j = l; j > w; j -= w) for(let i = j-w; i+1 < j; i++) move(i, i-w+1); } // Step size: -stride function up() { for(let j = w; j < l; j += w) for(let i = j-w; i < j; i++) move(i, i+w); for(let j = w; j < l; j += w) for(let i = j-w+1; i < j; i++) move(i, i+w-1); for(let j = w; j < l; j += w) for(let i = j-w; i+1 < j; i++) move(i, i+w+1); } // Step size: +1 function right() { for(let j = w-1; j > 0; j--) for(let i = j; i < l; i += w) move(i, i-1); for(let j = w-1; j > 0; j--) for(let i = j+w; i < l; i += w) move(i, i-1-w); for(let j = w-1; j > 0; j--) for(let i = j; i+w < l; i += w) move(i, i-1+w); } // Step size: -1 function left() { for(let j = 0; j < w-1; j++) for(let i = j; i < l; i += w) move(i, i+1); for(let j = 0; j < w-1; j++) for(let i = j+w; i < l; i += w) move(i, i+1-w); for(let j = 0; j < w-1; j++) for(let i = j; i+w < l; i += w) move(i, i+1+w); } }33:T61f,files = ({ 'Blob': { url: FileAttachment('harm-van-der-dorpel--fall-gif--frame-0.png').url(), source: 'https://www.are.na/block/2034785', credit: 'Harm van den Dorpel', preset: {bgColor: '#ffffff', cutoff: [.9, 1]}, }, 'Power lines': { url: `https://images.unsplash.com/photo-1583737945822-d3fad045f8a4?ixlib=rb-1.2.1&${unsplashArgs}`, source: 'https://unsplash.com/photos/I5jergGd3lI', credit: 'Matin Tavazoei', preset: {bgColor: '#dcd7d1', cutoff: [.76, 1]}, }, 'Face': { url: `https://images.unsplash.com/photo-1571512599285-9ac4fdf3dba9?ixlib=rb-1.2.1&${unsplashArgs}`, source: 'https://unsplash.com/photos/XO25cX2_0iE', credit: 'Artem Beliaikin', preset: {bgColor: '#212121', cutoff: [0, .28]}, }, 'Fireworks': { url: `https://images.unsplash.com/photo-1510279582501-e611028ca0c1?ixlib=rb-1.2.1&${unsplashArgs}`, source: 'https://unsplash.com/photos/LdciZKOLBlY', credit: 'James Owen', preset: {bgColor: '#000000', cutoff: [0, .12]}, }, 'Boston Court House': { url: `https://images.unsplash.com/photo-1582140110215-1ad86861be50?ixlib=rb-1.2.1&${unsplashArgs}`, source: 'https://unsplash.com/photos/-Odt5-8TDmk', credit: 'Boston Public Library', preset: {bgColor: '#ffffff', cutoff: [.65, 1]}, }, 'Wreath': { url: `https://images.unsplash.com/photo-1512331283953-19967202267a?ixlib=rb-1.2.1&${unsplashArgs}`, source: 'https://unsplash.com/photos/-3xSBrSzTjg', credit: 'Georgia de Lotz', preset: {bgColor: '#e8e8e8', cutoff: [.85, 1]}, }, })34:T4be,function draggable(canvas) { let origin, target; function clamp(a, b, v) { return v < a ? a : v > b ? b : v; } function offset({clientX: x, clientY: y}) { const box = canvas.getBoundingClientRect(), w = canvas.width - 1, h = canvas.height - 1; return { x: clamp(0, w, Math.round((x - box.left) / box.width * w)), y: clamp(0, h, Math.round((y - box.top ) / box.height * h)), }; } function move() { if(!target) return null; const o = origin, t = target, dx = Math.abs(o.x - t.x), dy = Math.abs(o.y - t.y), step = 3; if(dx < step && dy < step) return null; return (dx >= step && (dx > dy || dy < step)) ? (o.x < t.x ? (o.x += step, 'right') : (o.x -= step, 'left')) : (o.y < t.y ? (o.y += step, 'down') : (o.y -= step, 'up')); } canvas.onpointerup = e => { origin = target = null; canvas.releasePointerCapture(e.pointerId); }; canvas.onpointerdown = e => { origin = offset(e); canvas.setPointerCapture(e.pointerId); }; canvas.onpointermove = e => { e.preventDefault(); if(origin) target = offset(e); }; return move; } 35:[{"id":"c430b87b3e362ebd5faf81ac2dbf6717481420e0f0b7c79c3896558816c70c41bff5bfd30817ae6ec7f6220d183cf7290caaa57ef482313ef6e3782356af10c2","href":"https://static.observableusercontent.com/files/c430b87b3e362ebd5faf81ac2dbf6717481420e0f0b7c79c3896558816c70c41bff5bfd30817ae6ec7f6220d183cf7290caaa57ef482313ef6e3782356af10c2","name":"harm-van-der-dorpel--fall-gif--frame-0.png","type":"image/png","lastModified":1600600437561.727,"size":127153}] 2e:{"title":"Sand Sim","cells":[{"id":0,"value":"md`# Sand Sim\n\nA recreation of [Harm](https://harmvandendorpel.com/) [van](https://www.instagram.com/harmvandendorpel/) [den](https://www.are.na/harm-van-den-dorpel/channels) [Dorpel](https://twitter.com/harmvddorpel)'s [fall.gif](https://www.are.na/block/2034785) (discovered via Tom MacWright's [Blob melt](https://observablehq.com/@tmcw/blob-melt)).\n\nSee the [Data](#sourceImageData) or [Config](#files) section for image credits.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof file = radio({\n title: 'Image',\n options: Object.keys(files),\n value: 'Blob',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"viewof bgColor = {\n const $form = color({\n title: 'Background color',\n description: 'Color used for empty pixels.',\n value: files[file].preset.bgColor,\n });\n \n const $view = html`

${$form}`;\n $form.addEventListener('input', oninput);\n oninput();\n return $view;\n \n function oninput(e) {\n e && e.stopPropagation();\n $view.value = color2uint($form.value);\n $view.dispatchEvent(new Event('input', {bubbles: false}));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"viewof cutoff = rangeSlider({\n title: 'Cutout area',\n description: 'Brightness range in the source image that will become \"empty\".',\n value: files[file].preset.cutoff,\n min: 0, max: 1, step: .001,\n format: '.0%',\n display: ([a, b]) => html`${lOutput(a)} - ${lOutput(b)}`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof direction = radio({\n title: 'Direction',\n options: [\n {value: '', label: '👆 drag'},\n {value: 'up', label: '⬆️ up'},\n {value: 'down', label: '⬇️ down'},\n {value: 'left', label: '⬅️ left'},\n {value: 'right', label: '➡️ right'},\n ],\n value: 'down',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof reset = html`