/* La giostra dei cavalli Una giostra a cavalli vista di tre quarti, tutta in SVG. Il tetto a strisce con la mantovana e le lampadine, la colonna con gli specchi, la piattaforma e i cavallini sui pali tortili girano insieme: i cavalli passano davanti e dietro la colonna e sul retro si fanno piccoli, e intanto salgono e scendono sui pali, sfalsati. La giostra parte piano, accelera, gira, rallenta e si ferma con un dondolio, poi riparte. Un clic cambia la velocità. */ /* ---- valori da cambiare ---- */ const DURATA_CORSA = 10; /* secondi di ogni corsa, dalla partenza alla fermata */ const GIRI = 3; /* giri della piattaforma a ogni corsa */ const CAVALLI = 6; /* quanti cavalli girano sulla piattaforma */ const SALTI = 4; /* salite e discese di ogni cavallo per ogni giro */ const ALTEZZA_SALTO = 30; /* quanto salgono i cavalli sul palo, in punti del disegno */ const DONDOLIO = 7; /* gradi del dondolio quando la giostra si ferma */ const SOSTA = 1.2; /* secondi di sosta prima che riparta */ const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const $ = (s) => document.querySelector(s); function crea(tag, attr, padre) { const n = document.createElementNS(NS, tag); for (const k in attr) n.setAttribute(k, attr[k]); if (padre) padre.appendChild(n); return n; } const f1 = (n) => n.toFixed(1); const RAD = Math.PI / 180; const norma = (g) => ((((g + 180) % 360) + 360) % 360) - 180; /* ---------------------------------------------------------------- le misure: tutto è un'ellisse vista di tre quarti */ const CX = 450; const T = 0.2616; /* schiacciamento della vista: altezza / larghezza delle ellissi */ const TETTO = { y: 250, r: 330, cima: 80 }; const PIATTO = { y: 618, r: 344, bordo: 30 }; const COLONNA = { r: 46, alto: 322, basso: 540 }; const ANELLO = 262; /* raggio a cui stanno i cavalli */ const ALTEZZA_SELLA = 122; /* la sella sopra il pavimento, con il cavallo in basso */ const sulTetto = (g, r = TETTO.r) => [CX + r * Math.sin(g * RAD), TETTO.y + r * T * Math.cos(g * RAD)]; const sulPiatto = (g, r = PIATTO.r, giu = 0) => [CX + r * Math.sin(g * RAD), PIATTO.y + giu + r * T * Math.cos(g * RAD)]; /* il pezzo di un settore che si vede davanti (fra −90° e 90°), oppure null */ function davanti(da, a) { const c = norma(da + (a - da) / 2); const mezzo = (a - da) / 2; const lo = Math.max(-90, c - mezzo); const hi = Math.min(90, c + mezzo); return hi - lo > 0.2 ? [lo, hi, c] : null; } /* ---------------------------------------------------------------- i pezzi fissi */ const gStrisce = $('[data-strisce]'); const gMantovana = $('[data-mantovana]'); const gLampadine = $('[data-lampadine]'); const gSpecchi = $('[data-specchi]'); const gAssi = $('[data-assi]'); const gFascia = $('[data-fascia]'); const gDietro = $('[data-dietro]'); const gDavanti = $('[data-davanti]'); const bandiera = $('[data-bandiera]'); const tetto = $('[data-tetto]'); const pulsante = $('[data-velocita]'); const nomeVelocita = $('[data-nome-velocita]'); const falda = `M${CX} ${TETTO.cima}L${CX - TETTO.r} ${TETTO.y}A${TETTO.r} ${f1(TETTO.r * T)} 0 0 0 ${CX + TETTO.r} ${TETTO.y}Z`; $('[data-falda]').setAttribute('d', falda); $('[data-ombra-tetto]').setAttribute('d', falda); $('[data-orlo]').setAttribute('d', `M${CX - TETTO.r} ${TETTO.y}A${TETTO.r} ${f1(TETTO.r * T)} 0 0 0 ${CX + TETTO.r} ${TETTO.y}`); const STRISCE = 20; const strisce = Array.from({ length: STRISCE / 2 }, () => crea('path', { class: 'striscia' }, gStrisce)); const SMERLI = 20; const smerli = Array.from({ length: SMERLI }, (_, i) => crea('path', { class: i % 2 ? 'smerlo smerlo--chiaro' : 'smerlo' }, gMantovana)); const lampadine = Array.from({ length: SMERLI }, () => { const g = crea('g', { class: 'lampadina' }, gLampadine); crea('circle', { class: 'lampadina__vetro', r: 5 }, g); crea('circle', { class: 'lampadina__luce', r: 1.8, cx: -1.4, cy: -1.4 }, g); return g; }); const SPECCHI = 12; const specchi = Array.from({ length: SPECCHI }, () => ({ vetro: crea('rect', { class: 'specchio', fill: 'url(#g-specchio)', y: COLONNA.alto, height: COLONNA.basso - COLONNA.alto }, gSpecchi), luce: crea('path', { class: 'specchio__luce' }, gSpecchi), })); const ASSI = 24; const assi = Array.from({ length: ASSI }, () => crea('line', { class: 'asse' }, gAssi)); const PANNELLI = 24; const pannelli = Array.from({ length: PANNELLI }, (_, i) => crea('path', { class: i % 2 ? 'pannello pannello--oro' : 'pannello' }, gFascia)); /* ---------------------------------------------------------------- i cavallini: rivolti a destra, la sella in 0,0 */ const MANTI = ['#F4E9D8', '#3A3046', '#DDE6EE', '#E9C8A0', '#F4E9D8', '#C9D9CF', '#F2D3D8', '#3A3046']; const SELLE = ['var(--rosso)', 'var(--verde)', 'var(--rosa)', 'var(--blu)', 'var(--oro)', 'var(--rosso)', 'var(--verde)', 'var(--blu)']; const FORMA_CAVALLO = ` `; const cavalli = Array.from({ length: CAVALLI }, (_, k) => { const g = crea('g', { class: 'cavallo' }, gDietro); const palo = crea('line', { class: 'palo' }, g); const spire = crea('path', { class: 'palo__spire' }, g); const corpo = crea('g', {}, g); corpo.innerHTML = FORMA_CAVALLO; corpo.style.setProperty('--manto', MANTI[k % MANTI.length]); corpo.style.setProperty('--sella', SELLE[k % SELLE.length]); return { k, g, palo, spire, corpo, angolo: (k * 360) / CAVALLI, fase: k * 137.5, davanti: null }; }); /* ---------------------------------------------------------------- un fotogramma */ /* A: gradi fatti dalla piattaforma (crescono sempre); dondolo: gradi in più quando si ferma */ const stato = { A: 0, dondolo: 0, luci: 0, entrata: 0 }; let Aprima = 0; let vel = 0; let tPrima = 0; const CROCIERA = (GIRI * 360) / (DURATA_CORSA * 0.73); /* gradi al secondo a velocità piena, a passo normale */ function disegna() { const ora = gsap.ticker.time; const A = stato.A + stato.dondolo; const dt = Math.max(1 / 240, ora - tPrima); const v = Math.abs(A - Aprima) / dt; if (Math.abs(A - Aprima) < 360) vel += (v - vel) * 0.12; Aprima = A; tPrima = ora; const corre = Math.min(1, vel / CROCIERA); /* le strisce del tetto: solo quelle sulla falda davanti */ const passo = 360 / STRISCE; strisce.forEach((p, j) => { const s = davanti(A + 2 * j * passo, A + (2 * j + 1) * passo); if (!s) { p.setAttribute('d', ''); return; } let d = `M${CX} ${TETTO.cima}`; for (let q = 0; q <= 6; q++) { const [x, y] = sulTetto(s[0] + ((s[1] - s[0]) * q) / 6); d += `L${f1(x)} ${f1(y)}`; } p.setAttribute('d', d + 'Z'); }); /* la mantovana: smerli che girano col tetto, con una lampadina a ogni giunta */ const ps = 360 / SMERLI; smerli.forEach((p, i) => { const da = A + i * ps; const s = davanti(da, da + ps); if (!s) { p.setAttribute('d', ''); return; } let su = ''; let giu = ''; for (let q = 0; q <= 8; q++) { const g = s[0] + ((s[1] - s[0]) * q) / 8; const u = (g - (s[2] - ps / 2)) / ps; const [x, y] = sulTetto(g); su += `${q ? 'L' : 'M'}${f1(x)} ${f1(y)}`; giu = `L${f1(x)} ${f1(y + 11 + 17 * Math.sin(Math.PI * gsap.utils.clamp(0, 1, u)))}` + giu; } p.setAttribute('d', su + giu + 'Z'); }); lampadine.forEach((l, i) => { const g = A + i * ps; const c = Math.cos(g * RAD); l.classList.toggle('lampadina--accesa', ((i * 7) % SMERLI) / SMERLI < stato.luci); if (c < 0.04) { l.setAttribute('visibility', 'hidden'); return; } const [x, y] = sulTetto(g); l.setAttribute('visibility', 'visible'); l.setAttribute('transform', `translate(${f1(x)} ${f1(y + 6)}) scale(${f1(0.7 + 0.35 * c)})`); }); /* la colonna: gli specchi girano e si accendono quando guardano verso di noi */ const pp = 360 / SPECCHI; specchi.forEach((m, j) => { const s = davanti(A + j * pp + 3, A + (j + 1) * pp - 3); if (!s) { m.vetro.setAttribute('width', 0); m.luce.setAttribute('d', ''); return; } const x0 = CX + COLONNA.r * Math.sin(s[0] * RAD); const x1 = CX + COLONNA.r * Math.sin(s[1] * RAD); m.vetro.setAttribute('x', f1(x0)); m.vetro.setAttribute('width', f1(Math.max(0, x1 - x0))); const faccia = Math.pow(Math.max(0, Math.cos(s[2] * RAD)), 3); const lx = x0 + (x1 - x0) * 0.3; const lw = (x1 - x0) * 0.2; const sl = (x1 - x0) * 0.35; m.luce.setAttribute('d', `M${f1(lx)} ${COLONNA.basso - 8}L${f1(lx + lw)} ${COLONNA.basso - 8}L${f1(lx + lw + sl)} ${COLONNA.alto + 8}L${f1(lx + sl)} ${COLONNA.alto + 8}Z`); m.luce.setAttribute('opacity', f1(0.12 + 0.55 * faccia)); }); /* il pavimento: le assi girano, il bordo ha i pannelli colorati */ assi.forEach((l, i) => { const g = A + (i * 360) / ASSI; const [x1, y1] = sulPiatto(g, 70); const [x2, y2] = sulPiatto(g, PIATTO.r - 12); l.setAttribute('x1', f1(x1)); l.setAttribute('y1', f1(y1)); l.setAttribute('x2', f1(x2)); l.setAttribute('y2', f1(y2)); }); const pf = 360 / PANNELLI; pannelli.forEach((p, i) => { const s = davanti(A + i * pf, A + (i + 1) * pf); if (!s) { p.setAttribute('d', ''); return; } let su = ''; let giu = ''; for (let q = 0; q <= 5; q++) { const g = s[0] + ((s[1] - s[0]) * q) / 5; const [x, y] = sulPiatto(g); su += `${q ? 'L' : 'M'}${f1(x)} ${f1(y)}`; giu = `L${f1(x)} ${f1(y + PIATTO.bordo)}` + giu; } p.setAttribute('d', su + giu + 'Z'); }); /* i cavalli: davanti o dietro la colonna, più piccoli sul retro, su e giù sui pali */ for (const c of cavalli) { const g = A + c.angolo; const sn = Math.sin(g * RAD); const cs = Math.cos(g * RAD); const sc = 1.2 * (0.78 + 0.26 * (cs + 1) / 2) * stato.entrata; const x = CX + ANELLO * sn; const yTop = TETTO.y + ANELLO * T * cs; const yBasso = PIATTO.y + ANELLO * T * cs; const fase = (A * SALTI + c.fase) * RAD; const su = ALTEZZA_SALTO * (0.5 - 0.5 * Math.cos(fase)); const y = yBasso - (ALTEZZA_SELLA + su) * (0.78 + 0.26 * (cs + 1) / 2); /* il cavallo è tangente al cerchio: visto di fianco davanti e dietro, di scorcio ai lati */ const lato = cs >= 0 ? 1 : -1; const sx = lato * Math.max(0.2, Math.abs(cs)); const beccheggio = -6 * Math.sin(fase); c.corpo.setAttribute('transform', `translate(${f1(x)} ${f1(y)}) scale(${(sx * sc).toFixed(3)} ${sc.toFixed(3)}) rotate(${f1(beccheggio)})`); const w = 7 * (0.8 + 0.26 * (cs + 1) / 2); c.palo.setAttribute('x1', f1(x)); c.palo.setAttribute('x2', f1(x)); c.palo.setAttribute('y1', f1(yTop)); c.palo.setAttribute('y2', f1(yBasso)); c.palo.setAttribute('stroke-width', f1(w)); /* le spire del palo tortile scorrono col giro */ const passoSpira = 10; let d = ''; const spost = ((A / 18) % passoSpira + passoSpira) % passoSpira; for (let yy = yTop + spost; yy < yBasso - 4; yy += passoSpira) d += `M${f1(x - w / 2)} ${f1(yy + 4)}L${f1(x + w / 2)} ${f1(yy)}`; c.spire.setAttribute('d', d); c.spire.setAttribute('stroke-width', f1(w * 0.36)); c.cs = cs; } /* l'ordine: prima i più lontani; chi passa davanti alla colonna cambia gruppo */ const ordine = cavalli.slice().sort((a, b) => a.cs - b.cs); for (const c of ordine) { const padre = c.cs >= 0 ? gDavanti : gDietro; if (c.g.parentNode !== padre || c.g !== padre.lastChild) padre.appendChild(c.g); } /* il pennacchio sventola con la corsa e ricade quando la giostra è ferma */ const L = 50; const piega = (1 - corre) * 62 * RAD; const onda = 3 + 5 * corre; let alto = ''; let basso = ''; for (let q = 0; q <= 8; q++) { const u = q / 8; const px = L * u; const w = onda * u * Math.sin(u * 5 - ora * (4 + 10 * corre)); const h = 10 * (1 - u); const ruota = (xx, yy) => [CX + xx * Math.cos(piega) - yy * Math.sin(piega), 24 + xx * Math.sin(piega) + yy * Math.cos(piega)]; const [ax, ay] = ruota(px, w - h); const [bx, by] = ruota(px, w + h); alto += `${q ? 'L' : 'M'}${f1(ax)} ${f1(ay)}`; basso = `L${f1(bx)} ${f1(by)}` + basso; } bandiera.setAttribute('d', alto + basso + 'Z'); } /* ---------------------------------------------------------------- la regia */ /* la corsa: parte piano, accelera, gira a velocità piena, frena; finisce su un numero intero di giri */ const PARTENZA = 0.24; const FRENATA = 0.3; const liscia = (u) => u * u * u - (u * u * u * u) / 2; /* integrale di una rampa morbida (3u² − 2u³) */ const TOTALE = 1 - PARTENZA / 2 - FRENATA / 2; function corsa(t) { if (t <= 0) return 0; if (t >= 1) return 1; let p; if (t < PARTENZA) p = PARTENZA * liscia(t / PARTENZA); else if (t < 1 - FRENATA) p = PARTENZA / 2 + (t - PARTENZA); else { const u = (t - (1 - FRENATA)) / FRENATA; p = PARTENZA / 2 + (1 - PARTENZA - FRENATA) + FRENATA * (u - liscia(u)); } return p / TOTALE; } const S = { corsa: 0 }; function daRegia() { stato.A = S.corsa * GIRI * 360; } const regia = gsap.timeline({ repeat: -1, paused: true, onUpdate: daRegia }); regia.set(S, { corsa: 0 }, 0) .set(stato, { dondolo: 0 }, 0) .to(S, { corsa: 1, duration: DURATA_CORSA, ease: corsa }, 0) /* il dondolio: frenata, la piattaforma torna un po' indietro, poi avanti, e si assesta */ .to(stato, { keyframes: { dondolo: [0, -DONDOLIO, DONDOLIO * 0.45, -DONDOLIO * 0.18, 0], easeEach: 'sine.inOut' }, duration: 2.4, ease: 'none' }) .to({}, { duration: SOSTA }); /* il clic cambia la velocità: regolare, al galoppo, piano */ const VELOCITA = [ { nome: 'steady', passo: 1 }, { nome: 'gallop', passo: 1.75 }, { nome: 'gentle', passo: 0.6 }, ]; let quale = 0; function cambia() { quale = (quale + 1) % VELOCITA.length; const v = VELOCITA[quale]; pulsante.classList.remove('velocita--scatta'); void pulsante.offsetWidth; pulsante.classList.add('velocita--scatta'); if (RIDOTTO) { gsap.to(nomeVelocita, { opacity: 0, duration: 0.2, onComplete: () => { nomeVelocita.textContent = v.nome; gsap.to(nomeVelocita, { opacity: 1, duration: 0.3 }); } }); return; } gsap.timeline() .to(nomeVelocita, { yPercent: -60, opacity: 0, duration: 0.18, ease: 'power2.in' }) .add(() => { nomeVelocita.textContent = v.nome; }) .fromTo(nomeVelocita, { yPercent: 60, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.5, ease: 'back.out(3)' }); gsap.to(regia, { timeScale: v.passo, duration: 0.9, ease: 'power2.inOut', overwrite: true }); /* la giostra sobbalza appena, come quando il giostraio tira la leva */ gsap.fromTo('[data-giostra]', { scaleY: 0.985 }, { scaleY: 1, duration: 0.6, ease: 'elastic.out(1, 0.35)', svgOrigin: '450 740', overwrite: true }); } pulsante.addEventListener('click', cambia); $('[data-scena]').addEventListener('click', cambia); /* ---------------------------------------------------------------- l'avvio */ gsap.ticker.add(disegna); if (RIDOTTO) { /* movimento ridotto: la giostra è già ferma al suo posto, con le luci accese; compare in dissolvenza */ Object.assign(stato, { A: 14, luci: 1, entrata: 1 }); disegna(); gsap.from('[data-giostra]', { opacity: 0, duration: 0.8 }); } else { disegna(); gsap.set(tetto, { y: -70, opacity: 0 }); gsap.timeline({ delay: 0.25, onComplete: () => regia.play(0) }) .from('[data-piattaforma], [data-colonna]', { opacity: 0, duration: 0.5, ease: 'power1.out' }) .from('[data-piattaforma]', { scaleY: 0.6, duration: 0.8, ease: 'back.out(2.2)', svgOrigin: '450 618' }, 0) .to(tetto, { y: 0, opacity: 1, duration: 0.9, ease: 'bounce.out' }, 0.15) .to(stato, { entrata: 1, duration: 1, ease: 'elastic.out(1, 0.5)' }, 0.45) .to(stato, { luci: 1, duration: 0.9, ease: 'none' }, 0.8); }