45:["$","title",null,{"children":"Farnsworth Munsell 100 color test | Visnu Pitiyanuvath | Observable"}] 4d:T2125,const game = (() => { const TRAYS = 4, CAPS = 22; // Real FM100 layout: 85 caps, 4 trays of 22 sharing end anchors (1–22, 22–43, 43–64, 64–85) const trays = Array.from({length: TRAYS}, (_, t) => Array.from({length: CAPS}, (_, k) => ({i: t * (CAPS - 1) + k, cap: t * (CAPS - 1) + k + 1, color: capColors[t * (CAPS - 1) + k]}))); const shuffle = (a) => { const b = a.slice(1, -1); d3.shuffle(b); return [a[0], ...b, a[a.length - 1]]; }; const state = trays.map(shuffle); const results = Array(TRAYS).fill(null); let sel = null, peek = false, moves = 0, t0 = null; const root = html`

`; const score = (arr) => arr.map((d, p) => { if (p === 0 || p === arr.length - 1) return 0; return Math.abs(d.i - arr[p - 1].i) + Math.abs(d.i - arr[p + 1].i) - 2; }); const rating = (e) => e === 0 ? ["🏆 Perfect!", "You have the eyes of a mantis shrimp."] : e <= 20 ? ["🦅 Superior", "Top-tier colour discrimination."] : e <= 100 ? ["🙂 Average", "Perfectly normal colour vision."] : ["🔍 Keep practising", "Tricky! Lighting and screens matter too."]; // Track any active drag cleanup so a re-render can never leave a stuck ghost let cleanupDrag = null; invalidation.then(() => cleanupDrag?.()); function render() { cleanupDrag?.(); const total = results.every(r => r) ? d3.sum(results, r => d3.sum(r)) : null; const btn = (label, fn, extra = "") => { const b = html``; b.onclick = fn; return b; }; const swap = (t, a, b) => { if (!t0) t0 = Date.now(); const arr = state[t]; [arr[a], arr[b]] = [arr[b], arr[a]]; moves++; }; const trayEl = (t) => { const arr = state[t], shown = peek ? trays[t] : arr; const locked = peek || !!results[t]; const caps = shown.map((d, p) => { const fixed = p === 0 || p === CAPS - 1; const res = results[t] && !peek ? results[t][p] : null; const isSel = sel && sel.t === t && sel.p === p; const baseT = isSel ? "translateY(-5px)" : "none"; const label = peek ? d.cap : fixed ? "📌" : res != null ? html`${res}` : ""; const el = html`

${label}

`; if (fixed || locked) return el; el.onpointerdown = (e) => { if (e.button !== 0) return; e.preventDefault(); cleanupDrag?.(); const start = {x: e.clientX, y: e.clientY}; let ghost = null, moved = false; const cleanup = () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); window.removeEventListener("pointercancel", onCancel); ghost?.remove(); ghost = null; if (cleanupDrag === cleanup) cleanupDrag = null; }; cleanupDrag = cleanup; const onMove = (e) => { const row = el.parentNode; if (!row) return; if (!ghost && Math.hypot(e.clientX - start.x, e.clientY - start.y) > 6) { const w = el.getBoundingClientRect().width; ghost = el.cloneNode(true); Object.assign(ghost.style, {position: "fixed", width: w + "px", flex: "none", pointerEvents: "none", zIndex: 9999, opacity: 0.9, transform: "scale(1.15) rotate(4deg)", boxShadow: "0 8px 20px #0008", outline: "none", transition: "none"}); document.body.append(ghost); el.style.opacity = 0.35; el.style.outline = "none"; el.style.transform = "none"; } if (!ghost) return; const w = parseFloat(ghost.style.width); ghost.style.left = e.clientX - w / 2 + "px"; ghost.style.top = e.clientY - 30 + "px"; // Pick slot from pointer x (independent of in-flight animations) const rect = row.getBoundingClientRect(); const slot = Math.floor((e.clientX - rect.left - 10) / ((rect.width - 20) / CAPS)); const to = Math.max(1, Math.min(CAPS - 2, slot)); const kids = Array.from(row.children); const from = kids.indexOf(el); if (to === from) return; const target = kids[to]; const before = new Map(kids.map(k => [k, k.getBoundingClientRect().left])); row.insertBefore(el, from < to ? target.nextSibling : target); moved = true; for (const k of kids) { if (k === el) continue; const dx = before.get(k) - k.getBoundingClientRect().left; if (!dx) continue; k.style.transition = "none"; k.style.transform = `translateX(${dx}px)`; requestAnimationFrame(() => requestAnimationFrame(() => { k.style.transition = "transform .18s ease"; k.style.transform = "none"; })); } }; const onUp = () => { const wasDrag = !!ghost; const order = Array.from(el.parentNode.children).map(c => +c.dataset.p); cleanup(); if (wasDrag) { if (moved) { if (!t0) t0 = Date.now(); state[t] = order.map(q => arr[q]); moves++; } sel = null; } else if (!sel || sel.t !== t) sel = {t, p}; else if (sel.p === p) sel = null; else { swap(t, sel.p, p); sel = null; } render(); }; const onCancel = () => { cleanup(); render(); }; window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); window.addEventListener("pointercancel", onCancel); }; return el; }); return html`

Tray ${t + 1} (caps ${trays[t][0].cap}–${trays[t][CAPS - 1].cap})${results[t] ? html` — error score ${d3.sum(results[t])}` : ""} ${btn("🔀 Shuffle", () => { state[t] = shuffle(trays[t]); results[t] = null; sel = null; render(); })}${btn("✅ Check", () => { results[t] = score(state[t]); sel = null; render(); })}

${caps}

`; }; const elapsed = t0 ? Math.round((Date.now() - t0) / 1000) : 0; root.replaceChildren(html`

Order each tray so hues flow smoothly from the left 📌 to the right 📌. Drag a cap to a new spot and the others slide over (or click two caps to swap them).

${trays.map((_, t) => trayEl(t))}

${btn("✅ Check all", () => { for (let t = 0; t < TRAYS; t++) results[t] = score(state[t]); sel = null; render(); }, "background:#222;color:#fff")} ${btn(peek ? "🙈 Hide answer" : "👀 Peek at answer", () => { peek = !peek; sel = null; render(); })} ${btn("♻️ Restart all", () => { for (let t = 0; t < TRAYS; t++) { state[t] = shuffle(trays[t]); results[t] = null; } sel = null; peek = false; moves = 0; t0 = null; render(); })} Moves: ${moves} · ⏱ ${elapsed}s

${total !== null ? html`

${rating(total)[0]} — total error score ${total}

${rating(total)[1]} Per tray: ${results.map(r => d3.sum(r)).join(" · ")}

` : ""}

`); } render(); return root; })(); display(game);4e:[] 49:{"id":"28d8ee650efa97db","slug":"farnsworth-munsell-100-color-test","title":"Farnsworth Munsell 100 color test","thumbnail":"e809bdeb2802aca7c602a4fbb56a2b11edaf3c0b0168a36413aca207a8b445e2","access_level":"public","create_time":"$D2026-11-11T18:13:48.207Z","update_time":"$D2026-11-11T18:26:55.335Z","view_time":null,"first_public_time":"$D2026-11-11T18:24:42.629Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026","bio":"","followed_by_you":false,"follows_you":false},"version":21,"publish_version":21,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Farnsworth Munsell 100 color test","cells":[{"id":1,"value":"# Farnsworth Munsell 100 color test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const r = await fetch(\"https://api.github.com/search/repositories?q=farnsworth+munsell+100+hue&per_page=15\", {proxy: true});\nconst found = r.ok ? (await r.json()).items.map(d => ({name: d.full_name, desc: d.description, url: d.html_url})) : r.status;\ndisplay(Array.isArray(found) ? Inputs.table(found) : found);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const trees = {};\nfor (const repo of [\"chaturatbs/FM100\", \"adrianfelipe22/fm100\", \"ahsansan/Farnsworth-Munsell-100-Hue-Test\"]) {\n const rr = await fetch(`https://api.github.com/repos/${repo}/git/trees/HEAD?recursive=1`, {proxy: true});\n trees[repo] = rr.ok ? (await rr.json()).tree.filter(d => d.type === \"blob\").map(d => `${d.path} (${d.size})`) : rr.status;\n}\ndisplay(trees);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const trees2 = {};\nfor (const repo of [\"chaturatbs/FM100\", \"adrianfelipe22/fm100\", \"ahsansan/Farnsworth-Munsell-100-Hue-Test\"]) {\n const rr = await fetch(`https://api.github.com/repos/${repo}/contents/`, {proxy: true});\n const j = rr.ok ? await rr.json() : null;\n trees2[repo] = Array.isArray(j) ? j.map(d => `${d.path} (${d.type}, ${d.size})`) : (j ?? rr.status);\n}\ndisplay(trees2);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const listing = {};\nfor (const repo of [\"chaturatbs/FM100\", \"adrianfelipe22/fm100\", \"ahsansan/Farnsworth-Munsell-100-Hue-Test\", \"lh/fm100-hue-scorer\"]) {\n for (const br of [\"master\", \"main\"]) {\n const rr = await fetch(`https://data.jsdelivr.com/v1/package/gh/${repo}@${br}/flat`);\n if (rr.ok) { listing[repo] = {br, files: (await rr.json()).files.map(f => `${f.name} (${f.size})`)}; break; }\n }\n listing[repo] ??= \"not found\";\n}\ndisplay(listing);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const srcA = await (await fetch(\"https://cdn.jsdelivr.net/gh/chaturatbs/FM100@master/fm100Test.html\")).text();\nconst srcB = await (await fetch(\"https://cdn.jsdelivr.net/gh/ahsansan/Farnsworth-Munsell-100-Hue-Test@master/app/farnsworth-munsell-100-hue-test/page.jsx\")).text();\nconst readmeA = await (await fetch(\"https://cdn.jsdelivr.net/gh/chaturatbs/FM100@master/README.md\")).text();\ndisplay(readmeA);\ndisplay(srcA.slice(0, 2500));\ndisplay(srcB.slice(0, 2500));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const capColors = (() => {\n const m = new Map();\n for (const [, n, hex] of srcA.matchAll(/\\.mr-[A-Za-z0-9]+-[Ff][Mm]-(\\d+)\\s*\\{\\s*background-color:\\s*(#[0-9a-fA-F]{6})/g)) m.set(+n, hex.toLowerCase());\n // cap 1 uses \".mr-0-fm-01\" and 63-85 use \".mr-FM-NN\"\n for (const [, n, hex] of srcA.matchAll(/\\.mr-[Ff][Mm]-(\\d+)\\s*\\{\\s*background-color:\\s*(#[0-9a-fA-F]{6})/g)) m.set(+n, hex.toLowerCase());\n return d3.range(1, 86).map(n => m.get(n));\n})();\ndisplay(capColors.length + \" caps, missing: \" + capColors.map((c, i) => c ? null : i + 1).filter(Boolean).join(\",\") + \", unique: \" + new Set(capColors).size);\ndisplay(Plot.plot({\n title: \"The 85 FM100 caps (X-Rite sRGB values via chaturatbs/FM100)\",\n width: 900, height: 80, axis: null, margin: 0,\n marks: [Plot.cell(capColors, {x: (d, i) => i, fill: d => d})]\n}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"display(srcA.split(/

{\n const p = [...s.matchAll(/data-position=\"(\\d+)\"/g)].map(m => +m[1]);\n return `${s.match(/container-\\d/)?.[0]}: ${p[0]}…${p.at(-1)} (${p.length} caps)`;\n}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"display({\n p3: matchMedia(\"(color-gamut: p3)\").matches,\n rec2020: matchMedia(\"(color-gamut: rec2020)\").matches,\n srgb: matchMedia(\"(color-gamut: srgb)\").matches,\n hdr: matchMedia(\"(dynamic-range: high)\").matches\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 44:null