31:Td8e,{ 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]; } }32:T507,files = ({ EJ: { url: FileAttachment('me3.png').url(), source: 'https://ejfox.com', credit: 'EJ Fox' }, 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' }, 'Power lines': { url: 'https://images.unsplash.com/photo-1583737945822-d3fad045f8a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80', source: 'https://unsplash.com/photos/I5jergGd3lI', credit: 'Matin Tavazoei' }, Face: { url: 'https://images.unsplash.com/photo-1571512599285-9ac4fdf3dba9?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=600&q=80', source: 'https://unsplash.com/photos/XO25cX2_0iE', credit: 'Artem Beliaikin' }, Fireworks: { url: 'https://images.unsplash.com/photo-1510279582501-e611028ca0c1?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', source: 'https://unsplash.com/photos/LdciZKOLBlY', credit: 'James Owen' }, 'Boston Court House': { url: 'https://images.unsplash.com/photo-1582140110215-1ad86861be50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=600&q=80', source: 'https://unsplash.com/photos/-Odt5-8TDmk', credit: 'Boston Public Library' } })33:[{"id":"c430b87b3e362ebd5faf81ac2dbf6717481420e0f0b7c79c3896558816c70c41bff5bfd30817ae6ec7f6220d183cf7290caaa57ef482313ef6e3782356af10c2","href":"https://static.observableusercontent.com/files/c430b87b3e362ebd5faf81ac2dbf6717481420e0f0b7c79c3896558816c70c41bff5bfd30817ae6ec7f6220d183cf7290caaa57ef482313ef6e3782356af10c2","name":"harm-van-der-dorpel--fall-gif--frame-0.png","type":"image/png","lastModified":1603145241717.301,"size":127153},{"id":"fcb5dc5f9ee5c9f1a9dfb5cec0d0a18bcf8c79d55961065633c5ec88beae7eaf08b616527ac37f73c9ae72baa0b7edc05c2b310ae420fae1223ce392489baa42","href":"https://static.observableusercontent.com/files/fcb5dc5f9ee5c9f1a9dfb5cec0d0a18bcf8c79d55961065633c5ec88beae7eaf08b616527ac37f73c9ae72baa0b7edc05c2b310ae420fae1223ce392489baa42","name":"me3.png","type":"image/png","lastModified":1603145901044.985,"size":152668}] 2f:{"title":"Randomized Direction Sand Sim","cells":[{"id":0,"value":"md`# Randomized Direction 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\nModified so that the direction that it pushes is randomized.\n\nSee the [Data](#sourceImageData) or [Config](#files) section for image credits.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof reset = html`