Personal Website, vers. 1 (pushed far to late)

client/js/fluid.js

@@ -0,0 +1,195 @@
+// The hero background: the five stripes of the genderfluid flag, bent by layered noise.
+
+const vertexSource = `
+attribute vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragmentSource = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+uniform vec2 resolution;
+uniform float time;
+uniform vec2 pointer;
+
+vec3 stripe(float i) {
+  if (i < 0.5) return vec3(1.0, 0.463, 0.643);
+  if (i < 1.5) return vec3(0.88, 0.85, 0.92);
+  if (i < 2.5) return vec3(0.753, 0.067, 0.843);
+  if (i < 3.5) return vec3(0.05, 0.04, 0.08);
+  return vec3(0.184, 0.235, 0.745);
+}
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 4; i++) {
+    value += amp * noise(p);
+    p = p * 2.02 + vec2(1.7, 9.2);
+    amp *= 0.5;
+  }
+  return value;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution;
+  vec2 p = uv * vec2(resolution.x / resolution.y, 1.0);
+  float t = time * 0.035;
+
+  vec2 q = vec2(fbm(p * 0.9 + vec2(0.0, t)), fbm(p * 0.9 + vec2(5.2, -t)));
+  vec2 r = vec2(
+    fbm(p * 0.8 + 2.2 * q + vec2(1.7, 9.2) + t * 0.6),
+    fbm(p * 0.8 + 2.2 * q + vec2(8.3, 2.8) - t * 0.4)
+  );
+
+  float d = distance(uv, pointer);
+  float bend = 0.1 * exp(-d * d * 14.0);
+
+  float y = uv.y + (r.y - 0.5) * 0.9 + (q.x - 0.5) * 0.4 + bend;
+  float s = clamp(1.0 - y, 0.0, 0.9999) * 5.0;
+  float i = floor(s);
+  float f = fract(s);
+  vec3 col = mix(stripe(i), stripe(min(i + 1.0, 4.0)), smoothstep(0.3, 1.0, f));
+
+  col *= 0.55 + 0.45 * smoothstep(0.15, 0.85, r.x);
+  col = mix(vec3(0.047, 0.039, 0.071), col, 0.8);
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.warn(gl.getShaderInfoLog(shader));
+    return null;
+  }
+  return shader;
+}
+
+export function initFluid(canvas) {
+  const gl = canvas.getContext('webgl', { antialias: false, depth: false, powerPreference: 'low-power' });
+  if (!gl) return;
+
+  const vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  if (!vertex || !fragment) return;
+
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+  gl.useProgram(program);
+
+  // one triangle that covers the whole viewport
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const position = gl.getAttribLocation(program, 'position');
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+
+  const uniforms = {
+    resolution: gl.getUniformLocation(program, 'resolution'),
+    time: gl.getUniformLocation(program, 'time'),
+    pointer: gl.getUniformLocation(program, 'pointer'),
+  };
+
+  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
+  const finePointer = matchMedia('(pointer: fine)').matches;
+  // The noise is soft anyway, rendering at a fraction of the size is barely visible and saves a lot
+  const scale = Math.min(devicePixelRatio || 1, 2) * (finePointer ? 0.5 : 0.35);
+  const offset = Math.random() * 200;
+  const pointer = { x: 0.7, y: 0.6, targetX: 0.7, targetY: 0.6 };
+
+  let visible = true;
+  let frame = 0;
+  let start = performance.now();
+
+  function resize() {
+    const width = Math.max(1, Math.round(canvas.clientWidth * scale));
+    const height = Math.max(1, Math.round(canvas.clientHeight * scale));
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      gl.viewport(0, 0, width, height);
+    }
+  }
+
+  function draw(now) {
+    resize();
+    pointer.x += (pointer.targetX - pointer.x) * 0.04;
+    pointer.y += (pointer.targetY - pointer.y) * 0.04;
+    gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
+    gl.uniform1f(uniforms.time, offset + (now - start) / 1000);
+    gl.uniform2f(uniforms.pointer, pointer.x, pointer.y);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+
+  const animated = () => !reducedMotion.matches;
+
+  function loop(now) {
+    frame = 0;
+    if (!visible || document.hidden || !animated()) return;
+    draw(now);
+    frame = requestAnimationFrame(loop);
+  }
+
+  function play() {
+    if (!frame && visible && !document.hidden && animated()) frame = requestAnimationFrame(loop);
+  }
+
+  draw(start);
+  canvas.classList.add('is-ready');
+
+  new ResizeObserver(() => {
+    if (!animated()) draw(start);
+  }).observe(canvas);
+
+  new IntersectionObserver(([entry]) => {
+    visible = entry.isIntersecting;
+    play();
+  }).observe(canvas);
+
+  document.addEventListener('visibilitychange', play);
+  reducedMotion.addEventListener('change', () => {
+    start = performance.now();
+    play();
+  });
+
+  if (finePointer) {
+    addEventListener(
+      'pointermove',
+      (event) => {
+        const rect = canvas.getBoundingClientRect();
+        pointer.targetX = (event.clientX - rect.left) / rect.width;
+        pointer.targetY = 1 - (event.clientY - rect.top) / rect.height;
+      },
+      { passive: true },
+    );
+  }
+
+  play();
+}