29:null 2a:["$","title",null,{"children":"Binary Black Holes Remix | Lao | Observable"}] 2f:T3371,viewof dashboard = { // Inject style cell into once if (!document.querySelector("style[data-dash-style]")) { const styleClone = style.cloneNode(true); styleClone.setAttribute("data-dash-style", ""); document.head.appendChild(styleClone); } if (!compile) { const placeholder = html`

Attach cells to see in dashboard

`; placeholder.value = null; return placeholder; } // Pull main + tabs from the compile cell. Tabs get an auto id so we don't // need the caller to provide one. const main = compile.main; const tabs = compile.tabs.map((t, i) => ({ id: `tab${i + 1}`, label: t.label, el: t.el })); const rootStyle = getComputedStyle(document.documentElement); const readPx = (n) => parseFloat(rootStyle.getPropertyValue(n)); const sideMinWidth = readPx("--dash-side-min-width"); const sideMinHeight = readPx("--dash-side-min-height"); const tabRadius = readPx("--dash-tab-radius"); const container = html`

`; const leftPanel = container.querySelector(".dash__chart-panel"); const rightPanel = container.querySelector(".dash__info-panel"); const btn = container.querySelector(".dash__fullscreen-btn"); const btnText = container.querySelector(".dash__fullscreen-text"); const btnIcon = container.querySelector(".dash__fullscreen-icon"); const tabContent = container.querySelector(".dash__tab-content"); // Mount the cell elements directly (same trick as the sunClock example). // appendChild MOVES the node — the notebook display container becomes empty. leftPanel.insertBefore(main, leftPanel.firstChild); tabs.forEach(t => { t.el.classList.add("dash__tab-pane"); tabContent.appendChild(t.el); }); // Measure fullscreen text const measureTextWidth = (text) => { const c = btnText.cloneNode(false); c.textContent = text; c.style.maxWidth = "none"; c.style.position = "absolute"; c.style.visibility = "hidden"; c.style.left = "-9999px"; document.body.appendChild(c); const w = c.scrollWidth; c.remove(); return w; }; const textWidthMax = Math.max(measureTextWidth("Fullscreen"), measureTextWidth("Exit")); container.style.setProperty("--dash-fullscreen-text-measured-width", textWidthMax + "px"); // Hover/click for fullscreen button label let clickHoldUntil = 0, collapseTimer = null; const expand = () => { if (collapseTimer) { clearTimeout(collapseTimer); collapseTimer = null; } btnText.classList.add("dash__fullscreen-text--expanded"); }; const collapse = () => btnText.classList.remove("dash__fullscreen-text--expanded"); const collapseRespectingHold = () => { const remaining = clickHoldUntil - Date.now(); if (remaining > 0) { if (collapseTimer) clearTimeout(collapseTimer); collapseTimer = setTimeout(() => { collapseTimer = null; if (!btn.matches(":hover")) collapse(); }, remaining); } else collapse(); }; btn.addEventListener("mouseenter", expand); btn.addEventListener("mouseleave", collapseRespectingHold); // Persist activeTabId on the long-lived `37:[{"id":"9d6be14c159542e01542b9e9aa8ac2656983b479ad5d489bfa740b35567268d538966834289c9162f16d7138e921c3a614f1e9a31603e035c8723477cce588bd","href":"https://static.observableusercontent.com/files/9d6be14c159542e01542b9e9aa8ac2656983b479ad5d489bfa740b35567268d538966834289c9162f16d7138e921c3a614f1e9a31603e035c8723477cce588bd","name":"eso0932a.jpg","type":"image/jpeg","lastModified":1785471162006.011,"size":8228817}] 2d:{"id":"cca8d2013f28cb8f","slug":null,"title":"Binary Black Holes Remix","thumbnail":"2ffe5ee7d39aba95ebe08b33e4c2657e002625f7a0f1f4f1d4ad1d4e42f63b3a","access_level":"public","create_time":"$D2026-07-31T00:46:14.157Z","update_time":"$D2026-09-01T23:46:15.321Z","view_time":null,"first_public_time":"$D2026-07-31T04:37:26.009Z","fork":{"id":"e19fe6309e344c31","slug":"binary-black-holes","title":"Binary Black Holes","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"stars":10,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":406,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"6e5e8f888d8de938","reply_to_id":null,"content":"Nice! The gizmo inputs are pretty good I also liked to add one. What I see is that you are using smaller or equal inner radius to radius, if it's intentional then it's ok.","create_time":"$D2026-07-31T05:03:52.697Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}},{"id":"58f59a23be5a2ad5","reply_to_id":"6e5e8f888d8de938","content":"Yep, I combined everything as a single size slider. I might experiment with a UI with more of your original controls tomorrow.","create_time":"$D2026-07-31T05:05:52.028Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}},{"id":"802e9f3c281a284b","reply_to_id":"6e5e8f888d8de938","content":"Good. The stars look inconsistent near the bounding box I think the ray directions are different","create_time":"$D2026-07-31T05:12:30.857Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}},{"id":"3419d8597c3e438c","reply_to_id":"6e5e8f888d8de938","content":"Can I use the gizmo in my notebook?","create_time":"$D2026-07-31T08:12:52.721Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}},{"id":"b705573885bfb79f","reply_to_id":"6e5e8f888d8de938","content":"@nxrix, please do, please use anything else! \n\nAlso, let me highlight the difference between orbit controls and track ball controls. I changed the scene from orbit to trackball, and the gizmos are trackball too. It feels more natural in space to me, but it is also more disorienting.","create_time":"$D2026-07-31T14:59:50.431Z","update_time":"$D2026-07-31T15:10:39.680Z","resolved":true,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Binary Black Holes Remix","cells":[{"id":0,"value":"# Binary Black Holes Remix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":380,"value":"This is a remix of [nxrix](https://observablehq.com/@nxrix)'s epic [Binary Black Holes](https://observablehq.com/@nxrix/binary-black-holes) notebook. Like the genie in Aladdin, nxrix keeps on creating \"phenomenal cosmic powers in itty bitty living spaces.\" I made this notebook to experience all of the hard ray tracing work in full screen, using my [full screen dashboard template](https://observablehq.com/d/3c8b082818efd7c9) and adding [ESO's Milky Way panorama](https://www.eso.org/public/images/eso0932a/) as an optional background. \n\nThe original idea came from [Jeremy Schnittman and Brian P. Powell](https://svs.gsfc.nasa.gov/13831)\n\nIf you like this, please don't forget to support the original authors!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":275,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"compile = attachCell\n ? {\n main: viewer,\n tabs: [\n { el: controlsBlackHoles, label: \"Black Holes\" },\n { el: controlsScene, label: \"Quality\" }\n ]\n }\n : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"viewof attachCell = {\n // When true: content cells' elements are routed to the dashboard\n // (their notebook displays end up empty as a side effect)\n // When false: content cells render normally in the notebook;\n // the dashboard renders nothing\n const form = html``;\n const update = () => {\n form.value = form.elements.attach.value === \"true\";\n form.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n };\n form.addEventListener(\"change\", update);\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"tabs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":290,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"THREE = {\n try {\n const THREE = await import(\"three@0.184.0\");\n const { TrackballControls } = await import(\n \"three@0.184.0/examples/jsm/controls/TrackballControls.js\"\n );\n return { ...THREE, TrackballControls };\n } catch (e) {\n // IOS 15 issue\n const THREE = await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n const { TrackballControls } = await import(\n \"https://esm.sh/three@0.184.0/examples/jsm/controls/TrackballControls.js?target=es2020\"\n );\n return { ...THREE, TrackballControls };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"