/* Wind chime A wind chime hangs from the porch beam of a seaside house: metal tubes on cords round a wooden ring, a wooden clapper in the middle and, under it, a little wooden boat that catches the wind. Every tube and the clapper are pendulums. Brushing them with the pointer sets them swinging: the tubes knock the clapper and each other, and every knock sends out sound arcs that widen and fade. The sea wind blows in gusts on its own and pushes the boat, so the chime plays by itself; a click sends a strong gust. Silent: the sound is drawn. */ /* ---- values to change ---- */ const TUBES = 7; /* how many metal tubes hang round the ring */ const SWING = 1; /* how hard the pointer pushes the tubes */ const GUSTS = 1; /* how strong the sea wind blows on its own (0 = still air) */ const GUST_EVERY = 3; /* seconds of calm, more or less, between two gusts */ const DAMPING = 1; /* how fast the chime calms down: 0.3 keeps it swinging for ages */ const BOUNCE = 0.6; /* how springy a knock is: 0.9 makes the clapper bounce like a ball */ const WAVES = 3; /* how many sound arcs leave a tube at every knock */ const CLICK_GUST = 2.6; /* how strong the gust is when you click */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const TOUCH = matchMedia('(hover: none)').matches; const $ = (s) => document.querySelector(s); const stage = $('[data-stage]'); const canvas = $('[data-chime]'); const ctx = canvas.getContext('2d'); const beam = $('[data-beam]'); const copy = $('[data-copy]'); const gustBtn = $('[data-gust]'); const wordBox = $('[data-beaufort]'); const TAU = Math.PI * 2; const STEP = 1 / 120; /* the physics runs at a fixed 120 steps a second */ const TILT = 0.3; /* how much from above we see the chime: the ring is an ellipse this flat */ const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const rand = (a, b) => a + Math.random() * (b - a); if (TOUCH) $('[data-hint]').textContent = 'Drag a finger through the tubes. Tap for a gust.'; /* ---------------------------------------------------------------- colours */ const css = getComputedStyle(document.documentElement); function rgb(name) { const c = document.createElement('canvas').getContext('2d'); c.fillStyle = '#000'; c.fillStyle = css.getPropertyValue(name).trim() || '#888'; const h = c.fillStyle; if (h[0] === '#') return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)]; const m = h.match(/[\d.]+/g) || [128, 128, 128]; return [+m[0], +m[1], +m[2]]; } const mix = (a, b, k) => [0, 1, 2].map((i) => Math.round(a[i] + (b[i] - a[i]) * k)); const str = (c, a = 1) => `rgba(${c[0]},${c[1]},${c[2]},${a})`; const WHITE = [255, 255, 255]; const BLACK = [0, 0, 0]; const COL = { tube: rgb('--tube'), warm: rgb('--tube-warm'), wood: rgb('--wood'), cord: rgb('--cord'), wave: rgb('--wave'), sail: rgb('--sail'), stripe: rgb('--stripe'), hull: rgb('--hull'), streak: rgb('--streak'), shadow: rgb('--shadow'), beam: rgb('--beam-dark') }; /* ---------------------------------------------------------------- the bodies Every body is a pendulum hung from the ring. Its state is how far it has swung (dx, dz) measured at the height of the clapper, sideways (x) and towards you (z), and how fast. */ const N = clamp(Math.round(TUBES), 3, 12); const tubes = []; for (let i = 0; i < N; i++) { tubes.push({ i, phi: 0, px: 0, pz: 0, L: 0, w2: 0, dx: 0, dz: 0, vx: 0, vz: 0, ring: 0, shine: 0, hover: 0, last: -9, near: false, warm: N > 4 && i % 3 === 1 }); } const clap = { dx: 0, dz: 0, vx: 0, vz: 0, ax: 0, w2: 0, ring: 0 }; const boat = { rel: 0, relv: 0, yaw: 0.35, yawv: 0 }; const wind = { x: 0.15 * GUSTS, z: 0 }; const rig = { y: 0 }; /* the whole porch drops in on arrival */ const waves = []; const streaks = []; let W = 0, H = 0, dpr = 1, S = 100, x0 = 0, y0 = 0, hookY = 0, RR = 0; let Rr = 0, rt = 0, rc = 0, sl = 0, Lc = 0, G = 0, th = 0, boatLen = 0, boatH = 0; let clock = 0; let acc = 0; function layout() { const sr = stage.getBoundingClientRect(); W = sr.width; H = sr.height; dpr = Math.min(2, devicePixelRatio || 1); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); const beamB = beam.offsetTop + beam.offsetHeight; const cr = copy.getBoundingClientRect(); if (W < 720) { /* on a phone the chime hangs above the copy */ S = clamp((cr.top - sr.top - beamB - 18) / 1.1, 110, W * 0.9); x0 = W / 2; } else { const right = cr.right - sr.left; S = clamp((H - beamB - H * 0.06) / 1.1, 140, (W - right) * 1.3); x0 = right + (W - right) * 0.52; } hookY = beamB; y0 = hookY + 0.17 * S; Rr = 0.17 * S; /* the circle the tubes hang on */ RR = Rr + 0.045 * S; /* the wooden ring */ rt = clamp(0.028 * S, 3.5, 22); /* the radius of a tube */ rc = Rr - rt - 0.04 * S; /* the clapper: a small gap from every tube */ sl = 0.1 * S; /* the cord between the ring and a tube */ Lc = 0.34 * S; /* how far below the ring the clapper hangs */ th = 0.035 * S; /* the thickness of the ring */ G = 15 * S; /* gravity, in the size of the chime: the same swing at every size */ boatLen = 0.25 * S; boatH = 0.2 * S; tubes.forEach((tb) => { tb.phi = (tb.i / N) * TAU - Math.PI * 0.62; tb.px = Math.cos(tb.phi) * Rr; tb.pz = Math.sin(tb.phi) * Rr; tb.L = S * (0.64 - 0.2 * (tb.i / (N - 1))); tb.w2 = G / (sl + 0.6 * tb.L); }); clap.w2 = G / (Lc * 1.55); const bw = RR + 0.12 * S; gustBtn.style.left = x0 - bw + 'px'; gustBtn.style.top = hookY + 'px'; gustBtn.style.width = bw * 2 + 'px'; gustBtn.style.height = 0.17 * S + Lc + boatLen + boatH + 0.06 * S + 'px'; waves.length = 0; } /* the point r px down the cord of a body hung at (px, pz) and swung by (dx, dz) */ function pt(px, pz, dx, dz, r) { const k = r / Lc; return [x0 + px + dx * k, y0 + th + rig.y + (pz + dz * k) * TILT + r]; } /* ---------------------------------------------------------------- one step of physics */ function step(t) { const dt = STEP; const td = 0.5 * DAMPING; const cd = 1.1 * DAMPING; const vmax = 3 * S; const flutter = Math.sin(t * 6.3) * Math.sin(t * 2.1 + 1); for (const tb of tubes) { const swirl = 0.8 + 0.4 * Math.sin(t * 5.3 + tb.i * 1.7); const ax = -tb.w2 * tb.dx - td * tb.vx + wind.x * 0.45 * S * swirl; const az = -tb.w2 * tb.dz - td * tb.vz + wind.z * 0.45 * S * swirl; tb.vx = clamp(tb.vx + ax * dt, -vmax, vmax); tb.vz = clamp(tb.vz + az * dt, -vmax, vmax); tb.dx += tb.vx * dt; tb.dz += tb.vz * dt; tb.ring *= Math.exp(-1.6 * dt); tb.shine *= Math.exp(-3 * dt); } /* the wind pushes mostly on the little boat, so on the clapper, and it flutters */ const cax = -clap.w2 * clap.dx - cd * clap.vx + wind.x * S * (1.5 + 1.1 * flutter); const caz = -clap.w2 * clap.dz - cd * clap.vz + wind.z * S * 1.4 + Math.abs(wind.x) * S * 0.7 * Math.sin(t * 4.7); clap.vx = clamp(clap.vx + cax * dt, -vmax, vmax); clap.vz = clamp(clap.vz + caz * dt, -vmax, vmax); clap.dx += clap.vx * dt; clap.dz += clap.vz * dt; clap.ax = cax; clap.ring *= Math.exp(-3 * dt); /* the boat lags behind the clapper on its own cord, and turns to face the wind */ const relA = -(G / (boatLen + boatH * 0.5)) * boat.rel - 2.4 * boat.relv - cax * 0.35 + wind.x * S * 0.5; boat.relv += relA * dt; boat.rel = clamp(boat.rel + boat.relv * dt, -0.12 * S, 0.12 * S); const yawTo = clamp(wind.x * 0.9, -1.4, 1.4) + 0.3 * Math.sin(t * 0.7); boat.yawv += (5 * (yawTo - boat.yaw) - 1.6 * boat.yawv) * dt; boat.yaw += boat.yawv * dt; collide(t); /* a rope has an end: even a storm cannot swing the chime off the porch */ for (const b of tubes) leash(b, 0.3 * S); leash(clap, 0.15 * S); } function leash(b, max) { const d = Math.hypot(b.dx, b.dz); if (d <= max) return; const nx = b.dx / d; const nz = b.dz / d; b.dx = nx * max; b.dz = nz * max; const out = b.vx * nx + b.vz * nz; if (out > 0) { b.vx -= out * nx * 1.4; b.vz -= out * nz * 1.4; } } /* ---------------------------------------------------------------- knocks */ function collide(t) { const e = clamp(BOUNCE, 0, 0.98); const mt = 1; const mc = 1.6; const reach = rt + rc; /* a tube against the clapper, at the clapper's height */ for (const tb of tubes) { let nx = tb.px + tb.dx - clap.dx; let nz = tb.pz + tb.dz - clap.dz; const d = Math.hypot(nx, nz) || 0.001; if (d >= reach) continue; nx /= d; nz /= d; const vrel = (tb.vx - clap.vx) * nx + (tb.vz - clap.vz) * nz; if (vrel < 0) { const J = (-(1 + e) * vrel) / (1 / mt + 1 / mc); tb.vx += (J / mt) * nx; tb.vz += (J / mt) * nz; clap.vx -= (J / mc) * nx; clap.vz -= (J / mc) * nz; hit(tb, -vrel, t, true); } const ov = reach - d; tb.dx += nx * ov * (mc / (mt + mc)); tb.dz += nz * ov * (mc / (mt + mc)); clap.dx -= nx * ov * (mt / (mt + mc)); clap.dz -= nz * ov * (mt / (mt + mc)); } /* two tubes against each other, at the bottom of the shorter one */ for (let i = 0; i < N; i++) { for (let j = i + 1; j < N; j++) { const a = tubes[i]; const b = tubes[j]; const k = (sl + Math.min(a.L, b.L) - rt) / Lc; let nx = a.px + a.dx * k - (b.px + b.dx * k); let nz = a.pz + a.dz * k - (b.pz + b.dz * k); const d = Math.hypot(nx, nz) || 0.001; if (d >= rt * 2) continue; nx /= d; nz /= d; const vrel = k * ((a.vx - b.vx) * nx + (a.vz - b.vz) * nz); if (vrel < 0) { const dv = (-(1 + e) * 0.5 * vrel) / k; a.vx += dv * nx; a.vz += dv * nz; b.vx -= dv * nx; b.vz -= dv * nz; hit(a, -vrel * 0.8, t, false); hit(b, -vrel * 0.8, t, false); } const ov = (rt * 2 - d) / 2 / k; a.dx += nx * ov; a.dz += nz * ov; b.dx -= nx * ov; b.dz -= nz * ov; } } } /* a knock: the tube rings and sends out its sound arcs */ function hit(tb, speed, t, withClapper) { if (speed < 0.035 * S || t - tb.last < 0.08) return; tb.last = t; const s = clamp(speed / (0.55 * S), 0.18, 1); tb.ring = Math.max(tb.ring, s); tb.shine = Math.max(tb.shine, s); if (withClapper) clap.ring = Math.max(clap.ring, s); const [x, y] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl + tb.L * 0.5); waves.push({ x, y, t0: t, s, warm: tb.warm, still: false }); if (waves.length > 90) waves.shift(); } /* with reduced motion the arcs do not travel: they fade in round the tube and fade out */ function stillWaves(tb, t0) { const [x, y] = pt(tb.px, tb.pz, 0, 0, sl + tb.L * 0.5); waves.push({ x, y, t0, s: 0.8, warm: tb.warm, still: true }); if (waves.length > 90) waves.shift(); } /* ---------------------------------------------------------------- the wind */ let gustTl = null; let dir = 1; function gust(peak, d, quick) { if (gustTl) gustTl.kill(); dir = d; gustTl = gsap.timeline({ onComplete: () => schedule() }); gustTl.to(wind, { x: peak * d, z: rand(-0.35, 0.35) * Math.abs(peak), duration: quick ? 0.3 : rand(0.6, 1), ease: quick ? 'power2.out' : 'sine.inOut' }) .to(wind, { x: peak * 0.55 * d, duration: 0.45, ease: 'sine.inOut' }) .to(wind, { x: peak * 0.85 * d, duration: 0.4, ease: 'sine.inOut' }) .to(wind, { x: 0.15 * GUSTS * d, z: 0, duration: rand(1.4, 2), ease: 'sine.inOut' }); } /* the next gust comes after a calm of about GUST_EVERY seconds; a calm is a tween too, so the clock keeps going */ function schedule() { gustTl = gsap.timeline({ onComplete: () => (GUSTS > 0 ? gust(GUSTS * rand(0.7, 1.25), Math.random() < 0.7 ? dir : -dir) : schedule()) }); gustTl.to(wind, { z: 0, duration: Math.max(0.6, GUST_EVERY * rand(0.6, 1.4)), ease: 'none' }); } function bigGust(d) { if (REDUCED) { tubes.forEach((tb, n) => stillWaves(tb, clock + n * 0.08)); return; } gust(CLICK_GUST, d, true); for (let k = 0; k < 9; k++) addStreak(d, rand(0, 0.55) * W); /* the title leans in the gust and springs back */ gsap.timeline() .to(words, { x: 5 * d, skewX: -9 * d, duration: 0.28, ease: 'power2.out', stagger: 0.035 }) .to(words, { x: 0, skewX: 0, duration: 1.3, ease: 'elastic.out(1, 0.32)', stagger: 0.035 }, 0.36); } function addStreak(d, behind) { if (streaks.length > 40) return; const len = Math.max(60, rand(0.06, 0.14) * W); streaks.push({ d, len, x: d > 0 ? -behind : W + len + behind, y: rand(0.08, 0.92) * H, amp: rand(3, 9), ph: rand(0, TAU), a: rand(0.3, 0.6), w: rand(1.2, 2.2), v: rand(0.85, 1.25) }); } function moveStreaks(dt) { const strength = Math.abs(wind.x); if (Math.random() < Math.max(0, strength - 0.3) * 5 * dt) addStreak(Math.sign(wind.x) || 1, 0); for (let k = streaks.length - 1; k >= 0; k--) { const s = streaks[k]; s.x += s.d * W * (0.5 + 0.3 * strength) * s.v * dt; if ((s.d > 0 && s.x - s.len > W) || (s.d < 0 && s.x + s.len < 0)) streaks.splice(k, 1); } } /* the name of the wind on the Beaufort scale, under the copy */ const NAMES = ['calm', 'light air', 'light breeze', 'gentle breeze', 'moderate breeze', 'fresh breeze', 'strong breeze']; let shown = 1; let pending = 1; let pendingFor = 0; let windSmooth = 0.15; function beaufort(dt) { windSmooth += (Math.abs(wind.x) - windSmooth) * Math.min(1, dt * 3); const idx = windSmooth < 0.04 ? 0 : clamp(1 + Math.floor(windSmooth * 2.2), 1, 6); if (idx !== pending) { pending = idx; pendingFor = 0; } else if (idx !== shown) { pendingFor += dt; if (pendingFor > 0.3) showWord(idx); } } function showWord(idx) { shown = idx; const olds = [...wordBox.children]; const el = document.createElement('span'); el.className = 'copy__word'; el.textContent = NAMES[idx]; wordBox.appendChild(el); olds.forEach((o) => { gsap.killTweensOf(o); gsap.to(o, { yPercent: -110, opacity: 0, duration: 0.22, ease: 'power2.in', onComplete: () => o.remove() }); }); gsap.fromTo(el, { yPercent: 110, rotation: 5 }, { yPercent: 0, rotation: 0, duration: 0.65, ease: 'back.out(2.4)' }); } /* ---------------------------------------------------------------- the pointer */ const pointer = { on: false, x: 0, y: 0, lx: 0, ly: 0, fresh: true }; function segDist(px, py, ax, ay, bx, by) { const vx = bx - ax; const vy = by - ay; const u = clamp(((px - ax) * vx + (py - ay) * vy) / (vx * vx + vy * vy || 1), 0, 1); return [Math.hypot(px - ax - vx * u, py - ay - vy * u), u]; } /* the closest the pointer came to a segment along its path in this frame */ function sweep(ax, ay, bx, by) { let best = 1e9; let bu = 0; for (let q = 0; q <= 4; q++) { const f = q / 4; const [d, u] = segDist(pointer.lx + (pointer.x - pointer.lx) * f, pointer.ly + (pointer.y - pointer.ly) * f, ax, ay, bx, by); if (d < best) { best = d; bu = u; } } return [best, bu]; } /* the pointer drags the tubes it passes through: the point it touches takes its speed */ function brush(fdt) { if (!pointer.on || pointer.fresh) return; const mx = pointer.x - pointer.lx; if (Math.abs(mx) < 0.2) return; const pvx = clamp(mx / fdt, -4 * S, 4 * S); const reach = rt + Math.max(6, 0.03 * S); const push = Math.min(1, 0.6 * SWING); const shove = (b, k, z) => { const delta = pvx / k - b.vx; if (delta * pvx <= 0) return; b.vx += delta * push; b.vz += z * Math.abs(delta) * 0.3 * Math.min(1.5, SWING); }; for (const tb of tubes) { const [tx, ty] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl); const [bx, by] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl + tb.L); const [d, u] = sweep(tx, ty, bx, by); if (d > reach) continue; tb.hover = 1; /* the tubes in front are pushed back, into the clapper */ shove(tb, (sl + u * tb.L) / Lc, -Math.sign(tb.pz) * Math.abs(tb.pz) / Rr); } const [cx, cy] = pt(0, 0, clap.dx, clap.dz, Lc); if (sweep(cx - rc, cy, cx + rc, cy)[0] < rc * TILT + 0.03 * S) shove(clap, 1, 0); const [sx, sy] = pt(0, 0, clap.dx, clap.dz, Lc + boatLen); if (sweep(sx + boat.rel - boatH * 0.3, sy + boatH * 0.5, sx + boat.rel + boatH * 0.5, sy + boatH * 0.5)[0] < boatH * 0.5) { shove(clap, (Lc + boatLen + boatH * 0.5) / Lc, 0); boat.yawv += (pvx / S) * 3 * SWING; boat.relv += pvx * 0.2 * SWING; } } /* with reduced motion nothing swings: the tube under the pointer lights up and its arcs fade in */ function stillHover() { for (const tb of tubes) { const [tx, ty] = pt(tb.px, tb.pz, 0, 0, sl); const [bx, by] = pt(tb.px, tb.pz, 0, 0, sl + tb.L); const near = pointer.on && segDist(pointer.x, pointer.y, tx, ty, bx, by)[0] < rt + 0.05 * S; if (near && !tb.near && clock - tb.last > 0.9) { tb.last = clock; stillWaves(tb, clock); } tb.near = near; if (near) tb.hover = 1; } } function at(ev) { const r = stage.getBoundingClientRect(); return [ev.clientX - r.left, ev.clientY - r.top]; } let down = null; stage.addEventListener('pointermove', (ev) => { if (ev.pointerType === 'touch' && !down) return; const [x, y] = at(ev); if (!pointer.on || pointer.fresh) { pointer.lx = x; pointer.ly = y; pointer.fresh = false; } pointer.on = true; pointer.x = x; pointer.y = y; if (down) down.moved = Math.max(down.moved, Math.hypot(x - down.x, y - down.y)); }); stage.addEventListener('pointerdown', (ev) => { const [x, y] = at(ev); down = { x, y, moved: 0 }; pointer.on = true; pointer.fresh = false; pointer.x = pointer.lx = x; pointer.y = pointer.ly = y; }); const off = (ev) => { if (ev.pointerType === 'touch') pointer.on = false; pointer.fresh = true; }; stage.addEventListener('pointerup', off); stage.addEventListener('pointercancel', (ev) => { down = null; off(ev); }); stage.addEventListener('pointerleave', (ev) => { if (ev.target !== stage) return; pointer.on = false; pointer.fresh = true; }); stage.addEventListener('click', (ev) => { /* a drag through the tubes is not a tap */ if (ev.detail > 0 && down && down.moved > 12) { down = null; return; } down = null; const x = ev.detail > 0 ? at(ev)[0] : 0; bigGust(x < x0 ? 1 : -1); }); /* ---------------------------------------------------------------- drawing */ function draw() { const t = clock; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; drawStreaks(); drawShadow(); drawWaves(t); const items = tubes.map((tb) => ({ z: tb.pz + tb.dz * 0.5, tb })); items.push({ z: clap.dz * 0.5, tb: null }); items.sort((a, b) => a.z - b.z); for (const it of items) { if (it.tb) drawTube(it.tb, t); else drawClapper(); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } drawRing(); drawHanger(); } function drawStreaks() { for (const s of streaks) { const tail = s.x - s.d * s.len; const g = ctx.createLinearGradient(tail, 0, s.x, 0); g.addColorStop(0, str(COL.streak, 0)); g.addColorStop(1, str(COL.streak, s.a)); ctx.strokeStyle = g; ctx.lineWidth = s.w; ctx.beginPath(); for (let k = 0; k <= 16; k++) { const f = k / 16; const x = tail + s.d * s.len * f; const y = s.y + Math.sin(s.ph + f * 5 + clock * 3) * s.amp * Math.sin(Math.PI * (0.1 + f * 0.8)); if (k) ctx.lineTo(x, y); else ctx.moveTo(x, y); } ctx.stroke(); } } /* the shadow of the chime on the wall, a little down and to the right */ function drawShadow() { const ox = 0.05 * S; const oy = 0.03 * S; ctx.strokeStyle = ctx.fillStyle = str(COL.shadow, 0.11); ctx.lineWidth = rt * 2; ctx.beginPath(); for (const tb of tubes) { const [tx, ty] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl); const [bx, by] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl + tb.L); ctx.moveTo(tx + ox, ty + oy); ctx.lineTo(bx + ox, by + oy); } ctx.stroke(); const [cx, cy] = pt(0, 0, clap.dx, clap.dz, Lc); const [sx, sy] = pt(0, 0, clap.dx, clap.dz, Lc + boatLen); const bx = sx + boat.rel + ox + boatH * 0.12; const brx = boatH * 0.42 * Math.max(0.2, Math.abs(Math.cos(boat.yaw))); ctx.beginPath(); ctx.ellipse(cx + ox, cy + oy, rc, rc * TILT + 0.02 * S, 0, 0, TAU); ctx.moveTo(bx + brx, sy + oy + boatH * 0.55); ctx.ellipse(bx, sy + oy + boatH * 0.55, brx, boatH * 0.45, 0, 0, TAU); ctx.fill(); } function drawWaves(t) { const n = clamp(Math.round(WAVES), 1, 8); for (let k = waves.length - 1; k >= 0; k--) { const w = waves[k]; if (t - w.t0 > 3) { waves.splice(k, 1); continue; } const col = w.warm ? mix(COL.warm, BLACK, 0.25) : COL.wave; for (let j = 0; j < n; j++) { const age = t - w.t0 - j * 0.11; const life = w.still ? 1.4 : 1.1 + 0.4 * w.s; if (age < 0 || age > life) continue; const p = age / life; let rad; let a; if (w.still) { rad = rt * 1.9 + (0.045 + 0.05 * j) * S; a = Math.sin(p * Math.PI) * 0.7; } else { rad = rt * 1.9 + (0.08 + 0.17 * w.s) * S * (1 - Math.pow(1 - p, 3)) + j * 0.01 * S; a = Math.pow(1 - p, 1.6) * (0.3 + 0.7 * w.s) * (1 - j * 0.12); } if (a < 0.01) continue; const span = 0.55 - (w.still ? 0 : 0.15 * p); ctx.strokeStyle = str(col, a); ctx.lineWidth = Math.max(1, (0.005 + 0.007 * (1 - p)) * S * (1 - j * 0.12)); ctx.beginPath(); ctx.ellipse(w.x, w.y, rad, rad * 1.45, 0, -span, span); ctx.stroke(); ctx.beginPath(); ctx.ellipse(w.x, w.y, rad, rad * 1.45, 0, Math.PI - span, Math.PI + span); ctx.stroke(); } } } function cord(ax, ay, bx, by) { ctx.strokeStyle = str(COL.cord, 0.9); ctx.lineWidth = Math.max(1, 0.005 * S); ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(bx, by); ctx.stroke(); } function drawTube(tb, t) { const vib = REDUCED ? 0 : Math.sin(t * TAU * 11 + tb.i * 2.1) * tb.ring * 0.007 * S; const [hx, hy] = pt(tb.px, tb.pz, tb.dx, tb.dz, 0); const [tx, ty] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl); const [bx, by] = pt(tb.px, tb.pz, tb.dx, tb.dz, sl + tb.L); cord(hx, hy, tx + vib * 0.3, ty); const ang = Math.atan2(bx - tx, by - ty); const len = Math.hypot(bx - tx, by - ty); const c = Math.cos(-ang); const s = Math.sin(-ang); ctx.setTransform(dpr * c, dpr * s, -dpr * s, dpr * c, (tx + vib * 0.3) * dpr, ty * dpr); if (vib) ctx.transform(1, 0, vib / len, 1, 0, 0); const base = tb.warm ? COL.warm : COL.tube; const g = ctx.createLinearGradient(-rt, 0, rt, 0); g.addColorStop(0, str(mix(base, BLACK, 0.45))); g.addColorStop(0.2, str(mix(base, BLACK, 0.05))); g.addColorStop(0.34, str(mix(base, WHITE, 0.75))); g.addColorStop(0.5, str(base)); g.addColorStop(0.78, str(mix(base, BLACK, 0.32))); g.addColorStop(0.9, str(mix(base, WHITE, 0.25))); g.addColorStop(1, str(mix(base, BLACK, 0.5))); const ry = rt * TILT; ctx.beginPath(); ctx.moveTo(-rt, 0); ctx.lineTo(-rt, len); ctx.ellipse(0, len, rt, ry, 0, Math.PI, 0, true); ctx.lineTo(rt, 0); ctx.ellipse(0, 0, rt, ry, 0, 0, Math.PI, true); ctx.closePath(); ctx.fillStyle = g; ctx.fill(); /* the light: a knock makes it flash, the pointer warms it */ const glow = Math.max(tb.shine, tb.hover * 0.45); if (glow > 0.02) { const sg = ctx.createLinearGradient(0, 0, 0, len); const p = REDUCED ? 0.5 : (t * 1.7 + tb.i * 0.3) % 1; sg.addColorStop(0, 'rgba(255,255,255,0)'); sg.addColorStop(Math.max(0, p - 0.25), 'rgba(255,255,255,0)'); sg.addColorStop(p, `rgba(255,255,255,${0.5 * glow})`); sg.addColorStop(Math.min(1, p + 0.25), 'rgba(255,255,255,0)'); sg.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = sg; ctx.fill(); ctx.fillStyle = `rgba(255,255,255,${0.16 * glow})`; ctx.fill(); } /* the open top of the tube */ ctx.beginPath(); ctx.ellipse(0, 0, rt * 0.86, ry * 0.86, 0, 0, TAU); ctx.fillStyle = str(mix(base, BLACK, 0.62)); ctx.fill(); ctx.strokeStyle = str(mix(base, WHITE, 0.5)); ctx.lineWidth = Math.max(0.8, rt * 0.14); ctx.beginPath(); ctx.ellipse(0, 0, rt * 0.93, ry * 0.93, 0, 0, TAU); ctx.stroke(); /* the cord goes in through a hole near the top */ ctx.fillStyle = str(mix(base, BLACK, 0.7)); ctx.beginPath(); ctx.ellipse(0, rt * 0.9, rt * 0.16, rt * 0.16, 0, 0, TAU); ctx.fill(); } function drawClapper() { const [hx, hy] = pt(0, 0, clap.dx, clap.dz, 0); const [cx, cy] = pt(0, 0, clap.dx, clap.dz, Lc); const [sx, sy] = pt(0, 0, clap.dx, clap.dz, Lc + boatLen); const bx = sx + boat.rel; cord(hx, hy, cx, cy); cord(cx, cy, bx, sy); drawBoat(bx, sy, Math.atan2(bx - cx, sy - cy)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const ct = 0.035 * S; const ry = rc * TILT; const wood = COL.wood; const top = cy - ct / 2; ctx.beginPath(); ctx.ellipse(cx, top + ct, rc, ry, 0, 0, Math.PI); ctx.lineTo(cx - rc, top); ctx.ellipse(cx, top, rc, ry, 0, Math.PI, 0, true); ctx.closePath(); ctx.fillStyle = str(mix(wood, BLACK, 0.38)); ctx.fill(); const g = ctx.createLinearGradient(cx - rc, top - ry, cx + rc, top + ry); g.addColorStop(0, str(mix(wood, WHITE, 0.3))); g.addColorStop(1, str(mix(wood, BLACK, 0.12))); ctx.beginPath(); ctx.ellipse(cx, top, rc, ry, 0, 0, TAU); ctx.fillStyle = g; ctx.fill(); ctx.strokeStyle = str(mix(wood, BLACK, 0.4), 0.28); ctx.lineWidth = Math.max(0.7, 0.003 * S); for (const f of [0.38, 0.62, 0.84]) { ctx.beginPath(); ctx.ellipse(cx + 0.03 * rc, top, rc * f, ry * f, 0, 0, TAU); ctx.stroke(); } if (clap.ring > 0.02) { ctx.beginPath(); ctx.ellipse(cx, top, rc, ry, 0, 0, TAU); ctx.fillStyle = `rgba(255,255,255,${0.25 * clap.ring})`; ctx.fill(); } ctx.fillStyle = str(mix(wood, BLACK, 0.6)); ctx.beginPath(); ctx.ellipse(cx, top, 0.012 * S, 0.012 * S * TILT + 0.5, 0, 0, TAU); ctx.fill(); } /* the little wooden boat at the bottom catches the wind and turns round on its cord */ function drawBoat(x, y, ang) { const sw = boatH * 0.85; const sh = boatH; const cy = Math.cos(boat.yaw); const front = cy >= 0; const sx = (front ? 1 : -1) * Math.max(0.08, Math.abs(cy)); const c = Math.cos(-ang); const s = Math.sin(-ang); ctx.setTransform(dpr * c * sx, dpr * s * sx, -dpr * s, dpr * c, x * dpr, y * dpr); const shade = Math.abs(cy); const sail = front ? COL.sail : mix(COL.sail, COL.wood, 0.35); ctx.lineWidth = Math.max(1, 0.008 * S); ctx.strokeStyle = str(mix(COL.wood, BLACK, 0.4)); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, sh * 0.84); ctx.stroke(); /* the mainsail, with its stripe */ ctx.beginPath(); ctx.moveTo(sw * 0.05, sh * 0.06); ctx.lineTo(sw * 0.05, sh * 0.78); ctx.lineTo(sw * 0.64, sh * 0.78); ctx.quadraticCurveTo(sw * 0.5, sh * 0.3, sw * 0.05, sh * 0.06); ctx.fillStyle = str(mix(sail, BLACK, 0.12 * (1 - shade))); ctx.fill(); ctx.save(); ctx.clip(); ctx.fillStyle = str(COL.stripe, front ? 1 : 0.7); ctx.fillRect(0, sh * 0.5, sw, sh * 0.09); ctx.restore(); /* the jib */ ctx.beginPath(); ctx.moveTo(-sw * 0.05, sh * 0.16); ctx.lineTo(-sw * 0.05, sh * 0.74); ctx.lineTo(-sw * 0.38, sh * 0.74); ctx.quadraticCurveTo(-sw * 0.28, sh * 0.4, -sw * 0.05, sh * 0.16); ctx.fillStyle = str(mix(sail, BLACK, 0.08 + 0.12 * (1 - shade))); ctx.fill(); /* the hull */ ctx.beginPath(); ctx.moveTo(-sw * 0.5, sh * 0.82); ctx.lineTo(sw * 0.74, sh * 0.82); ctx.quadraticCurveTo(sw * 0.62, sh * 1.0, sw * 0.42, sh * 1.0); ctx.lineTo(-sw * 0.2, sh * 1.0); ctx.quadraticCurveTo(-sw * 0.38, sh * 0.98, -sw * 0.5, sh * 0.82); ctx.fillStyle = str(front ? COL.hull : mix(COL.hull, BLACK, 0.25)); ctx.fill(); ctx.fillStyle = str(mix(COL.hull, WHITE, 0.55)); ctx.fillRect(-sw * 0.44, sh * 0.82, sw * 1.14, sh * 0.035); /* the screw eye the cord is tied to */ ctx.strokeStyle = str(mix(COL.tube, BLACK, 0.3)); ctx.lineWidth = Math.max(1, 0.006 * S); ctx.beginPath(); ctx.arc(0, 0, 0.012 * S, 0, TAU); ctx.stroke(); } /* the wooden ring: its side, then its top with the grain */ function drawRing() { const y = y0 + rig.y; const ry = RR * TILT; ctx.beginPath(); ctx.ellipse(x0, y + th, RR, ry, 0, 0, Math.PI); ctx.lineTo(x0 - RR, y); ctx.ellipse(x0, y, RR, ry, 0, Math.PI, 0, true); ctx.closePath(); ctx.fillStyle = str(mix(COL.wood, BLACK, 0.4)); ctx.fill(); const g = ctx.createLinearGradient(x0 - RR, y - ry, x0 + RR, y + ry); g.addColorStop(0, str(mix(COL.wood, WHITE, 0.32))); g.addColorStop(1, str(mix(COL.wood, BLACK, 0.1))); ctx.beginPath(); ctx.ellipse(x0, y, RR, ry, 0, 0, TAU); ctx.fillStyle = g; ctx.fill(); ctx.strokeStyle = str(mix(COL.wood, BLACK, 0.4), 0.25); ctx.lineWidth = Math.max(0.7, 0.003 * S); for (const f of [0.3, 0.55, 0.78, 0.92]) { ctx.beginPath(); ctx.ellipse(x0 - 0.02 * RR, y, RR * f, ry * f, 0, 0, TAU); ctx.stroke(); } } /* three cords from the ring to a loop, and the loop on a hook under the beam */ function drawHanger() { const y = y0 + rig.y; const ly = y - 0.11 * S; for (const a of [Math.PI / 2, Math.PI / 2 + TAU / 3, Math.PI / 2 + (2 * TAU) / 3]) { cord(x0, ly, x0 + Math.cos(a) * RR * 0.8, y + Math.sin(a) * RR * 0.8 * TILT); } const hy = hookY + rig.y; cord(x0, ly - 0.02 * S, x0, hy + 0.035 * S); ctx.strokeStyle = str(mix(COL.tube, BLACK, 0.35)); ctx.lineWidth = Math.max(1.2, 0.007 * S); ctx.beginPath(); ctx.arc(x0, ly - 0.01 * S, 0.012 * S, 0, TAU); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x0, hy); ctx.lineTo(x0, hy + 0.012 * S); ctx.arc(x0, hy + 0.024 * S, 0.012 * S, -Math.PI / 2, Math.PI * 1.3); ctx.stroke(); ctx.fillStyle = str(COL.beam); ctx.fillRect(x0 - 0.02 * S, hy - 1, 0.04 * S, 0.006 * S + 1); } /* ---------------------------------------------------------------- the clock */ function tick(time, deltaMs) { const fdt = Math.max(1 / 240, Math.min(0.05, deltaMs / 1000)); clock = time; for (const tb of tubes) tb.hover *= Math.exp(-4 * fdt); if (REDUCED) { stillHover(); draw(); return; } brush(fdt); acc += fdt; let n = 0; while (acc >= STEP && n < 8) { step(time - acc); acc -= STEP; n++; } if (n === 8) acc = 0; moveStreaks(fdt); beaufort(fdt); pointer.lx = pointer.x; pointer.ly = pointer.y; draw(); } /* ---------------------------------------------------------------- start */ const title = $('[data-title]'); const words = title.textContent.trim().split(/\s+/).map((w) => { const s = document.createElement('span'); s.className = 'word'; s.textContent = w; return s; }); title.setAttribute('aria-label', title.textContent.trim()); title.textContent = ''; words.forEach((w, n) => { w.setAttribute('aria-hidden', 'true'); title.appendChild(w); if (n < words.length - 1) title.appendChild(document.createTextNode(' ')); }); layout(); gsap.ticker.add(tick); if (!REDUCED) { /* the porch drops in with the chime and bounces on its cord, then the first gust comes from the sea */ gsap.from(rig, { y: -(y0 + 1.15 * S), duration: 1.3, ease: 'elastic.out(1, 0.55)', onUpdate: () => gsap.set(beam, { y: Math.min(0, rig.y) }) }); gsap.delayedCall(0.55, () => { tubes.forEach((tb) => { tb.vx += rand(-0.12, 0.12) * S; tb.vz += rand(-0.08, 0.08) * S; }); clap.vx += 0.38 * S; clap.vz -= 0.1 * S; }); gsap.from('[data-in]', { y: 28, opacity: 0, duration: 0.9, ease: 'back.out(1.8)', stagger: 0.09, delay: 0.35 }); gsap.from('[data-hint]', { y: 14, opacity: 0, duration: 0.7, delay: 1.1, ease: 'power3.out' }); if (GUSTS > 0) gsap.delayedCall(2.4, () => gust(Math.max(1.3, GUSTS * 1.4), 1)); else schedule(); } else { wind.x = 0; gsap.from('[data-in], [data-hint]', { opacity: 0, duration: 0.8 }); } let wait = null; addEventListener('resize', () => { if (wait) wait.kill(); wait = gsap.delayedCall(0.15, layout); }); })();