29:null 2a:["$","title",null,{"children":"Guided Tour of an Infinite Sphere Grid | Martin Stålberg | Observable"}] 2f:T964,mainView = { const canvas = (this && this.canvas) || document.createElement('canvas'); canvas.style.cursor = "pointer"; const phi = (1 + Math.sqrt(5)) / 2; // const aspectRatio = 1 / phi; // const aspectRatio = 1; // const aspectRatio = 1440 / 2560; const aspectRatio = screen.height / screen.width; const w = width; const h = Math.round(w * aspectRatio); canvas.width = w * devicePixelRatio; canvas.style.width = `${w}px`; canvas.height = h * devicePixelRatio; canvas.style.height = `${h}px`; let t = 0; let lastTime = 0; const period = 4; // let maxSteps = 100; const regl = canvas.value || createREGL({ canvas, pixelRatio: devicePixelRatio }); const draw = regl({ vert: ` precision highp float; varying vec2 uv; attribute vec2 position; void main () { uv = position; gl_Position = vec4(position, 0, 1); }`, frag, uniforms: { aspectRatio, t: ctx => { const dt = ctx.time - lastTime; lastTime = ctx.time; t += ((1 * dt) / 20) % period; // return ((ctx.time - 0) /* - 10*/ * viewof speed.value) % period; return t; }, ...dynamicUniformProviders // maxSteps by cell reevaluation because for loop stop conditions can't be based on uniforms }, attributes: { position: [-4, -4, 4, -4, 0, 4] }, // depth: { enable: false }, count: 3 }); let frame = regl.frame(draw); invalidation.then(() => frame.cancel()); canvas.value = regl; // const caption = html`Hello`; const s = 10; // half font size const caption = presets[presetIndex].caption || ""; const captionTextElement = svg`${caption}`; const captionStrokeElement = svg`${caption}`; const captionContainer = svg``; const node = html`

${canvas} ${captionContainer}

`; node.onclick = () => viewof presetIndex[0].click(); node.canvas = canvas; return node; }30:T7d7,presets = { mutable previousPresetIndex = 0; return [ { caption: "Welcome! Click to proceed" }, { caption: "Let's explore different versions of this strange world" }, { caption: "Small spheres", sphereRadius: 0.3 }, { caption: "Tiny spheres", sphereRadius: 0.1 }, { caption: "Medium spheres", sphereRadius: 1.75, spiralAmplitude: 0 }, { caption: "Touching spheres, retracting to reveal the next layer", sphereRadius: 2.5, spiralAmplitude: 0 }, { caption: "Intersecting a little", sphereRadius: 3, spiralAmplitude: 0 }, { caption: "Intersecting a bit more", sphereRadius: 2.5 * Math.sqrt(2) * 0.95, spiralAmplitude: 0 }, { caption: "Overlapping the view centerline", sphereRadius: 5, spiralAmplitude: 0 // spiralAmplitude: 2.5 * Math.sqrt(2) }, { caption: "Overlapping even more, and we're spiralling again", sphereRadius: 10 }, { caption: "Very large spheres, heavily overlapping", sphereRadius: 20.0 }, { caption: "Default sphere size again, spiralling more", spiralAmplitude: 25 }, { caption: "Fast forward", forwardSpeed: 25, spiralAmplitude: 0.3, rollSpeed: 2 }, { caption: "Reduced ray march iteration count gives a metablob-like effect", maxSteps: 20 }, { caption: "Reducing max iteration count too far", maxSteps: 10 }, { caption: "Much too far", maxSteps: 6 }, { caption: "Seemingly moving, but actually static", spiralAmplitude: 0, forwardSpeed: 0, rollSpeed: 0, colorCycleSpeed: 10 }, { caption: "Thanks for watching! The End", forwardSpeed: -10, spiralAmplitude: 0, colorCycleSpeed: 0, rollSpeed: 0, colorAmplitude: 0, apertureAmplitude: 0 } ]; }31:[] 2d:{"id":"93fc796e9309eef8","slug":"guided-tour-of-an-infinite-sphere-grid","title":"Guided Tour of an Infinite Sphere Grid","thumbnail":"39cb24c6f01580f928304736d2de4a18772b22bec0ac026c1967144f3575144c","access_level":"public","create_time":"$D2021-03-15T21:22:03.346Z","update_time":"$D2021-03-19T20:21:43.220Z","view_time":null,"first_public_time":"$D2021-03-19T20:23:35.302Z","has_unpublished_edits":null,"fork":{"id":"f44b1692164ac1ed","slug":"ray-marching-baby-steps","title":"Ray Marching Flight Through Infinite Rainbow Sphere Grid","owner":{"id":"846cb38877f13a5e","login":"mast4461","name":"Martin Stålberg"}},"stars":33,"starred":false,"owner":{"type":"team","id":"846cb38877f13a5e","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":"starter_2024"},"version":1970,"publish_version":1970,"role":null,"authored":false,"authors":[{"type":"individual","id":"44de236d09dec6e7","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":null}],"members":[{"type":"individual","id":"44de236d09dec6e7","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Guided Tour of an Infinite Sphere Grid","cells":[{"id":0,"value":"md`# Guided Tour of an Infinite Sphere Grid\n\n## An Exploration of Parameter Space\nBest viewed in fullscreen landscape mode, if your GPU can handle all the ray marching.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"fullscreen = {\n const button = html`