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; }