2b:null 2c:["$","title",null,{"children":"Genuary 26 / 11 - Heart by Heart ❤️ | Mike Bostock | Observable"}] 31:T7a2,{ const preview = /*********/ /*********/ /**************/ /**************/ ASCIIShader((fragCoord,fragColor)=>{ const t=now/1000;const M=Math;const r= M.sin(t)*0.4;const dx=M.sin(r)*M.SQRT2; const dz=M.cos(r)*M.SQRT2;const scheme= d3.interpolateRainbow;let {x,y,z}=fragCoord; const a=M.pow(0.5+0.5*M.sin(M.PI*2*t+y),4);x *=1-0.2*1*a;y*=1-0.2*0.5*a;x*=1.3;y=y*1.5+ 0.15;y=y-M.abs(x)*M.sqrt(1-M.abs(x));const coord=v3(x,y,z);const z2=1-coord.dot(coord);if (z2>0){const dir=v3(dx,1,dz);const point=/***/ v3(coord.x,coord.y,M.sqrt(z2));const /***/ intensity=(0.6*M.max(0,point.dot(dir))) **2;const col=(intensity*0.4+t)% 1;fragColor.ch=v4(intensity, intensity,intensity,1); fragColor.fg=/***/ scheme(col); }})/**** */ const code = await pre(format(`ASCIIShader((fragCoord, fragColor) => { const t = now / 1000; const M = Math; const r = M.sin(t) * 0.4; const dx = M.sin(r) * M.SQRT2; const dz = M.cos(r) * M.SQRT2; const scheme = d3.interpolateRainbow; let { x, y, z } = fragCoord; const a = M.pow(0.5 + 0.5 * M.sin(M.PI * 2 * t + y), 4); x *= 1 - 0.2 * 1 * a; y *= 1 - 0.2 * 0.5 * a; x *= 1.3; y = y * 1.5 + 0.15; y = y - M.abs(x) * M.sqrt(1 - M.abs(x)); const coord = v3(x, y, z); const z2 = 1 - coord.dot(coord); if (z2 > 0) { const dir = v3(dx, 1, dz); const point = v3(coord.x, coord.y, M.sqrt(z2)); const intensity = (0.6 * M.max(0, point.dot(dir))) ** 2; const col = (intensity * 0.4 + t) % 1; fragColor.ch = v4(intensity, intensity, intensity, 1); fragColor.fg = scheme(col); } })`, {t: now / 1000})); return html`

${preview}${code}

`; }32:T638,function format(code, { w = 60, h = 30, K = ["const", "let"], t = null } = {}) { let n = w * h, mi = -1, M = new Array(n).fill(null), T = code .replace('" "', "__") .replace(/\s+/g, " ") .split(" ") .filter((d) => d !== "") .map((d) => d.replace("__", '" "')), tn = T.length; for (let i = 0; i < n; i++) { let ox = i % w, oy = Math.floor(i / w), x = map(ox, 0, w - 1, -1, 1), y = map(oy, 0, h - 1, 1, -1); if (t !== null) { const a = Math.pow(0.5 + 0.5 * Math.sin(Math.PI * 2 * t + y), 4); x *= 1 - 0.2 * 1 * a; y *= 1 - 0.2 * 0.5 * a; } x *= 1.3; y = y * 1.5 + 0.15; y = y - Math.abs(x) * Math.sqrt(1 - Math.abs(x)); let c = v3(x, y, 0), z2 = 1 - c.dot(c); let m = z2 >= 0; if (m) mi = i; M[i] = m ? 1 : ox === w - 1 ? "\n" : " "; } let ni = -1; let sm = 0; for (let i = 0, wi = 0; i < n; i++) { if (M[i] !== 1) continue; if (wi < tn) { let s = T[wi]; if (K.some((k) => s.includes(k))) s = s + " "; let si = 0; while (M[i + si] === 1) si++; if (si < s.length - 1) s = si <= 1 ? " ".repeat(si) : si <= 3 ? "/".repeat(si) : "/*" + "*".repeat(Math.max(0, si - 4)) + "*/"; else wi++; for (let k = 0; k < s.length; k++) M[(ni = i + k)] = s[k]; } else if (!sm) { if (M[i + 1] === 1) (M[i] = "/"), (sm = 1); else M[i] = ""; } else if (sm && mi - i === 0) M[i] = "/"; else if (sm) M[i] = "*"; } return M.join(""); }33:[{"id":"1c44f193ef914895f44dd5cf71471fecb658225c8ef3b5b15514391231f3f6c94086d1a952a27163feaf182d802e4053beac8b782bd791a50dd3bc57bbdfcadf","href":"https://static.observableusercontent.com/files/1c44f193ef914895f44dd5cf71471fecb658225c8ef3b5b15514391231f3f6c94086d1a952a27163feaf182d802e4053beac8b782bd791a50dd3bc57bbdfcadf","name":"Fixedsys.ttf","type":"font/ttf","lastModified":1768400967005.803,"size":575668}] 2f:{"id":"a689c1c18ef23b3b","slug":null,"title":"Genuary 26 / 11 - Heart by Heart ❤️","thumbnail":"165fd6f9d05a917a44a02b60a79339d17bb3d2fe95c0571cbfd2501c1a96de4c","access_level":"unlisted","create_time":"$D2026-09-20T14:30:01.908Z","update_time":"$D2026-09-20T14:46:05.044Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"a56ecc14258d74d0","slug":"genuary-2026-11","title":"Genuary 26 / 11 - Heart by Heart ❤️","owner":{"id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":513,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Genuary 26 / 11 - Heart by Heart ❤️","cells":[{"id":393,"value":"# Genuary 26 / 11 - Heart by Heart ❤️\n## Quine. A [Quine](https://en.wikipedia.org/wiki/Quine_%28computing%29) is a form of code poetry, it’s a computer program that outputs exactly its own source code.\n\n> Heart-shaped code creates a heart.
\n> The code is art, and so is the output.
\n> Just love code, and just love heart.
\n\nTechnically, it’s not a quine, since the output doesn’t exactly match the source code. But the structure of the output match the shape of the source, so it's not completely off topic!\n\nBased on my previous work [Donut](https://recho.dev/notebook/examples/donut) and [Text Based Shaders](https://recho.dev/notebook/examples/cg-text-based-shaders) on [Recho Notebook](https://recho.dev/notebook), inspired by Alex Naka’s [donut.c](https://www.a1k0n.net/2011/07/20/donut-math.html) and Inigo Quilez’s [Heart - 3D](https://www.shadertoy.com/view/4lK3Rc).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"span(\n format(\n `ASCIIShader((fragCoord, fragColor) => {\n const t = now / 1000;\n const M = Math;\n const r = M.sin(t) * 0.4;\n const dx = M.sin(r) * M.SQRT2;\n const dz = M.cos(r) * M.SQRT2;\n const scheme = d3.interpolateRainbow;\n let { x, y, z } = fragCoord;\n const a = M.pow(0.5 + 0.5 * M.sin(M.PI * 2 * t + y), 4);\n x *= 1 - 0.2 * 1 * a;\n y *= 1 - 0.2 * 0.5 * a;\n x *= 1.3;\n y = y * 1.5 + 0.15;\n y = y - M.abs(x) * M.sqrt(1 - M.abs(x));\n const coord = v3(x, y, z);\n const z2 = 1 - coord.dot(coord);\n if (z2 > 0) {\n const dir = v3(dx, 1, dz);\n const point = v3(coord.x, coord.y, M.sqrt(z2));\n const intensity = (0.6 * M.max(0, point.dot(dir))) ** 2;\n const c = (intensity * 0.4 + t) % 1;\n fragColor.ch = v4(intensity, intensity, intensity, 1);\n fragColor.fg = scheme(c);\n }\n })`\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function ASCIIShader(callback, [w = 60, h = 30] = []) {\n let o = \"\";\n for (let i = 0; i < h; i++) {\n o += `

`;\n const y = map(i, 0, h - 1, 1, -1);\n for (let j = 0; j < w; j++) {\n const x = map(j, 0, w - 1, -1, 1);\n const fragColor = {\n ch: \" \",\n bg: v4(0, 0, 0, 1),\n fg: v4(1, 1, 1, 1)\n };\n callback(v3(x, y, 0), fragColor);\n const { ch, bg, fg } = fragColor;\n let t = ch instanceof THREE.Vector4 ? gray2ASCII(ch) : ch;\n t = t === \" \" || !t ? \" \" : t;\n const b = typeof bg === \"string\" ? bg : color(bg);\n const f = typeof fg === \"string\" ? fg : color(fg);\n o += `${t}`;\n }\n o += `

`;\n }\n return html`

${o}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"function pre(code) {\n const h = highlighter.codeToHtml(code, {\n lang: \"js\",\n theme: \"one-dark-pro\"\n });\n return html`

${h}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"highlighter = shiki.createHighlighter({\n langs: [\"js\"],\n themes: [\"one-dark-pro\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"function span(code) {\n return html`

${code}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function color(v4) {\n return `rgba(${v4.x * 255}, ${v4.y * 255}, ${v4.z * 255}, ${v4.w})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function gray2ASCII(color) {\n // If the color is transparent, return a space character.\n if (color.w !== undefined && color.w === 0) return \" \";\n const chs = \".,-~:;=!*#$@\".split(\"\").reverse();\n const gray = (color.x + color.y + color.z) / 3;\n const i = Math.floor(gray * chs.length);\n return chs[Math.min(i, chs.length - 1)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"f = {\n const font = new FontFace(\n \"fixedsys\",\n `url(${FileAttachment(\"Fixedsys.ttf\").href})`\n );\n await font.load();\n document.fonts.add(font);\n return font;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function map(x, d0, d1, r0, r1) {\n return r0 + ((r1 - r0) * (x - d0)) / (d1 - d0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"v2 = (...args) => new THREE.Vector2(...args)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"v3 = (...args) => new THREE.Vector3(...args)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"v4 = (...args) => new THREE.Vector4(...args)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"shiki = import(\"https://esm.sh/shiki@3.0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"THREE = require(\"three@0.160.0/build/three.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"