@craftedstudios/avatars 0.0.0-stage → 1.0.0

package/src/renderer.js

@@ -0,0 +1,403 @@
+// One WebGL context for the whole page, shared by every avatar.
+//
+// Browsers allow roughly 16 WebGL contexts per page, so avatars can't each
+// have one. Each avatar is instead a small 2D canvas in the DOM, so it
+// scrolls, clips and layers like an image. Each frame the renderer draws every
+// avatar that needs drawing into tiles of one offscreen WebGL canvas, then
+// copies each tile into its avatar's canvas in the same task.
+//
+// What gets drawn:
+//   - avatars on screen whose effect is animating, up to 32; past that the
+//     rest hold a still frame
+//   - any avatar mid-lean or mid-entrance, at full frame rate
+//   - any avatar that changed (new, updated, resized) once
+// Animating avatars redraw at about 20fps while nothing is leaning; the
+// effects drift slowly enough that it doesn't show. The loop stops entirely
+// when the tab is hidden or nothing on screen needs drawing.
+
+import { VERT, FRAG } from './shader.js';
+import { parseColor as parseCss, shaderColors } from './color.js';
+import * as goo from './goo.js';
+
+export const MAX_LIVE = 32;
+const ATLAS = 2048;
+const IDLE_MS = 50;
+const ENTER_S = 0.4;
+const SHAPE = { circle: 0, squircle: 1, square: 2 };
+const MODE = { follow: 1, repel: 2, distort: 3, pulse: 4, orbit: 5, turbulence: 6 };
+// Pattern interactions that move with time keep redrawing at full rate while
+// the pointer is acting on them.
+const TIMED = new Set(['distort', 'pulse', 'turbulence']);
+// Scenery's interactions reach about half the pattern from the pointer, so
+// past 1.4 radii from the center there's nothing left to move.
+const WARP_RANGE = 1.4;
+// The shader's branch for each effect. Kept apart from the order in seed.js,
+// which decides what `auto` picks and must not move after 1.0.
+const FX = { linear: 0, thermal: 1, topography: 2, plasma: 3, radial: 4 };
+
+let shared;
+
+// The page's renderer, created on first use. Null without WebGL or a DOM.
+export function getRenderer() {
+  if (shared !== undefined) return shared;
+  shared = typeof document === 'undefined' ? null : new Renderer();
+  if (shared && !shared.gl) shared = null;
+  return shared;
+}
+
+class Renderer {
+  constructor() {
+    this.canvas = document.createElement('canvas');
+    this.items = new Set();
+    this.visible = new Set();
+    this.raf = 0;
+    this.last = 0;
+    this.lastIdle = -Infinity;
+    this.mouse = null;
+    this.lost = false;
+    this.stats = { contexts: 0, frameMs: 0, drawn: 0, live: 0 };
+    if (!this.setup()) { this.gl = null; return; }
+    this.stats.contexts = 1;
+
+    this.canvas.addEventListener('webglcontextlost', (e) => { e.preventDefault(); this.lost = true; });
+    this.canvas.addEventListener('webglcontextrestored', () => {
+      this.lost = false;
+      if (!this.setup()) return;
+      for (const it of this.items) it.dirty = true;
+      this.wake();
+    });
+
+    this.reducedQuery = matchMedia('(prefers-reduced-motion: reduce)');
+    this.reduced = this.reducedQuery.matches;
+    this.reducedQuery.addEventListener?.('change', (e) => {
+      this.reduced = e.matches;
+      for (const it of this.items) { it.dirty = true; it.enter = 1; Object.assign(it.drop, { x: 0, y: 0, vx: 0, vy: 0 }); }
+      this.wake();
+    });
+
+    this.io = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        const it = e.target.__craftedAvatar;
+        if (!it) continue;
+        if (e.isIntersecting) this.visible.add(it); else this.visible.delete(it);
+      }
+      this.wake();
+    }, { rootMargin: '64px' });
+
+    addEventListener('pointermove', (e) => {
+      if (e.pointerType !== 'mouse') { this.mouse = null; return; }
+      this.mouse = [e.clientX, e.clientY];
+      this.wake();
+    }, { passive: true });
+    document.documentElement.addEventListener('mouseleave', () => { this.mouse = null; this.wake(); });
+    document.addEventListener('visibilitychange', () => this.wake());
+  }
+
+  setup() {
+    const gl = this.canvas.getContext('webgl', {
+      alpha: true, premultipliedAlpha: true, antialias: false, depth: false, stencil: false,
+      preserveDrawingBuffer: false, powerPreference: 'low-power',
+    });
+    if (!gl) return false;
+    const sh = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      return gl.getShaderParameter(s, gl.COMPILE_STATUS) || gl.isContextLost() ? s : null;
+    };
+    const vs = sh(gl.VERTEX_SHADER, VERT), fs = sh(gl.FRAGMENT_SHADER, FRAG);
+    if (!vs || !fs) return false;
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS) && !gl.isContextLost()) return false;
+    gl.useProgram(prog);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, 'p');
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    gl.disable(gl.BLEND);
+    this.max = Math.min(ATLAS, ...gl.getParameter(gl.MAX_VIEWPORT_DIMS));
+    this.U = {};
+    for (const n of ['uTile', 'uC', 'uE', 'uR', 'uDropR', 'uGoo', 'uBulge', 'uShape', 'uRing', 'uRingColor', 'uIn', 'uFx', 'uCol1', 'uCol2', 'uCol3', 'uCol4', 'uT', 'uGrain', 'uGrainCell', 'uAngle', 'uLayout', 'uWarp', 'uScale', 'uMouse', 'uMouseAct', 'uMode'])
+      this.U[n] = gl.getUniformLocation(prog, n);
+    this.gl = gl;
+    return true;
+  }
+
+  add(it) {
+    this.items.add(it);
+    it.host.__craftedAvatar = it;
+    this.io.observe(it.host);
+    this.wake();
+  }
+
+  remove(it) {
+    this.items.delete(it);
+    this.visible.delete(it);
+    this.io.unobserve(it.host);
+    delete it.host.__craftedAvatar;
+  }
+
+  wake() {
+    if (!this.raf && document.visibilityState === 'visible') this.raf = requestAnimationFrame((t) => this.frame(t));
+  }
+
+  frame(now) {
+    this.raf = 0;
+    const dt = this.last ? Math.min(0.1, (now - this.last) / 1000) : 1 / 60;
+    this.last = now;
+    if (this.lost || document.visibilityState !== 'visible') { this.last = 0; return; }
+    const start = performance.now();
+    const dpr = Math.min(globalThis.devicePixelRatio || 1, 2);
+    const animate = !this.reduced;
+
+    // Leans and entrances first: they decide whether this is a full-rate frame.
+    const draw = new Set();
+    const live = [];
+    let busy = false;
+    // Only the avatar nearest the pointer reaches for it. When several are in
+    // range, as on a wall or in a stack, all of them dripping toward one
+    // cursor reads as noise.
+    let nearest = null, nearestK = Infinity, ndx = 0, ndy = 0;
+    if (this.mouse && animate) {
+      for (const it of this.visible) {
+        if (it.o.interaction !== 'goo' || !it.host.isConnected) continue;
+        const b = it.host.getBoundingClientRect();
+        const dx = this.mouse[0] - (b.left + b.width / 2), dy = this.mouse[1] - (b.top + b.height / 2);
+        const k = Math.hypot(dx, dy) / (it.o.size / 2);
+        if (k < it.goo.range && k < nearestK) { nearest = it; nearestK = k; ndx = dx; ndy = dy; }
+      }
+    }
+    for (const it of this.visible) {
+      if (!it.host.isConnected) continue;
+      if (it.dpr !== dpr) it.resize(dpr);
+      const o = it.o, r = o.size / 2;
+      const [tx, ty] = it === nearest ? goo.target(ndx, ndy, r, it.goo) : [0, 0];
+      const d = it.drop;
+      if (!goo.settled(d, tx, ty, r)) { goo.step(d, tx, ty, dt, it.goo); it.moving = true; }
+      else if (it.moving) { d.x = tx; d.y = ty; d.vx = d.vy = 0; it.moving = false; draw.add(it); }
+      if (MODE[o.interaction] && this.warp(it, dt, animate)) it.moving = true;
+      if (it.enter < 1) { it.enter = animate ? Math.min(1, it.enter + dt / ENTER_S) : 1; it.moving = true; }
+      if (it.moving) { busy = true; draw.add(it); }
+      if (it.dirty) draw.add(it);
+      if (animate && o.motion !== 'still') live.push(it);
+    }
+
+    // Past the cap, the largest keep moving and the rest hold their frame.
+    if (live.length > MAX_LIVE) live.sort((a, b) => (b.moving - a.moving) || (b.o.size - a.o.size) || (a.order - b.order));
+    live.length = Math.min(live.length, MAX_LIVE);
+    // The ones leaning or entering are already drawn every frame; the rest
+    // keep to the idle rate.
+    if (live.length && now - this.lastIdle >= IDLE_MS) {
+      this.lastIdle = now;
+      for (const it of live) draw.add(it);
+    }
+
+    if (draw.size) this.render([...draw], now / 1000);
+    this.stats.frameMs = performance.now() - start;
+    this.stats.drawn = draw.size;
+    this.stats.live = live.length;
+
+    if (busy || live.length || [...this.visible].some((it) => it.dirty)) this.wake();
+    else this.last = 0;
+  }
+
+  // Eases a pattern interaction in while the pointer is over or near the
+  // avatar and out when it leaves, and follows the pointer smoothly rather
+  // than snapping to it. Returns whether it still needs drawing.
+  warp(it, dt, animate) {
+    const w = it.warp, r = it.o.size / 2;
+    let target = 0, dx = w.x, dy = w.y;
+    if (this.mouse && animate) {
+      const b = it.host.getBoundingClientRect();
+      const x = this.mouse[0] - (b.left + b.width / 2), y = this.mouse[1] - (b.top + b.height / 2);
+      if (Math.hypot(x, y) < WARP_RANGE * r) { target = 1; dx = x; dy = y; }
+    }
+    const follow = w.act < 0.01 ? 1 : 1 - Math.exp(-dt * 14);
+    const mx = dx - w.x, my = dy - w.y;
+    w.x += mx * follow;
+    w.y += my * follow;
+    w.act += (target - w.act) * (1 - Math.exp(-dt * (target ? 8 : 4)));
+    if (!target && w.act < 0.003) w.act = 0;
+    const easing = Math.abs(target - w.act) > 0.003 || Math.abs(mx) + Math.abs(my) > 0.05;
+    return easing || (w.act > 0 && TIMED.has(it.o.interaction));
+  }
+
+  // Draws items into tiles of the shared canvas, a shelf at a time, and copies
+  // each tile out before the canvas is reused.
+  render(items, seconds) {
+    items.sort((a, b) => b.dev - a.dev);
+    let batch = [], x = 0, y = 0, shelf = 0, width = 0;
+    const flush = () => {
+      if (!batch.length) return;
+      this.drawBatch(batch, width, y + shelf, seconds);
+      batch = []; x = 0; y = 0; shelf = 0; width = 0;
+    };
+    for (const it of items) {
+      const s = Math.min(it.dev, this.max);
+      if (x + s > this.max) { x = 0; y += shelf; shelf = 0; }
+      if (y + s > this.max) flush();
+      batch.push({ it, x, y, s });
+      x += s; width = Math.max(width, x); shelf = Math.max(shelf, s);
+    }
+    flush();
+  }
+
+  ensure(w, h) {
+    const c = this.canvas, step = 256;
+    const W = Math.min(this.max, Math.max(c.width, Math.ceil(w / step) * step));
+    const H = Math.min(this.max, Math.max(c.height, Math.ceil(h / step) * step));
+    if (c.width !== W || c.height !== H) { c.width = W; c.height = H; }
+  }
+
+  drawBatch(batch, w, h, seconds) {
+    const { gl, U } = this;
+    this.ensure(w, h);
+    const H = this.canvas.height;
+    for (const { it, x, y, s } of batch) {
+      const p = it.params(seconds, s);
+      gl.viewport(x, H - y - s, s, s);
+      gl.uniform4f(U.uTile, x, H - y - s, s, s);
+      gl.uniform2f(U.uC, p.cx, p.cy);
+      gl.uniform2f(U.uE, p.ex, p.ey);
+      gl.uniform1f(U.uR, p.r);
+      gl.uniform1f(U.uDropR, p.dropR);
+      gl.uniform1f(U.uGoo, p.goo);
+      gl.uniform1f(U.uBulge, p.bulge);
+      gl.uniform1f(U.uWarp, p.warp);
+      gl.uniform2f(U.uMouse, p.mx, p.my);
+      gl.uniform1f(U.uMouseAct, p.mouseAct);
+      gl.uniform1f(U.uMode, p.mode);
+      gl.uniform1f(U.uScale, p.scale);
+      gl.uniform1f(U.uShape, SHAPE[p.shape]);
+      gl.uniform1f(U.uRing, p.ring);
+      gl.uniform3fv(U.uRingColor, p.ringColor);
+      gl.uniform1f(U.uIn, p.enter);
+      gl.uniform1f(U.uFx, FX[p.effect]);
+      gl.uniform1f(U.uAngle, p.angle);
+      gl.uniform4fv(U.uLayout, p.layout);
+      p.colors.forEach((c, i) => gl.uniform3fv(U[`uCol${i + 1}`], c));
+      gl.uniform1f(U.uT, p.t);
+      gl.uniform1f(U.uGrain, p.grain);
+      gl.uniform1f(U.uGrainCell, Math.max(1, (2 * p.r) / 540));
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    for (const { it, x, y, s } of batch) it.blit(this.canvas, x, y, s);
+  }
+}
+
+// What an avatar needs from the renderer: its draw parameters, and somewhere
+// to put the pixels. `Item` is the live one in the DOM; still images build a
+// throwaway target of their own.
+export class Item {
+  constructor(host, o, { enter = false } = {}) {
+    this.host = host;
+    this.order = Item.count = (Item.count || 0) + 1;
+    this.drop = { x: 0, y: 0, vx: 0, vy: 0 };
+    this.warp = { x: 0, y: 0, act: 0 };
+    this.enter = enter ? 0 : 1;
+    this.moving = false;
+    this.dirty = true;
+    this.canvas = document.createElement('canvas');
+    this.canvas.setAttribute('aria-hidden', 'true');
+    this.ctx = this.canvas.getContext('2d');
+    this.set(o);
+  }
+
+  set(o) {
+    const prev = this.o;
+    this.o = o;
+    this.colors = shaderColors(o.palette);
+    this.goo = goo.params(o.stretch, o.thickness);
+    this.ringColor = parseColor(o.ringColor);
+    // A new interaction starts from rest, not from wherever the last one was.
+    if (prev && prev.interaction !== o.interaction) {
+      Object.assign(this.drop, { x: 0, y: 0, vx: 0, vy: 0 });
+      Object.assign(this.warp, { x: 0, y: 0, act: 0 });
+    }
+    if (!prev || prev.size !== o.size || (prev.interaction === 'goo') !== (o.interaction === 'goo')) this.resize(this.dpr || Math.min(globalThis.devicePixelRatio || 1, 2));
+    this.dirty = true;
+  }
+
+  // With goo, the canvas reaches past the box on every side to leave room for
+  // the lean. Every other interaction stays inside the outline.
+  resize(dpr) {
+    this.dpr = dpr;
+    const pad = this.o.interaction === 'goo' ? goo.PAD * this.o.size / 2 : 0;
+    const css = this.o.size + 2 * pad;
+    this.pad = pad;
+    this.dev = Math.max(1, Math.round(css * dpr));
+    this.canvas.width = this.canvas.height = this.dev;
+    Object.assign(this.canvas.style, {
+      position: 'absolute', left: `${-pad}px`, top: `${-pad}px`, width: `${css}px`, height: `${css}px`,
+      pointerEvents: 'none', display: 'block',
+    });
+    this.dirty = true;
+  }
+
+  // Each avatar keeps its own clock, starting at zero, so a speed change picks
+  // up from where the animation is rather than jumping to where the new speed
+  // would have put it. Paused, the clock stops where it is, so turning motion
+  // off holds the frame on screen and turning it on resumes from there.
+  clock(seconds, running) {
+    if (running && this.running && this.lastSeconds !== undefined) this.time += Math.max(0, seconds - this.lastSeconds) * this.o.speed;
+    this.time ??= 0;
+    this.running = running;
+    this.lastSeconds = seconds;
+    return this.time;
+  }
+
+  params(seconds, s) {
+    const o = this.o, k = s / this.dev;
+    const r = (o.size / 2) * this.dpr * k;
+    const c = (this.pad + o.size / 2) * this.dpr * k;
+    const ex = this.drop.x * this.dpr * k, ey = this.drop.y * this.dpr * k;
+    const still = o.motion === 'still' || shared?.reduced;
+    return {
+      cx: c, cy: c, ex: c + ex, ey: c + ey, r,
+      dropR: goo.dropRadius(this.drop, o.size / 2, this.goo) * this.dpr * k,
+      goo: this.goo.goo, bulge: this.goo.bulge, warp: o.distortion * 2, scale: o.scale,
+      mx: c + this.warp.x * this.dpr * k, my: c + this.warp.y * this.dpr * k,
+      mouseAct: MODE[o.interaction] ? this.warp.act : 0, mode: MODE[o.interaction] || 0,
+      shape: o.shape, ring: o.ring * this.dpr * k, ringColor: this.ringColor,
+      enter: easeOut(this.enter), effect: o.traits.effect, colors: this.colors,
+      t: this.clock(seconds, !still) + o.traits.phase, grain: o.grain, angle: angleOf(o.traits), layout: o.traits.layout,
+    };
+  }
+
+  blit(src, x, y, s) {
+    const ctx = this.ctx;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.drawImage(src, x, y, s, s, 0, 0, this.dev, this.dev);
+    this.dirty = false;
+    // The live avatar has its first frame; the gradient underneath is no
+    // longer needed and would show through during the lean.
+    if (!this.shown) { this.shown = true; this.hideFallback(); }
+  }
+
+  hideFallback() {
+    this.host.style.background = 'none';
+    this.host.style.boxShadow = 'none';
+  }
+}
+
+// A direction per seed, from its phase, spread by the golden angle.
+export const angleOf = (traits) => (traits.phase * 2.39996) % (Math.PI * 2);
+
+const easeOut = (t) => 1 - Math.pow(1 - t, 3);
+
+let probe;
+export function parseColor(c) {
+  const known = parseCss(c);
+  if (known) return known;
+  // Anything else CSS understands, such as a named color, read back through a
+  // 1px canvas.
+  probe ||= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  probe.clearRect(0, 0, 1, 1);
+  probe.fillStyle = '#fff';
+  probe.fillStyle = c;
+  probe.fillRect(0, 0, 1, 1);
+  const [r, g, b] = probe.getImageData(0, 0, 1, 1).data;
+  return [r / 255, g / 255, b / 255];
+}

package/src/seed.js

@@ -0,0 +1,67 @@
+// Everything an avatar looks like comes from one 32-bit hash of its seed.
+// Once 1.0 ships this mapping is frozen: changing any line here changes every
+// user's avatar, so it can only change in a new major version. The snapshot in
+// test/seed.test.js fails if it moves.
+
+// `auto` picks from these five, and only ever these five. Effects added later
+// are reachable only as an explicit `effect`, so they never change an existing
+// avatar.
+export const AUTO_EFFECTS = ['linear', 'thermal', 'topography', 'plasma', 'radial'];
+export const EFFECTS = [...AUTO_EFFECTS];
+
+import { effectColors, hex, scramble } from './color.js';
+
+const encoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null;
+
+export function fnv1a32(str) {
+  const bytes = encoder ? encoder.encode(str) : utf8(str);
+  let h = 0x811c9dc5;
+  for (let i = 0; i < bytes.length; i++) {
+    h ^= bytes[i];
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+// For runtimes without TextEncoder. Same bytes, so the same hash.
+function utf8(str) {
+  const out = [];
+  for (const ch of str) {
+    let c = ch.codePointAt(0);
+    if (c < 0x80) out.push(c);
+    else if (c < 0x800) out.push(0xc0 | (c >> 6), 0x80 | (c & 63));
+    else if (c < 0x10000) out.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 63), 0x80 | (c & 63));
+    else out.push(0xf0 | (c >> 18), 0x80 | ((c >> 12) & 63), 0x80 | ((c >> 6) & 63), 0x80 | (c & 63));
+  }
+  return out;
+}
+
+// Where in its pattern a seed sits: an offset of up to a fifth of the avatar
+// each way, a turn, and a zoom of 0.85 to 1.2, so two seeds of one effect
+// don't share a layout.
+function layoutOf(w) {
+  const unit = (at) => ((w >>> at) & 255) / 255;
+  return [(unit(0) - 0.5) * 0.4, (unit(8) - 0.5) * 0.4, unit(16) * Math.PI * 2, 0.85 + unit(24) * 0.35];
+}
+
+// The hash is scrambled first: FNV alone barely moves its upper bits for
+// seeds that differ only near the start, so emails on the same domain landed
+// on nearly the same colors.
+//
+// What an avatar is: its effect, its hue, its tone (the rest of its colors,
+// see family() in color.js), its layout, and its phase (seconds added to the
+// clock so no two avatars move in step), and the colors the seed gives that
+// effect, in the effect's own roles. An `effect` override wins.
+export function traits(seed, { effect = 'auto' } = {}) {
+  const h = scramble(fnv1a32(String(seed ?? '')));
+  return {
+    effect: EFFECTS.includes(effect) ? effect : AUTO_EFFECTS[h % 5],
+    hue: (h >>> 3) % 360,
+    tone: scramble(h ^ 0x9e3779b9),
+    layout: layoutOf(scramble(h ^ 0x27d4eb2f)),
+    phase: ((h >>> 12) % 997) * 0.1,
+    get colors() {
+      return effectColors(this.effect, this.hue, undefined, this.tone).map(hex);
+    },
+  };
+}