2c:null 2d:["$","title",null,{"children":"Sand Sim | Fabian Iwand | Observable"}] 32:T524,> this is such cool notebook! Thank you! > is this how you've made this https://twitter.com/mootari/status/1249819566156533769 ? Generally speaking, yes. This notebook has been simplified, but I have 3 or 4 others which all explore different directions and variations. You can watch me prepping an image in https://twitter.com/mootari/status/1250057972010663945 > I'm wondering how would be to feed a live camera into that effect, and once the frames are not changing you run the effect. I can't quite imagine it yet, because you'd need to replace the image contents as soon as you have some movement. An alternative might be to feed new pixels "from above", i.e., only add them if there are no other pixels above that position. But with all the noise in a video feed it might be difficult to determine what should count as movement. I'd suggest to draw inspiration from Andreas Gysin (https://twitter.com/andreasgysin/status/1258072198889299969) and use the facial features detection in Max Bittker's https://shaderbooth.com/ Another alternative might be to use a still frame, run the sim across it, track every displacement and then create a displacement map that you apply to the live feed. Perhaps again with facial feature detection, to map source and target locations more accurately and dynamically. :)33: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); } }34: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); } }35: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]}, }, })36: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; } 37:[{"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}] 30:{"id":"280ce4bb17526598","slug":"sand-sim-mono","title":"Sand Sim","thumbnail":"990309fc9b37351f0612837355d8621c1220b7e3d5a159bc0ae926a7abb80a98","access_level":"public","create_time":"$D2020-04-14T05:05:26.378Z","update_time":"$D2021-03-30T09:24:49.059Z","view_time":null,"first_public_time":"$D2020-09-20T15:12:12.973Z","fork":true,"stars":72,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":1074,"publish_version":1074,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[{"id":"4e97cdfd6855c0b6","reply_to_id":null,"content":"hi @mootari this is such cool notebook! is this how you've made this https://twitter.com/mootari/status/1249819566156533769 ? I'm wondering how would be to feed a live camera into that effect, and once the frames are not changing you run the effect.","create_time":"$D2020-09-20T22:16:02.515Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}},{"id":"32fe97b663426a34","reply_to_id":"4e97cdfd6855c0b6","content":"$32","create_time":"$D2020-09-20T22:32:12.063Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"8dc98ce08edab4a4","reply_to_id":null,"content":"It's weirdly fun to keep toggling the direction to \"re-compact\" the sand over and over again.","create_time":"$D2020-09-21T19:18:59.240Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"f9fd2cf1bc78804b","reply_to_id":"8dc98ce08edab4a4","content":"I just published an update. Checkout the new options ;)","create_time":"$D2020-09-21T19:19:40.583Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"66a9ca8f9789bf6c","reply_to_id":"8dc98ce08edab4a4","content":"💯","create_time":"$D2020-09-21T19:20:07.508Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"200e75230e85fb71","reply_to_id":"8dc98ce08edab4a4","content":"Quick demo: https://twitter.com/mootari/status/1308124725038776323","create_time":"$D2020-09-21T19:25:31.760Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"4f445981a384a3b2","reply_to_id":"8dc98ce08edab4a4","content":"great to see this update!! I've tried to add other directions but I wasn't that fast! playing with the Cutout area using the mouse/touch is a lot o fun!","create_time":"$D2020-09-21T19:43:32.074Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}},{"id":"65afc83d670f840f","reply_to_id":"8dc98ce08edab4a4","content":"There's now a steps slider in the Config section, if you're getting impatient and want to speed things up. I've left it out of the top area because it's already pretty clobbered there. :)","create_time":"$D2020-09-21T19:52:41.967Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"f043fb13c326175e","reply_to_id":"4e97cdfd6855c0b6","content":"With mouse/touch controls, the direction is currently derived from the angle relative to the image center, but the description states \"by dragging across the image\". I think that the current behavior is not very intuitive. My suggestion:\n- Use pointerdown position as origin,\n- on pointermove, determine angle relative to drag origin and update direction,\n- stop movement on pointerup\n\nThoughts?","create_time":"$D2020-09-23T15:54:39.033Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"2c03ffa0061f08ca","reply_to_id":"4e97cdfd6855c0b6","content":"I've implemented the change in this fork for testing: https://observablehq.com/compare/280ce4bb17526598@771...6816bac6d990238b@771\n\nThe drag origin gets updated on every pointer move (that results in an unambiguous direction). I'd appreciate it if someone could test the fork and give some feedback!\n\n(E.g., it might require a deadzone, but I'm not sure on which metric that should be based. dpr?)","create_time":"$D2020-09-23T18:37:55.945Z","update_time":"$D2020-09-23T18:39:25.218Z","resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"7fa3c82aa01a0380","reply_to_id":"4e97cdfd6855c0b6","content":"Sorry, the previous link was not publicly accessible. Here's the correct link: https://observablehq.com/compare/280ce4bb17526598...6816bac6d990238b (I've also added a deadzone based on devicePixelRatio)","create_time":"$D2020-09-23T18:44:25.632Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":10,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":399,"value":"viewof file = radio({\n title: 'Image',\n options: Object.keys(files),\n value: 'Blob',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":370,"value":"viewof reset = html`