2a:null 2b:["$","title",null,{"children":"Binary Black Holes | nxrix | Observable"}] 30:T1d8f,canvas = { const canvas = document.createElement("canvas"); canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; canvas.style.border = "1px solid #8884"; canvas.style.borderRadius = "8px"; const renderer = new THREE.WebGLRenderer({ context: canvas.getContext("webgl2", { preserveDrawingBuffer: true, antialias: false }) }); function handleSource(string, errorLine) { const lines = string.split("\n"); const lines2 = []; const from = Math.max(errorLine - 6, 0); const to = Math.min(errorLine + 6, lines.length); for (let i = from; i < to; i++) { const line = i + 1; lines2.push(`${line === errorLine ? ">" : " "} ${line}: ${lines[i]}`); } return lines2.join("\n"); } function getShaderErrors(gl, shader, type) { const status = gl.getShaderParameter(shader, gl.COMPILE_STATUS); const shaderInfoLog = gl.getShaderInfoLog(shader) || ""; const errors = shaderInfoLog.trim(); if (status && errors === "") return ""; const errorMatches = /ERROR: 0:(\d+)/.exec(errors); if (errorMatches) { const errorLine = parseInt(errorMatches[1]); return ( errors + "\n\n" + handleSource(gl.getShaderSource(shader), errorLine) ); } else { return errors; } } renderer.debug.onShaderError = ( gl, program, glVertexShader, glFragmentShader ) => { const programInfoLog = gl.getProgramInfoLog(program) || ""; const fragmentShaderInfoLog = gl.getShaderInfoLog(glFragmentShader) || ""; const programLog = programInfoLog.trim(); const fragmentLog = fragmentShaderInfoLog.trim(); if (gl.getProgramParameter(program, gl.LINK_STATUS) === false) { const fragmentErrors = getShaderErrors(gl, glFragmentShader, "fragment"); errors.innerText = fragmentErrors; errors.style.color = "red"; } }; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0); const vs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; void main() { vP = position; vN = normal; vW = (modelMatrix*vec4(position,1)).xyz; vM = projectionMatrix*modelViewMatrix; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1); }`; const cube = new THREE.Mesh( new THREE.BoxGeometry(2, 2, 2), new THREE.ShaderMaterial({ vertexShader: vs, fragmentShader: "void main(){}", transparent: true, //depthWrite: false, side: THREE.DoubleSide, uniforms: { iChannel0: { value: state.noise }, iChannel1: { value: sky }, iPerspective: { value: state.perspective }, iTime: { value: 0 }, A1: { value: [0,1,0] }, U1: { value: [1,0,0] }, V1: { value: [0,0,1] }, A2: { value: [0,1,0] }, U2: { value: [1,0,0] }, V2: { value: [0,0,1] } } }) ); canvas.cube = cube; scene.add(cube); const perspectiveCamera = new THREE.PerspectiveCamera( state.fov, 1, 0.125, 64 ); const s = 0.25; const orthographicCamera = new THREE.OrthographicCamera( -2 * s, 2 * s, 2 * s, -2 * s, -8, 128 ); perspectiveCamera.position.set(2, 0.2, -0.175); orthographicCamera.position.set(2, 0.2, -0.175); let camera = state.perspective ? perspectiveCamera : orthographicCamera; canvas.camera = camera; canvas.resize = (w, h, r = 1) => { renderer.setSize(w, h, true); canvas.width = w * r; canvas.height = h * r; canvas.style.width = w + "px"; renderer.setPixelRatio(r); const aspect = w / h; perspectiveCamera.aspect = aspect; perspectiveCamera.zoom = aspect <= 1 ? aspect : 1; perspectiveCamera.updateProjectionMatrix(); if (aspect <= 1) { const visibleHeight = orthographicCamera.left - orthographicCamera.right; orthographicCamera.top = -visibleHeight / aspect / 2; orthographicCamera.bottom = visibleHeight / aspect / 2; } else { const visibleHeight = orthographicCamera.top - orthographicCamera.bottom; orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; } orthographicCamera.updateProjectionMatrix(); renderer.render(scene, camera); }; canvas.resizeEvent = () => { const z = Math.min(window.innerWidth, 512); canvas.resize(z, (z * 3) / 4, devicePixelRatio); }; window.addEventListener("resize", canvas.resizeEvent); canvas.resizeEvent(); let needsRender = state.s; state.s = false; const controls = new THREE.OrbitControls(camera, canvas); controls.addEventListener("change", () => { needsRender = true; }); let paused = true; let disposed = false; let t = 0; const clock = new THREE.Clock(); clock.stop(); function animate() { if (disposed) return; if (needsRender || !paused) { cube.material.uniforms.iTime.value = clock.getElapsedTime(); renderer.render(scene, camera); needsRender = false; } requestAnimationFrame(animate); } animate(); invalidation.then(() => { disposed = true; window.removeEventListener("resize", canvas.resizeEvent); renderer.dispose(); renderer.forceContextLoss(); }); canvas.update = () => { needsRender = true; }; canvas.setFOV = (v) => { perspectiveCamera.fov = v; perspectiveCamera.updateProjectionMatrix(); needsRender = true; }; canvas.setCamera = (e) => { const target = controls.target.clone(); const position = camera.position.clone(); const aspect = canvas.width / canvas.height; const halfFovRad = (perspectiveCamera.fov * Math.PI) / 360; if (e) { const visibleHeight = (aspect <= 1 ? orthographicCamera.right - orthographicCamera.left : orthographicCamera.top - orthographicCamera.bottom) / orthographicCamera.zoom; const newDistance = visibleHeight / (2 * Math.tan(halfFovRad)); const direction = new THREE.Vector3() .subVectors(position, target) .normalize(); const newPosition = target .clone() .add(direction.multiplyScalar(newDistance)); perspectiveCamera.position.copy(newPosition); perspectiveCamera.updateProjectionMatrix(); } else { const distance = position.distanceTo(target); const visibleHeight = 2 * distance * Math.tan(halfFovRad); orthographicCamera.position.copy(position); if (aspect <= 1) { orthographicCamera.top = visibleHeight / aspect / 2; orthographicCamera.bottom = -visibleHeight / aspect / 2; orthographicCamera.left = -visibleHeight / 2; orthographicCamera.right = visibleHeight / 2; } else { orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; orthographicCamera.top = visibleHeight / 2; orthographicCamera.bottom = -visibleHeight / 2; } orthographicCamera.zoom = 1; orthographicCamera.updateProjectionMatrix(); } camera = e ? perspectiveCamera : orthographicCamera; canvas.camera = camera; cube.material.uniforms.iPerspective.value = e; controls.object = camera; controls.target.copy(target); controls.update(); needsRender = true; }; canvas.pause = () => { paused = !paused; if (paused) clock.stop(); else clock.start(); }; canvas.uniforms = cube.material.uniforms; canvas.invalidation = invalidation; return canvas; }31:T1785,viewof shader = { const shader = ` uniform float iTime; uniform sampler2D iChannel0; uniform sampler2D iChannel1; #define PI 3.14159265 #define EPS 0.001 #define MAX 128 // radius #define R1 ${bh1.r.toFixed(3)} #define R2 ${bh2.r.toFixed(3)} #define IR1 1.0/(3.0*R1) #define IR2 1.0/(3.0*R2) // spin #define S1 ${bh1.s.toFixed(3)} #define S2 ${bh2.s.toFixed(3)} // disk #define I1 R1 * ${bh1.i.toFixed(3)} #define O1 R1 * ${bh1.o.toFixed(3)} #define I2 R2 * ${bh2.i.toFixed(3)} #define O2 R2 * ${bh2.o.toFixed(3)} // position #define P1 vec3(${-d * 0.5},0,0) #define P2 vec3(${+d * 0.5},0,0) // axis uniform vec3 A1; uniform vec3 A2; // axis plane uniform vec3 U1; uniform vec3 V1; uniform vec3 U2; uniform vec3 V2; float ls(float x) { return abs(mod(x,2.0)-1.0); } float lsa(float x) { return abs(mod(x/PI,2.0)-1.0)*2.0-1.0; } float noise(vec2 p) { return texture2D(iChannel0,p/128.0).r+ (texture2D(iChannel0,p/ 64.0).r-0.5)*0.5+ (texture2D(iChannel0,p/ 32.0).r-0.5)*0.25+ (texture2D(iChannel0,p/ 16.0).r-0.5)*0.125; } vec3 disk(float t, float a, float d) { float hv = pow(t*t*(1.0-t)*6.75,0.25); float n = noise(vec2((t-iTime*0.01)*20.0,lsa(a+iTime)*3.0))*2.0-1.0; float t_noise = clamp(t*(1.0-n)+n,0.0,1.0); float d_factor = -d*0.1+1.05; float t_adjusted = t_noise*1.5/(t_noise*d_factor+0.5)*hv; float t_factor = (t_adjusted*0.5+0.5*hv); float t_half = (t_adjusted*0.5+0.4*hv); float t_pow5 = exp(5.0*log(t_adjusted)); float t_pow20 = exp(20.0*log(t_adjusted)); vec3 acol = vec3(t_half,t_pow5*0.6,t_pow20*0.3)*t_factor; vec3 dcol = (1.0-acol)* (max(d,0.0))*t_noise*hv*pow(ls(t*2.0+0.5),4.0)*vec3(0.5,0.6,0.4); return clamp(mix( acol+dcol, vec3(t,0,0), clamp(1.0-t,0.0,1.0) )*1.2,0.0,1.0); } vec3 bend(vec3 ro, vec3 rd, vec3 p, float rs, vec3 a, float s) { vec3 r = ro - p; float r2 = dot(r,r); float r1 = inversesqrt(r2); vec3 L = cross(r,rd); return -1.5*rs*(r*dot(L,L))*(r1/(r2*r2))+cross(a,r)*s*rs*3.0*r1/r2; } void advance(inout vec3 o, inout vec3 d, float h) { vec3 a = bend(o,d,P1,R1,A1,S1)+bend(o,d,P2,R2,A2,S2); d = normalize(d+a*h); o += d*h; } bool hit_disk(vec3 oro, vec3 ro, vec3 rd, vec3 center, vec3 axis, vec3 u, vec3 v, float innerR, float outerR, float angleOffset, inout vec3 col){ float s1 = dot(oro - center, axis); float s2 = dot(ro - center, axis); if (s1 * s2 >= 0.0) return false; float t = s1 / (s1 - s2); if (t < 0.0 || t > 1.0) return false; vec3 p = mix(oro, ro, t); vec3 rel = p - center; vec3 radial = rel - axis * dot(rel, axis); float r = length(radial); if (r < innerR || r > outerR) return false; float x = dot(radial, u); float y = dot(radial, v); float angle = atan(y, x) + angleOffset; float temp = 1.0 - (r - innerR) / (outerR - innerR); vec3 rl = normalize(radial); vec3 tg = normalize(cross(axis, rl)); float dop = dot(tg,rd); col = disk(temp,angle,-dop); return true; } vec3 sky(vec3 rd) { float phi = atan(rd.z, rd.x); float theta = asin(clamp(rd.y, -1.0, 1.0)); vec2 skyUv = vec2(phi / (2.0 * PI) + 0.5, theta / PI + 0.5); return texture2D(iChannel1,skyUv).rgb; } vec3 trace(vec3 ro, vec3 rd) { //vec4 a = vec4(0); for (int i = 0; i < MAX; i++) { float r1 = length(ro-P1); float r2 = length(ro-P2); if (r1 < R1 || r2 < R2) return vec3(0); if (r1 > 180.0 && r2 > 180.0) { //return vec3(0); break; } vec3 oro = ro; float h = min(r1*IR1,r2*IR2); //float h1 = r1*IR1; //float h2 = r2*IR2; //float h = h1*h2/(h1+h2); advance(ro,rd,h); vec3 c; if (hit_disk(oro,ro,rd,P1,A1,U1,V1,I1,O1,0.0,c)) { //a.xyz += c*(1.0-a.xyz)*(1.0-a.a); //a.a += (max(max(c.x,c.y),c.z)*0.5+0.5)*(1.0-a.a); return c; } if (hit_disk(oro,ro,rd,P2,A2,U2,V2,I2,O2,-1.5,c)) { //a.xyz += clamp(c.zyx+c.x*vec3(0.4,0.3,0.3),0.0,1.0)*(1.0-a.xyz)*(1.0-a.a); //a.a += (max(max(c.x,c.y),c.z)*0.5+0.5)*(1.0-a.a); return c.zyx+c.x*vec3(0.4,0.3,0.3); } } //return a; return ${s?"sky(rd)":"vec3(0)"}; //return a.xyz${s ? "+sky(rd)*(1.0-a.a)" : ""}; } float dist(vec3 ro, vec3 rd, vec3 p) { vec3 v = p - ro; float t = dot(v, rd); return length(p - (ro+rd*t)); } #define box_size vec3(${b * 2},${r * 2},${r * 2}) void mainCube(out vec4 fragColor, vec3 ro, vec3 rd) { ro *= ${b.toFixed(2)}; vec3 id = 1.0/rd; vec3 t0 = (-box_size-ro)*id; vec3 t1 = ( box_size-ro)*id; vec3 tmin = min(t0,t1); vec3 tmax = max(t0,t1); float tn = max(max(tmin.x,tmin.y),tmin.z); float tf = min(min(tmax.x,tmax.y),tmax.z); if (tn>tf||tf<0.0) { /*for (int i=0;i<16;i++) { float r1 = length(ro-P1); float r2 = length(ro-P2); float h = min(r1*IR1,r2*IR2); //float h1 = r1*IR1; //float h2 = r2*IR2; //float h = h1*h2/(h1+h2); advance(ro,rd,h); } fragColor = vec4(sky(rd),1);*/ return; } ro += rd*(max(tn,0.0)+EPS); fragColor = vec4(trace(ro,rd),1); }`; const fs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; uniform bool iPerspective; ${shader} void main() { vec3 ro = cameraPosition; vec3 rd; if (iPerspective) { rd = normalize(vW - ro); } else { ro = vW; rd = normalize(vec3(vM[0][2],vM[1][2],vM[2][2])); } mainCube(gl_FragColor, ro, rd); } `; const material = canvas.cube.material; if (material.fragmentShader !== fs) { errors.innerText = "No errors :)"; errors.style.color = "green"; material.fragmentShader = fs; material.needsUpdate = true; canvas.update(); } return glsl("shader", shader); }32:T26c8,rotationGizmo = (key, invalidationPromise, accent = "#e8ecf3") => { // By @laotzunami from https://observablehq.com/d/cca8d2013f28cb8f // Rotation gizmo bound to state[key].q, viewed through the main camera's // orientation (well-defined even when the black hole is off screen). const SIZE = 190; const R = SIZE * 0.31; const DISK_R = SIZE * 0.45; const AXIS_LEN = SIZE * 0.42; const SEGS = 96; const HIT_TOL = 9; const BALL_SPEED = 1 / (SIZE * 0.31); const dpr = window.devicePixelRatio || 1; const gcanvas = document.createElement("canvas"); gcanvas.width = SIZE * dpr; gcanvas.height = SIZE * dpr; gcanvas.style.width = SIZE + "px"; gcanvas.style.height = SIZE + "px"; gcanvas.style.touchAction = "none"; gcanvas.style.cursor = "grab"; const ctx = gcanvas.getContext("2d"); const cx = SIZE / 2; const cy = SIZE / 2; const q = new THREE.Quaternion(); const camQ = new THREE.Quaternion(); const camInv = new THREE.Quaternion(); const tmpQ = new THREE.Quaternion(); const v = new THREE.Vector3(); const axis = new THREE.Vector3(); const AXES = [ new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1) ]; const RING_COLOR = ["#ff5a5a", "#4ade80", "#5b9bff"]; const INDICATOR = accent; // disk ring, pole stubs, spin cones const mkPts = () => Array.from({ length: SEGS + 1 }, () => new THREE.Vector3()); const ringWorld = [mkPts(), mkPts(), mkPts()]; const ringScreen = [mkPts(), mkPts(), mkPts()]; const diskWorld = mkPts(); const diskScreen = mkPts(); // Orthographic projection; screen y down, z > 0 faces the viewer. function project(p, out) { v.copy(p).applyQuaternion(camInv); out.set(cx + v.x, cy - v.y, v.z); return out; } function ringPoints(axisIndex, radius, worldArr, screenArr) { for (let s = 0; s <= SEGS; s++) { const th = (s / SEGS) * Math.PI * 2; const c = Math.cos(th) * radius; const sn = Math.sin(th) * radius; const p = worldArr[s]; if (axisIndex === 0) p.set(0, c, sn); else if (axisIndex === 1) p.set(c, 0, sn); else p.set(c, sn, 0); p.applyQuaternion(q); project(p, screenArr[s]); } } // Stroke only front (z >= 0) or back segments; painter's-order occlusion. function strokeRingSide(screenArr, front, color, width) { ctx.beginPath(); let open = false; for (let s = 0; s < SEGS; s++) { const a = screenArr[s]; const b = screenArr[s + 1]; const isFront = (a.z + b.z) * 0.5 >= 0; if (isFront === front) { if (!open) { ctx.moveTo(a.x, a.y); open = true; } ctx.lineTo(b.x, b.y); } else { open = false; } } ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke(); } // Polar-axis stubs: only the pieces poking out of the sphere at each pole. function drawStub(sign, prePass) { v.set(0, sign, 0).applyQuaternion(q).applyQuaternion(camInv); const behind = v.z < 0; if (behind !== prePass) return; const sx = v.x; const sy = -v.y; ctx.beginPath(); ctx.moveTo(cx + sx * R, cy + sy * R); ctx.lineTo(cx + sx * AXIS_LEN, cy + sy * AXIS_LEN); ctx.strokeStyle = INDICATOR; ctx.lineWidth = 1.5; ctx.stroke(); } // Two spin cones fixed at opposite ends of a ring diameter, each pointing // along northAxis x radial (the direction the shader animates the disk). const CONE_LEN = 12; const CONE_RAD = 4.5; const CONE_SAMPLES = 16; const coneN = new THREE.Vector3(); const coneT = new THREE.Vector3(); const coneR = new THREE.Vector3(); const coneB = new THREE.Vector3(); const coneW = new THREE.Vector3(); const coneS = new THREE.Vector3(); function convexHull(pts) { pts.sort((a, b) => a[0] - b[0] || a[1] - b[1]); const cr = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]); const lo = []; for (const p of pts) { while (lo.length >= 2 && cr(lo[lo.length - 2], lo[lo.length - 1], p) <= 0) lo.pop(); lo.push(p); } const up = []; for (let i = pts.length - 1; i >= 0; i--) { const p = pts[i]; while (up.length >= 2 && cr(up[up.length - 2], up[up.length - 1], p) <= 0) up.pop(); up.push(p); } lo.pop(); up.pop(); return lo.concat(up); } // A cone is convex, so its silhouette = hull of projected apex + base circle. function drawSpinCone(side, prePass) { coneB.set(side * DISK_R, 0, 0).applyQuaternion(q); v.copy(coneB).applyQuaternion(camInv); if (v.z < 0 !== prePass) return; coneN.set(0, 1, 0).applyQuaternion(q); coneT.crossVectors(coneN, coneB).normalize(); coneR.copy(coneB).normalize(); const pts = []; coneW.copy(coneB).addScaledVector(coneT, CONE_LEN); project(coneW, coneS); pts.push([coneS.x, coneS.y]); for (let k = 0; k < CONE_SAMPLES; k++) { const a = (k / CONE_SAMPLES) * Math.PI * 2; coneW .copy(coneB) .addScaledVector(coneR, Math.cos(a) * CONE_RAD) .addScaledVector(coneN, Math.sin(a) * CONE_RAD); project(coneW, coneS); pts.push([coneS.x, coneS.y]); } const h = convexHull(pts); if (h.length < 3) return; ctx.beginPath(); ctx.moveTo(h[0][0], h[0][1]); for (let i = 1; i < h.length; i++) ctx.lineTo(h[i][0], h[i][1]); ctx.closePath(); ctx.fillStyle = INDICATOR; ctx.fill(); } function draw() { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, SIZE, SIZE); ringPoints(1, DISK_R, diskWorld, diskScreen); for (let i = 0; i < 3; i++) ringPoints(i, R, ringWorld[i], ringScreen[i]); // Behind the ball, then the black ball, then everything in front. strokeRingSide(diskScreen, false, INDICATOR, 1.5); drawStub(1, true); drawStub(-1, true); drawSpinCone(1, true); drawSpinCone(-1, true); ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.fillStyle = "#000"; ctx.fill(); ctx.strokeStyle = "rgba(230,235,245,0.18)"; ctx.lineWidth = 1; ctx.stroke(); for (let i = 0; i < 3; i++) { strokeRingSide(ringScreen[i], true, RING_COLOR[i], 2); } drawSpinCone(1, false); drawSpinCone(-1, false); strokeRingSide(diskScreen, true, INDICATOR, 1.5); drawStub(1, false); drawStub(-1, false); } // Only front-facing samples are grabbable, so ball clicks stay trackball. function hitRing(mx, my) { let best = null; const tol2 = HIT_TOL * HIT_TOL; for (let i = 0; i < 3; i++) { for (let s = 0; s <= SEGS; s++) { const p = ringScreen[i][s]; if (p.z < 0) continue; const dx = p.x - mx; const dy = p.y - my; const d2 = dx * dx + dy * dy; if (d2 > tol2) continue; if (!best || d2 < best.d2 - 4 || (d2 < best.d2 + 4 && p.z > best.z)) { best = { i, s, d2, z: p.z }; } } } return best; } let drag = null; const mouse = (e) => { const r = gcanvas.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; const writeQ = () => { q.normalize(); const a = new THREE.Vector3(0, 1, 0).applyQuaternion(q); const u = new THREE.Vector3(1, 0, 0).applyQuaternion(q); const v = new THREE.Vector3(0, 0, 1).applyQuaternion(q); state[key].q = [q.x, q.y, q.z, q.w]; if (key == "a1") { canvas.uniforms.A1.value = a; canvas.uniforms.U1.value = u; canvas.uniforms.V1.value = v; } else { canvas.uniforms.A2.value = a; canvas.uniforms.U2.value = u; canvas.uniforms.V2.value = v; } canvas.update(); }; gcanvas.addEventListener("pointerdown", (e) => { const [mx, my] = mouse(e); const hit = hitRing(mx, my); drag = { lastX: mx, lastY: my }; if (hit) { drag.mode = "ring"; drag.axis = AXES[hit.i].clone().applyQuaternion(q).normalize(); // Screen tangent of +rotation at the grab point; stable when edge-on. const g = ringWorld[hit.i][hit.s]; v.crossVectors(drag.axis, g).applyQuaternion(camInv); let tx = v.x; let ty = -v.y; const tl = Math.hypot(tx, ty) || 1; drag.tx = tx / tl; drag.ty = ty / tl; } else { drag.mode = "ball"; } gcanvas.setPointerCapture(e.pointerId); gcanvas.style.cursor = "grabbing"; e.preventDefault(); }); gcanvas.addEventListener("pointermove", (e) => { const [mx, my] = mouse(e); if (!drag) { gcanvas.style.cursor = hitRing(mx, my) ? "pointer" : "grab"; return; } const dx = mx - drag.lastX; const dy = my - drag.lastY; drag.lastX = mx; drag.lastY = my; if (drag.mode === "ring") { const dth = (dx * drag.tx + dy * drag.ty) / R; tmpQ.setFromAxisAngle(drag.axis, dth); q.premultiply(tmpQ); } else { axis.set(1, 0, 0).applyQuaternion(camQ); tmpQ.setFromAxisAngle(axis, dy * BALL_SPEED); q.premultiply(tmpQ); axis.set(0, 1, 0).applyQuaternion(camQ); tmpQ.setFromAxisAngle(axis, dx * BALL_SPEED); q.premultiply(tmpQ); } writeQ(); }); const endDrag = () => { drag = null; gcanvas.style.cursor = "grab"; }; gcanvas.addEventListener("pointerup", endDrag); gcanvas.addEventListener("pointercancel", endDrag); let disposed = false; invalidationPromise.then(() => { disposed = true; }); const lastCam = new THREE.Quaternion(NaN, NaN, NaN, NaN); const lastQd = new THREE.Quaternion(NaN, NaN, NaN, NaN); function frame() { if (disposed) return; camQ.copy(canvas.camera.quaternion); camInv.copy(camQ).invert(); if (!drag) q.fromArray(state[key].q || [0, 0, 0, 1]); if (!camQ.equals(lastCam) || !q.equals(lastQd)) { lastCam.copy(camQ); lastQd.copy(q); draw(); } requestAnimationFrame(frame); } frame(); return gcanvas; }33:[] 2e:{"id":"e19fe6309e344c31","slug":"binary-black-holes","title":"Binary Black Holes","thumbnail":"68158ef87cbe89745567e758739b82e3e089afb4f2887db7f711e849aa009b62","access_level":"public","create_time":"$D2026-07-27T18:20:23.140Z","update_time":"$D2026-09-04T20:52:14.930Z","view_time":null,"first_public_time":"$D2026-07-29T07:19:13.632Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":501,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}],"members":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null,"role":"editor"},{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024","role":"editor"}],"comments":[{"id":"a2f9828eab728bfd","reply_to_id":null,"content":"Bro, PBS spacetime is showcasing your work, this is surreal.\n\nPBS spacetime episode: https://www.youtube.com/watch?v=mxpuV33vpNk\n\nt shirt link: https://crowdmade.com/collections/pbsspacetime/products/pbsspacetime-black-hole-merger-t-shirt\n\nHopefully you're cool with it, but serious, I wouldn't be surprised if this ends up in a Hollywood movie eventually. Super cool idea.","create_time":"$D2026-08-28T03:32:21.704Z","update_time":"$D2026-08-28T03:35:03.894Z","resolved":true,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}},{"id":"7a95ed7dac69afc3","reply_to_id":"a2f9828eab728bfd","content":"That's not mine it's the original reference I used from NASA https://svs.gsfc.nasa.gov/13831","create_time":"$D2026-08-28T10:46:28.945Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Binary Black Holes","cells":[{"id":0,"value":"# Binary Black Holes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"html`\n

Black Hole 1

\n ${viewof bh1}\n

Black Hole 2

\n ${viewof bh2}\n

\n${viewof s}\n${s ? viewof sd : \"\"}\n

\n${(() => {\n const e = Inputs.button(\"Play\");\n e.addEventListener(\"input\", () => {\n const c = e.children[0];\n c.innerText = c.innerText == \"Play\" ? \"Pause\" : \"Play\";\n canvas.pause();\n });\n return e;\n})()}\n${viewof p}\n${viewof i}\n

\n${md`The rotation gizmo code is based on [@laotzunami](https://observablehq.com/@laotzunami)'s [notebook](https://observablehq.com/d/cca8d2013f28cb8f)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"errors = html`

Loading...

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"viewof d = Inputs.number({ label: \"Distance\", value: 59 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"b = d * 0.5 + Math.max(bh1.r * bh1.o, bh2.r * bh2.o) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"r = Math.max(bh1.r + bh1.r * bh1.o, bh2.r + bh2.r * bh2.o) + 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof i = {\n const i = Inputs.number({ placeholder: \"Size\", value: 512, min: 1, step: 1 });\n const d = Inputs.button(\"Download PNG\", {\n reduce() {\n const a = document.createElement(\"a\");\n const s = Number(i.value) || 512;\n canvas.resize(s, (s * 3) / 4, 1);\n a.href = canvas.toDataURL(\"image/png\");\n canvas.resizeEvent();\n a.download = `image.png`;\n a.click();\n }\n });\n i.style.width = \"100px\";\n return html`

${i}${d}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"viewof p = {\n const p = Inputs.toggle({ label: \"Perspective\", value: state.perspective });\n const f = Inputs.range([30, 120], {\n label: \"FOV\",\n value: state.fov,\n step: 5\n });\n const u = p.addEventListener(\"input\", () => {\n state.perspective = p.value;\n f.style.display = p.value ? \"flex\" : \"none\";\n canvas.setCamera(p.value);\n });\n f.addEventListener(\"input\", () => {\n state.fov = f.value;\n canvas.setFOV(f.value);\n });\n f.style.display = p.value ? \"flex\" : \"none\";\n return Inputs.form({ p, f });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"viewof s = Inputs.toggle({ label: \"Sky\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"viewof sd = Inputs.select([0, 1, 2], {\n label: \"Panorama Resolution\",\n format: (i) => [\"1280x640\", \"4000x2000\", \"6000x3000\"][i]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"viewof bh1 = Inputs.form({\n r: Inputs.number({ label: \"Radius\", value: 2 }),\n s: Inputs.range([-0.5, 0.5], { label: \"Spin\", step: 0.01, value: 0 }),\n i: Inputs.number({ label: \"Disk Inner Radius\", value: 3.5 }),\n o: Inputs.number({ label: \"Disk Outer Radius\", value: 9.5 }),\n a: a1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"viewof bh2 = Inputs.form({\n r: Inputs.number({ label: \"Radius\", value: 1 }),\n s: Inputs.range([-0.5, 0.5], { label: \"Spin\", step: 0.01, value: 0 }),\n i: Inputs.number({ label: \"Disk Inner Radius\", value: 3.5 }),\n o: Inputs.number({ label: \"Disk Outer Radius\", value: 9.5 }),\n a: a2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"a1 = rotationGizmo(\"a1\", invalidation, \"#f70\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"a2 = rotationGizmo(\"a2\",invalidation,\"#07f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"sky = {\n // https://www.eso.org/public/images/eso0932a/\n // https://cdn.eso.org/images/screen/eso0932a.jpg\n // https://cdn.eso.org/images/publicationjpg/eso0932a.jpg\n // https://cdn.eso.org/images/large/eso0932a.jpg\n // https://cdn.eso.org/images/original/eso0932a.tif\n const sky = new THREE.TextureLoader().load(\n [\n \"https://cdn.eso.org/images/screen/eso0932a.jpg\",\n \"https://cdn.eso.org/images/publicationjpg/eso0932a.jpg\",\n \"https://cdn.eso.org/images/large/eso0932a.jpg\"\n ][sd]\n );\n sky.wrapS = THREE.RepeatWrapping;\n sky.wrapT = THREE.ClampToEdgeWrapping;\n sky.minFilter = THREE.LinearFilter;\n sky.magFilter = THREE.LinearFilter;\n sky.generateMipmaps = false;\n //sky.colorSpace = THREE.NoColorSpace;\n //sky.needsUpdate = true;\n return sky;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"state = {\n const size = 256;\n const data = new Uint8Array(size ** 2);\n for (let i = 0; i < data.length; i++) {\n data[i] = Math.random() * 255;\n }\n const texture = new THREE.DataTexture(data, size, size, THREE.RedFormat);\n texture.needsUpdate = true;\n texture.wrapS = THREE.RepeatWrapping;\n texture.wrapT = THREE.RepeatWrapping;\n texture.minFilter = THREE.LinearFilter;\n texture.magFilter = THREE.LinearFilter;\n texture.colorSpace = THREE.NoColorSpace;\n\n return {\n noise: texture,\n perspective: false,\n fov: 45,\n s: true,\n a1: {\n q: [0, 0, 0, 1]\n },\n a2: {\n q: [0, 0, 0, 1]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"glsl = (l = \"\", t) => {\n return Object.assign(md`\\`${l} = glsl(~)\\``, { value: t });\n const c = md`\\`\\`\\`glsl\\n${t.trim()}\\n\\`\\`\\``;\n c.style.margin = \"0\";\n c.style.padding = \"8px\";\n const e = html`

${c}

`;\n e.style.width = \"fit-content\";\n e.style.maxWidth = \"100%\";\n e.style.maxHeight = \"400px\";\n e.style.overflow = \"auto\";\n e.style.borderRadius = \"4px\";\n e.style.border = \"1px solid #8884\";\n e.value = t;\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"THREE = {\n try {\n const THREE = await import(\"three@0.184.0\");\n const { OrbitControls } = await import(\n \"three@0.184.0/examples/jsm/controls/OrbitControls.js\"\n );\n return { ...THREE, OrbitControls };\n } catch (e) {\n // IOS 15 issue\n const THREE = await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n const { OrbitControls } = await import(\n \"https://esm.sh/three@0.184.0/examples/jsm/controls/OrbitControls.js?target=es2020\"\n );\n return { ...THREE, OrbitControls };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 2f:"$2e:body"