/* Hold and pour Holding the table tips the bottle over. The oil inside always lies level: every frame the script finds the line that leaves exactly the oil there is below it, inside the tipped bottle, and draws the oil up to there. Once that line is above the lip of the neck the oil runs out, faster the deeper the lip is under it, and falls as a stream: a chain of drops born at the neck, pulled by gravity and drawn as one ribbon, thick where it comes out and thinner as it speeds up. The pointer aims: the bottle follows it, more the further it is tipped. Drops that land in the bowl raise the oil, and rings spread from where they land; drops that miss end in a puddle on the board. A full bowl is served and changes for an empty one. Everything is drawn as an engraving, white with ink hatching, and the hatching changes drawing eight times a second. On a computer a round cursor says what to do; it shrinks while you hold and stretches when it moves fast. */ /* ---- values to change ---- */ const TILT = 1.1; /* the seconds the bottle takes to tip right over while you hold */ const ANGLE = 112; /* how far it tips, in degrees from upright */ const FLOW = 1; /* how fast the oil runs out of the neck */ const GRAVITY = 2600; /* the pull on the stream, in pixels a second squared */ const THICK = 10; /* the stream's width at full flow, in pixels */ const MEASURE = 1.5; /* the seconds the button keeps the bottle tipped */ const RINGS = 0.12; /* the seconds between two rings where the stream lands */ const FOLLOW = 0.1; /* how quickly the bottle follows the pointer, each sixtieth of a second (0 to 1) */ const SHARE = 0.22; /* how much of the bottle it takes to fill the bowl */ const BOIL = 8; /* how many times a second the engraving changes drawing */ const STRETCH = 0.01; /* how much the round cursor stretches with its speed */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const FINE = matchMedia('(hover: hover) and (pointer: fine)').matches; const stage = document.querySelector('[data-stage]'); const canvas = stage.querySelector('[data-canvas]'); const ctx = canvas.getContext('2d'); const servedEl = stage.querySelector('[data-served]'); const hintEl = stage.querySelector('[data-hint]'); const pourButton = document.querySelector('[data-pour]'); const cursorEl = document.querySelector('[data-cursor]'); const discEl = cursorEl.querySelector('[data-disc]'); const cursorText = cursorEl.querySelector('[data-cursor-text]'); const css = getComputedStyle(document.documentElement); const C = { back: css.getPropertyValue('--green-deep').trim() || '#1a2618', bone: css.getPropertyValue('--bone').trim() || '#f2ecdf', ink: css.getPropertyValue('--ink').trim() || '#15130f', oil: css.getPropertyValue('--oil').trim() || '#d8b13a', oilDeep: '#a9821f', }; const RAD = Math.PI / 180; const START = 0.72; /* how full a new bottle is */ const MAX_FLOW = 0.05; /* the most oil that can leave in a second, as a share of the bottle */ document.querySelectorAll('a[href="#"]').forEach((a) => a.addEventListener('click', (e) => e.preventDefault())); /* ---------------------------------------------------------------- the engraver's tools */ /* hatching tiles: wavy lines a few pixels apart, three versions each a little different, for the boiling */ function tiles(gap, width, angle, alpha) { return [0, 1, 2].map((v) => { const c = document.createElement('canvas'); const size = 48; c.width = size; c.height = size; const x = c.getContext('2d'); x.strokeStyle = `rgba(21, 19, 15, ${alpha})`; x.lineCap = 'round'; x.translate(size / 2, size / 2); x.rotate(angle); for (let k = -size; k <= size; k += gap) { x.lineWidth = width * (0.8 + (Math.abs(k * 7 + v * 13) % 5) * 0.1); x.beginPath(); for (let s = -size; s <= size; s += 4) { const y = k + Math.sin((s + v * 9) * 0.21 + k) * 0.45 + v * 0.35; if (s === -size) x.moveTo(s, y); else x.lineTo(s, y); } x.stroke(); } return ctx.createPattern(c, 'repeat'); }); } const HATCH = { flat: tiles(4, 1.1, 0, 0.9), /* horizontal lines: the oil */ upright: tiles(4, 1.2, Math.PI / 2, 0.95), /* vertical lines: round glass and china */ dense: tiles(3, 1.5, Math.PI / 2, 1), /* the darkest side */ slant: tiles(5, 1.1, -Math.PI / 4, 0.85), /* shadows */ }; /* a different small wobble for every drawing, so outlines boil too */ const JIT = [0, 1, 2].map((v) => { let s = 31 + v * 977; return Array.from({ length: 64 }, () => { s = (s * 16807) % 2147483647; return (s / 2147483647 - 0.5) * 1.3; }); }); let boil = 0; const jit = (i) => (REDUCED ? 0 : JIT[boil][((i % 64) + 64) % 64]); const wobble = (pts, amount = 1) => pts.map(([x, y], i) => [x + jit(i) * amount, y + jit(i + 31) * amount]); /* ---------------------------------------------------------------- sizes */ const G = {}; let W = 0; let H = 0; let DPR = 1; function layout() { const r = stage.getBoundingClientRect(); W = r.width; H = r.height; DPR = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(W * DPR); canvas.height = Math.round(H * DPR); G.board = H * 0.84; G.h = Math.min(H * 0.44, W * 0.6); G.w = G.h * 0.3; G.bowlR = Math.min(W * 0.2, H * 0.16, G.h * 0.4); /* half the width of the bowl's rim */ G.bowlH = G.bowlR * 0.62; G.bowlX = W * (W < 600 ? 0.64 : 0.62); /* the bottle waits where its neck, tipped right over, comes just short of the middle of the bowl */ G.restX = G.bowlX - (G.h / 2) * Math.sin(ANGLE * RAD) - G.bowlR * 0.3; G.restY = Math.max(G.h * 0.62, H * 0.36); interior = bottleShape(0.06); outline = bottleShape(0); } /* the bottle in its own space: y down, origin in the middle; inset makes the inside of the glass */ let interior = []; let outline = []; function bottleShape(inset) { const h = G.h; const w = G.w / 2 - G.w * inset; const n = G.w * 0.17 - G.w * inset * 0.6; const bottom = h / 2 - G.w * inset; const lip = -h / 2 + (inset ? G.w * 0.05 : 0); const pts = [[-w, bottom - w * 0.18], [-w * 0.86, bottom], [w * 0.86, bottom], [w, bottom - w * 0.18], [w, -h * 0.1]]; for (let i = 1; i <= 6; i++) { const t = i / 6; const e = 1 - Math.pow(1 - t, 2.2); pts.push([w + (n - w) * e, -h * 0.1 - h * 0.2 * t]); } pts.push([n, lip], [-n, lip]); for (let i = 6; i >= 1; i--) { const t = i / 6; const e = 1 - Math.pow(1 - t, 2.2); pts.push([-(w + (n - w) * e), -h * 0.1 - h * 0.2 * t]); } pts.push([-w, -h * 0.1]); return pts; } /* the bowl seen a little from above: the rim and the foot are ellipses */ function bowlGeom() { const R = G.bowlR; return { x: G.bowlX + bowl.dx, R, e: 0.3, rim: G.board - G.bowlH, r0: R * 0.56, D: G.bowlH * 0.9, foot: G.board }; } /* how high the oil stands, 0 to 1, for a share of the bowl: the bowl widens, so the oil rises slower and slower */ function oilLevel(share) { const k = 0.56; const r = Math.cbrt(k * k * k + Math.min(1, share) * (1 - k * k * k)); return (r - k) / (1 - k); } /* ---------------------------------------------------------------- state */ const bottle = { x: 0, y: 0, a: 0, va: 0, vol: START, slosh: 0, vs: 0, mouth: [0, 0] }; const bowl = { vol: 0, dx: 0, served: false, spilt: 0 }; const drops = []; /* the stream: drops in the order they left the neck */ const rings = []; /* where the stream lands, rings spread on the oil */ const puddles = []; let hold = false; let tip = 0; /* 0 upright, 1 tipped right over */ let aim = null; /* where the pointer is over the table */ let measureUntil = 0; let swapping = false; let releasedAt = 0; let born = 0; let seg = 0; let lastFlow = -1; let lastRing = 0; let puddleAlpha = 1; let level = { c: 0, nx: 0, ny: 1, pts: [] }; const toWorld = ([x, y]) => { const c = Math.cos(bottle.a); const s = Math.sin(bottle.a); return [bottle.x + x * c - y * s, bottle.y + x * s + y * c]; }; /* keep the part of a polygon on the side n·p ≥ c */ function clip(pts, nx, ny, c) { const out = []; for (let i = 0; i < pts.length; i++) { const a = pts[i]; const b = pts[(i + 1) % pts.length]; const da = a[0] * nx + a[1] * ny - c; const db = b[0] * nx + b[1] * ny - c; if (da >= 0) out.push(a); if ((da >= 0) !== (db >= 0)) { const t = da / (da - db); out.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]); } } return out; } function area(pts) { let s = 0; for (let i = 0; i < pts.length; i++) { const a = pts[i]; const b = pts[(i + 1) % pts.length]; s += a[0] * b[1] - b[0] * a[1]; } return Math.abs(s) / 2; } /* the oil's surface: the level line that leaves vol of the bottle below it (tilted a little by the slosh) */ function findLevel() { const pts = interior.map(toWorld); const nx = Math.sin(bottle.slosh); const ny = Math.cos(bottle.slosh); const want = area(pts) * bottle.vol; let lo = Infinity; let hi = -Infinity; pts.forEach((p) => { const d = p[0] * nx + p[1] * ny; lo = Math.min(lo, d); hi = Math.max(hi, d); }); let c = hi; for (let i = 0; i < 26; i++) { c = (lo + hi) / 2; if (area(clip(pts, nx, ny, c)) > want) lo = c; else hi = c; } return { c, nx, ny, pts: bottle.vol > 0.002 ? clip(pts, nx, ny, c) : [] }; } /* ---------------------------------------------------------------- holding */ function press(on) { if (on && swapping) return; hold = on; stage.classList.toggle('is-holding', on); if (!on) releasedAt = gsap.ticker.time; if (FINE && !REDUCED && pointer.on) { gsap.to(cursorEl, { scale: on ? 0.5 : 1, duration: on ? 0.4 : 0.6, ease: 'power2.out', overwrite: 'auto' }); gsap.to(cursorText, { opacity: on ? 0 : 1, duration: on ? 0.25 : 0.5, overwrite: 'auto' }); gsap.to(discEl, { borderWidth: on ? 6 : 3, duration: 0.4, ease: 'power2.out', overwrite: 'auto' }); } gsap.to(hintEl, { autoAlpha: on || bowl.served ? 0 : 1, duration: 0.25, overwrite: 'auto' }); } stage.addEventListener('pointerdown', (e) => { if (e.button > 0) return; const r = stage.getBoundingClientRect(); aim = [e.clientX - r.left, e.clientY - r.top]; try { stage.setPointerCapture(e.pointerId); } catch (err) { /* a synthetic pointer cannot be captured */ } press(true); }); stage.addEventListener('pointermove', (e) => { const r = stage.getBoundingClientRect(); aim = [e.clientX - r.left, e.clientY - r.top]; }); ['pointerup', 'pointercancel', 'lostpointercapture'].forEach((type) => stage.addEventListener(type, () => { if (hold && gsap.ticker.time < measureUntil) return; if (hold) press(false); })); stage.addEventListener('pointerleave', () => { if (!hold) aim = null; }); /* the button pours one measure: the bottle stays tipped for MEASURE seconds; presses meanwhile are ignored. On a full bowl it brings an empty one first */ pourButton.addEventListener('click', () => { if (swapping || hold || gsap.ticker.time < measureUntil) return; if (bowl.served) { swap(); return; } aim = null; measureUntil = gsap.ticker.time + MEASURE; press(true); }); /* ---------------------------------------------------------------- every frame */ function step(dt, time) { if (hold && measureUntil && time >= measureUntil) { measureUntil = 0; press(false); } /* tipping */ tip = hold ? Math.min(1, tip + dt / TILT) : Math.max(0, tip - dt / (TILT * 0.55)); const eased = tip < 0.5 ? 2 * tip * tip : 1 - Math.pow(-2 * tip + 2, 2) / 2; const lastA = bottle.a; const targetA = ANGLE * RAD * eased; bottle.a = REDUCED ? targetA : bottle.a + (targetA - bottle.a) * (1 - Math.pow(0.001, dt)); /* the pointer pulls the bottle about, more the further it is tipped */ const k = 1 - Math.pow(1 - FOLLOW, dt * 60); let tx = G.restX; let ty = G.restY; if (aim) { tx += (aim[0] / W - 0.5) * W * 0.5 * eased; ty += (aim[1] / H - 0.5) * H * 0.16 * eased; } tx = Math.min(W - G.w * 0.6, Math.max(G.w * 0.6, tx)); const bob = REDUCED ? 0 : Math.sin(time * 1.3) * 3 * (1 - eased); bottle.x += (tx - bottle.x) * k; bottle.y += (ty + bob - bottle.y) * k; /* the oil sloshes when the bottle turns faster or slower: its surface lags behind, then swings back */ const va = (bottle.a - lastA) / Math.max(dt, 1e-3); const acc = (va - bottle.va) / Math.max(dt, 1e-3); bottle.va = va; bottle.vs += (-bottle.slosh * 60 - bottle.vs * 5 - acc * 1.2) * dt; bottle.slosh = REDUCED ? 0 : Math.max(-0.5, Math.min(0.5, bottle.slosh + bottle.vs * dt)); level = findLevel(); /* the neck: how deep its lower lip is under the oil, in bottle widths */ const lipL = toWorld([-G.w * 0.17, -G.h / 2]); const lipR = toWorld([G.w * 0.17, -G.h / 2]); const lip = lipL[1] > lipR[1] ? lipL : lipR; const depth = (lip[0] * level.nx + lip[1] * level.ny - level.c) / G.w; const mouth = toWorld([0, -G.h / 2 - 2]); const mv = [(mouth[0] - bottle.mouth[0]) / Math.max(dt, 1e-3), (mouth[1] - bottle.mouth[1]) / Math.max(dt, 1e-3)]; bottle.mouth = mouth; const q = bottle.vol > 0.001 && depth > 0 ? Math.min(MAX_FLOW * FLOW, MAX_FLOW * FLOW * Math.sqrt(depth / 0.6)) : 0; if (q > 0.0015) { /* a stream only starts again after a real pause, so it never splits in two */ if (time - lastFlow > 0.12) seg++; lastFlow = time; bottle.vol = Math.max(0, bottle.vol - q * dt); born += dt; const every = 1 / 90; const dir = [Math.sin(bottle.a), -Math.cos(bottle.a)]; const u = 40 + 100 * Math.sqrt(Math.min(1, depth)); while (born >= every) { born -= every; drops.push({ x: mouth[0] + dir[0] * 2, y: mouth[1] + dir[1] * 2, vx: dir[0] * u + mv[0] * 0.4, vy: dir[1] * u + mv[1] * 0.4, w: Math.max(1.3, THICK * Math.sqrt(q / (MAX_FLOW * FLOW))), vol: q * every, seg, }); } } else born = 0; /* the stream falls: into the bowl, on its side, or on the board */ const B = bowlGeom(); const f = oilLevel(bowl.vol / SHARE); const surface = B.rim + B.D * (1 - f); const full = bowl.vol >= SHARE * 0.995; for (let i = drops.length - 1; i >= 0; i--) { const d = drops[i]; const wasAbove = d.y < B.rim; d.vy += GRAVITY * dt; d.vx *= Math.pow(0.985, dt * 60); d.x += d.vx * dt; d.y += d.vy * dt; const dx = d.x - B.x; const inside = Math.abs(dx) < B.R * 0.96; if (wasAbove && d.y >= B.rim && !inside && Math.abs(dx) < B.R * 1.08) { /* on the rim's edge: down the outside */ spill(B.x + Math.sign(dx) * (B.r0 + 10), d.vol); drops.splice(i, 1); } else if (inside && d.y >= surface && d.y - d.vy * dt <= surface + 4) { if (full) { spill(B.x + (dx < 0 ? -1 : 1) * (B.r0 + 10), d.vol); } else { bowl.vol += d.vol; if (time - lastRing > RINGS && !REDUCED) { lastRing = time; rings.push({ x: d.x, t: 0 }); } } drops.splice(i, 1); } else if (d.y >= G.board) { spill(d.x, d.vol); drops.splice(i, 1); } else if (d.y > H + 50 || d.x < -50 || d.x > W + 50) { drops.splice(i, 1); } } for (let i = rings.length - 1; i >= 0; i--) { rings[i].t += dt; if (rings[i].t > 1.4) rings.splice(i, 1); } /* full: served, and an empty bowl comes once the bottle is up again */ if (!bowl.served && bowl.vol >= SHARE * 0.97) { bowl.served = true; servedEl.textContent = bowl.spilt > SHARE * 0.08 ? 'Full. The board had some too.' : 'That’s a proper dip.'; gsap.to(hintEl, { autoAlpha: 0, duration: 0.25, overwrite: 'auto' }); if (!REDUCED) gsap.fromTo(servedEl, { y: 16, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.6, ease: 'back.out(2)' }); else gsap.set(servedEl, { autoAlpha: 1 }); } if (bowl.served && !hold && !swapping && tip < 0.02 && !drops.length && time - releasedAt > 1.4) swap(); } function spill(x, vol) { bowl.spilt += vol; const near = puddles.find((p) => Math.abs(p.x - x) < 12 + p.r); if (near) { near.vol += vol; near.x += (x - near.x) * 0.05; } else puddles.push({ x, vol, r: 0 }); } /* a full bowl slides off to the right and an empty one comes in from the left; the bottle is topped up */ function swap() { swapping = true; const fade = { a: 1 }; gsap.timeline({ onComplete: () => { swapping = false; gsap.to(hintEl, { autoAlpha: 1, duration: 0.3 }); } }) .to(servedEl, { autoAlpha: 0, duration: 0.4 }, 0) .to(bowl, { dx: W, duration: REDUCED ? 0 : 0.7, ease: 'power2.in' }, 0) .to(fade, { a: 0, duration: 0.6, onUpdate: () => { puddleAlpha = fade.a; } }, 0) .add(() => { bowl.vol = 0; bowl.served = false; bowl.spilt = 0; puddles.length = 0; rings.length = 0; puddleAlpha = 1; bowl.dx = -W; }) .to(bottle, { vol: START, duration: REDUCED ? 0 : 0.9, ease: 'power2.inOut' }, 0.3) .to(bowl, { dx: 0, duration: REDUCED ? 0 : 0.9, ease: 'power3.out' }, 0.75); } /* ---------------------------------------------------------------- drawing */ function path(pts, close = true) { ctx.beginPath(); pts.forEach(([x, y], i) => (i ? ctx.lineTo(x, y) : ctx.moveTo(x, y))); if (close) ctx.closePath(); } function hatch(pattern, alpha) { ctx.fillStyle = pattern[boil]; ctx.globalAlpha = alpha; ctx.fill(); ctx.globalAlpha = 1; } function drawBoard() { const y = G.board; ctx.fillStyle = C.bone; ctx.fillRect(0, y, W, H - y); ctx.save(); ctx.beginPath(); ctx.rect(0, y, W, H - y); ctx.clip(); /* the grain of the wood */ ctx.strokeStyle = C.ink; ctx.lineWidth = 1.1; for (let i = 0; i < 9; i++) { const gy = y + 6 + i * ((H - y) * 0.09); ctx.beginPath(); for (let x = -14; x <= W + 14; x += 14) { const yy = gy + Math.sin(x * 0.013 + i * 2.1) * 3 + Math.sin(x * 0.041 + i) * 1.2 + jit(i * 5 + x) * 0.35; if (x === -14) ctx.moveTo(x, yy); else ctx.lineTo(x, yy); } ctx.globalAlpha = 0.3 + (i % 3) * 0.12; ctx.stroke(); } ctx.globalAlpha = 1; /* the front edge in shade */ ctx.beginPath(); ctx.rect(0, y + (H - y) * 0.86, W, H); hatch(HATCH.flat, 1); ctx.restore(); ctx.fillStyle = C.ink; ctx.fillRect(0, y - 1.5 + jit(3) * 0.4, W, 3); } function drawPuddles() { if (!puddles.length) return; puddles.forEach((p) => { p.r += (Math.sqrt(p.vol) * G.bowlR * 1.1 - p.r) * 0.08; const r = Math.max(2, p.r); ctx.globalAlpha = puddleAlpha; ctx.beginPath(); ctx.ellipse(p.x, G.board + r * 0.1 + 3, r, r * 0.2, 0, 0, Math.PI * 2); ctx.fillStyle = C.oil; ctx.fill(); hatch(HATCH.flat, puddleAlpha * 0.3); ctx.globalAlpha = puddleAlpha; ctx.lineWidth = 1.6; ctx.strokeStyle = C.ink; ctx.stroke(); ctx.globalAlpha = 1; }); } function ellipsePath(x, y, rx, ry) { ctx.beginPath(); ctx.ellipse(x, y, Math.max(0.1, rx), Math.max(0.1, ry), 0, 0, Math.PI * 2); } function drawBowl(stream) { const B = bowlGeom(); const { x, R, e, rim, r0, D, foot } = B; /* its shadow */ ellipsePath(x + R * 0.22, foot + 3, R * 1.05, R * e * 0.42); hatch(HATCH.slant, 0.9); /* inside, seen through the rim: the china wall, then the oil */ ctx.save(); ellipsePath(x, rim, R, R * e); ctx.clip(); ctx.fillStyle = C.bone; ctx.fill(); ctx.beginPath(); ctx.rect(x - R, rim - R * e, R * 0.75, R * e * 2 + D); hatch(HATCH.upright, 0.55); const f = oilLevel(bowl.vol / SHARE); if (bowl.vol > 0.0005) { const oy = rim + D * (1 - f); const rx = r0 + (R - r0) * f; ellipsePath(x, oy, rx, rx * e); const g = ctx.createLinearGradient(0, oy - rx * e, 0, oy + rx * e); g.addColorStop(0, C.oil); g.addColorStop(1, C.oilDeep); ctx.fillStyle = g; ctx.fill(); hatch(HATCH.flat, 0.3); /* rings spread from where the stream lands */ ctx.save(); ellipsePath(x, oy, rx, rx * e); ctx.clip(); ctx.strokeStyle = C.ink; rings.forEach((ring) => { const p = ring.t / 1.4; const rr = 4 + p * R * 0.9; ctx.globalAlpha = (1 - p) * 0.8; ctx.lineWidth = 1.4 * (1 - p) + 0.4; ellipsePath(ring.x, oy, rr, rr * e); ctx.stroke(); }); ctx.globalAlpha = 1; ctx.restore(); /* the shine on the far edge of the oil */ ctx.beginPath(); ctx.ellipse(x, oy, rx * 0.86, rx * e * 0.72, 0, Math.PI * 1.15, Math.PI * 1.75); ctx.strokeStyle = C.bone; ctx.lineWidth = 1.8; ctx.globalAlpha = 0.85; ctx.stroke(); ctx.globalAlpha = 1; ellipsePath(x, oy, rx, rx * e); ctx.strokeStyle = C.ink; ctx.lineWidth = 1.2; ctx.stroke(); } ctx.restore(); /* the stream goes in here, so the near side of the bowl covers its end */ stream(); /* the near side: from the front of the rim down to the foot */ const side = []; for (let i = 0; i <= 16; i++) { const a = Math.PI * (i / 16); side.push([x + Math.cos(a) * R, rim + Math.sin(a) * R * e]); } const lower = []; for (let i = 16; i >= 0; i--) { const a = Math.PI * (i / 16); const sx = Math.cos(a); lower.push([x + sx * r0, foot - r0 * e + Math.sin(a) * r0 * e]); } path([...side, ...lower]); ctx.fillStyle = C.bone; ctx.fill(); ctx.save(); path([...side, ...lower]); ctx.clip(); ctx.beginPath(); ctx.rect(x + R * 0.3, rim, R, G.bowlH + 4); hatch(HATCH.upright, 0.75); ctx.beginPath(); ctx.rect(x + R * 0.62, rim, R, G.bowlH + 4); hatch(HATCH.dense, 0.8); ctx.beginPath(); ctx.rect(x - R, rim, R * 0.2, G.bowlH + 4); hatch(HATCH.upright, 0.5); ctx.restore(); path(wobble([...side, ...lower], 0.7)); ctx.strokeStyle = C.ink; ctx.lineWidth = 2.6; ctx.lineJoin = 'round'; ctx.stroke(); ellipsePath(x + jit(5) * 0.5, rim + jit(6) * 0.4, R, R * e); ctx.lineWidth = 2.4; ctx.stroke(); } function drawStream() { if (!drops.length) return; /* one ribbon per pour: from the neck through every drop, thick where it comes out */ const runs = []; let run = null; drops.forEach((d) => { if (!run || run.seg !== d.seg) { run = { seg: d.seg, pts: [] }; runs.push(run); } run.pts.push(d); }); const now = gsap.ticker.time; /* while the oil runs, the ribbon goes on up to the neck: after the youngest drop, the last in the list */ if (now - lastFlow < 0.05 && runs.length) { const last = runs[runs.length - 1]; const young = last.pts[last.pts.length - 1]; last.pts.push({ x: bottle.mouth[0], y: bottle.mouth[1], w: young.w, vx: young.vx, vy: young.vy }); } [[C.ink, 3], [C.oil, 0], [C.bone, -1]].forEach(([color, extra]) => { ctx.strokeStyle = color; ctx.lineCap = 'round'; runs.forEach((r) => { for (let i = 1; i < r.pts.length; i++) { const a = r.pts[i - 1]; const b = r.pts[i]; /* the faster the oil, the thinner the stream: the same oil goes through a narrower ribbon */ const speed = Math.hypot(b.vx, b.vy); const w = b.w * Math.min(1.15, Math.sqrt(240 / Math.max(240, speed)) + 0.15); ctx.lineWidth = extra < 0 ? Math.max(0.6, w * 0.22) : w + extra; const off = extra < 0 ? -w * 0.22 : 0; ctx.beginPath(); ctx.moveTo(a.x + off, a.y); ctx.lineTo(b.x + off, b.y); ctx.stroke(); } }); }); } function drawBottle() { const h = G.h; const w = G.w; const out = wobble(outline, 0.9); /* the glass, white as paper */ ctx.save(); ctx.translate(bottle.x, bottle.y); ctx.rotate(bottle.a); path(out); ctx.fillStyle = C.bone; ctx.fill(); ctx.restore(); /* the oil inside, in the page's own space: its surface stays level whatever the bottle does */ if (level.pts.length > 2) { path(level.pts); const g = ctx.createLinearGradient(0, bottle.y - h / 2, 0, bottle.y + h / 2); g.addColorStop(0, C.oil); g.addColorStop(1, C.oilDeep); ctx.fillStyle = g; ctx.fill(); hatch(HATCH.flat, 0.3); /* the surface */ const s = level.pts; let best = null; for (let i = 0; i < s.length; i++) { const a = s[i]; const b = s[(i + 1) % s.length]; const da = Math.abs(a[0] * level.nx + a[1] * level.ny - level.c); const db = Math.abs(b[0] * level.nx + b[1] * level.ny - level.c); if (da < 0.5 && db < 0.5 && (!best || Math.hypot(b[0] - a[0], b[1] - a[1]) > Math.hypot(best[1][0] - best[0][0], best[1][1] - best[0][1]))) best = [a, b]; } if (best) { ctx.beginPath(); ctx.moveTo(best[0][0], best[0][1]); ctx.lineTo(best[1][0], best[1][1]); ctx.strokeStyle = C.ink; ctx.lineWidth = 1.4; ctx.stroke(); } } ctx.save(); ctx.translate(bottle.x, bottle.y); ctx.rotate(bottle.a); /* the round glass: hatching on the right, a clean stripe of light on the left */ ctx.save(); path(out); ctx.clip(); ctx.beginPath(); ctx.rect(w * 0.1, -h / 2, w * 0.45, h); hatch(HATCH.upright, 0.7); ctx.beginPath(); ctx.rect(w * 0.32, -h / 2, w * 0.25, h); hatch(HATCH.dense, 0.75); ctx.beginPath(); ctx.rect(-w * 0.55, -h / 2, w * 0.13, h); hatch(HATCH.upright, 0.6); ctx.restore(); /* the label */ const ly = h * 0.02; const lh = h * 0.3; ctx.fillStyle = C.bone; ctx.fillRect(-w / 2 + 1, ly, w - 2, lh); ctx.save(); ctx.beginPath(); ctx.rect(-w / 2 + 1, ly, w - 2, lh); ctx.clip(); ctx.beginPath(); ctx.rect(w * 0.3, ly, w * 0.3, lh); hatch(HATCH.upright, 0.45); ctx.restore(); ctx.strokeStyle = C.ink; ctx.lineWidth = 1.2; ctx.strokeRect(-w / 2 + w * 0.08, ly + lh * 0.06, w * 0.84, lh * 0.88); ctx.beginPath(); ctx.moveTo(-w / 2 + 1, ly); ctx.lineTo(w / 2 - 1, ly); ctx.moveTo(-w / 2 + 1, ly + lh); ctx.lineTo(w / 2 - 1, ly + lh); ctx.lineWidth = 1.6; ctx.stroke(); ctx.fillStyle = C.ink; ctx.textAlign = 'center'; ctx.font = `${Math.round(w * 0.15)}px 'Young Serif', Georgia, serif`; ctx.fillText('Casale', 0, ly + lh * 0.36); ctx.fillText('Verde', 0, ly + lh * 0.53); ctx.font = `600 ${Math.max(6, Math.round(w * 0.075))}px 'Instrument Sans Variable', system-ui, sans-serif`; ctx.fillText('EXTRA VIRGIN', 0, ly + lh * 0.7); /* a sprig of olive under the name */ ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-w * 0.22, ly + lh * 0.82); ctx.quadraticCurveTo(0, ly + lh * 0.76, w * 0.22, ly + lh * 0.82); ctx.stroke(); [-0.14, -0.02, 0.1].forEach((p, i) => { ctx.beginPath(); ctx.ellipse(w * p, ly + lh * (0.8 - (i % 2) * 0.05), w * 0.05, w * 0.018, i % 2 ? -0.5 : 0.5, 0, Math.PI * 2); ctx.fill(); }); /* the cap */ const n = w * 0.19; ctx.fillStyle = C.ink; ctx.fillRect(-n, -h / 2 - h * 0.06, n * 2, h * 0.065); ctx.strokeStyle = C.bone; ctx.lineWidth = 1; ctx.globalAlpha = 0.55; for (let i = -2; i <= 2; i++) { ctx.beginPath(); ctx.moveTo(i * n * 0.4 + jit(i + 9) * 0.3, -h / 2 - h * 0.055); ctx.lineTo(i * n * 0.4 + jit(i + 9) * 0.3, -h / 2 - h * 0.002); ctx.stroke(); } ctx.globalAlpha = 1; /* the outline */ path(out); ctx.strokeStyle = C.ink; ctx.lineWidth = 2.8; ctx.lineJoin = 'round'; ctx.stroke(); ctx.restore(); } function draw() { ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.fillStyle = C.back; ctx.fillRect(0, 0, W, H); drawBoard(); drawPuddles(); drawBowl(drawStream); drawBottle(); } /* ---------------------------------------------------------------- the round cursor */ const pointer = { x: -200, y: -200, sx: -200, sy: -200, vx: 0, vy: 0, on: false }; if (FINE) { cursorEl.style.display = 'block'; gsap.set(cursorEl, { scale: 0 }); addEventListener('pointermove', (e) => { pointer.x = e.clientX; pointer.y = e.clientY; const r = stage.getBoundingClientRect(); const over = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom; if (over !== pointer.on) { pointer.on = over; if (!over) gsap.to(cursorEl, { scale: 0, duration: 0.3, ease: 'power2.in', overwrite: 'auto' }); else gsap.to(cursorEl, { scale: hold ? 0.5 : 1, duration: 0.6, ease: 'power2.out', overwrite: 'auto' }); } }); } function moveCursor(dt) { if (!FINE) return; const k = 1 - Math.pow(0.9, dt * 60); const lx = pointer.sx; const ly = pointer.sy; pointer.sx += (pointer.x - pointer.sx) * k; pointer.sy += (pointer.y - pointer.sy) * k; /* its speed, smoothed: it stretches along it and narrows across it */ pointer.vx += ((pointer.sx - lx) - pointer.vx) * Math.min(1, 0.1 * dt * 60); pointer.vy += ((pointer.sy - ly) - pointer.vy) * Math.min(1, 0.1 * dt * 60); const speed = Math.hypot(pointer.vx, pointer.vy); const f = REDUCED ? 0 : Math.min(1, speed * STRETCH * (hold ? 4 : 1)); const a = Math.atan2(pointer.vy, pointer.vx); cursorEl.style.left = `${pointer.sx.toFixed(1)}px`; cursorEl.style.top = `${pointer.sy.toFixed(1)}px`; discEl.style.transform = `rotate(${a.toFixed(3)}rad) scale(${(1 + f).toFixed(3)}, ${(1 - f * 0.1).toFixed(3)}) rotate(${(-a).toFixed(3)}rad)`; } /* ---------------------------------------------------------------- the clock */ gsap.ticker.add((time, delta) => { const dt = Math.min(delta / 1000, 1 / 30); boil = REDUCED ? 0 : Math.floor(time * BOIL) % 3; step(dt, time); draw(); moveCursor(dt); }); /* ---------------------------------------------------------------- sizes, and coming in */ layout(); bottle.x = G.restX; bottle.y = G.restY; bottle.mouth = toWorld([0, -G.h / 2]); new ResizeObserver(() => { const r = stage.getBoundingClientRect(); if (Math.abs(r.width - W) < 1 && Math.abs(r.height - H) < 1) return; const keep = { x: bottle.x - G.restX, y: bottle.y - G.restY }; layout(); bottle.x = G.restX + keep.x; bottle.y = G.restY + keep.y; drops.length = 0; puddles.length = 0; }).observe(stage); if (!REDUCED) { /* the bottle drops in and settles, the bowl slides in, the words rise */ bottle.y = -G.h; bowl.dx = W * 0.6; gsap.to(bowl, { dx: 0, duration: 1.1, ease: 'power3.out', delay: 0.2 }); /* fromTo e non from: la transizione CSS del pulsante faceva leggere a GSAP un arrivo a metà strada e il pulsante restava 26 px più in basso; alla fine il transform in linea si toglie, così torna l'ingrandimento in hover */ gsap.fromTo('.copy > *', { y: 26, opacity: 0 }, { y: 0, opacity: 1, duration: 0.9, ease: 'power3.out', stagger: 0.08, delay: 0.1, clearProps: 'transform' }); }