/* The gelato die A gelateria's game of chance: a die of translucent cherry resin in a walnut tray lined with pistachio felt. It is picked up and thrown by hand, or by Roll, and from then on it is a rigid body of its own: gravity pulls it, its eight corners strike the felt and the walls and bounce back with friction, it tumbles, slows down and settles on a face, and the face up picks the scoop. The light is behind the tray, so the resin glows, each face flashes as it turns towards the eye, the pips of the far faces show through, and the shadow on the felt carries a patch of red light that went through the die. A throw that leaves the hand too slowly is a drop, and does not count. */ /* ---- values to change ---- */ const FLAVOURS = [ ['Lemon sorbet', '#f3d75c', '#3a2c07', 'Half price today'], ['Strawberry', '#f29aa6', '#4b1019', 'Half price today'], ['Hazelnut', '#b5845a', '#ffffff', 'Half price today'], ['Pistachio', '#b1c788', '#27310f', 'Half price today'], ['Dark chocolate', '#4a2b20', '#ffffff', 'Half price today'], ['Free scoop', '#c8102e', '#ffffff', 'On the house, any flavour'], ]; /* what each face gives, from one pip to six: its name, the colour of its scoop, the colour of the name on the scoop, and the line under it */ const GRAVITY = 2100; /* how fast the die falls, in pixels a second squared */ const BOUNCE = [0.45, 0.45]; /* how much the die bounces back off the felt and off the wooden walls */ const GRIP = 0.45; /* how much the felt grips the die as it slides and turns */ const THROW = [520, 320]; /* how Roll throws the die: its speed forwards and upwards, in pixels a second (a little more or less each time) */ const SPIN = 22; /* how fast the die tumbles as it leaves the hand, in radians a second */ const JACKPOT = 6; /* the face that also throws a handful of sprinkles into the tray */ const SPRINKLES = 60; /* how many sprinkles fall for it */ const FLICK = 320; /* how fast, in pixels a second, a throw by hand must leave the hand to count */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const game = document.querySelector('[data-game]'); const tray = game.querySelector('[data-tray]'); const world = game.querySelector('[data-world]'); const dieEl = game.querySelector('[data-die]'); const shadowEl = game.querySelector('[data-shadow]'); const sctx = shadowEl.getContext('2d'); const air = game.querySelector('[data-air]'); const actx = air.getContext('2d'); let AIR = 140; /* how far the air canvas reaches above the tray: read from the CSS in measure() (less on short screens) */ const menu = game.querySelector('[data-menu]'); const rollBtn = game.querySelector('[data-roll]'); const rollLabel = game.querySelector('[data-roll-label]'); const bigEl = game.querySelector('[data-big]'); const resultEl = game.querySelector('[data-result]'); const smallEl = game.querySelector('[data-small]'); /* the camera: how far the tray is tipped back, and how far the eye is from it */ const TILT = 46; const LENS = 900; const HOLD = 50; /* how high the hand holds the die above the felt */ const WORDS = ['one', 'two', 'three', 'four', 'five', 'six']; tray.style.perspective = `${LENS}px`; world.style.transform = `rotateX(${TILT}deg)`; /* ---------------------------------------------------------------- vectors */ const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; const len = (a) => Math.hypot(a[0], a[1], a[2]); const unit = (a) => { const l = len(a) || 1; return [a[0] / l, a[1] / l, a[2] / l]; }; /* the rotation of a quaternion [w, x, y, z] as a matrix, row by row */ function matrixOf(q) { const [w, x, y, z] = q; return [ 1 - 2 * (y * y + z * z), 2 * (x * y - w * z), 2 * (x * z + w * y), 2 * (x * y + w * z), 1 - 2 * (x * x + z * z), 2 * (y * z - w * x), 2 * (x * z - w * y), 2 * (y * z + w * x), 1 - 2 * (x * x + y * y), ]; } const turn = (m, a) => [m[0] * a[0] + m[1] * a[1] + m[2] * a[2], m[3] * a[0] + m[4] * a[1] + m[5] * a[2], m[6] * a[0] + m[7] * a[1] + m[8] * a[2]]; const qmul = (a, b) => [ a[0] * b[0] - a[1] * b[1] - a[2] * b[2] - a[3] * b[3], a[0] * b[1] + a[1] * b[0] + a[2] * b[3] - a[3] * b[2], a[0] * b[2] - a[1] * b[3] + a[2] * b[0] + a[3] * b[1], a[0] * b[3] + a[1] * b[2] - a[2] * b[1] + a[3] * b[0], ]; const qaxis = (axis, angle) => { const s = Math.sin(angle / 2); const u = unit(axis); return [Math.cos(angle / 2), u[0] * s, u[1] * s, u[2] * s]; }; const qnorm = (q) => { const l = Math.hypot(q[0], q[1], q[2], q[3]) || 1; return [q[0] / l, q[1] / l, q[2] / l, q[3] / l]; }; const rand = gsap.utils.random; /* the light comes from behind the tray, up and a little to the left; the eye looks down the tipped floor */ const LIGHT = unit([-0.42, -0.62, 1]); const VIEW = [0, Math.sin((TILT * Math.PI) / 180), Math.cos((TILT * Math.PI) / 180)]; const HALF = unit([LIGHT[0] + VIEW[0], LIGHT[1] + VIEW[1], LIGHT[2] + VIEW[2]]); /* ---------------------------------------------------------------- the die and the menu, drawn */ const PIPS = { 1: [[50, 50]], 2: [[26, 26], [74, 74]], 3: [[26, 26], [50, 50], [74, 74]], 4: [[26, 26], [74, 26], [26, 74], [74, 74]], 5: [[26, 26], [74, 26], [50, 50], [26, 74], [74, 74]], 6: [[27, 24], [27, 50], [27, 76], [73, 24], [73, 50], [73, 76]], }; /* which way each face looks, in the die's own space: opposite faces add up to seven */ const NORMALS = { 1: [0, 0, 1], 2: [1, 0, 0], 3: [0, -1, 0], 4: [0, 1, 0], 5: [-1, 0, 0], 6: [0, 0, -1] }; const faces = [1, 2, 3, 4, 5, 6].map((n) => { const el = document.createElement('div'); el.className = 'die__face'; el.dataset.n = n; el.innerHTML = PIPS[n].map(([x, y]) => ``).join(''); dieEl.append(el); return { n, el, normal: NORMALS[n] }; }); const SCOOP = 'M9 23C7 10 30 4 80 4s73 6 71 19c-1 8-8 12-16 9-6 6-16 6-21 1-7 6-19 6-25 1-7 6-20 6-26 0-7 5-17 4-22-1-7 4-18 3-22-2-6 0-10-4-10-8z'; const faceIcon = (n) => ``; const items = FLAVOURS.slice(0, 6).map(([name, colour, ink], i) => { const li = document.createElement('li'); li.className = 'menu__item'; li.style.setProperty('--scoop', colour); li.style.setProperty('--scoop-ink', ink); li.innerHTML = `${faceIcon(i + 1)}`; li.querySelector('.menu__name').textContent = name; li.setAttribute('aria-label', `${WORDS[i]}: ${name}`); if (i + 1 === JACKPOT) li.classList.add('is-jackpot'); menu.append(li); return li; }); /* ---------------------------------------------------------------- the body */ /* the die is a cube of mass one: a position p and a speed v in pixels, an orientation q and a spin w (radians a second, about the axes of the tray). Its inertia is the same about every axis, a cube's: mass × side² / 6 */ let W2 = 150; let D2 = 90; let S = 52; let HS = 26; let INV_I = 6 / (S * S); let CORNERS = []; let dpr = 1; let p = [0, 0, HS]; let v = [0, 0, 0]; let q = [1, 0, 0, 0]; let w = [0, 0, 0]; let R = matrixOf(q); let held = null; /* the hand that holds the die, a real one or the one of Roll */ let going = false; /* a throw is on its way */ let byHand = false; /* it was thrown by a real hand (Roll always throws well) */ let released = 0; /* how fast the hand let it go, in pixels a second */ let awake = false; let still = 0; /* how long it has been nearly still, in seconds */ let nudges = 0; let airborne = 0; /* how long the throw has been going, in seconds */ let stoppedAt = -10; let resin = '#c8102e'; function measure() { W2 = world.offsetWidth / 2; D2 = world.offsetHeight / 2; S = dieEl.offsetWidth; HS = S / 2; INV_I = 6 / (S * S); CORNERS = []; for (const x of [-HS, HS]) for (const y of [-HS, HS]) for (const z of [-HS, HS]) CORNERS.push([x, y, z]); dpr = Math.min(2, window.devicePixelRatio || 1); shadowEl.width = Math.round(W2 * 2 * dpr); shadowEl.height = Math.round(D2 * 2 * dpr); AIR = -air.offsetTop; air.width = Math.round(air.clientWidth * dpr); air.height = Math.round(air.clientHeight * dpr); sctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--resin').trim() || '#c8102e'; resin = sctx.fillStyle; } const velAt = (r) => { const s = cross(w, r); return [v[0] + s[0], v[1] + s[1], v[2] + s[2]]; }; function push(r, j) { v[0] += j[0]; v[1] += j[1]; v[2] += j[2]; const t = cross(r, j); w[0] += INV_I * t[0]; w[1] += INV_I * t[1]; w[2] += INV_I * t[2]; } function contact(r, n, e, mu, gap, h) { const rn = cross(r, n); const vn = dot(velAt(r), n); /* a hard hit bounces back, a soft one just stops (so a die at rest does not buzz), and a corner a hair above the felt may come down by that hair and no more */ const target = vn < -70 ? -e * vn : gap > 0 ? -gap / h : 0; return { r, n, mu, kn: 1 + INV_I * dot(rn, rn), target, acc: 0, jt: [0, 0, 0] }; } /* one step of the world: gravity, the corners against the felt and the walls (impulses with friction, solved a few times over so that four corners on the felt share the weight), then the move */ function step(h) { if (held) { carry(h); return; } v[2] -= GRAVITY * h; R = matrixOf(q); const hits = []; let lowZ = Infinity; let lowX = Infinity; let highX = -Infinity; let lowY = Infinity; let highY = -Infinity; let onFelt = 0; for (const c of CORNERS) { const r = turn(R, c); const x = p[0] + r[0]; const y = p[1] + r[1]; const z = p[2] + r[2]; lowZ = Math.min(lowZ, z); lowX = Math.min(lowX, x); highX = Math.max(highX, x); lowY = Math.min(lowY, y); highY = Math.max(highY, y); if (z < 0.5) onFelt++; if (z < 0.5) hits.push(contact(r, [0, 0, 1], BOUNCE[0], GRIP, z, h)); if (x < 0.5 - W2) hits.push(contact(r, [1, 0, 0], BOUNCE[1], 0.25, x + W2, h)); if (x > W2 - 0.5) hits.push(contact(r, [-1, 0, 0], BOUNCE[1], 0.25, W2 - x, h)); if (y < 0.5 - D2) hits.push(contact(r, [0, 1, 0], BOUNCE[1], 0.25, y + D2, h)); if (y > D2 - 0.5) hits.push(contact(r, [0, -1, 0], BOUNCE[1], 0.25, D2 - y, h)); } for (let it = 0; it < 8; it++) { for (const c of hits) { const vn = dot(velAt(c.r), c.n); const acc = Math.max(0, c.acc + (c.target - vn) / c.kn); const jn = acc - c.acc; c.acc = acc; push(c.r, [c.n[0] * jn, c.n[1] * jn, c.n[2] * jn]); /* friction: against the sliding of the corner, never more than the grip times the push */ const vc = velAt(c.r); const vn2 = dot(vc, c.n); const vt = [vc[0] - c.n[0] * vn2, vc[1] - c.n[1] * vn2, vc[2] - c.n[2] * vn2]; const sp = len(vt); if (sp < 1e-6) continue; const t = [vt[0] / sp, vt[1] / sp, vt[2] / sp]; const rt = cross(c.r, t); const k = sp / (1 + INV_I * dot(rt, rt)); let want = [c.jt[0] - t[0] * k, c.jt[1] - t[1] * k, c.jt[2] - t[2] * k]; const most = c.mu * c.acc; const m = len(want); if (m > most) want = want.map((a) => (a * most) / m); push(c.r, [want[0] - c.jt[0], want[1] - c.jt[1], want[2] - c.jt[2]]); c.jt = want; } } /* corners that went in are pushed back out */ if (lowZ < 0) p[2] -= lowZ; if (lowX < -W2) p[0] += -W2 - lowX; if (highX > W2) p[0] -= highX - W2; if (lowY < -D2) p[1] += -D2 - lowY; if (highY > D2) p[1] -= highY - D2; /* the felt drags on a die that lies on it, the air a little on one that flies */ const drag = onFelt ? 1 - 0.2 * h : 1 - 0.08 * h; w = w.map((a) => a * drag); if (onFelt) { v[0] *= 1 - 0.1 * h; v[1] *= 1 - 0.1 * h; } p = [p[0] + v[0] * h, p[1] + v[1] * h, p[2] + v[2] * h]; spinBy(h); /* nearly still for a fifth of a second, touching something: the die has stopped (and after eight seconds it has stopped whatever it is doing) */ if (hits.length && len(v) < 7 && len(w) < 0.3) still += h; else still = 0; if (going) airborne += h; if (still > 0.2 || airborne > 8) rest(); } function spinBy(h) { const d = qmul([0, w[0], w[1], w[2]], q); q = qnorm([q[0] + 0.5 * h * d[0], q[1] + 0.5 * h * d[1], q[2] + 0.5 * h * d[2], q[3] + 0.5 * h * d[3]]); } /* in the hand: the die follows the hand on a short spring, held up above the felt, and turns in the fingers as it is carried */ function carry(h) { const T = held.target; const k = 1 - Math.exp(-26 * h); const np = [p[0] + (T.x - p[0]) * k, p[1] + (T.y - p[1]) * k, p[2] + (T.z - p[2]) * k]; v = [(np[0] - p[0]) / h, (np[1] - p[1]) / h, (np[2] - p[2]) / h]; p = np; const roll = cross([0, 0, 1], v); const aim = [roll[0] / HS * 0.22 + 1.1, roll[1] / HS * 0.22 - 0.7, 0.5]; const f = 1 - Math.exp(-8 * h); w = w.map((a, i) => a + (aim[i] - a) * f); spinBy(h); } /* which face is up: the one whose normal points highest */ function topFace() { R = matrixOf(q); let best = 1; let up = -2; for (const f of faces) { const z = R[6] * f.normal[0] + R[7] * f.normal[1] + R[8] * f.normal[2]; if (z > up) { up = z; best = f.n; } } return [best, up]; } /* stopped: a die leaning on a wall gets a nudge; one lying flat is squared up and read */ function rest() { const [face, up] = topFace(); if (up < 0.97 && nudges < 3 && airborne < 8) { nudges++; v = [-p[0] * 1.2, -p[1] * 1.2, 240]; w = [rand(-5, 5), rand(-5, 5), rand(-2, 2)]; still = 0; return; } const n = turn(R, NORMALS[face]); const axis = [n[1], -n[0], 0]; if (len(axis) > 1e-6) q = qnorm(qmul(qaxis(axis, Math.acos(Math.min(1, n[2]))), q)); p[2] = HS; v = [0, 0, 0]; w = [0, 0, 0]; sleep(); render(); if (going) finish(face); } /* ---------------------------------------------------------------- drawing it */ function render() { R = matrixOf(q); const f5 = (a) => a.toFixed(5); dieEl.style.transform = `matrix3d(${f5(R[0])},${f5(R[3])},${f5(R[6])},0,${f5(R[1])},${f5(R[4])},${f5(R[7])},0,${f5(R[2])},${f5(R[5])},${f5(R[8])},0,${p[0].toFixed(2)},${p[1].toFixed(2)},${p[2].toFixed(2)},1)`; /* each face: seen edge-on the resin is thicker and redder; with the light behind it, a face turned to the eye glows with the light that came through the die; a face that sends the light straight to the eye shines; the pips of a far face are seen through the resin, dim and red */ for (const f of faces) { const n = turn(R, f.normal); const toEye = dot(n, VIEW); const facing = Math.abs(toEye); f.el.style.setProperty('--a', (0.46 + 0.4 * (1 - facing)).toFixed(3)); f.el.style.setProperty('--far', Math.max(0, -toEye).toFixed(3)); f.el.style.setProperty('--glow', (Math.max(0, -dot(n, LIGHT)) * facing).toFixed(3)); f.el.style.setProperty('--shine', Math.pow(Math.max(0, dot(n, HALF)), 22).toFixed(3)); } shade(); } /* the shadow on the felt: a dark print right under the die, the shadow cast away from the light, and inside it the red light that came through the resin, all softer the higher the die is */ function hull(pts) { pts.sort((a, b) => a[0] - b[0] || a[1] - b[1]); const side = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]); const lower = []; for (const pt of pts) { while (lower.length > 1 && side(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) lower.pop(); lower.push(pt); } const upper = []; for (let i = pts.length - 1; i >= 0; i--) { while (upper.length > 1 && side(upper[upper.length - 2], upper[upper.length - 1], pts[i]) <= 0) upper.pop(); upper.push(pts[i]); } return lower.slice(0, -1).concat(upper.slice(0, -1)); } function blot(poly, colour, alpha, blur) { if (alpha <= 0.002 || poly.length < 3) return; const off = 6000; sctx.save(); sctx.globalAlpha = alpha; sctx.shadowColor = colour; sctx.shadowBlur = blur * dpr; sctx.shadowOffsetX = off; sctx.beginPath(); poly.forEach(([x, y], i) => { const X = (x + W2) * dpr - off; const Y = (y + D2) * dpr; if (i) sctx.lineTo(X, Y); else sctx.moveTo(X, Y); }); sctx.closePath(); sctx.fillStyle = colour; sctx.fill(); sctx.restore(); } function shade() { sctx.clearRect(0, 0, shadowEl.width, shadowEl.height); strew(); const pts = CORNERS.map((c) => { const r = turn(R, c); return [p[0] + r[0], p[1] + r[1], p[2] + r[2]]; }); const low = Math.max(0, Math.min(...pts.map((a) => a[2]))); const foot = hull(pts.map((a) => [a[0], a[1]])); const cast = hull(pts.map((a) => [a[0] - (LIGHT[0] * a[2]) / LIGHT[2], a[1] - (LIGHT[1] * a[2]) / LIGHT[2]])); blot(cast, '#1c2406', 0.3 * Math.max(0, 1 - low / 260), 5 + low * 0.22); blot(foot, '#141a04', 0.55 * Math.max(0, 1 - low / 34), 2.5 + low * 0.4); /* the light through the resin lands inside the shadow, a little further from the light than the die */ const cx = cast.reduce((s, a) => s + a[0], 0) / cast.length; const cy = cast.reduce((s, a) => s + a[1], 0) / cast.length; const glow = cast.map(([x, y]) => [cx + (x - cx) * 0.52 + HS * 0.22, cy + (y - cy) * 0.52 + HS * 0.34]); blot(glow, resin, 0.34 * Math.max(0, 1 - low / 300), 9 + low * 0.2); } /* ---------------------------------------------------------------- the sprinkles */ /* for the free scoop a handful of sprinkles in the colours of the flavours falls into the tray: each one is a little rod that tumbles in the air (drawn over the tray, seen from the eye), bounces once on the felt and lies there, drawn on the felt under the die's shadow until the die is picked up again */ let falling = []; let strewn = []; const lying = { a: 1 }; function sprinkle() { const colours = FLAVOURS.slice(0, -1).map((f) => f[1]).concat('#fff8f0'); for (let i = 0; i < SPRINKLES; i++) { /* nowhere under the die */ let x = 0; let y = 0; do { x = rand(-W2 + 6, W2 - 6); y = rand(-D2 + 6, D2 - 6); } while (Math.abs(x - p[0]) < S * 0.8 && Math.abs(y - p[1]) < S * 0.8); falling.push({ x, y, z: rand(120, 320), vx: rand(-30, 30), vy: rand(-30, 30), vz: rand(-80, 0), yaw: rand(0, Math.PI * 2), pitch: rand(0, Math.PI * 2), spin: rand(-16, 16), len: rand(6, 8.5), c: colours[i % colours.length], }); } gsap.ticker.add(fall); } /* where a point of the tray is in the air canvas: the same eye as the CSS */ function seen(x, y, z) { const a = (TILT * Math.PI) / 180; const k = LENS / (LENS - (y * Math.sin(a) + z * Math.cos(a))); return [air.clientWidth / 2 + x * k, AIR + world.offsetTop + world.offsetHeight / 2 + (y * Math.cos(a) - z * Math.sin(a)) * k, k]; } function fall(time, deltaMs) { const dt = Math.min(1 / 30, deltaMs / 1000); actx.setTransform(dpr, 0, 0, dpr, 0, 0); actx.clearRect(0, 0, air.width, air.height); actx.lineCap = 'round'; let landed = false; for (let i = falling.length - 1; i >= 0; i--) { const b = falling[i]; /* light things: the air holds them back, so they fall at a steady pace */ b.vz -= GRAVITY * dt; b.vz *= 1 - Math.min(0.5, 5 * dt); b.x += b.vx * dt; b.y += b.vy * dt; b.z += b.vz * dt; b.pitch += b.spin * dt; if (Math.abs(b.x) > W2 - 4) b.vx = -b.vx; if (Math.abs(b.y) > D2 - 4) b.vy = -b.vy; if (b.z <= 1.2) { if (b.vz < -90) { b.z = 1.2; b.vz *= -0.24; b.spin *= 0.4; } else { strewn.push(b); falling.splice(i, 1); landed = true; continue; } } const d = [Math.cos(b.yaw) * Math.cos(b.pitch), Math.sin(b.yaw) * Math.cos(b.pitch), Math.sin(b.pitch)]; const h = b.len / 2; const [x0, y0, k] = seen(b.x - d[0] * h, b.y - d[1] * h, b.z - d[2] * h); const [x1, y1] = seen(b.x + d[0] * h, b.y + d[1] * h, b.z + d[2] * h); actx.strokeStyle = b.c; actx.lineWidth = 2.5 * k; actx.beginPath(); actx.moveTo(x0, y0); actx.lineTo(x1, y1); actx.stroke(); } if (landed && !awake) shade(); if (!falling.length) gsap.ticker.remove(fall); } /* the sprinkles lying on the felt, each with a hair of shadow */ function strew() { if (!strewn.length) return; sctx.save(); sctx.lineCap = 'round'; sctx.lineWidth = 2.5 * dpr; for (const b of strewn) { const dx = Math.cos(b.yaw) * b.len * 0.5 * dpr; const dy = Math.sin(b.yaw) * b.len * 0.5 * dpr; const x = (b.x + W2) * dpr; const y = (b.y + D2) * dpr; sctx.globalAlpha = 0.28 * lying.a; sctx.strokeStyle = '#1c2406'; sctx.beginPath(); sctx.moveTo(x - dx + 0.6 * dpr, y - dy + 0.9 * dpr); sctx.lineTo(x + dx + 0.6 * dpr, y + dy + 0.9 * dpr); sctx.stroke(); sctx.globalAlpha = lying.a; sctx.strokeStyle = b.c; sctx.beginPath(); sctx.moveTo(x - dx, y - dy); sctx.lineTo(x + dx, y + dy); sctx.stroke(); } sctx.restore(); } /* swept away when the die is picked up again */ function sweep() { falling = []; gsap.ticker.remove(fall); actx.clearRect(0, 0, air.width, air.height); if (!strewn.length) return; gsap.to(lying, { a: 0, duration: REDUCED ? 0 : 0.35, overwrite: true, onUpdate: () => !awake && shade(), onComplete: () => { strewn = []; lying.a = 1; if (!awake) shade(); }, }); } /* ---------------------------------------------------------------- the clock */ function tick(time, deltaMs) { const dt = Math.min(1 / 30, deltaMs / 1000); const n = Math.max(1, Math.ceil(dt / (1 / 240))); for (let i = 0; i < n && awake; i++) step(dt / n); if (awake) render(); } function wake() { still = 0; if (awake) return; awake = true; gsap.ticker.add(tick); } function sleep() { awake = false; gsap.ticker.remove(tick); } /* ---------------------------------------------------------------- the hand */ /* where the pointer is on a level above the felt: the ray from the eye through the pointer, met with that level */ function toTray(e, height) { const r = tray.getBoundingClientRect(); const k = r.width / tray.offsetWidth || 1; const sx = (e.clientX - (r.left + r.width / 2)) / k; const sy = (e.clientY - (r.top + (world.offsetTop + world.offsetHeight / 2) * k)) / k; const a = (TILT * Math.PI) / 180; const c = Math.cos(a); const s = Math.sin(a); const y = (sy * (LENS - height * c) + height * s * LENS) / (c * LENS + sy * s); const z = y * s + height * c; const x = (sx * (LENS - z)) / LENS; const mx = W2 - S * 0.9; const my = D2 - S * 0.9; return { x: Math.max(-mx, Math.min(mx, x)), y: Math.max(-my, Math.min(my, y)), z: height }; } tray.addEventListener('pointerdown', (e) => { if (e.button !== 0 || held) return; if (REDUCED) { roll(); return; } e.preventDefault(); tray.setPointerCapture(e.pointerId); clearResult(); going = false; const target = toTray(e, HOLD); held = { id: e.pointerId, target, t0: e.timeStamp, x0: e.clientX, y0: e.clientY, moved: 0, trail: [[e.timeStamp, target.x, target.y]] }; tray.classList.add('is-held'); setBusy(true); say('Let go to throw', '', true); wake(); }); tray.addEventListener('pointermove', (e) => { if (!held || held.id !== e.pointerId) return; held.target = toTray(e, HOLD); held.moved = Math.max(held.moved, Math.hypot(e.clientX - held.x0, e.clientY - held.y0)); /* where the hand was in the last tenth of a second, for the speed of the throw */ held.trail.push([e.timeStamp, held.target.x, held.target.y]); while (held.trail.length > 2 && e.timeStamp - held.trail[0][0] > 100) held.trail.shift(); }); function letGo(e) { if (!held || held.id !== e.pointerId) return; const tap = e.timeStamp - held.t0 < 220 && held.moved < 8; const trail = held.trail; held = null; tray.classList.remove('is-held'); if (tap) { /* a tap is a roll */ setBusy(false); roll(); return; } /* it leaves the hand with the speed of the hand over its last tenth of a second (none, if the hand had stopped), a little upwards, and tumbling the way it goes */ const [t0, x0, y0] = trail[0]; const [t1, x1, y1] = trail[trail.length - 1]; const dt = (t1 - t0) / 1000; const hand = dt > 0.008 && e.timeStamp - t1 < 80 ? [(x1 - x0) / dt, (y1 - y0) / dt] : [0, 0]; released = Math.hypot(hand[0], hand[1]); const fast = Math.min(released, 1600); const k = released > 0 ? fast / released : 0; throwWith([hand[0] * k, hand[1] * k, 120 + fast * 0.2], Math.min(SPIN * 1.3, (fast / HS) * 0.45), 1.5 + fast / 220, true); } tray.addEventListener('pointerup', letGo); tray.addEventListener('pointercancel', letGo); function throwWith(speed, spin, wobble, hand = false) { byHand = hand; v = speed; const r = unit(cross([0, 0, 1], [v[0], v[1], 0])); w = [r[0] * spin + rand(-wobble, wobble), r[1] * spin + rand(-wobble, wobble), rand(-wobble, wobble)]; going = true; nudges = 0; airborne = 0; setBusy(true); say('Here it goes', '', true); wake(); } /* ---------------------------------------------------------------- Roll */ /* a pretend hand picks the die up, carries it to the front of the tray and throws it at the back wall */ let carrying = null; function roll() { if (going || held) return; clearResult(); if (REDUCED) { quietRoll(); return; } const target = { x: p[0], y: p[1], z: Math.max(p[2], HS) }; held = { auto: true, target }; setBusy(true); wake(); carrying = gsap.to(target, { x: rand(-W2 * 0.3, W2 * 0.3), y: D2 - S * 0.95, z: HOLD, duration: 0.42, ease: 'power2.inOut', onComplete: () => { carrying = null; held = null; pitch(); }, }); } /* the throw of Roll: in an arc towards the far half of the tray, tumbling forwards */ function pitch() { const aim = [rand(-W2 * 0.5, W2 * 0.5) - p[0], rand(-D2 * 0.7, -D2 * 0.2) - p[1]]; const d = Math.hypot(aim[0], aim[1]) || 1; const sp = THROW[0] * rand(0.85, 1.15); throwWith([(aim[0] / d) * sp, (aim[1] / d) * sp, THROW[1] * rand(0.85, 1.15)], SPIN * rand(0.85, 1.15), 6); } rollBtn.addEventListener('click', () => { if (rollBtn.getAttribute('aria-disabled') === 'true') return; roll(); }); /* without motion: the die fades, and fades back lying on a face at random */ function quietRoll() { setBusy(true); going = true; const els = faces.map((f) => f.el).concat(shadowEl); gsap.to(els, { opacity: 0, duration: 0.2, onComplete: () => { const face = 1 + Math.floor(Math.random() * 6); lay(face, rand(-0.6, 0.6), rand(-W2 * 0.4, W2 * 0.4), rand(-D2 * 0.3, D2 * 0.3)); render(); gsap.to(els, { opacity: 1, duration: 0.3 }); finish(face); }, }); } /* the die lying with a face up, turned by an angle about the upright */ function lay(face, yaw, x, y) { const n = NORMALS[face]; let base = [1, 0, 0, 0]; if (n[2] < -0.5) base = qaxis([1, 0, 0], Math.PI); else if (n[2] < 0.5) base = qaxis([n[1], -n[0], 0], Math.PI / 2); q = qnorm(qmul(qaxis([0, 0, 1], yaw), base)); p = [x, y, HS]; v = [0, 0, 0]; w = [0, 0, 0]; } /* ---------------------------------------------------------------- what came up */ /* six faces; if there are fewer flavours, they come round again */ const flavourOf = (face) => FLAVOURS[(face - 1) % FLAVOURS.length]; let lit = null; function finish(face) { going = false; stoppedAt = gsap.ticker.time; setBusy(false); tray.setAttribute('aria-label', `A cherry-red die in a felt tray, showing ${WORDS[face - 1]}`); if (byHand && released < FLICK) { say('That was a drop', 'Throw it so it tumbles. A drop does not count'); return; } const [name, , , line] = flavourOf(face); light(face); say(name, line); if (face === JACKPOT && !REDUCED) sprinkle(); rollLabel.textContent = 'Roll again'; } function light(face) { const li = items[(face - 1) % items.length]; lit = li; li.classList.add('is-won'); const scoop = li.querySelector('.menu__scoop'); if (REDUCED) gsap.set(scoop, { opacity: 1, scale: 1 }); else gsap.fromTo(scoop, { opacity: 0, scaleX: 0.55, scaleY: 0.3 }, { opacity: 1, scaleX: 1, scaleY: 1, duration: 0.75, ease: 'elastic.out(1, 0.5)', overwrite: true }); } function clearResult() { sweep(); if (!lit) return; lit.classList.remove('is-won'); gsap.to(lit.querySelector('.menu__scoop'), { opacity: 0, scaleY: 0.6, duration: REDUCED ? 0 : 0.25, ease: 'power2.in', overwrite: true }); lit = null; } /* a line of help is quiet, a result is not */ function say(big, small, hint = false) { resultEl.classList.toggle('is-hint', hint); if (bigEl.textContent === big && smallEl.textContent === small) return; bigEl.textContent = big; smallEl.textContent = small; if (!REDUCED) gsap.fromTo([bigEl, smallEl], { y: 6, opacity: 0 }, { y: 0, opacity: 1, duration: 0.4, ease: 'power3.out', stagger: 0.06, overwrite: true }); } function setBusy(on) { rollBtn.setAttribute('aria-disabled', String(on)); } /* how the page is being used: the ring of the focus shows for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); /* a phone's bars coming and going change the height only: the tray is measured again when its width changes */ let lastWidth = 0; addEventListener('resize', () => { if (tray.offsetWidth === lastWidth && -air.offsetTop === AIR) return; lastWidth = tray.offsetWidth; measure(); p[0] = Math.max(-W2 + HS, Math.min(W2 - HS, p[0])); p[1] = Math.max(-D2 + HS, Math.min(D2 - HS, p[1])); if (!awake) p[2] = HS; render(); }); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend player who presses Roll, once the die has lain still a moment */ game.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== game) return; if (going || held || gsap.ticker.time - stoppedAt < 1.6) return; roll(); }); /* ---------------------------------------------------------------- it comes in */ measure(); lastWidth = tray.offsetWidth; lay(5, 0.5, -W2 * 0.12, D2 * 0.05); if (REDUCED) { render(); say('Tap the die or press Roll', '', true); } else { /* the die is dropped into the tray from a hand's height, turning */ q = qnorm(qmul(qaxis([0.6, 1, 0.2], 0.9), q)); p = [-W2 * 0.1, -D2 * 0.35, 104]; v = [20, 60, 0]; w = [-4.5, 1.4, 1.2]; render(); wake(); gsap.from(faces.map((f) => f.el), { opacity: 0, duration: 0.3 }); gsap.from(game.querySelectorAll('.game__head, .menu, .roll, .result'), { opacity: 0, duration: 0.6, ease: 'power2.out', stagger: 0.06, clearProps: 'opacity' }); }