/* The marble jar A kudos counter: a clear glass jar of cat's eye marbles, standing on its own, with a paper tag tied round its neck that shows the count. Give kudos drops a marble in from above: it falls through the mouth of the jar, bounces off the glass and off the marbles already there, rolls and settles, and the number on the tag rolls on by one. Holding the button (or holding Enter on it) pours a stream, a marble every HOLD[1] seconds, until the jar is full and the button says Jar's full. The minus button lifts the top marble out with a little pluck and the others settle again. The jar can be dragged sideways, or shaken with Enter when it has the focus: the glass moves, the marbles feel the walls and the floor move under them and rattle, and the tag swings on its string. The marbles are circles in a flat world measured in the drawing's units, under gravity. Every frame is cut into steps of 1/480 s. In each step the contacts between marbles, and with the walls and the floor of the jar (which move with the jar), are solved as impulses: a push along the contact that can never pull, a bounce only above a small speed, and friction across the contact, limited by the push, that turns the marbles, so they roll instead of sliding. The pushes of the last step are reused as a first guess, and any overlap left is pushed apart, so a pile stands still instead of trembling. Once every marble has been still for a moment the world sleeps and nothing is redrawn until the next kudos, pluck or shake. Each marble is three pictures drawn once for the screen's size: the clear glass, the coloured vanes inside, and the dark edge and highlights on top. Only the vanes turn with the marble, so the light stays top left while it rolls. The jar is SVG, behind and in front of the canvas; the colours of the marbles, like all the others, are in :root. */ /* ---- valori da cambiare ---- */ const NAME = 'Marta'; /* who the kudos are for: on the tag, and in the words read out */ const START = 12; /* the marbles already in the jar when the page opens */ const MAX = 40; /* how many the jar holds (bigger marbles hold fewer: it never overflows) */ const HOLD = [0.32, 0.12]; /* holding the button: the wait before it pours, then the gap between marbles, in seconds */ const GRAVITY = 2600; /* in the drawing's units (about a pixel) per second squared */ const BOUNCE = 0.42; /* how much of its speed a marble keeps when it bounces off another */ const BOUNCE_GLASS = 0.33; /* and off the glass of the jar */ const FRICTION = 0.3; /* glass on glass: what makes the marbles roll instead of slide */ const ROLLING = 1.4; /* how fast a rolling marble loses its spin, per second */ const SIZE = [16, 18.4]; /* the marbles' radius, smallest and largest, in the drawing's units */ const SHAKE = 32; /* how far the jar can be dragged to either side */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const root = document.querySelector('[data-kj]'); const scene = root.querySelector('[data-scene]'); const canvas = root.querySelector('[data-canvas]'); const ctx = canvas.getContext('2d'); const artBack = root.querySelector('[data-art="back"]'); const artFront = root.querySelector('[data-art="front"]'); const movers = [...root.querySelectorAll('[data-move]')]; const edges = [...root.querySelectorAll('[data-edge]')]; const tagEl = root.querySelector('[data-tag]'); const countEl = root.querySelector('[data-count]'); const lessBtn = root.querySelector('[data-less]'); const moreBtn = root.querySelector('[data-more]'); const wordEl = root.querySelector('[data-word]'); const forEl = root.querySelector('[data-for]'); const live = root.querySelector('[data-live]'); const TAU = Math.PI * 2; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const f1 = (n) => +n.toFixed(2); /* ---------------------------------------------------------------- the jar, in the drawing's units */ const VIEW = { x: -170, y: -380, w: 340, h: 396 }; /* what the scene shows; the jar stands on y 0 */ const HW = 110; /* the inside of the jar: half its width */ const OW = 118; /* the outside: the glass is 8 thick */ const FLOOR = -28; /* the top of the thick glass bottom, where the marbles rest */ const FLOOR_RY = 10; /* seen from a little above, the round floor is an ellipse this tall */ const BASE_Y = -12; /* the bottom edge of the jar: an ellipse whose front touches y 0 */ const BASE_RY = 12; const CORNER = 22; /* the rounded inside corners of the bottom */ const RIM = -302; /* the rolled rim: its middle line */ const RIM_RY = 17; /* the rim's ellipse */ const BEAD = 8; /* how thick the rolled glass of the rim is (a radius) */ const TW_Y = RIM + 13; /* the string round the neck, just under the rim */ const TW_RX = OW + 1.5; const TW_RY = 16; const KNOT_T = 0.72; /* where the knot is on the string: an angle from the right towards the front */ const TAG_L = 60; /* the tag as a pendulum: how long */ const TAG_REST = -0.05; /* how it hangs at rest, in radians (a little outwards) */ const TAG_DAMP = 2.4; /* how soon it stops swinging */ const JAR_K = 720; /* the jar follows the hand on a stiff spring... */ const JAR_C = 22; /* ...with a little give */ const JAR_VMAX = 560; /* the fastest the jar can move, units per second */ /* ---------------------------------------------------------------- colours for the canvas */ const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16)); const mix = (a, b, t) => { const A = hex(a); const B = hex(b); return '#' + A.map((v, i) => Math.round(v + (B[i] - v) * t).toString(16).padStart(2, '0')).join(''); }; const rgba = (h, a) => `rgba(${hex(h).join(',')},${a})`; /* the marbles' colours live in :root, two for each kind (the vanes' deep middle and their bright tips); the tint of the glass is the bright one, almost white. Any colour CSS knows is turned into hex by a canvas */ const probe = document.createElement('canvas').getContext('2d'); const style = getComputedStyle(document.documentElement); function cssHex(name, fallback) { probe.fillStyle = fallback; probe.fillStyle = style.getPropertyValue(name).trim() || fallback; const c = probe.fillStyle; if (c[0] === '#') return c; const v = c.match(/[\d.]+/g) || [128, 128, 128]; return '#' + v.slice(0, 3).map((n) => Math.round(+n).toString(16).padStart(2, '0')).join(''); } const KINDS = ['tomato', 'cobalt', 'jade', 'marigold', 'violet', 'rose']; const PALETTES = KINDS.map((kind) => { const deep = cssHex(`--${kind}`, '#555555'); const bright = cssHex(`--${kind}-light`, '#aaaaaa'); return [deep, bright, mix(bright, '#ffffff', 0.9)]; }); const SHADOW = cssHex('--shadow', '#2f2a22'); /* ---------------------------------------------------------------- the drawing of the jar */ /* points along an ellipse from angle t0 to t1; y grows downwards, so angles between 0 and PI are its front half */ function arc(cx, cy, rx, ry, t0, t1, first = 'M', n = 44) { let d = ''; for (let i = 0; i <= n; i++) { const t = t0 + ((t1 - t0) * i) / n; d += `${i ? 'L' : first}${f1(cx + rx * Math.cos(t))} ${f1(cy + ry * Math.sin(t))}`; } return d; } const PI = Math.PI; const RO = { rx: OW + BEAD, ry: RIM_RY + BEAD }; /* the rim's outer edge */ const RI = { rx: OW - BEAD, ry: RIM_RY - BEAD }; /* its inner edge: the mouth */ const body = `M${-OW} ${RIM}L${-OW} ${BASE_Y}${arc(0, BASE_Y, OW, BASE_RY, PI, 0, 'L')}L${OW} ${RIM}Z`; const ringFront = arc(0, RIM, RO.rx, RO.ry, PI, 0) + arc(0, RIM, RI.rx, RI.ry, 0, PI, 'L') + 'Z'; const ringBack = arc(0, RIM, RO.rx, RO.ry, PI, TAU) + arc(0, RIM, RI.rx, RI.ry, TAU, PI, 'L') + 'Z'; const baseFront = `M${-OW} ${FLOOR}L${-OW} ${BASE_Y}${arc(0, BASE_Y, OW, BASE_RY, PI, 0, 'L')}L${OW} ${FLOOR}` + `L${HW} ${FLOOR}${arc(0, FLOOR, HW, FLOOR_RY, 0, PI, 'L')}Z`; const knot = [TW_RX * Math.cos(KNOT_T), TW_Y + TW_RY * Math.sin(KNOT_T) + 1.6]; /* the twist of the string: short slanted marks along it, closer together where it turns away round the sides */ function twist(cy) { let d = ''; for (let i = 1; i < 76; i++) { const t = PI - (PI * i) / 76; const x = TW_RX * Math.cos(t); const y = cy + TW_RY * Math.sin(t); const tx = -TW_RX * Math.sin(t); const ty = TW_RY * Math.cos(t); const l = Math.hypot(tx, ty); const ux = (tx / l) * 0.7; const uy = (ty / l) * 0.7; d += `M${f1(x - ux - uy * 1.3)} ${f1(y - uy + ux * 1.3)}L${f1(x + ux + uy * 1.3)} ${f1(y + uy - ux * 1.3)}`; } return d; } /* behind the marbles: the shadow on the page, the back of the glass, the far half of the rim, the floor */ artBack.innerHTML = ` `; /* in front of the marbles: the thick bottom, the sides seen edge-on, the reflections, the near half of the rim, the string and its knot */ const glintV = (id, a) => ` `; const side = (id, x1, x2, a) => ` `; const H2 = BASE_Y - RIM; artFront.innerHTML = ` ${side('kj-side-l', 0, 1, 0.85)} ${side('kj-side-r', 1, 0, 0.5)} ${glintV('kj-glint', 0.72)} ${glintV('kj-glint-soft', 0.28)} `; /* the soft strips at the sides, and the tag hung from the knot */ const pct = (v, o, w) => `${(((v - o) / w) * 100).toFixed(3)}%`; edges.forEach((el, i) => { const x0 = i ? HW - 9 : -OW; el.style.left = pct(x0, VIEW.x, VIEW.w); el.style.width = `${((OW - HW + 9) / VIEW.w) * 100}%`; el.style.top = pct(RIM + 12, VIEW.y, VIEW.h); el.style.height = `${((FLOOR - RIM - 12) / VIEW.h) * 100}%`; }); tagEl.style.left = pct(knot[0], VIEW.x, VIEW.w); tagEl.style.top = pct(knot[1], VIEW.y, VIEW.h); /* ---------------------------------------------------------------- how many fit */ /* the marbles' radii, kept to what the jar's round corners and walls can hold; and the most the jar takes without the pile reaching the string round its neck: a loose pile of circles fills about seven tenths of the space */ const RMIN = clamp(Math.min(SIZE[0], SIZE[1]), 8, 21); const RMAX = clamp(Math.max(SIZE[0], SIZE[1]), RMIN, 21); const RAVG = (RMIN + RMAX) / 2; const FIT = Math.floor((0.7 * HW * 2 * (FLOOR - (RIM + 32))) / (PI * RAVG * RAVG)); const HI = Math.max(1, Math.min(Math.round(MAX), FIT)); const FIRST = clamp(Math.round(START), 0, HI); /* ---------------------------------------------------------------- the marbles, drawn once */ const SPR = { size: 0, list: [], shadow: null }; function paint(S, fn) { const cv = document.createElement('canvas'); cv.width = cv.height = S; fn(cv.getContext('2d'), S / 2); return cv; } function disc(g, c, r) { g.beginPath(); g.arc(c, c, r, 0, TAU); } /* the clear glass, faintly tinted, a little deeper towards its edge */ function glass(g, c, R, [deep, , tint]) { const gr = g.createRadialGradient(c - R * 0.3, c - R * 0.34, R * 0.05, c, c, R); gr.addColorStop(0, rgba(tint, 0.82)); gr.addColorStop(0.68, rgba(mix(tint, deep, 0.08), 0.62)); gr.addColorStop(1, rgba(mix(tint, deep, 0.3), 0.72)); g.fillStyle = gr; disc(g, c, R); g.fill(); } /* the cat's eye: blades of coloured glass through the middle, pointed at both ends and twisted, so one half shows its face and the other its edge; deep at the root, bright at the tips, with a few small bubbles in the glass */ const BLADES = [ [[0.25, 0.34, 1], [1.85, 0.13, 0.94]], /* two blades crossing: the classic eye */ [[0, 0.27, 1], [TAU / 3, 0.22, 0.95], [(TAU * 2) / 3, 0.25, 0.97]], /* three, like a propeller */ ]; const BUBBLES = [[0.42, 0.5, 0.05], [-0.35, 0.3, 0.035], [0.1, -0.6, 0.028], [-0.55, -0.2, 0.022]]; function vanes(g, c, R, [deep, bright], v) { g.save(); g.translate(c, c); g.beginPath(); g.arc(0, 0, R * 0.95, 0, TAU); g.clip(); for (const [ang, wq, lq] of BLADES[v]) { g.save(); g.rotate(ang); const L = R * 0.95 * lq; const W = R * wq; const s = R * 0.13; const mid = (u) => s * Math.sin(PI * u); const half = (u) => W * Math.pow(1 - u * u, 0.7) * (1 + 0.45 * u); g.beginPath(); for (let i = 0; i <= 28; i++) { const u = -1 + (2 * i) / 28; g[i ? 'lineTo' : 'moveTo'](u * L, mid(u) - half(u)); } for (let i = 28; i >= 0; i--) { const u = -1 + (2 * i) / 28; g.lineTo(u * L, mid(u) + half(u)); } g.closePath(); const gr = g.createRadialGradient(0, 0, 0, 0, 0, L); gr.addColorStop(0, mix(deep, '#000000', 0.12)); gr.addColorStop(0.45, deep); gr.addColorStop(1, bright); g.fillStyle = gr; g.fill(); /* the twist: one face of the blade turned to the light, the other away */ g.save(); g.clip(); const sh = g.createLinearGradient(-L * 0.6, -W - s, L * 0.6, W + s); sh.addColorStop(0, 'rgba(255,255,255,0.5)'); sh.addColorStop(0.42, 'rgba(255,255,255,0.05)'); sh.addColorStop(0.58, 'rgba(0,0,0,0.04)'); sh.addColorStop(1, 'rgba(0,0,0,0.26)'); g.fillStyle = sh; g.fillRect(-L, -W * 2 - s, L * 2, (W + s) * 4); g.restore(); /* a fine bright edge along the face */ g.strokeStyle = rgba(mix(bright, '#ffffff', 0.55), 0.7); g.lineWidth = R * 0.03; g.beginPath(); for (let i = 4; i <= 24; i++) { const u = -1 + (2 * i) / 28; g[i > 4 ? 'lineTo' : 'moveTo'](u * L, mid(u) - half(u) * 0.62); } g.stroke(); g.restore(); } /* small bubbles caught in the glass */ for (const [bx, by, br] of BUBBLES.slice(0, 2 + v * 2)) { g.fillStyle = 'rgba(255,255,255,0.55)'; g.strokeStyle = 'rgba(40,60,60,0.25)'; g.lineWidth = R * 0.012; g.beginPath(); g.arc(bx * R, by * R, br * R, 0, TAU); g.fill(); g.stroke(); } /* the tips are deeper in the glass: a little fainter */ g.globalCompositeOperation = 'destination-in'; const m = g.createRadialGradient(0, 0, 0, 0, 0, R); m.addColorStop(0, 'rgba(0,0,0,1)'); m.addColorStop(0.6, 'rgba(0,0,0,0.96)'); m.addColorStop(0.95, 'rgba(0,0,0,0.55)'); g.fillStyle = m; g.fillRect(-R, -R, R * 2, R * 2); g.restore(); } /* on top, and never turning: the dark edge of the sphere, the light it gathers low right, the highlight top left */ function shine(g, c, R, [deep, bright]) { let gr = g.createRadialGradient(c, c, R * 0.5, c, c, R); const edge = mix(deep, '#1c3433', 0.55); gr.addColorStop(0, rgba(edge, 0)); gr.addColorStop(0.72, rgba(edge, 0.1)); gr.addColorStop(0.93, rgba(edge, 0.42)); gr.addColorStop(1, rgba(edge, 0.6)); g.fillStyle = gr; disc(g, c, R); g.fill(); g.save(); disc(g, c, R); g.clip(); gr = g.createRadialGradient(c + R * 0.3, c + R * 0.46, 0, c + R * 0.3, c + R * 0.46, R * 0.52); gr.addColorStop(0, rgba(mix(bright, '#ffffff', 0.6), 0.75)); gr.addColorStop(1, rgba(mix(bright, '#ffffff', 0.6), 0)); g.fillStyle = gr; g.fillRect(0, 0, c * 2, c * 2); /* a thin light along the lower right edge, from the room behind */ g.strokeStyle = 'rgba(255,255,255,0.5)'; g.lineWidth = R * 0.07; g.beginPath(); g.arc(c, c, R * 0.88, 0.05, 1.45); g.stroke(); g.restore(); /* the highlight: a soft window and a hard spark in it */ g.save(); g.translate(c - R * 0.36, c - R * 0.42); g.rotate(-0.62); g.scale(1, 0.62); gr = g.createRadialGradient(0, 0, 0, 0, 0, R * 0.4); gr.addColorStop(0, 'rgba(255,255,255,0.95)'); gr.addColorStop(0.45, 'rgba(255,255,255,0.6)'); gr.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = gr; g.beginPath(); g.arc(0, 0, R * 0.4, 0, TAU); g.fill(); g.restore(); g.fillStyle = 'rgba(255,255,255,0.98)'; g.beginPath(); g.ellipse(c - R * 0.42, c - R * 0.47, R * 0.09, R * 0.065, -0.6, 0, TAU); g.fill(); g.fillStyle = 'rgba(255,255,255,0.55)'; g.beginPath(); g.ellipse(c + R * 0.46, c - R * 0.3, R * 0.05, R * 0.11, 0.6, 0, TAU); g.fill(); g.strokeStyle = 'rgba(24,44,44,0.32)'; g.lineWidth = Math.max(1, R * 0.035); disc(g, c, R - g.lineWidth / 2); g.stroke(); } /* the coloured light a marble throws onto the floor beside its shadow */ function glow(g, c, [, bright]) { const gr = g.createRadialGradient(c, c, 0, c, c, c); gr.addColorStop(0, rgba(mix(bright, '#ffffff', 0.25), 0.8)); gr.addColorStop(1, rgba(bright, 0)); g.fillStyle = gr; g.fillRect(0, 0, c * 2, c * 2); } function buildSprites(k) { const R = RMAX * k; const S = Math.ceil(R * 2 + 4); SPR.size = S / k; /* the picture's size in units, for the largest marble */ SPR.list = PALETTES.map((p) => ({ glass: paint(S, (g, c) => glass(g, c, R, p)), vanes: [0, 1].map((v) => paint(S, (g, c) => vanes(g, c, R, p, v))), shine: paint(S, (g, c) => shine(g, c, R, p)), glow: paint(64, (g, c) => glow(g, c, p)), })); SPR.shadow = paint(64, (g, c) => { const gr = g.createRadialGradient(c, c, 0, c, c, c); gr.addColorStop(0, rgba(SHADOW, 0.5)); gr.addColorStop(0.5, rgba(SHADOW, 0.22)); gr.addColorStop(1, rgba(SHADOW, 0)); g.fillStyle = gr; g.fillRect(0, 0, c * 2, c * 2); }); } /* ---------------------------------------------------------------- the world */ const H = 1 / 480; /* one step of the world, in seconds */ const ITER = 8; /* how many times the contacts are worked through in a step */ const SLOP = 0.08; /* the overlap left alone, so resting contacts stay in touch */ const REST_V = 45; /* slower than this, a marble meets another without bouncing */ const STILL_V = Math.max(5, GRAVITY * H); /* slower than this, a marble counts as still... */ const STILL_T = 0.35; /* ...once it has been for this long */ const SLOTS = HI + 12; const pairStamp = new Int32Array(SLOTS * SLOTS).fill(-9); const pairJ = new Float32Array(SLOTS * SLOTS * 2); const wallStamp = new Int32Array(SLOTS * 3).fill(-9); const wallJ = new Float32Array(SLOTS * 3 * 2); const freeSlots = Array.from({ length: SLOTS }, (_, i) => SLOTS - 1 - i); const balls = []; /* the marbles in the world, the newest last */ const ghosts = []; /* marbles being lifted out: drawn, but out of the world */ const pool = []; let nc = 0; let stepNo = 0; let asleep = true; let fading = 0; const jar = { x: 0, v: 0, t: 0 }; /* where the jar is, how fast it moves, where the hand wants it */ const tag = { a: TAG_REST, v: 0 }; /* the colours come out of a shuffled bag, so the jar always holds a fair mix and never two alike in a row */ let bag = []; let lastPal = -1; function nextPalette() { if (!bag.length) { bag = PALETTES.map((_, i) => i); for (let i = bag.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [bag[i], bag[j]] = [bag[j], bag[i]]; } if (bag[bag.length - 1] === lastPal && bag.length > 1) [bag[0], bag[bag.length - 1]] = [bag[bag.length - 1], bag[0]]; } lastPal = bag.pop(); return lastPal; } function makeBall(x, y) { const r = RMIN + Math.random() * (RMAX - RMIN); const m = (r / 16) ** 3; const pal = nextPalette(); return { slot: freeSlots.pop(), x, y, vx: 0, vy: 0, a: Math.random() * TAU, w: 0, r, im: 1 / m, iI: 1 / (0.4 * m * r * r), pal, look: Math.random() < 0.6 ? 0 : 1, alpha: 1, still: 0, fresh: true, }; } function freeBall(b) { const s = b.slot; for (let i = 0; i < SLOTS; i++) { pairStamp[s * SLOTS + i] = -9; pairStamp[i * SLOTS + s] = -9; } for (let w = 0; w < 3; w++) wallStamp[s * 3 + w] = -9; freeSlots.push(s); } /* an impulse at a contact: jn along the normal (from A to B), jt across it, turning both */ function push(c, jn, jt) { const A = c.A; const B = c.B; const tx = -c.ny; const ty = c.nx; const px = c.nx * jn + tx * jt; const py = c.ny * jn + ty * jt; A.vx -= px * A.im; A.vy -= py * A.im; A.w -= jt * A.r * A.iI; if (B) { B.vx += px * B.im; B.vy += py * B.im; B.w -= jt * B.r * B.iI; } } function newContact(A, B, nx, ny, key, wall) { /* a new marble's first touch, with the glass or another marble, is when it has landed: the tag counts it */ if (A.fresh) landed(A); if (B && B.fresh) landed(B); const c = pool[nc] || (pool[nc] = {}); nc++; c.A = A; c.B = B; c.nx = nx; c.ny = ny; c.wx = B ? 0 : jar.v; c.key = key; c.wall = wall; const imB = B ? B.im : 0; const iIB = B ? B.r * B.r * B.iI : 0; c.kn = 1 / (A.im + imB); c.kt = 1 / (A.im + imB + A.r * A.r * A.iI + iIB); c.mu = FRICTION; c.jn = 0; c.jt = 0; /* the same contact as a step ago is a resting one: it never bounces, and it starts from the push it needed then (applied once all the contacts are known). Only a new contact, an impact, can bounce */ const stamp = wall ? wallStamp : pairStamp; const J = wall ? wallJ : pairJ; const vn = ((B ? B.vx : c.wx) - A.vx) * nx + ((B ? B.vy : 0) - A.vy) * ny; if (stamp[key] === stepNo - 1) { c.bias = 0; c.jn = J[key * 2] * 0.95; c.jt = J[key * 2 + 1] * 0.95; } else c.bias = vn < -REST_V ? -(B ? BOUNCE : BOUNCE_GLASS) * vn : 0; } function solve(c) { const A = c.A; const B = c.B; const nx = c.nx; const ny = c.ny; let dvx = (B ? B.vx : c.wx) - A.vx; let dvy = (B ? B.vy : 0) - A.vy; const vn = dvx * nx + dvy * ny; const j0 = c.jn; c.jn = Math.max(0, j0 + (c.bias - vn) * c.kn); const dj = c.jn - j0; if (dj) push(c, dj, 0); dvx = (B ? B.vx : c.wx) - A.vx; dvy = (B ? B.vy : 0) - A.vy; const vt = -dvx * ny + dvy * nx - (B ? B.w * B.r : 0) - A.w * A.r; const lim = c.mu * c.jn; const t0 = c.jt; c.jt = clamp(t0 - vt * c.kt, -lim, lim); const dt = c.jt - t0; if (dt) push(c, 0, dt); } /* the inside of the jar, for a marble's centre: a box with rounded bottom corners, open at the top */ function walls(A) { const r = A.r; const hx = HW - r; const fy = FLOOR - r; const rc = Math.max(0.5, CORNER - r); const dx = A.x - jar.x; const sx = dx < 0 ? -1 : 1; if (A.y > fy - rc && dx * sx > hx - rc) { const ex = dx - sx * (hx - rc); const ey = A.y - (fy - rc); const d = Math.hypot(ex, ey); if (d > rc - 0.25) newContact(A, null, ex / d, ey / d, A.slot * 3 + 2, true); } else { if (dx * sx > hx - 0.25) newContact(A, null, sx, 0, A.slot * 3, true); if (A.y > fy - 0.25) newContact(A, null, 0, 1, A.slot * 3 + 1, true); } } function confine(A) { const r = A.r; const hx = HW - r; const fy = FLOOR - r; const rc = Math.max(0.5, CORNER - r); let dx = A.x - jar.x; const sx = dx < 0 ? -1 : 1; if (A.y > fy - rc && dx * sx > hx - rc) { const cx = sx * (hx - rc); const cy = fy - rc; const ex = dx - cx; const ey = A.y - cy; const d = Math.hypot(ex, ey); if (d > rc) { dx = cx + (ex / d) * rc; A.y = cy + (ey / d) * rc; } } else { dx = clamp(dx, -hx, hx); if (A.y > fy) A.y = fy; } A.x = jar.x + dx; } function stepBalls(h) { stepNo++; const n = balls.length; for (let i = 0; i < n; i++) balls[i].vy += GRAVITY * h; /* who touches whom */ nc = 0; for (let i = 0; i < n; i++) { const A = balls[i]; for (let j = i + 1; j < n; j++) { const B = balls[j]; const dx = B.x - A.x; const dy = B.y - A.y; const rs = A.r + B.r + 0.25; if (dx > rs || dx < -rs || dy > rs || dy < -rs) continue; const d2 = dx * dx + dy * dy; if (d2 > rs * rs) continue; const d = Math.sqrt(d2) || 1e-6; const key = A.slot < B.slot ? A.slot * SLOTS + B.slot : B.slot * SLOTS + A.slot; newContact(A, B, dx / d, dy / d, key, false); } walls(A); } /* the pushes: first the guesses from the last step, then the contacts worked through a few times */ for (let c = 0; c < nc; c++) if (pool[c].jn || pool[c].jt) push(pool[c], pool[c].jn, pool[c].jt); for (let it = 0; it < ITER; it++) for (let c = 0; c < nc; c++) solve(pool[c]); for (let c = 0; c < nc; c++) { const k = pool[c]; const stamp = k.wall ? wallStamp : pairStamp; const J = k.wall ? wallJ : pairJ; stamp[k.key] = stepNo; J[k.key * 2] = k.jn; J[k.key * 2 + 1] = k.jt; } /* the move, and the spin a rolling marble loses (always a little, to the air, or without friction a spinning marble would spin for ever); a marble thrown up by a shake never has the speed to clear the rim (inside, the walls keep it in line, but above the jar it would seem to float out) */ const roll = Math.exp(-Math.max(0.5, ROLLING) * h); for (let i = 0; i < n; i++) { const b = balls[i]; if (b.vy < 0) b.vy = Math.max(b.vy, -Math.sqrt(2 * GRAVITY * Math.max(0, b.y - (RIM + b.r + 6)))); b.x += b.vx * h; b.y += b.vy * h; b.a += b.w * h; b.w *= roll; } /* what still overlaps is pushed apart, and the glass keeps every marble inside */ for (let it = 0; it < 3; it++) { for (let c = 0; c < nc; c++) { const k = pool[c]; if (k.wall) continue; const A = k.A; const B = k.B; const dx = B.x - A.x; const dy = B.y - A.y; const d = Math.hypot(dx, dy) || 1e-6; const pen = A.r + B.r - d; if (pen <= SLOP) continue; const s = ((pen - SLOP) * 0.8) / (A.im + B.im) / d; A.x -= dx * s * A.im; A.y -= dy * s * A.im; B.x += dx * s * B.im; B.y += dy * s * B.im; } for (let i = 0; i < n; i++) confine(balls[i]); } /* has everything stopped? */ let still = true; for (let i = 0; i < n; i++) { const b = balls[i]; const v = Math.abs(b.vx) + Math.abs(b.vy) + Math.abs(b.w * b.r); b.still = v < STILL_V ? b.still + h : 0; if (b.still < STILL_T) still = false; } if (still) rest(); } function rest() { for (const b of balls) { b.vx = 0; b.vy = 0; b.w = 0; } asleep = true; } function stir() { for (const b of balls) b.still = 0; asleep = false; } /* run the world at once until it is still: the marbles at the start, and every change with reduced motion */ function settleNow(limit) { stir(); for (let t = 0; t < limit && !asleep; t += H) stepBalls(H); rest(); } /* the jar follows the hand on a spring; the tag hangs from it like a pendulum and feels it accelerate */ function moveJar(h) { const a = JAR_K * (jar.t - jar.x) - JAR_C * jar.v; jar.v = clamp(jar.v + a * h, -JAR_VMAX, JAR_VMAX); jar.x += jar.v * h; if (Math.abs(jar.v) > 2 && asleep) stir(); const at = (-GRAVITY * Math.sin(tag.a - TAG_REST) + a * Math.cos(tag.a)) / TAG_L - TAG_DAMP * tag.v; tag.v += at * h; tag.a = clamp(tag.a + tag.v * h, -0.6, 0.6); } /* ---------------------------------------------------------------- drawing a frame */ let k = 1; let cw = 0; let ch = 0; function drawBall(b, x, y, a, s, alpha) { const p = SPR.list[b.pal]; const size = (SPR.size * b.r * s) / RMAX; const h2 = size / 2; ctx.globalAlpha = alpha; ctx.drawImage(p.glass, x - h2, y - h2, size, size); ctx.save(); ctx.translate(x, y); ctx.rotate(a); ctx.drawImage(p.vanes[b.look], -h2, -h2, size, size); ctx.restore(); ctx.drawImage(p.shine, x - h2, y - h2, size, size); } function draw() { if (!cw) return; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, cw, ch); ctx.setTransform(k, 0, 0, k, -VIEW.x * k, -VIEW.y * k); /* the shadows, only inside the glass: on the floor under each marble, and round each one on the glass behind */ ctx.save(); ctx.beginPath(); ctx.rect(jar.x - HW, RIM + 6, HW * 2, FLOOR + FLOOR_RY - RIM - 6); ctx.clip(); for (const b of balls) { const r = b.r; ctx.globalAlpha = 0.34 * b.alpha; ctx.drawImage(SPR.shadow, b.x - r * 1.05, b.y - r * 0.9, r * 2.3, r * 2.3); const lift = FLOOR - r - b.y; if (lift < 10) { const t = 1 - Math.max(0, lift) / 10; ctx.globalAlpha = 0.8 * t * b.alpha; ctx.drawImage(SPR.shadow, b.x - r * 0.9, FLOOR - r * 0.28, r * 2.1, r * 0.62); ctx.globalAlpha = 0.55 * t * b.alpha; ctx.drawImage(SPR.list[b.pal].glow, b.x + r * 0.05, FLOOR - r * 0.06, r * 1.25, r * 0.36); } } ctx.restore(); for (const b of balls) drawBall(b, b.x, b.y, b.a, 1, b.alpha); for (const g of ghosts) drawBall(g.b, g.x, g.y, g.a, g.s, g.alpha); ctx.globalAlpha = 1; } let lastJar = NaN; let lastTag = NaN; function render() { if (jar.x !== lastJar) { lastJar = jar.x; const t = jar.x ? `translate3d(${((jar.x / VIEW.w) * 100).toFixed(3)}%,0,0)` : ''; movers.forEach((m) => (m.style.transform = t)); } if (tag.a !== lastTag) { lastTag = tag.a; tagEl.style.transform = `translateX(-50%) rotate(${tag.a.toFixed(4)}rad)`; } draw(); } /* ---------------------------------------------------------------- the clock */ let running = false; let acc = 0; let drag = null; function atRest() { const jarStill = !drag && jar.t === 0 && Math.abs(jar.x) < 0.04 && Math.abs(jar.v) < 0.8; const tagStill = Math.abs(tag.a - TAG_REST) < 0.002 && Math.abs(tag.v) < 0.02; if (jarStill) { jar.x = 0; jar.v = 0; } if (tagStill) { tag.a = TAG_REST; tag.v = 0; } return asleep && jarStill && tagStill && !ghosts.length && !fading; } function tick(time, deltaMs) { acc += Math.min(deltaMs / 1000, 1 / 30); let n = 0; while (acc >= H && n < 20) { if (!REDUCED) moveJar(H); if (!asleep) stepBalls(H); acc -= H; n++; } const done = atRest(); render(); if (done) { running = false; acc = 0; gsap.ticker.remove(tick); } } function wake() { if (running) return; running = true; gsap.ticker.add(tick); } /* ---------------------------------------------------------------- the size of the screen */ function resize() { const w = scene.clientWidth; const h = scene.clientHeight; if (!w || !h) return; const dpr = Math.min(window.devicePixelRatio || 1, 3); const W = Math.round(w * dpr); const Hh = Math.round(h * dpr); if (W === cw && Hh === ch) return; cw = canvas.width = W; ch = canvas.height = Hh; k = W / VIEW.w; buildSprites(k); render(); } new ResizeObserver(resize).observe(scene); /* ---------------------------------------------------------------- the number on the tag */ const SLOTN = String(HI).length; const slots = Array.from({ length: SLOTN }, () => { const el = document.createElement('span'); el.className = 'kj__slot'; countEl.appendChild(el); return { el, cur: null, d: null }; }); function rollDigit(slot, d, dir, first) { const old = slot.cur; const el = document.createElement('span'); el.className = 'kj__digit'; el.textContent = d; slot.el.appendChild(el); slot.cur = el; slot.d = d; if (!old) return; /* a change on top of a change: the digit that was leaving goes at once */ [...slot.el.children].forEach((c) => { if (c !== old && c !== el) { gsap.killTweensOf(c); c.remove(); } }); gsap.killTweensOf(old); if (REDUCED || first) { gsap.to(old, { opacity: 0, duration: 0.15, onComplete: () => old.remove() }); gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.25 }); return; } gsap.to(old, { yPercent: -100 * dir, opacity: 0, duration: 0.3, ease: 'power2.in', onComplete: () => old.remove() }); gsap.fromTo(el, { yPercent: 100 * dir, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.42, ease: 'back.out(1.7)' }); } function showCount(n, dir, first) { const s = String(n).padStart(SLOTN, ' '); slots.forEach((slot, i) => { const d = s[i] === ' ' ? '' : s[i]; if (d !== slot.d) rollDigit(slot, d, dir, first); /* a leading slot with nothing in it folds away, and opens again for a new digit */ if (i === SLOTN - 1) return; if (first || REDUCED) gsap.set(slot.el, { width: d ? '0.58em' : 0 }); else gsap.to(slot.el, { width: d ? '0.58em' : 0, duration: 0.35, ease: 'power3.out', overwrite: true }); }); } /* ---------------------------------------------------------------- the count, the buttons, the words */ let liveCall = null; let onTag = 0; function landed(b) { b.fresh = false; onTag++; showCount(onTag, 1, false); } function counted(dir, first) { const n = balls.length; if (first) { onTag = n; showCount(n, 0, true); } const full = n >= HI; wordEl.textContent = full ? 'Jar’s full' : 'Give kudos'; if (full) moreBtn.setAttribute('aria-disabled', 'true'); else moreBtn.removeAttribute('aria-disabled'); if (n === 0) lessBtn.setAttribute('aria-disabled', 'true'); else lessBtn.removeAttribute('aria-disabled'); /* the automatic preview turns round when the jar is full, and comes back once it is down to the start */ if (full || n <= Math.min(FIRST, HI - 1)) { lessBtn.toggleAttribute('data-autoclic', full); moreBtn.toggleAttribute('data-autoclic', !full); } /* the words are there from the start for anyone who reads the card; a stream of marbles is read out once, when it stops */ const say = () => { const m = balls.length; live.textContent = `${m} kudos for ${NAME}${m >= HI ? '. The jar is full' : ''}`; }; if (liveCall) liveCall.kill(); if (first) say(); else liveCall = gsap.delayedCall(0.45, say); } /* a kudos: a marble comes in from above the frame and falls into the jar */ function give() { if (balls.length >= HI) return false; const b = makeBall(0, 0); b.x = jar.x + (Math.random() * 2 - 1) * (HW - b.r) * 0.55; b.y = VIEW.y - b.r - 2; b.vx = (Math.random() * 2 - 1) * 30; b.vy = 160; b.w = (Math.random() * 2 - 1) * 5; balls.push(b); if (REDUCED) { /* it is simply there, where it would have come to rest, and fades in */ settleNow(5); b.alpha = 0; fading++; gsap.to(b, { alpha: 1, duration: 0.35, ease: 'power1.out', onComplete: () => fading-- }); } else stir(); counted(1); wake(); return true; } /* a kudos taken back: the top marble is plucked and lifted out */ function take() { if (!balls.length) return false; let top = balls[0]; for (const b of balls) if (b.y - b.r < top.y - top.r) top = b; balls.splice(balls.indexOf(top), 1); freeBall(top); if (!top.fresh) { onTag--; showCount(onTag, -1, false); } const g = { b: top, x: top.x, y: top.y, a: top.a, s: 1, alpha: 1 }; ghosts.push(g); const gone = () => { ghosts.splice(ghosts.indexOf(g), 1); if (REDUCED) settleNow(5); }; if (REDUCED) { gsap.to(g, { alpha: 0, duration: 0.3, ease: 'power1.in', onComplete: gone }); } else { const to = RIM - 60 - Math.random() * 20; gsap.timeline({ onComplete: gone }) .to(g, { y: g.y + 2, s: 0.97, duration: 0.07, ease: 'power2.out' }) .to(g, { y: g.y - 7, s: 1.07, a: g.a - 0.35, duration: 0.12, ease: 'back.out(3)' }) .to(g, { y: to, x: g.x + (jar.x - g.x) * 0.25, a: g.a + 1.6, s: 0.94, duration: 0.62, ease: 'power2.inOut' }) .to(g, { alpha: 0, duration: 0.26, ease: 'power1.in' }, '-=0.3'); stir(); } counted(-1); wake(); return true; } /* holding + pours: one at once, then a stream until the jar is full or the button is let go */ let pourCall = null; let pouring = false; let fromHand = false; function pour() { stopPour(); pouring = true; moreBtn.classList.add('is-held'); give(); const next = () => { if (!pouring) return; if (!give()) { stopPour(); return; } pourCall = gsap.delayedCall(Math.max(0.04, HOLD[1]), next); }; pourCall = gsap.delayedCall(Math.max(0.05, HOLD[0]), next); } function stopPour() { pouring = false; if (pourCall) pourCall.kill(); pourCall = null; moreBtn.classList.remove('is-held'); } /* the click that follows a press has already been a marble; one that does not come must not eat the next */ function letGoOfButton() { stopPour(); requestAnimationFrame(() => { fromHand = false; }); } /* ---------------------------------------------------------------- hands and keys */ const isKey = (e) => e.key === 'Enter' || e.key === ' '; moreBtn.addEventListener('pointerdown', (e) => { if (e.button !== 0 || pouring) return; fromHand = true; try { moreBtn.setPointerCapture(e.pointerId); } catch (err) { /* a pointer that cannot be captured still works */ } pour(); }); moreBtn.addEventListener('pointerup', letGoOfButton); moreBtn.addEventListener('pointercancel', letGoOfButton); moreBtn.addEventListener('lostpointercapture', () => { if (pouring) letGoOfButton(); }); moreBtn.addEventListener('keydown', (e) => { if (!isKey(e)) return; e.preventDefault(); if (e.repeat) return; fromHand = true; pour(); }); moreBtn.addEventListener('keyup', (e) => { if (isKey(e)) letGoOfButton(); }); moreBtn.addEventListener('blur', stopPour); moreBtn.addEventListener('contextmenu', (e) => e.preventDefault()); /* a click on its own (a screen reader, the automatic preview) is one marble */ moreBtn.addEventListener('click', () => { if (fromHand) { fromHand = false; return; } give(); }); lessBtn.addEventListener('click', take); /* the jar: dragged sideways it follows the hand (with a give at the ends), let go it springs back */ const unit = () => VIEW.w / scene.clientWidth; const reach = (v) => SHAKE * Math.tanh(v / SHAKE); function shake() { const tl = gsap.timeline({ onComplete: () => (jar.t = 0) }); [22, -20, 16, -12, 7, 0].forEach((x) => tl.to(jar, { t: x, duration: 0.075, ease: 'sine.inOut' })); wake(); } if (REDUCED) { /* without motion the jar stays put: it is not a control then */ scene.removeAttribute('role'); scene.removeAttribute('tabindex'); scene.removeAttribute('aria-label'); scene.setAttribute('data-still', ''); } else { scene.addEventListener('pointerdown', (e) => { if (e.button !== 0) return; drag = { id: e.pointerId, x0: e.clientX, t0: jar.t, moved: false }; scene.setPointerCapture(e.pointerId); scene.classList.add('is-dragging'); gsap.killTweensOf(jar); wake(); }); scene.addEventListener('pointermove', (e) => { if (!drag || e.pointerId !== drag.id) return; const dx = (e.clientX - drag.x0) * unit(); if (Math.abs(dx) > 2) drag.moved = true; jar.t = reach(drag.t0 + dx); }); const letGo = (e) => { if (!drag || e.pointerId !== drag.id) return; /* a tap without a drag is a knock on the glass */ if (!drag.moved && e.type === 'pointerup') jar.v += 90; drag = null; jar.t = 0; scene.classList.remove('is-dragging'); wake(); }; scene.addEventListener('pointerup', letGo); scene.addEventListener('pointercancel', letGo); scene.addEventListener('keydown', (e) => { if (isKey(e)) { e.preventDefault(); if (!e.repeat) shake(); } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); const s = e.key === 'ArrowLeft' ? -1 : 1; gsap.timeline({ onComplete: () => (jar.t = 0) }) .to(jar, { t: s * 20, duration: 0.09, ease: 'power2.out' }) .to(jar, { t: 0, duration: 0.12, ease: 'power2.in' }); wake(); } }); } /* ---------------------------------------------------------------- it comes in */ /* the first marbles are already settled in the jar */ forEl.textContent = `for ${NAME}`; for (let i = 0; i < FIRST; i++) { const b = makeBall(0, 0); b.x = (Math.random() * 2 - 1) * (HW - b.r) * 0.9; b.y = FLOOR - b.r - 4 - i * 34; b.fresh = false; balls.push(b); } settleNow(6); counted(0, true); resize(); render(); if (!REDUCED) gsap.from(root, { opacity: 0, y: 10, duration: 0.7, ease: 'power3.out', clearProps: 'opacity,transform' }); })();