2c:null 2d:["$","title",null,{"children":"Ascii morphing experiments | Kelley van Evert | Observable"}] 32:T4a8,function sandstorm(ima, imb) { const pxa = shuffle(pixels(ima)); const pxb = shuffle(pixels(imb)); const conns = [ ...pxa.map((a, i) => { const b = pxb[i % pxb.length]; return { a, b }; }), ...pxb.slice(pxa.length).map((b, j) => { const a = pxa.reverse()[j % pxa.length]; return { a, b }; }) ]; let paths = conns .map(conn => { const path = computePath(conn.a, conn.b); path._data = { ca: conn.a.c, cb: conn.b.c, swapAt: rand() }; return path; }) .filter(p => p.length > 0); const len = Math.max(...paths.map(p => p.length)); paths = paths.map(p => rescale(p, len)); const emptyFrame = squareOut([], dim); return [ squareOut(ima, dim), ...Array(len) .fill(null) .map((_, i) => { let frame = emptyFrame; for (const path of paths) { const p = round(path[i]); const dirChar = combineDirChars(get(frame, p), dirChars[path[i].dir]); frame = set( frame, p, i / len >= path._data.swapAt ? path._data.cb : path._data.ca ); } return frame; }), squareOut(imb, dim) ]; }33:T76f,gingerbread_men = ` GINGERBREAD MEN =============== ╭─── wet ingredients ─────────────╮ ╭─── DRY ingredients ─────────────╮ │ │ │ │ Cream until light & fluffly: * 3 C flour (+- 5min) * 3 tsp baking powder * 1 TB ginger * 85g butter * 2 tsp cinnamon * 3/4C brown suger * 1 tsp allspice (piment), or just more "koekkruiden" Then add: * 1/4 (or more?) tsp cloves │ │ * 1 large egg ╰───┬─────────────────────────────╯ * 2 tsp (vanilla) aroma │ │ And: │ │ │ * 1/2C mollasses (yum!) │ │ │ │ │ ╰─────────────────────────────────╯ │ │ Gradually add: │ │ * ──────────────────────────────────────────╯ ~~ R E F R I G E R A T E ~~ for at least 2h, until FIRM * Roll out to be 1 cm thicc * Cut out gingerbread men Bake @ 180ºC for about 12min`.split('\n')34:[] 30:{"id":"0141672248e37156","slug":"ascii-morphing-experiments","title":"Ascii morphing experiments","thumbnail":"45c4aeabd07338401c5121fe71e5278e05b0784f8351ce16839291311fb67ff0","access_level":"public","create_time":"$D2020-12-31T13:01:37.520Z","update_time":"$D2021-01-02T22:25:43.508Z","view_time":null,"first_public_time":"$D2020-12-31T13:38:05.511Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":877,"publish_version":877,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ascii morphing experiments","cells":[{"id":0,"value":"md`# Ascii morphing experiments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`Some fun effects to morph from 1 ascii image to the next. Inspired by [Tim Holman's original effect](https://tholman.com/post/ascii-morph/).\n\nSee them live at my mini recipes site asciirecip.es.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`---\n\n## Dissolving`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"d_frames = dissolve(gingerbread_men, russian_teacakes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof d_i = slider({ min: 0, value: 0, step: 1, max: d_frames.length - 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viz(d_frames[d_i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function dissolve(ima, imb) {\n const dim = max(getDim(ima), getDim(imb));\n\n ima = squareOut(ima, dim);\n imb = squareOut(imb, dim);\n\n function step(im) {\n return im.map(line => {\n const newline = line\n .split(\"\")\n .map(c => {\n if (rand() > 0.2) return c;\n else if (c === \" \") return \" \";\n else if (c === \".\") return \" \";\n else if (c === \"+\") return \".\";\n else if (c === \"x\") return \"+\";\n else if (c === \"X\") return \"x\";\n else return c.toLowerCase() === c ? \"x\" : \"X\";\n })\n .join(\"\");\n if (line.length !== newline.length) console.log(\"repl\", line, newline);\n return newline;\n });\n }\n\n const fadeOut = [ima];\n while (!isEmpty(ima)) {\n ima = step(ima);\n fadeOut.push(ima);\n }\n\n const fadeIn = [imb];\n while (!isEmpty(imb)) {\n imb = step(imb);\n fadeIn.push(imb);\n }\n\n return [...fadeOut.slice(0, -1), ...fadeIn.reverse().slice(1)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"md`---\n\n## Inkblot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`TODO, using reverse dilation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`---\n\n## Sandstorm\n\nTODO: less randomness, more stormyness. Maybe use Perlin noise somehow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"easing = easeInOutCubic","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function computePath(a, b) {\n const d = distance(a, b);\n const delta = min(b, a);\n const n = normal(delta);\n const c1 = add(add(a, mul(delta, 1 / 3)), mul(n, (rand() - 0.5) * 1 * d));\n const c2 = add(add(a, mul(delta, 2 / 3)), mul(n, (rand() - 0.5) * 1 * d));\n\n const path = [];\n for (let i = 0; i < d; i++) {\n const step = bezier(a, c1, c2, b, easing(i / d));\n // step.dir = getDir(delta);\n path.push(step);\n }\n\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"function pixels(im) {\n return im\n .map((line, y) => {\n return line.split(\"\").map((c, x) => {\n if (c !== \" \") {\n return { x, y, c };\n }\n });\n })\n .flat()\n .filter(Boolean);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"s_frames = sandstorm(russian_teacakes, gingerbread_men)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof s_i = slider({ min: 0, value: 0, step: 1, max: s_frames.length - 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viz(s_frames[s_i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"easeInOutCubic = t =>\n t < .5 ? Math.pow(t * 2, 3) / 2 : (1 - Math.pow(1 - (t * 2 - 1), 3)) / 2 + .5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`---\n\n## Utilities, data, imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"dirs = ({\n horizontal: 1,\n upleft: 2,\n upright: 4,\n vertical: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"function combineDirChars(c, d) {\n return dirChars[dirChars.indexOf(c) | dirChars.indexOf(d)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"dirChars = String.raw` xxxxxxxxxxxxxxx` //String.raw` —\\>/AXA|+AKVKYM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"viz([\n \"8 4 2 1 \",\n ...Array(16)\n .fill()\n .map((_, i) => {\n return [\n dirChars[i & 0b1000],\n dirChars[i & 0b0100],\n dirChars[i & 0b0010],\n dirChars[i & 0b0001],\n dirChars[i]\n ].join(\" \");\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"function getDir({ x, y }) {\n const a = Math.atan(y / x) * (2 / Math.PI);\n // range: [-1, 1]\n if (a > 0.75) {\n return dirs.vertical;\n } else if (a > .25) {\n return dirs.upleft;\n } else if (a > -0.25) {\n return dirs.horizontal;\n } else if (a > -0.75) {\n return dirs.upright;\n } else {\n return dirs.vertical;\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"function rescale(arr, len) {\n const factor = len / arr.length;\n const rescaled = Array(len)\n .fill(null)\n .map((_, i) => {\n let j = Math.round(i / factor);\n j = Math.max(0, Math.min(arr.length - 1, j));\n return arr[j];\n });\n\n // const pad = len - arr.length;\n // const padstart = Math.floor(Math.random() * pad);\n // const padend = pad - padstart;\n // const rescaled = [\n // ...Array(padstart).fill(arr[0]),\n // ...arr,\n // ...Array(padend).fill(arr.slice(-1)[0])\n // ];\n\n rescaled._data = arr._data;\n return rescaled;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"function shuffle(arr) {\n arr = arr.slice();\n for (let i = arr.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"function normal(p) {\n return normalize({ x: p.y, y: p.x });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function mul(a, b) {\n if (typeof b === \"number\") {\n b = { x: b, y: b };\n }\n return { x: a.x * b.x, y: a.y * b.y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function add(a, b) {\n if (typeof b === \"number\") {\n b = { x: b, y: b };\n }\n return { x: a.x + b.x, y: a.y + b.y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function bezier(a, c1, c2, b, p) {\n const i1 = interpolate(a, c1, p);\n const i2 = interpolate(c2, b, p);\n return interpolate(i1, i2, p);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"function interpolate(a, b, p) {\n if (typeof a === \"number\") {\n return a + p * (b - a);\n } else if (typeof a.x === \"number\") {\n return {\n x: interpolate(a.x, b.x, p),\n y: interpolate(a.y, b.y, p)\n };\n } else {\n throw new Error(`Can't interpolate() this data: ${JSON.stringify(a)}`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"function normalize(p) {\n const len = length(p);\n return { x: p.x / len, y: p.y / len };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function length(p) {\n return distance({ x: 0, y: 0 }, p);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"function min(b, a) {\n return { x: b.x - a.x, y: b.y - a.y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function distance(a, b) {\n return Math.sqrt(Math.pow(b.y - a.y, 2) + Math.pow(b.x - a.x, 2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function getDim(im) {\n let x = Math.max(...im.map(line => line.length));\n let y = im.length;\n return { x, y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"dim = max(getDim(gingerbread_men), getDim(russian_teacakes))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function max(...args) {\n if (typeof args[0] === \"number\") {\n return Math.max(...args);\n } else if (args[0].x) {\n return {\n x: Math.max(...args.map(i => i.x)),\n y: Math.max(...args.map(i => i.y))\n };\n } else {\n throw new Error(\"Can't max() this type of data\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"function isEmpty(im) {\n return im.every(line => line.trim() === \"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"function viz(lines) {\n return html`

${lines.join(\n    \"\\n\"\n  )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function squareOut(im, dim = getDim(im)) {\n const { x, y } = getDim(im);\n return im\n .concat(Array(Math.max(0, dim.y - y)).fill(\"\"))\n .map(line => line.padEnd(dim.x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function rand(...args) {\n if (args.length === 0) {\n return Math.random();\n } else if (Array.isArray(args[0])) {\n return args[0][Math.floor(Math.random() * args[0].length)];\n } else if (typeof args[0] === \"string\") {\n return rand(args[0].split(\"\"));\n } else {\n throw new Error(\"Can't rand() this data\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"function round(d) {\n if (typeof d === \"undefined\") {\n throw new Error(`round(undefined)`);\n } else if (typeof d === \"number\") {\n return Math.round(d);\n } else {\n return { x: round(d.x), y: round(d.y) };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"function get(im, { x, y }) {\n if (y < 0 || y >= im.length) return \" \";\n if (x < 0 || x >= im[y].length) return \" \";\n return im[y][x];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function set(im, { x, y }, c) {\n if (y < 0 || y >= im.length) return im;\n\n im = im.slice();\n const line = im[y].split(\"\");\n if (x < 0 || x >= line.length) return im;\n\n line[x] = c;\n im[y] = line.join(\"\");\n return im;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viz(squareOut(russian_teacakes))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"russian_teacakes = ` RUSSIAN TEACAKES\n ================\n\n╭ * 225g (1 C) butter\n│ * 1 tsp vanilla sugar or extract\n│ * 6 TB powdered sugar (+ more)\n│\n│ * 2 C flour\n│ * 1 C finely chopped (wal)nuts\n╰ * 1/4 tsp salt\n\n➭ Knead well\n\n➭ Roll into 1 inch balls,\n separate 2 inches from each other\n\n➭ Bake @ 180ºC for about 10-12min,\n until lightly golden\n\n➭ When cooled, roll in more powdered sugar,\n and possibly repeat a second time\n`.split(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"