31: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; }32: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 } ]; }33:[] 2f:{"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"},{"id":1274,"value":"fullscreen = {\n const button = html`