/* ---- valori da cambiare ---- */ const RIDE_TIME = 1.2; /* about how long the tram takes to ride to a new link, in seconds */ const SPARKS = 1; /* how many sparks fly from the wire and the brakes (0, none) */ const SWAY = 1; /* how much the body leans and sways on its springs (0, it stays level) */ const WIRE_PLUCK = 1; /* how much the wire over a link shakes when you point at it (0, still) */ const DOOR_PAUSE = 0.9; /* how long the doors stay open at the stop, in seconds (0, they stay shut) */ const TRAM_SIZE = 1; /* the size of the tram */ /* The tram nav The top bar of a heritage tram company. The bar is the ceiling of the line: under it hangs the contact wire on short hangers, and under the wire a double-ended tram runs on its rail and stops under the page you are on, its pantograph pressed up against the wire. Its position is a spring towards the stop, with its push capped: the tram pulls away, rolls and brakes, it does not jump. Choosing another link the bell rings (two arcs over the cab), the headlamp at the front comes on and the tail lamp at the back turns red, the body leans back as it pulls away and forward as it brakes, the passengers lean with it a little later, the wheels turn by the distance run, sparks fly back from the pantograph while it runs fast and from the wheels while it brakes hard. At the stop the body sways on its springs and the doors slide open, then shut. The wire bows up a little where the pantograph presses it, and pointing at a link plucks the wire over it. When nothing moves nothing is drawn. */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const line = document.querySelector('[data-line]'); const bar = line.querySelector('[data-bar]'); const canvas = line.querySelector('[data-track]'); const ctx = canvas.getContext('2d'); const links = [...line.querySelectorAll('[data-link]')]; line.querySelectorAll('a[href="#"]').forEach((a) => a.addEventListener('click', (e) => e.preventDefault())); const clamp = (v, a, b) => (v < a ? a : v > b ? b : v); const SIZE = clamp(TRAM_SIZE, 0.85, 1.1); let S = 1.35 * SIZE; /* the scale of the drawing: a little smaller on a phone */ /* ---------------------------------------------------------------- colours, from the style sheet */ const css = getComputedStyle(document.documentElement); const col = (name, fallback) => css.getPropertyValue(name).trim() || fallback; const C = { cream: col('--cream', '#f3e6c8'), livery: col('--livery', '#b8392b'), brass: col('--brass', '#d8a446'), glass: col('--glass', '#20343a'), roof: col('--roof', '#3b3f3d'), steel: col('--steel', '#8d9693'), sleeper: col('--sleeper', '#8a6a4a'), spark: col('--spark', '#ffb547'), bar: col('--bar', '#173a33'), }; /* ---------------------------------------------------------------- the track's measures (CSS pixels) */ const BAR_BOTTOM = 6; /* the canvas starts 6 pixels above the bottom of the bar */ const WIRE_Y = 11; /* the contact wire, 5 pixels under the bar */ let RAIL_Y = 60; /* the top of the rail: worked out from the size of the tram */ let H = 66; /* the canvas */ let W = 0; let dpr = 1; let stops = []; /* the middle of every link, along the canvas */ function measure() { const r = line.getBoundingClientRect(); W = r.width; S = (matchMedia('(max-width: 640px)').matches ? 1.12 : 1.35) * SIZE; RAIL_Y = Math.round(WIRE_Y + 10.5 * S + 30.4 * S + 1); H = RAIL_Y + 7; canvas.style.height = H + 'px'; dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); stops = links.map((a) => { const b = a.getBoundingClientRect(); return b.left + b.width / 2 - r.left; }); } /* ---------------------------------------------------------------- the state */ let current = Math.max(0, links.findIndex((a) => a.getAttribute('aria-current') === 'page')); const tram = { x: -60, v: 0, a: 0, /* along the rail */ tilt: 0, tiltV: 0, /* the body leaning on its springs */ lift: 0, liftV: 0, /* the body bouncing on its springs */ lean: 0, leanV: 0, /* the passengers, a little behind the body */ wheel: 0, /* the turn of the wheels */ dir: 1, /* which end is the front: 1 to the right */ doors: 0, /* 0 shut, 1 open */ bell: 1, /* the time since the bell rang, 1 and more: quiet */ head: 0, /* the pantograph head's height above where it rests, on a spring */ headV: 0, alpha: 1, /* reduced motion: the tram fades out and in */ riding: false, }; const sparks = []; const plucks = []; /* { x, t, amp }: the wire shaking */ let doorTl = null; /* the spring that takes the tram to its stop, with its push capped */ const OMEGA = 2 * Math.PI / (clamp(RIDE_TIME, 0.4, 3) * 1.45); const DAMP = 2 * 0.86 * OMEGA; const AMAX = 2600 / Math.pow(clamp(RIDE_TIME, 0.4, 3), 2); /* ---------------------------------------------------------------- the words */ function setWord(a, on, now) { const to = on ? "'wght' 700, 'wdth' 100" : "'wght' 560, 'wdth' 90"; if (REDUCED || now) a.style.fontVariationSettings = to; else gsap.to(a, { fontVariationSettings: to, duration: on ? 0.55 : 0.4, ease: on ? 'back.out(2.2)' : 'power2.out', overwrite: 'auto' }); } function choose(i) { if (i === current) return; links[current].removeAttribute('aria-current'); setWord(links[current], false); current = i; links[i].setAttribute('aria-current', 'page'); setWord(links[i], true); if (doorTl) doorTl.kill(); if (REDUCED) { gsap.timeline() .to(tram, { alpha: 0, duration: 0.22, ease: 'power1.in' }) .add(() => { tram.x = stops[current]; tram.v = 0; tram.doors = 0; }) .to(tram, { alpha: 1, duration: 0.3, ease: 'power1.out' }); wake(); return; } /* the doors shut at once if they were open, the bell rings and the tram pulls away */ gsap.to(tram, { doors: 0, duration: 0.18, ease: 'power2.in', overwrite: 'auto' }); tram.dir = stops[i] > tram.x ? 1 : -1; tram.bell = 0; tram.riding = true; wake(); } links.forEach((a, i) => { setWord(a, i === current, true); a.addEventListener('click', () => choose(i)); a.addEventListener('pointerenter', (e) => { if (REDUCED || e.pointerType === 'touch') return; pluck(stops[i], 1.6 * WIRE_PLUCK); }); a.addEventListener('pointerdown', (e) => { if (REDUCED || e.pointerType !== 'touch') return; pluck(stops[i], 1.2 * WIRE_PLUCK); }); a.addEventListener('keydown', (e) => { if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return; e.preventDefault(); const j = (i + (e.key === 'ArrowRight' ? 1 : -1) + links.length) % links.length; links[j].focus(); }); }); function pluck(x, amp) { if (amp <= 0) return; plucks.push({ x, t: 0, amp }); if (plucks.length > 6) plucks.shift(); wake(); } /* the wire's height at x: bowed up a little where the pantograph presses, shaking where it was plucked */ function wireAt(x) { let y = WIRE_Y; const d = (x - tram.x) / 34; y -= 0.9 * Math.exp(-d * d) * tram.alpha; for (const p of plucks) { const e = (x - p.x) / 38; y += p.amp * Math.exp(-e * e) * Math.sin(p.t * 34) * Math.exp(-p.t * 3.2); } return y; } /* ---------------------------------------------------------------- the step */ function step(dt) { const X = stops[current]; if (tram.riding || Math.abs(X - tram.x) > 0.3 || Math.abs(tram.v) > 0.5) { let acc = OMEGA * OMEGA * (X - tram.x) - DAMP * tram.v; acc = clamp(acc, -AMAX, AMAX); tram.a = acc; tram.v += acc * dt; tram.x += tram.v * dt; tram.wheel += (tram.v * dt) / (2.6 * S); if (tram.riding && Math.abs(X - tram.x) < 0.6 && Math.abs(tram.v) < 6) { tram.riding = false; tram.x = X; tram.v = 0; tram.a = 0; arrive(); } } else { tram.a = 0; } /* the body leans against the push, the passengers follow it a little later */ const want = clamp(-tram.a * 0.000038 * SWAY, -0.07, 0.07); tram.tiltV += (170 * (want - tram.tilt) - 9 * tram.tiltV) * dt; tram.tilt += tram.tiltV * dt; tram.leanV += (60 * (tram.tilt * 2.2 - tram.lean) - 5 * tram.leanV) * dt; tram.lean += tram.leanV * dt; tram.liftV += (260 * (0 - tram.lift) - 7 * tram.liftV) * dt; tram.lift += tram.liftV * dt; /* the pantograph head rides the wire on its own spring */ const rough = Math.abs(tram.v) > 40 ? (Math.random() - 0.5) * 0.5 : 0; tram.headV += (420 * (rough - tram.head) - 16 * tram.headV) * dt; tram.head += tram.headV * dt; /* sparks: from the wire while the tram runs fast, from the wheels while it brakes hard */ if (SPARKS > 0 && tram.alpha > 0.5) { const speed = Math.abs(tram.v); if (speed > 60 && Math.random() < dt * speed * 0.12 * SPARKS) spark(tram.x + panX(), wireAt(tram.x) + 0.5, -Math.sign(tram.v), 'wire'); if (tram.a * tram.v < 0 && Math.abs(tram.a) > AMAX * 0.45 && speed > 25 && Math.random() < dt * 70 * SPARKS) { const back = -Math.sign(tram.v); const wx = tram.x + back * (Math.random() < 0.5 ? 16 : 26) * S; spark(wx, RAIL_Y - 0.6, back, 'wheel'); } } for (let k = sparks.length - 1; k >= 0; k--) { const p = sparks[k]; p.life -= dt; if (p.life <= 0) { sparks.splice(k, 1); continue; } p.vy += 320 * dt; p.x += p.vx * dt; p.y += p.vy * dt; if (p.y > RAIL_Y && p.vy > 0) { p.y = RAIL_Y; p.vy *= -0.35; p.vx *= 0.6; } } for (let k = plucks.length - 1; k >= 0; k--) { plucks[k].t += dt; if (plucks[k].t > 1.6) plucks.splice(k, 1); } tram.bell += dt; } function spark(x, y, back, kind) { const fast = kind === 'wire' ? 90 : 60; sparks.push({ x, y, vx: back * (fast + Math.random() * 110) + tram.v * 0.25, vy: kind === 'wire' ? -20 + Math.random() * 60 : -60 - Math.random() * 70, life: 0.22 + Math.random() * 0.3, max: 0.5, }); if (sparks.length > 70) sparks.shift(); } /* at the stop: a sway on the springs, then the doors slide open and shut */ function arrive() { tram.liftV += 14 * SWAY; tram.tiltV += -tram.dir * 0.5 * SWAY; if (DOOR_PAUSE <= 0) return; doorTl = gsap.timeline({ delay: 0.25, onUpdate: wake }) .to(tram, { doors: 1, duration: 0.42, ease: 'power2.inOut' }) .to(tram, { doors: 0, duration: 0.38, ease: 'power2.inOut' }, '+=' + DOOR_PAUSE); } /* the pantograph's head sits a little behind the middle, on the side it trails */ const panX = () => -tram.dir * 3 * S; /* ---------------------------------------------------------------- drawing */ function roundRect(x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } function drawTrack() { /* the ballast: a soft grey band */ const g = ctx.createLinearGradient(0, RAIL_Y, 0, H); g.addColorStop(0, 'rgba(60, 64, 62, 0.16)'); g.addColorStop(1, 'rgba(60, 64, 62, 0)'); ctx.fillStyle = g; ctx.fillRect(4, RAIL_Y + 1, W - 8, H - RAIL_Y - 1); /* the sleepers */ for (let x = 8; x < W - 6; x += 13) { ctx.fillStyle = C.sleeper; ctx.globalAlpha = 0.85; ctx.fillRect(x, RAIL_Y + 1.4, 7, 2.6); ctx.globalAlpha = 0.35; ctx.fillStyle = '#000'; ctx.fillRect(x, RAIL_Y + 3.4, 7, 0.6); ctx.globalAlpha = 1; } /* the rail: steel with a line of light on its head */ ctx.fillStyle = C.steel; ctx.fillRect(2, RAIL_Y - 0.4, W - 4, 2); ctx.fillStyle = 'rgba(255, 255, 255, 0.75)'; ctx.fillRect(2, RAIL_Y - 0.4, W - 4, 0.6); } /* a stop post beside every link, behind the tram: a brass pole and a cream plate with a green band */ function drawStops() { stops.forEach((sx, i) => { const px = sx + 47 * S; if (px > W - 8) return; const top = RAIL_Y - 24 * S; ctx.fillStyle = C.brass; ctx.fillRect(px - 0.6 * S, top, 1.2 * S, RAIL_Y - top); ctx.fillStyle = C.cream; roundRect(px - 3.6 * S, top - 5.6 * S, 7.2 * S, 5.6 * S, 1 * S); ctx.fill(); ctx.fillStyle = i === current ? C.livery : C.bar; ctx.fillRect(px - 3.6 * S, top - 3.4 * S, 7.2 * S, 1.4 * S); ctx.fillStyle = 'rgba(0, 0, 0, 0.12)'; ctx.fillRect(px - 2.2 * S, RAIL_Y, 4.4 * S, 0.8); }); } function drawWire() { /* the hangers from the bar, then the wire, a little bowed and shaking */ ctx.strokeStyle = C.steel; ctx.lineWidth = 0.8; ctx.beginPath(); for (let x = 22; x < W - 14; x += 36) { const y = wireAt(x); ctx.moveTo(x, BAR_BOTTOM); ctx.lineTo(x, y); } ctx.stroke(); ctx.lineWidth = 1.2; ctx.beginPath(); for (let x = 6; x <= W - 6; x += 4) { const y = wireAt(x); if (x === 6) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); } function drawTram() { const s = S; const x0 = tram.x; /* the shadow on the ballast */ const sh = ctx.createRadialGradient(x0, RAIL_Y + 3, 2, x0, RAIL_Y + 3, 46 * s); sh.addColorStop(0, 'rgba(0, 0, 0, 0.22)'); sh.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = sh; ctx.save(); ctx.translate(x0, RAIL_Y + 3); ctx.scale(1, 0.12); ctx.beginPath(); ctx.arc(0, 0, 46 * s, 0, Math.PI * 2); ctx.fill(); ctx.restore(); /* the beam of the headlamp on the rail ahead, while it runs */ const speed = Math.abs(tram.v); if (speed > 8) { const f = clamp(speed / 160, 0, 1) * 0.35; const bx = x0 + tram.dir * 37 * s; const bg = ctx.createLinearGradient(bx, 0, bx + tram.dir * 70, 0); bg.addColorStop(0, `rgba(255, 236, 190, ${f})`); bg.addColorStop(1, 'rgba(255, 236, 190, 0)'); ctx.fillStyle = bg; ctx.beginPath(); ctx.moveTo(bx, RAIL_Y - 13 * s); ctx.lineTo(bx + tram.dir * 70, RAIL_Y - 2); ctx.lineTo(bx + tram.dir * 70, RAIL_Y + 3); ctx.lineTo(bx, RAIL_Y - 10 * s); ctx.closePath(); ctx.fill(); } ctx.save(); ctx.translate(x0, RAIL_Y + 0.7); ctx.scale(s, s); /* the trucks and the wheels, which do not lean */ for (const tx of [-21, 21]) { ctx.fillStyle = C.roof; roundRect(tx - 10, -6.4, 20, 3.2, 1); ctx.fill(); /* the leaf spring */ ctx.strokeStyle = '#2a2d2c'; ctx.lineWidth = 0.7; ctx.beginPath(); ctx.moveTo(tx - 6, -6.6); ctx.quadraticCurveTo(tx, -4.6, tx + 6, -6.6); ctx.stroke(); for (const wx of [tx - 5.2, tx + 5.2]) { ctx.fillStyle = '#1f2221'; ctx.beginPath(); ctx.arc(wx, -2.6, 2.6, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = C.steel; ctx.lineWidth = 0.55; ctx.beginPath(); ctx.arc(wx, -2.6, 2.1, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); for (let k = 0; k < 3; k++) { const an = tram.wheel + (k * Math.PI) / 3; ctx.moveTo(wx + Math.cos(an) * 2, -2.6 + Math.sin(an) * 2); ctx.lineTo(wx - Math.cos(an) * 2, -2.6 - Math.sin(an) * 2); } ctx.stroke(); } } /* the body, on its springs */ ctx.save(); ctx.translate(0, -15 - tram.lift * 0.3); ctx.rotate(tram.tilt); ctx.translate(0, 15); /* the lower panel, tomato red, with chamfered ends */ ctx.fillStyle = C.livery; ctx.beginPath(); ctx.moveTo(-36, -16); ctx.lineTo(36, -16); ctx.lineTo(37.5, -9); ctx.lineTo(35.5, -6.6); ctx.lineTo(-35.5, -6.6); ctx.lineTo(-37.5, -9); ctx.closePath(); ctx.fill(); /* its shading: lighter on top, a dark skirt */ const lp = ctx.createLinearGradient(0, -16, 0, -6.6); lp.addColorStop(0, 'rgba(255, 255, 255, 0.16)'); lp.addColorStop(0.6, 'rgba(255, 255, 255, 0)'); lp.addColorStop(1, 'rgba(0, 0, 0, 0.28)'); ctx.fillStyle = lp; ctx.fill(); /* the cream upper half and the roof */ ctx.fillStyle = C.cream; roundRect(-36, -26, 72, 10.2, 2.2); ctx.fill(); ctx.fillStyle = C.roof; roundRect(-35, -28.4, 70, 3, 1.5); ctx.fill(); ctx.fillStyle = 'rgba(255, 255, 255, 0.18)'; ctx.fillRect(-33, -28.2, 66, 0.6); /* the resistor box on the roof */ ctx.fillStyle = '#2c302e'; roundRect(-11, -30.4, 8, 2.2, 0.6); ctx.fill(); roundRect(5, -30.4, 7, 2.2, 0.6); ctx.fill(); /* the windows: dark glass, a streak of light that slides as the tram runs */ const wins = [-29.5, -21, -12.5, 12.5, 21, 29.5]; for (const wx of wins) { ctx.fillStyle = C.glass; roundRect(wx - 3.4, -24, 6.8, 6.2, 1); ctx.fill(); } /* the passengers: simple shapes that lean a little behind the body */ ctx.fillStyle = '#0f1c20'; for (const [wx, hgt] of [[-21, 2.2], [-12.5, 2.6], [12.5, 2.0], [21, 2.5]]) { const lx = wx - tram.lean * 30; ctx.beginPath(); ctx.arc(lx, -20.8 + (2.6 - hgt), 1.25, 0, Math.PI * 2); ctx.fill(); roundRect(lx - 1.8, -19.4 + (2.6 - hgt), 3.6, 2.2, 1); ctx.fill(); } /* the drivers' cabs at both ends: a driver at the front only */ const fx = tram.dir * 29.5 - tram.lean * 20; ctx.beginPath(); ctx.arc(fx, -20.4, 1.2, 0, Math.PI * 2); ctx.fill(); /* the light on the glass */ for (const wx of wins) { ctx.save(); roundRect(wx - 3.4, -24, 6.8, 6.2, 1); ctx.clip(); const off = ((tram.x * 0.18 + wx * 3) % 14 + 14) % 14 - 7; ctx.fillStyle = 'rgba(255, 255, 255, 0.22)'; ctx.beginPath(); ctx.moveTo(wx + off - 1, -24); ctx.lineTo(wx + off + 1.4, -24); ctx.lineTo(wx + off - 1.6, -17.8); ctx.lineTo(wx + off - 4, -17.8); ctx.closePath(); ctx.fill(); ctx.restore(); } /* the doors in the middle: two leaves that slide apart */ const open = tram.doors * 3.6; ctx.fillStyle = '#efe0bd'; ctx.fillRect(-4.6, -24.8, 9.2, 17.8); ctx.fillStyle = 'rgba(30, 30, 25, 0.75)'; ctx.fillRect(-4.2, -24.4, 8.4, 17.2); /* warm light inside when they open */ if (tram.doors > 0.01) { ctx.fillStyle = `rgba(255, 214, 140, ${0.5 * tram.doors})`; ctx.fillRect(-4.2 + 4.2 - open, -24.4, open * 2, 17.2); } for (const side of [-1, 1]) { const lx = side < 0 ? -4.2 - open : 0 + open; ctx.fillStyle = C.livery; ctx.fillRect(lx, -16, 4.2, 9); ctx.fillStyle = C.cream; ctx.fillRect(lx, -24.4, 4.2, 8.4); ctx.fillStyle = C.glass; roundRect(lx + 0.7, -23.6, 2.8, 5.4, 0.6); ctx.fill(); } /* the brass handrails by the door and the brass lining along the waist */ ctx.strokeStyle = C.brass; ctx.lineWidth = 0.7; ctx.beginPath(); ctx.moveTo(-5.6, -22.5); ctx.lineTo(-5.6, -9); ctx.moveTo(5.6, -22.5); ctx.lineTo(5.6, -9); ctx.stroke(); ctx.fillStyle = C.brass; ctx.fillRect(-36, -16.4, 31.4, 0.8); ctx.fillRect(4.6, -16.4, 31.4, 0.8); /* the company's brass plates on the panels */ for (const px of [-21, 21]) { ctx.fillStyle = C.brass; ctx.beginPath(); ctx.ellipse(px, -11.4, 3.4, 1.7, 0, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'rgba(80, 50, 10, 0.55)'; ctx.lineWidth = 0.4; ctx.stroke(); ctx.fillStyle = 'rgba(80, 50, 10, 0.55)'; ctx.fillRect(px - 1.8, -11.6, 3.6, 0.45); } /* the destination blind over each cab and the lamps: cream at the front, red at the back */ for (const end of [-1, 1]) { ctx.fillStyle = '#1b1d1c'; roundRect(end * 29.5 - 4, -27.6, 8, 1.8, 0.5); ctx.fill(); ctx.fillStyle = C.cream; ctx.fillRect(end * 29.5 - 2.6, -26.9, 5.2, 0.45); const front = end === tram.dir; ctx.fillStyle = front ? '#fff4d6' : '#c4342a'; roundRect(end * 36 - 1, -12.4, 2, 2.4, 0.6); ctx.fill(); } /* the bumpers */ ctx.fillStyle = '#2a2d2c'; ctx.fillRect(-38.6, -8.4, 1.6, 1.8); ctx.fillRect(37, -8.4, 1.6, 1.8); ctx.restore(); ctx.restore(); /* the pantograph, in world coordinates: its foot on the roof, its head on the wire */ const footX = x0 - 5 * s * tram.dir; const roofY = RAIL_Y - (30.4 + tram.lift * 0.3) * s + tram.tilt * (footX - x0); const hx = x0 + panX(); const hy = wireAt(hx) + 1.2 + tram.head; const kneeX = (footX + hx) / 2 + tram.dir * 5.5 * s; const kneeY = (roofY + hy) / 2 + 0.8 * s; ctx.strokeStyle = C.roof; ctx.lineWidth = 1.1 * s; ctx.lineJoin = 'round'; ctx.beginPath(); ctx.moveTo(footX, roofY); ctx.lineTo(kneeX, kneeY); ctx.lineTo(hx, hy); ctx.stroke(); ctx.lineWidth = 0.6 * s; ctx.beginPath(); ctx.moveTo(footX + 2 * s * tram.dir, roofY); ctx.lineTo(kneeX, kneeY); ctx.stroke(); /* the collector bar on the wire */ ctx.strokeStyle = '#26292a'; ctx.lineWidth = 1.5 * s; ctx.beginPath(); ctx.moveTo(hx - 4.2 * s, hy); ctx.lineTo(hx + 4.2 * s, hy); ctx.stroke(); /* the insulators under the foot */ ctx.fillStyle = '#d9d2c2'; ctx.fillRect(footX - 1.4 * s, roofY - 0.4 * s, 2.8 * s, 1 * s); /* the bell over the front cab: two arcs that open and fade */ if (tram.bell < 0.9) { const k = tram.bell / 0.9; const bx = x0 + tram.dir * 26 * s; const by = RAIL_Y - 31 * s; ctx.strokeStyle = `rgba(216, 164, 70, ${1 - k})`; ctx.lineWidth = 1; for (const r of [3 + k * 6, 6 + k * 8]) { ctx.beginPath(); ctx.arc(bx, by, r, -Math.PI * 0.85, -Math.PI * 0.55); ctx.stroke(); ctx.beginPath(); ctx.arc(bx, by, r, -Math.PI * 0.45, -Math.PI * 0.15); ctx.stroke(); } } } function drawSparks() { ctx.lineCap = 'round'; for (const p of sparks) { const k = clamp(p.life / p.max, 0, 1); ctx.strokeStyle = k > 0.5 ? '#fff3cf' : C.spark; ctx.globalAlpha = 0.25 + k * 0.75; ctx.lineWidth = 1.3; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - p.vx * 0.032, p.y - p.vy * 0.032); ctx.stroke(); } ctx.globalAlpha = 1; } function draw() { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); drawTrack(); drawStops(); drawWire(); ctx.globalAlpha = tram.alpha; drawTram(); ctx.globalAlpha = 1; drawSparks(); } /* ---------------------------------------------------------------- the loop: it sleeps when nothing moves */ let running = false; let last = 0; function busy() { return tram.riding || Math.abs(stops[current] - tram.x) > 0.3 || Math.abs(tram.v) > 0.5 || Math.abs(tram.tilt) > 0.0004 || Math.abs(tram.tiltV) > 0.002 || Math.abs(tram.lift) > 0.01 || Math.abs(tram.liftV) > 0.05 || Math.abs(tram.lean) > 0.0005 || Math.abs(tram.head) > 0.01 || sparks.length > 0 || plucks.length > 0 || tram.bell < 0.9 || gsap.isTweening(tram); } function frame(t) { const dt = Math.min(1 / 30, last ? (t - last) / 1000 : 1 / 60); last = t; let rest = dt; while (rest > 0) { const h = Math.min(rest, 1 / 120); step(h); rest -= h; } draw(); if (busy()) requestAnimationFrame(frame); else { running = false; last = 0; } } function wake() { if (running) return; running = true; last = 0; requestAnimationFrame(frame); } /* ---------------------------------------------------------------- start: the tram rolls in from the left */ function start() { measure(); if (REDUCED) { tram.x = stops[current]; draw(); return; } tram.x = -50; tram.dir = 1; tram.riding = true; tram.bell = 0; wake(); } let resizeRaf = 0; window.addEventListener('resize', () => { cancelAnimationFrame(resizeRaf); resizeRaf = requestAnimationFrame(() => { measure(); if (!tram.riding) tram.x = stops[current]; draw(); wake(); }); }); if (document.fonts && document.fonts.ready) document.fonts.ready.then(start); else start(); })();