/* The fluid menu A full menu that comes out of its button like ink dropped in water. Pressed, indigo and orange ink pours out of the Menu button in jets that curl over into eddies and mushroom heads, spreads and thickens until it fills the whole frame, and each link surfaces only once the ink has covered it. While the menu is open the pointer stirs the ink. Closed, the ink is sucked back into the button in a spiral and fades. The ink is a real fluid, solved on the GPU on a small grid (Stam's stable fluids): the velocity carries itself and the ink backwards along its own flow (semi-Lagrangian advection), the swirls are kept alive by vorticity confinement, and a pressure field, found with Jacobi iterations, takes out the divergence so the fluid never squeezes. While it opens, a source at the button pushes the ink outwards and the ink thickens where it already is; closing, a field pulls it back to the button and the ink fades from the far side in. */ /* ---- valori da cambiare ---- */ const OPEN = 1.7; /* the seconds the ink takes to fill the frame */ const CLOSE = 1.15; /* the seconds it takes to be drawn back into the button */ const SWIRL = 16; /* how hard the fluid curls into eddies (0 = smooth, no eddies) */ const JETS = 3; /* how many jets of ink leave the button each frame while it opens */ const STIR = 1; /* how much the pointer stirs the open menu */ const ORANGE = 0.34; /* how much of the ink is orange, 0 to 1 */ const GRID = 112; /* the cells of the simulation across the short side of the frame (fewer is faster) */ const ITERATIONS = 18; /* the passes that find the pressure: more, a truer fluid */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const TOUCH = matchMedia('(hover: none), (pointer: coarse)').matches; const panel = document.querySelector('[data-panel]'); const cv = panel.querySelector('[data-ink]'); const still = panel.querySelector('[data-still]'); const toggle = panel.querySelector('[data-toggle]'); const word = toggle.querySelector('[data-word]'); const nameEl = toggle.querySelector('[data-name]'); const menu = panel.querySelector('[data-menu]'); const items = [...menu.querySelectorAll('[data-item]')]; const links = [...menu.querySelectorAll('.item')]; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const smooth = (a, b, t) => { const x = clamp((t - a) / (b - a), 0, 1); return x * x * (3 - 2 * x); }; /* ---------------------------------------------------------------- WebGL2, with half float targets */ function context() { if (REDUCED) return null; let g = null; try { g = cv.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: false, depth: false, stencil: false, preserveDrawingBuffer: false }); } catch (e) { g = null; } if (!g) return null; g.getExtension('EXT_color_buffer_float'); g.getExtension('EXT_color_buffer_half_float'); /* a half float target must be complete, or the fluid cannot be written */ const t = g.createTexture(); g.bindTexture(g.TEXTURE_2D, t); g.texImage2D(g.TEXTURE_2D, 0, g.RGBA16F, 4, 4, 0, g.RGBA, g.HALF_FLOAT, null); const f = g.createFramebuffer(); g.bindFramebuffer(g.FRAMEBUFFER, f); g.framebufferTexture2D(g.FRAMEBUFFER, g.COLOR_ATTACHMENT0, g.TEXTURE_2D, t, 0); const ok = g.checkFramebufferStatus(g.FRAMEBUFFER) === g.FRAMEBUFFER_COMPLETE; g.bindFramebuffer(g.FRAMEBUFFER, null); g.deleteFramebuffer(f); g.deleteTexture(t); return ok ? g : null; } let gl = context(); const VERT = `#version 300 es in vec2 aPos; uniform vec2 uTexel; out vec2 vUv, vL, vR, vT, vB; void main() { vUv = aPos * 0.5 + 0.5; vL = vUv - vec2(uTexel.x, 0.0); vR = vUv + vec2(uTexel.x, 0.0); vT = vUv + vec2(0.0, uTexel.y); vB = vUv - vec2(0.0, uTexel.y); gl_Position = vec4(aPos, 0.0, 1.0); }`; const HEAD = `#version 300 es precision highp float; precision highp sampler2D; in vec2 vUv, vL, vR, vT, vB; out vec4 o; `; /* a splat: a gaussian blob added to what is there (velocity, or ink) */ const F_SPLAT = HEAD + ` uniform sampler2D uTarget; uniform float uAspect, uRadius; uniform vec2 uPoint; uniform vec3 uValue; void main() { vec2 p = vUv - uPoint; p.x *= uAspect; o = vec4(texture(uTarget, vUv).xyz + exp(-dot(p, p) / uRadius) * uValue, 1.0); }`; /* advection of the velocity by itself: each cell takes the value from where the flow brings it */ const F_ADVECT = HEAD + ` uniform sampler2D uVelocity, uSource; uniform vec2 uCell; uniform float uDt, uKeep; void main() { vec2 from = vUv - uDt * texture(uVelocity, vUv).xy * uCell; o = uKeep * texture(uSource, from); }`; /* advection of the ink: by the fluid, plus the source at the button that pushes it out while the menu opens, or the pull that draws it back in a spiral as it closes. It thickens where it is (opening) and fades from the far side (closing) */ const F_INK = HEAD + ` uniform sampler2D uVelocity, uSource; uniform vec2 uCell, uButton; uniform float uDt, uAspect, uOut, uIn, uGrow, uFade, uTime, uCells, uReach; void main() { vec2 d = vUv - uButton; d.x *= uAspect; float r = length(d) + 1e-4; vec2 dir = d / r; float a = atan(d.y, d.x); /* the source is not the same in every direction, so the front is ragged, not a circle */ float uneven = 1.0 + 0.45 * sin(5.0 * a + uTime * 1.3) + 0.25 * sin(9.0 * a - uTime * 2.1); /* speeds in frame heights per second, turned into cells of the grid */ vec2 push = dir * uOut * uneven * (0.55 + 0.08 / (0.04 + r)) * uCells; vec2 pull = (-dir * 0.5 * (0.3 + r) + vec2(-dir.y, dir.x) * 0.7 * (0.15 + r)) * uIn * uCells; vec2 v = texture(uVelocity, vUv).xy + push + pull; vec2 from = vUv - uDt * v * uCell; /* nothing comes in from outside the frame */ vec4 c = (from.x < 0.0 || from.x > 1.0 || from.y < 0.0 || from.y > 1.0) ? vec4(0.0) : texture(uSource, from); float s = c.r + c.g; float grow = uGrow * uDt * smoothstep(0.03, 0.5, s) * max(0.0, 0.75 - s); c.rg += c.rg / (s + 1e-4) * grow; /* the ink never piles up past a point: thick and thin stay readable as bands */ float t2 = c.r + c.g; if (t2 > 1.8) c.rg *= 1.8 / t2; /* closing: a ragged edge shrinks back to the button and the ink beyond it is wiped out fast */ float edge = uReach * (1.0 + 0.22 * sin(4.0 * a + r * 9.0 + uTime * 2.0) + 0.12 * sin(7.0 * a - uTime * 3.0)); c.rg *= exp(-uDt * uFade * smoothstep(edge - 0.22, edge, r)); o = vec4(c.rg, 0.0, 1.0); }`; const F_DIVERGENCE = HEAD + ` uniform sampler2D uVelocity; void main() { float L = texture(uVelocity, vL).x; float R = texture(uVelocity, vR).x; float T = texture(uVelocity, vT).y; float B = texture(uVelocity, vB).y; vec2 C = texture(uVelocity, vUv).xy; if (vL.x < 0.0) L = -C.x; if (vR.x > 1.0) R = -C.x; if (vT.y > 1.0) T = -C.y; if (vB.y < 0.0) B = -C.y; o = vec4(0.5 * (R - L + T - B), 0.0, 0.0, 1.0); }`; const F_CURL = HEAD + ` uniform sampler2D uVelocity; void main() { float L = texture(uVelocity, vL).y; float R = texture(uVelocity, vR).y; float T = texture(uVelocity, vT).x; float B = texture(uVelocity, vB).x; o = vec4(0.5 * (R - L - T + B), 0.0, 0.0, 1.0); }`; /* vorticity confinement: a push along the gradient of the swirl's strength, turned, keeps the eddies spinning */ const F_VORTICITY = HEAD + ` uniform sampler2D uVelocity, uCurl; uniform float uStrength, uDt; void main() { float L = texture(uCurl, vL).x; float R = texture(uCurl, vR).x; float T = texture(uCurl, vT).x; float B = texture(uCurl, vB).x; float C = texture(uCurl, vUv).x; vec2 f = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L)); f /= length(f) + 0.0001; f *= uStrength * C; f.y *= -1.0; o = vec4(clamp(texture(uVelocity, vUv).xy + f * uDt, -1000.0, 1000.0), 0.0, 1.0); }`; const F_PRESSURE = HEAD + ` uniform sampler2D uPressure, uDivergence; void main() { float L = texture(uPressure, vL).x; float R = texture(uPressure, vR).x; float T = texture(uPressure, vT).x; float B = texture(uPressure, vB).x; o = vec4((L + R + B + T - texture(uDivergence, vUv).x) * 0.25, 0.0, 0.0, 1.0); }`; const F_GRADIENT = HEAD + ` uniform sampler2D uPressure, uVelocity; void main() { float L = texture(uPressure, vL).x; float R = texture(uPressure, vR).x; float T = texture(uPressure, vT).x; float B = texture(uPressure, vB).x; o = vec4(texture(uVelocity, vUv).xy - vec2(R - L, T - B), 0.0, 1.0); }`; const F_SCALE = HEAD + ` uniform sampler2D uSource; uniform float uValue; void main() { o = uValue * texture(uSource, vUv); }`; /* the screen: thin ink is a pale veil, thick ink deep indigo, the orange runs through it; the slope of the ink catches a little light, so the folds of the eddies read */ const F_SHOW = HEAD + ` uniform sampler2D uInk; uniform vec2 uInkCell; uniform vec3 uIndigo, uDeep, uOrange; float amount(vec2 uv) { vec4 c = texture(uInk, uv); return c.r + c.g; } void main() { vec4 c = texture(uInk, vUv); float s = c.r + c.g; float a = 1.0 - exp(-4.5 * s); if (a < 0.002) { o = vec4(0.0); return; } float orange = smoothstep(0.36, 0.74, c.g / max(s, 0.3)); float deep = smoothstep(0.7, 2.4, s); vec3 ink = mix(uIndigo, uDeep, deep); ink = mix(ink, uOrange * (1.0 - 0.18 * deep), orange); float dx = amount(vUv + vec2(uInkCell.x, 0.0)) - amount(vUv - vec2(uInkCell.x, 0.0)); float dy = amount(vUv + vec2(0.0, uInkCell.y)) - amount(vUv - vec2(0.0, uInkCell.y)); vec3 n = normalize(vec3(-dx * 1.2, -dy * 1.2, 1.0)); float light = dot(n, normalize(vec3(-0.4, 0.5, 0.75))); ink *= 0.95 + 0.07 * light; o = vec4(ink * a, a); }`; /* how covered each part of the frame is, in a tiny picture the script reads back */ const F_COVER = HEAD + ` uniform sampler2D uInk; void main() { vec4 c = texture(uInk, vUv); o = vec4(1.0 - exp(-4.5 * (c.r + c.g)), 0.0, 0.0, 1.0); }`; let prog = null; let vel; let pressure; let divergence; let curl; let ink; let cover; let colours = null; function compile(type, src) { const sh = gl.createShader(type); gl.shaderSource(sh, src); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(sh)); return sh; } function program(frag) { const p = gl.createProgram(); gl.attachShader(p, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, frag)); gl.bindAttribLocation(p, 0, 'aPos'); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p)); const u = {}; const n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); for (let i = 0; i < n; i++) { const nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); } return { p, u }; } function target(w, h, filter, internal = gl.RGBA16F, format = gl.RGBA, type = gl.HALF_FLOAT) { const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, internal, w, h, 0, format, type, null); const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.viewport(0, 0, w, h); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); return { tex, fbo, w, h, cell: [1 / w, 1 / h], bind(unit) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, tex); return unit; }, clear() { gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); gl.viewport(0, 0, w, h); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); }, drop() { gl.deleteTexture(tex); gl.deleteFramebuffer(fbo); }, }; } /* two targets that swap: one is read while the other is written */ function pair(w, h, filter) { let a = target(w, h, filter); let b = target(w, h, filter); return { w, h, cell: [1 / w, 1 / h], get read() { return a; }, get write() { return b; }, swap() { [a, b] = [b, a]; }, clear() { a.clear(); b.clear(); }, drop() { a.drop(); b.drop(); }, }; } function blit(dest) { if (dest) { gl.bindFramebuffer(gl.FRAMEBUFFER, dest.fbo); gl.viewport(0, 0, dest.w, dest.h); } else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); } gl.drawArrays(gl.TRIANGLES, 0, 3); } function use(pr, cell) { gl.useProgram(pr.p); if (pr.u.uTexel) gl.uniform2f(pr.u.uTexel, cell ? cell[0] : 0, cell ? cell[1] : 0); return pr.u; } function rgb(nameVar) { const h = getComputedStyle(document.documentElement).getPropertyValue(nameVar).trim().replace('#', ''); const n = parseInt(h.length === 3 ? [...h].map((x) => x + x).join('') : h.slice(0, 6), 16) || 0; return [(n >> 16) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } function setup() { prog = { splat: program(F_SPLAT), advect: program(F_ADVECT), ink: program(F_INK), divergence: program(F_DIVERGENCE), curl: program(F_CURL), vorticity: program(F_VORTICITY), pressure: program(F_PRESSURE), gradient: program(F_GRADIENT), scale: program(F_SCALE), show: program(F_SHOW), cover: program(F_COVER), }; /* one triangle that covers the whole target */ const vao = gl.createVertexArray(); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); gl.disable(gl.BLEND); colours = { indigo: rgb('--indigo'), deep: rgb('--indigo-deep'), orange: rgb('--orange') }; } /* ---------------------------------------------------------------- sizes */ let W = 0; let H = 0; const button = { x: 0.9, y: 0.9 }; /* the middle of the Menu button, in the frame's uv (y up) */ const coverPx = new Uint8Array(48 * 32 * 4); function sides(n) { const r = W > H ? W / H : H / W; const a = Math.round(n); const b = Math.round(n * r); return W > H ? [b, a] : [a, b]; } function size() { const nw = panel.clientWidth; const nh = panel.clientHeight; const changed = nw !== W || nh !== H; W = nw; H = nh; const pr = panel.getBoundingClientRect(); const br = toggle.getBoundingClientRect(); button.x = (br.left + br.width / 2 - pr.left) / W; button.y = 1 - (br.top + br.height / 2 - pr.top) / H; if (!gl || !changed) return; /* the ink is soft: it needs no more than about a million pixels, even on a sharp screen */ const dpr = Math.min(window.devicePixelRatio || 1, 1.5, Math.sqrt(1.1e6 / (W * H))); cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr); [vel, pressure, divergence, curl, ink, cover].forEach((t) => t && t.drop()); const n = Math.max(32, GRID * (TOUCH ? 0.72 : 1)); const [gw, gh] = sides(n); const [iw, ih] = sides(n * 2.2); vel = pair(gw, gh, gl.LINEAR); pressure = pair(gw, gh, gl.NEAREST); divergence = target(gw, gh, gl.NEAREST); curl = target(gw, gh, gl.NEAREST); ink = pair(iw, ih, gl.LINEAR); cover = target(48, 32, gl.LINEAR, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE); if (isOpen && !REDUCED) fillAll(); wake(); } /* a new size while the menu is open: the frame starts full of ink, already settled */ function fillAll() { const u = use(prog.splat); gl.uniform1f(u.uAspect, W / H); [[0.5, 0.5, 2.5], [button.x, button.y, 0.4]].forEach(([x, y, r]) => { gl.uniform2f(u.uPoint, x, y); gl.uniform1f(u.uRadius, r); gl.uniform1i(u.uTarget, ink.read.bind(0)); gl.uniform3f(u.uValue, 1.1 * (1 - ORANGE * 0.5), 0.3 * ORANGE * 2, 0); blit(ink.write); ink.swap(); }); } /* ---------------------------------------------------------------- the fluid */ function splat(field, x, y, value, radius) { const u = use(prog.splat); gl.uniform1f(u.uAspect, W / H); gl.uniform2f(u.uPoint, x, y); gl.uniform1f(u.uRadius, radius); gl.uniform1i(u.uTarget, field.read.bind(0)); gl.uniform3f(u.uValue, value[0], value[1], value[2] || 0); blit(field.write); field.swap(); } const fx = { out: 0, inn: 0, grow: 0, fade: 0, reach: 9 }; let clock = 0; function simulate(dt) { const c = vel.cell; let u; if (SWIRL > 0) { u = use(prog.curl, c); gl.uniform1i(u.uVelocity, vel.read.bind(0)); blit(curl); u = use(prog.vorticity, c); gl.uniform1i(u.uVelocity, vel.read.bind(0)); gl.uniform1i(u.uCurl, curl.bind(1)); gl.uniform1f(u.uStrength, SWIRL); gl.uniform1f(u.uDt, dt); blit(vel.write); vel.swap(); } u = use(prog.divergence, c); gl.uniform1i(u.uVelocity, vel.read.bind(0)); blit(divergence); /* last step's pressure, a little smaller, is a good place to start from */ u = use(prog.scale, c); gl.uniform1i(u.uSource, pressure.read.bind(0)); gl.uniform1f(u.uValue, 0.8); blit(pressure.write); pressure.swap(); u = use(prog.pressure, c); gl.uniform1i(u.uDivergence, divergence.bind(1)); for (let i = 0; i < ITERATIONS; i++) { gl.uniform1i(u.uPressure, pressure.read.bind(0)); blit(pressure.write); pressure.swap(); } u = use(prog.gradient, c); gl.uniform1i(u.uPressure, pressure.read.bind(0)); gl.uniform1i(u.uVelocity, vel.read.bind(1)); blit(vel.write); vel.swap(); u = use(prog.advect, c); gl.uniform2f(u.uCell, c[0], c[1]); gl.uniform1f(u.uDt, dt); gl.uniform1i(u.uVelocity, vel.read.bind(0)); gl.uniform1i(u.uSource, vel.read.bind(0)); gl.uniform1f(u.uKeep, Math.pow(0.975, dt * 60)); blit(vel.write); vel.swap(); u = use(prog.ink, ink.cell); gl.uniform2f(u.uCell, c[0], c[1]); gl.uniform2f(u.uButton, button.x, button.y); gl.uniform1f(u.uDt, dt); gl.uniform1f(u.uAspect, W / H); gl.uniform1f(u.uOut, fx.out); gl.uniform1f(u.uIn, fx.inn); gl.uniform1f(u.uGrow, fx.grow); gl.uniform1f(u.uFade, fx.fade); gl.uniform1f(u.uTime, clock); gl.uniform1f(u.uCells, vel.h); gl.uniform1f(u.uReach, fx.reach); gl.uniform1i(u.uVelocity, vel.read.bind(0)); gl.uniform1i(u.uSource, ink.read.bind(1)); blit(ink.write); ink.swap(); } function show() { let u = use(prog.show); gl.uniform1i(u.uInk, ink.read.bind(0)); gl.uniform2f(u.uInkCell, ink.cell[0], ink.cell[1]); gl.uniform3fv(u.uIndigo, colours.indigo); gl.uniform3fv(u.uDeep, colours.deep); gl.uniform3fv(u.uOrange, colours.orange); blit(null); u = use(prog.cover); gl.uniform1i(u.uInk, ink.read.bind(0)); blit(cover); } /* the jets at the button: a few each frame, aimed into the frame and swinging, indigo with pulses of orange */ let jetT = 0; function jets(dt, strength) { jetT += dt; const short = Math.min(W, H); const cellsPerPx = Math.max(vel.w, vel.h) / Math.max(W, H); /* the frame is below and to the left of the button: aim round there */ const aim = Math.atan2(0.5 - button.y, (0.5 - button.x) * (W / H)); for (let i = 0; i < JETS; i++) { const a = aim + 0.95 * Math.sin(jetT * 5.3 + i * 2.4) + 0.35 * Math.sin(jetT * 13.1 + i); const speed = (900 + 420 * Math.sin(jetT * 7 + i * 1.7)) * strength * (short / 600) * cellsPerPx; /* the first jet turns orange in bursts: a stream of its own, so it stays a vein and does not tint the rest */ const pulse = i === 0 && Math.sin(jetT * 3.4) > 1 - 2 * ORANGE ? 1 : 0; const off = 0.012 * (i - (JETS - 1) / 2); const x = button.x + Math.cos(a + 1.57) * off; const y = button.y + Math.sin(a + 1.57) * off * (W / H); splat(vel, x, y, [Math.cos(a) * speed, Math.sin(a) * speed], 0.0016); splat(ink, x, y, [0.5 * strength * (1 - pulse), 1.6 * strength * pulse], 0.0022); } } /* ---------------------------------------------------------------- every frame */ let running = false; let lastT = 0; let quietSince = 0; let phase = 'closed'; /* closed, opening, open, closing */ const stir = []; function wake() { if (running) return; running = true; lastT = performance.now(); quietSince = lastT; requestAnimationFrame(frame); } function frame(now) { const dt = Math.min((now - lastT) / 1000, 1 / 30); lastT = now; if (!gl || !vel) { running = false; return; } clock += dt; schedule(dt); if (phase === 'opening' && jetsOn > 0) jets(dt, jetsOn); while (stir.length) { const [x, y, dx, dy, k] = stir.shift(); splat(vel, x, y, [dx, dy], 0.0012); if (k > 0) splat(ink, x, y, [0.04 * k, 0.16 * k], 0.0014); } simulate(dt); show(); /* every few frames, how covered each link is */ if (phase === 'opening' || phase === 'open') readCover(); if (phase === 'closed') { running = false; return; } /* open and left alone, the ink slows down and then holds still: the frames stop */ if (phase === 'open' && now - quietSince > 3800 && (allUp || now - quietSince > 9000)) { running = false; return; } requestAnimationFrame(frame); } /* the opening and the closing move in the simulation's own time, a step at a time: on a slow device that runs fewer steps, the source and the pull never run ahead of the ink */ let phaseT = 0; let filled = false; /* the ink has reached every corner of the frame */ let filledAt = -1; const easeIn = (t) => t * t; const easeOut = (t) => 1 - (1 - t) * (1 - t); const inOut = (t) => (t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t)); function schedule(dt) { if (phase !== 'opening' && phase !== 'closing') return; phaseT += dt; const t = phaseT; if (phase === 'opening') { /* the source: a frame height and a half a second at its strongest, easing off as the frame fills; it never drops below a third until the ink has reached every corner, then it lets go */ const k = 1.5 * (t < 0.25 ? easeOut(t / 0.25) : 1 - inOut(clamp((t - 0.25) / OPEN, 0, 1))); if (filled && filledAt < 0) filledAt = t; const letGo = filledAt < 0 ? 1 : 1 - clamp((t - filledAt) / 0.6, 0, 1); fx.out = Math.max(k, 0.5 * letGo) * (filledAt < 0 ? 1 : letGo); fx.grow = 2.4 * easeIn(clamp((t - OPEN * 0.15) / (OPEN * 0.6), 0, 1)); jetsOn = 1 - easeIn(clamp(t / (OPEN * 0.85), 0, 1)); if ((filledAt >= 0 && t - filledAt > 0.6 && t >= OPEN * 0.8) || t > OPEN * 4) { phase = 'open'; fx.out = 0; jetsOn = 0; quietSince = performance.now(); } } else { fx.grow = Math.max(0, fx.grow - dt * 12); /* the pull draws the ink into a spiral towards the button, and the edge it is wiped beyond closes in */ fx.inn = 0.5 * easeOut(clamp(t / (CLOSE * 0.4), 0, 1)); fx.fade = 26; fx.reach = 1.9 * (1 - inOut(clamp(t / CLOSE, 0, 1))) - 0.15; if (t >= CLOSE + 0.2) { phase = 'closed'; ink.clear(); vel.clear(); pressure.clear(); Object.assign(fx, { out: 0, inn: 0, grow: 0, fade: 0, reach: 9 }); } } } /* the links surface where the ink covers all of them (three points along each word) */ /* the tiny picture is read back every few frames: 48 by 32 pixels, a few kilobytes */ let allUp = false; let readTick = 0; function readCover() { if (++readTick % 4) return; gl.bindFramebuffer(gl.FRAMEBUFFER, cover.fbo); gl.readPixels(0, 0, 48, 32, gl.RGBA, gl.UNSIGNED_BYTE, coverPx); let least = 255; for (let j = 1; j < 31; j++) for (let i = 1; i < 47; i++) least = Math.min(least, coverPx[(j * 48 + i) * 4]); filled = least > 245; const pr = panel.getBoundingClientRect(); const at = (x, y) => { const i = clamp(Math.floor((x / W) * 48), 0, 47); const j = clamp(Math.floor((1 - y / H) * 32), 0, 31); return coverPx[(j * 48 + i) * 4] / 255; }; allUp = true; items.forEach((el) => { const r = (el.querySelector('.item__word') || el).getBoundingClientRect(); const y = r.top + r.height / 2 - pr.top; const x0 = r.left - pr.left; const k = Math.min(at(x0 + 4, y), at(x0 + r.width / 2, y), at(x0 + r.width - 4, y)); const v = smooth(0.62, 0.86, k); if (v < 0.999) allUp = false; el.style.opacity = v.toFixed(3); el.style.transform = `translateY(${((1 - v) * 18).toFixed(1)}px)`; }); } /* ---------------------------------------------------------------- opening and closing */ let isOpen = false; let jetsOn = 0; let tl = null; /* the fades, with reduced motion or without WebGL */ function roll(text) { if (REDUCED) { word.textContent = text; return; } gsap.timeline({ overwrite: true }) .to(word, { yPercent: -110, duration: 0.18, ease: 'power2.in' }) .add(() => { word.textContent = text; }) .fromTo(word, { yPercent: 110 }, { yPercent: 0, duration: 0.4, ease: 'power3.out' }); } function setOpen(v) { if (v === isOpen) return; isOpen = v; toggle.setAttribute('aria-expanded', String(v)); nameEl.textContent = v ? 'Close the menu' : 'Open the menu'; menu.inert = !v; roll(v ? 'Close' : 'Menu'); if (!gl) { if (tl) tl.kill(); /* reduced motion, or no WebGL: a still wash of ink fades in, the links fade in after it */ tl = gsap.timeline(); if (v) { tl.to(still, { opacity: 1, duration: 0.45, ease: 'power1.out' }) .to(items, { opacity: 1, duration: 0.4, stagger: 0.05, ease: 'power1.out' }, 0.25); } else { tl.to(items, { opacity: 0, duration: 0.18 }) .to(still, { opacity: 0, duration: 0.4, ease: 'power1.in' }, 0.1); } return; } size(); phaseT = 0; filled = false; filledAt = -1; if (v) { phase = 'opening'; jetT = 0; gsap.killTweensOf(items); Object.assign(fx, { out: 0, inn: 0, grow: 0, fade: 0, reach: 9 }); } else { phase = 'closing'; fx.out = 0; /* the links go under first, then the ink is drawn back into the button and fades */ gsap.to(items, { opacity: 0, duration: 0.2, ease: 'power2.in', overwrite: true }); } wake(); } toggle.addEventListener('click', () => setOpen(!isOpen)); addEventListener('keydown', (e) => { if (e.key !== 'Escape' || !isOpen) return; setOpen(false); toggle.focus(); }); /* a link chosen: it becomes the page and the menu closes. The focus goes back to the button only after a choice made with the keyboard */ let keys = false; addEventListener('keydown', () => { keys = true; }, true); addEventListener('pointerdown', () => { keys = false; }, true); links.forEach((a) => { a.addEventListener('click', (e) => { e.preventDefault(); links.forEach((b) => b.removeAttribute('aria-current')); a.setAttribute('aria-current', 'page'); gsap.delayedCall(0.35, () => { setOpen(false); if (keys) toggle.focus({ preventScroll: true }); }); }); }); menu.querySelectorAll('.menu__foot a').forEach((a) => a.addEventListener('click', (e) => e.preventDefault())); /* the pointer stirs the open menu: its movement goes into the fluid, with a thread of orange when it is quick */ let lastP = null; panel.addEventListener('pointermove', (e) => { if (!gl || !isOpen || !STIR) return; const r = panel.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; const y = 1 - (e.clientY - r.top) / r.height; if (lastP) { const cellsPerPx = Math.max(vel.w, vel.h) / Math.max(W, H); const dx = (x - lastP[0]) * W * cellsPerPx; const dy = (y - lastP[1]) * H * cellsPerPx; const sp = Math.hypot(dx, dy); if (sp > 0.05) stir.push([x, y, dx * 22 * STIR, dy * 22 * STIR, clamp((sp - 1.2) / 6, 0, 1)]); if (stir.length > 8) stir.shift(); } lastP = [x, y]; quietSince = performance.now(); wake(); }); panel.addEventListener('pointerleave', () => { lastP = null; }); /* ---------------------------------------------------------------- it starts */ if (gl) { try { setup(); } catch (e) { gl = null; } } if (!gl) panel.classList.add('is-still'); size(); new ResizeObserver(() => size()).observe(panel); document.fonts.ready.then(size); })();