/* Il carillon Un carillon aperto visto da vicino. Sotto il vetro il cilindro con le punte gira e pizzica i denti del pettine: ogni dente si piega, scatta e vibra, e da lui sale una nota disegnata. La ballerina piroetta davanti allo specchio del coperchio, la manovella torna indietro piano mentre la molla si scarica e tutto rallenta fino a fermarsi. Poi arriva una mano e lo ricarica. Un clic (o il pulsante) lo ricarica quando si vuole. */ /* ---- valori da cambiare ---- */ const DURATA_CORSA = 11; /* secondi di musica a ogni carica, rallentando fino a fermarsi */ const GIRI = 3; /* giri del cilindro a ogni carica, e giri di manovella per ricaricarlo */ const PIROETTE = 2; /* piroette della ballerina per ogni giro del cilindro */ const SALITA_NOTE = 300; /* quanto salgono le note, in punti del disegno */ const VIBRAZIONE = 5; /* quanto vibra un dente appena pizzicato */ const GIRO_DI_CARICA = 0.7; /* secondi per ogni giro di manovella della mano */ const MELODIA = '0+7 4 7 9 5+11 9 7 4 3+10 7 10 12 11 - 9 7 2+9 6 9 11 4+14 12 11 -'; /* un giro del cilindro: i denti pizzicati a ogni passo (0 il più grave, 14 il più acuto), + per un accordo, - per una pausa */ 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; /* ---------------------------------------------------------------- le misure del meccanismo */ const DENTI = 15; const CIL = { cy: 432, r: 18, punta: 6 }; const PIZZICO = 60; /* gradi: dove le punte incontrano le punte dei denti */ const PETTINE = { x0: 306, x1: 604, punta: 447 }; const PASSO_DENTE = (PETTINE.x1 - PETTINE.x0) / DENTI; const xDente = (i) => PETTINE.x0 + PASSO_DENTE * (i + 0.5); const baseDente = (i) => 488 - (16 * i) / (DENTI - 1); const MANOVELLA = { x: 770, y: 615, braccio: 44 }; const MANO_FUORI = { x: 1320, y: 560 }; const GIRO_TOTALE = GIRI * 360; /* la melodia diventa punte sul cilindro: un passo ogni 360 / passi gradi */ const passi = MELODIA.trim().split(/\s+/).map((p) => (p === '-' ? [] : p.split('+').map((n) => gsap.utils.clamp(0, DENTI - 1, parseInt(n, 10) || 0)))); const PASSO_GRADI = 360 / Math.max(1, passi.length); const scatola = $('[data-scatola]'); const gPunte = $('[data-punte]'); const gDenti = $('[data-denti]'); const gNote = $('[data-note]'); const molla = $('[data-molla]'); const tamburo = $('[data-tamburo]'); const rinvio = $('[data-rinvio] circle'); const ventola = $('[data-ventola]'); const manovella = $('[data-manovella]'); const pomello = $('[data-pomello]'); const mano = $('[data-mano]'); const pulsante = $('[data-carica]'); const punte = []; passi.forEach((denti, k) => denti.forEach((d) => { punte.push({ dente: d, theta: -k * PASSO_GRADI, el: crea('line', { class: 'punta', x1: xDente(d), x2: xDente(d), y1: CIL.cy, y2: CIL.cy }, gPunte) }); })); const denti = []; for (let i = 0; i < DENTI; i++) { const g = crea('g', {}, gDenti); denti.push({ i, corpo: crea('path', { class: 'dente' }, g), luce: crea('line', { class: 'dente__luce', opacity: 0 }, g), ampiezza: 0, da: 0, hz: 6.5 + i * 0.32, spinta: 0, }); } /* ---------------------------------------------------------------- la ballerina (senza faccia) */ function ballerina(padre) { const g = crea('g', {}, padre); const b = { g }; b.perno = crea('ellipse', { class: 'b-perno', cx: 0, cy: 3, rx: 34, ry: 9 }, g); b.segni = Array.from({ length: 6 }, () => crea('line', { class: 'b-segno' }, g)); b.gambaDietro = crea('path', { class: 'b-linea', 'stroke-width': 6.5 }, g); crea('line', { class: 'b-linea', x1: 0, y1: 0, x2: 0, y2: -62, 'stroke-width': 7 }, g); b.gambaDavanti = crea('path', { class: 'b-linea', 'stroke-width': 6.5 }, g); crea('ellipse', { class: 'b-tutu-sotto', cx: 0, cy: -62, rx: 40, ry: 10 }, g); crea('ellipse', { class: 'b-tutu', cx: 0, cy: -66, rx: 42, ry: 10 }, g); b.pieghe = Array.from({ length: 10 }, () => crea('line', { class: 'b-piega' }, g)); b.busto = crea('path', { class: 'b-pelle' }, g); b.crocchiaDietro = crea('circle', { class: 'b-pelle', r: 5.2, cy: -125 }, g); crea('line', { class: 'b-linea', x1: 0, y1: -100, x2: 0, y2: -108, 'stroke-width': 4.5 }, g); crea('circle', { class: 'b-pelle', r: 9.5, cy: -116 }, g); b.crocchiaDavanti = crea('circle', { class: 'b-pelle', r: 5.2, cy: -125 }, g); b.braccia = crea('path', { class: 'b-linea', 'stroke-width': 4.5 }, g); return b; } function posa(b, gradi) { const a = gradi * RAD; const s = Math.sin(a); const c = Math.cos(a); const w = Math.max(0.1, Math.abs(c)); /* il ginocchio del passé punta al suo fianco: davanti o dietro alla gamba ferma */ const gamba = `M0 -60L${f1(24 * c)} -50L${f1(2 * c)} -34`; const davanti = -s > 0; b.gambaDavanti.setAttribute('d', davanti ? gamba : ''); b.gambaDietro.setAttribute('d', davanti ? '' : gamba); const sp = 7 + 3 * w; b.busto.setAttribute('d', `M-6 -66L6 -66L${f1(sp)} -99Q0 -104 ${f1(-sp)} -99Z`); b.braccia.setAttribute('d', `M${f1(-9 * w)} -99C${f1(-31 * w)} -114 ${f1(-23 * w)} -146 0 -148C${f1(23 * w)} -146 ${f1(31 * w)} -114 ${f1(9 * w)} -99`); /* la crocchia sta dietro la testa: si vede di lato e di spalle */ const cx = f1(-s * 7); b.crocchiaDietro.setAttribute('cx', cx); b.crocchiaDavanti.setAttribute('cx', cx); b.crocchiaDietro.style.display = c > 0 ? '' : 'none'; b.crocchiaDavanti.style.display = c > 0 ? 'none' : ''; b.pieghe.forEach((l, k) => { const q = a + k * 36 * RAD; const qs = Math.sin(q); const qc = Math.cos(q); if (qc <= 0) { l.setAttribute('opacity', 0); return; } l.setAttribute('opacity', 1); l.setAttribute('x1', f1(14 * qs)); l.setAttribute('y1', f1(-66 + 3.3 * qc)); l.setAttribute('x2', f1(41 * qs)); l.setAttribute('y2', f1(-66 + 9.6 * qc)); }); b.segni.forEach((l, k) => { const q = a + k * 60 * RAD; const qs = Math.sin(q); const qc = Math.cos(q); if (qc <= 0.05) { l.setAttribute('opacity', 0); return; } l.setAttribute('opacity', 1); l.setAttribute('x1', f1(22 * qs)); l.setAttribute('y1', f1(3 + 5.6 * qc)); l.setAttribute('x2', f1(31 * qs)); l.setAttribute('y2', f1(3 + 8 * qc)); }); } const figura = ballerina($('[data-ballerina]')); const riflesso = ballerina($('[data-riflesso]')); /* ---------------------------------------------------------------- le note che salgono */ const FORME = [ '', '', '', ]; const note = Array.from({ length: 18 }, () => crea('g', { class: 'nota', opacity: 0 }, gNote)); let contaNote = 0; const caso = (k) => { const x = Math.sin(k * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; function vestiNota(g, k, dente) { g.innerHTML = FORME[k % FORME.length]; g.setAttribute('class', `nota nota--${dente < 5 ? 'grave' : dente < 10 ? 'media' : 'acuta'}`); } let ultimaNota = -1; function nota(dente) { const ora = gsap.ticker.time; /* al massimo una nota ogni 0,12 s: negli accordi sale quella più acuta */ if (ora - ultimaNota < 0.12) return; ultimaNota = ora; const k = contaNote++; const g = note[k % note.length]; gsap.killTweensOf(g); vestiNota(g, k, dente); const lato = k % 2 ? 1 : -1; const x = xDente(dente); const y = CIL.cy - 4; const r = caso(k); gsap.timeline() .fromTo(g, { x, y, scale: 0.2, rotation: -18 * lato, opacity: 0, transformOrigin: '50% 80%' }, { scale: 1.25, opacity: 1, duration: 0.5, ease: 'back.out(3)' }, 0) .to(g, { y: y - SALITA_NOTE * (0.75 + 0.45 * r), duration: 2.8, ease: 'sine.out' }, 0) .to(g, { keyframes: { x: [x, x + lato * (14 + 16 * r), x - lato * (6 + 10 * r), x + lato * (20 + 18 * r)], easeEach: 'sine.inOut' }, duration: 2.8, ease: 'none' }, 0) .to(g, { rotation: 14 * lato, duration: 2.8, ease: 'sine.inOut' }, 0.1) .to(g, { opacity: 0, scale: 0.8, duration: 0.8, ease: 'power1.in' }, 2); } /* ---------------------------------------------------------------- un dente pizzicato */ function pizzica(dente) { const d = denti[dente]; d.da = gsap.ticker.time; gsap.killTweensOf(d); d.ampiezza = 1; gsap.to(d, { ampiezza: 0, duration: 1.3, ease: 'power2.out' }); nota(dente); } /* ---------------------------------------------------------------- la molla: stretta al centro se carica */ function spirale(carica, giroDentro, giroFuori) { const n = 110; const giri = 5; const p = 0.55 + 2.4 * carica; let d = ''; for (let k = 0; k < n; k++) { const s = k / (n - 1); const q = s * giri * 2 * Math.PI + (giroDentro + (giroFuori - giroDentro) * s) * RAD; const r = 6 + 19 * Math.pow(s, p); d += `${k ? 'L' : 'M'}${f1(r * Math.cos(q))} ${f1(r * Math.sin(q))}`; } return d; } /* ---------------------------------------------------------------- un fotogramma */ /* G: gradi del cilindro (crescono sempre); carica: giri di molla rimasti; mano: 0 fuori, 1 sul pomello */ const stato = { G: 0, carica: GIRI, mano: 0 }; let Gprima = 0; function disegna() { const ora = gsap.ticker.time; const G = stato.G; const avanti = G - Gprima; Gprima = G; denti.forEach((d) => { d.spinta = 0; }); for (const p of punte) { const phi = (((p.theta + G) % 360) + 360) % 360; const c = Math.cos(phi * RAD); const s = Math.sin(phi * RAD); /* la punta che si avvicina solleva il dente; quando lo supera, il dente scatta */ if (phi > PIZZICO - 12 && phi < PIZZICO) denti[p.dente].spinta = Math.max(denti[p.dente].spinta, (phi - PIZZICO + 12) / 12); if (avanti > 0 && avanti < 180 && phi >= PIZZICO && phi - avanti < PIZZICO) pizzica(p.dente); if (c <= 0.03) { p.el.setAttribute('opacity', 0); continue; } p.el.setAttribute('opacity', f1(Math.min(1, c * 3))); p.el.setAttribute('y1', f1(CIL.cy + CIL.r * s)); p.el.setAttribute('y2', f1(CIL.cy + (CIL.r + CIL.punta) * s)); } for (const d of denti) { const vib = d.ampiezza * VIBRAZIONE * Math.sin((ora - d.da) * d.hz * 2 * Math.PI); const dy = -d.spinta * 4 + vib; const dx = dy * 0.3; const xc = xDente(d.i); const b = baseDente(d.i); const t = PETTINE.punta + dy; d.corpo.setAttribute('d', `M${f1(xc - 6)} ${f1(b)}L${f1(xc + 6)} ${f1(b)}L${f1(xc + 6 + dx)} ${f1(t + 4)}Q${f1(xc + 6 + dx)} ${f1(t)} ${f1(xc + dx)} ${f1(t)}Q${f1(xc - 6 + dx)} ${f1(t)} ${f1(xc - 6 + dx)} ${f1(t + 4)}Z`); d.luce.setAttribute('x1', f1(xc - 1.5)); d.luce.setAttribute('y1', f1(b - 3)); d.luce.setAttribute('x2', f1(xc - 1.5 + dx)); d.luce.setAttribute('y2', f1(t + 4)); d.luce.setAttribute('opacity', f1(Math.max(d.ampiezza * 0.9, d.spinta * 0.5))); } /* il regolatore, gli ingranaggi e la molla */ const v = Math.abs(Math.cos(G * 12 * RAD)); ventola.setAttribute('y', f1(440 - 15 * v)); ventola.setAttribute('height', f1(Math.max(2, 30 * v))); rinvio.setAttribute('transform', `translate(284 432) rotate(${f1(-G * 2.2)})`); const giroTamburo = G / GIRI; const giroManovella = stato.carica * 360; tamburo.setAttribute('transform', `rotate(${f1(giroTamburo)})`); molla.setAttribute('d', spirale(stato.carica / GIRI, giroManovella, giroTamburo)); manovella.setAttribute('transform', `rotate(${f1(giroManovella)} ${MANOVELLA.x} ${MANOVELLA.y})`); const kx = MANOVELLA.x + MANOVELLA.braccio * Math.cos(giroManovella * RAD); const ky = MANOVELLA.y + MANOVELLA.braccio * Math.sin(giroManovella * RAD); pomello.setAttribute('cx', f1(kx)); pomello.setAttribute('cy', f1(ky)); /* la mano segue il pomello */ const m = stato.mano; const mx = MANO_FUORI.x + (kx - MANO_FUORI.x) * m; const my = MANO_FUORI.y + (ky - MANO_FUORI.y) * m; mano.setAttribute('transform', `translate(${f1(mx)} ${f1(my)}) rotate(${f1((ky - MANOVELLA.y) * 0.25 * m - 8 * (1 - m))})`); /* la ballerina e il suo riflesso, che la vede di spalle */ const a = G * PIROETTE; posa(figura, a); posa(riflesso, a + 180); } /* ---------------------------------------------------------------- la regia */ /* la corsa: piena all'inizio, poi la molla cede e il cilindro rallenta fino a fermarsi (velocità 1 − t³) */ const scarica = (t) => (t - Math.pow(t, 4) / 4) / 0.75; /* la carica: ogni giro di manovella accelera e frena, come una mano vera */ const aGiri = (n) => (t) => { if (t >= 1) return 1; const T = t * n; const k = Math.floor(T); const f = T - k; return (k + f * f * (3 - 2 * f)) / n; }; const S = { corsa: 0, carica: 0 }; let base = 0; function daRegia() { stato.G = base + S.corsa * GIRO_TOTALE; stato.carica = GIRI - S.corsa * GIRI * (1 - S.carica); } const regia = gsap.timeline({ repeat: -1, paused: true, onUpdate: daRegia }); regia.set(S, { corsa: 0, carica: 0 }, 0) .to(S, { corsa: 1, duration: DURATA_CORSA, ease: scarica }, 0) .addLabel('carica', '+=0.9') .to(stato, { mano: 1, duration: 0.7, ease: 'power3.out' }, 'carica') .to(S, { carica: 1, duration: GIRO_DI_CARICA * GIRI, ease: aGiri(GIRI) }, 'carica+=0.75'); for (let k = 1; k <= GIRI; k++) { regia.fromTo(scatola, { scaleY: 0.993 }, { scaleY: 1, duration: 0.45, ease: 'elastic.out(1, 0.4)', svgOrigin: '450 746', immediateRender: false }, `carica+=${0.75 + GIRO_DI_CARICA * k - 0.05}`); } regia.to(stato, { mano: 0, duration: 0.6, ease: 'power2.in' }, `carica+=${0.85 + GIRO_DI_CARICA * GIRI}`) .to({}, { duration: 0.35 }); /* un clic ricarica subito: la mano arriva, gira la manovella quanto serve e la musica riparte */ let avviato = false; let inCarica = false; function ricarica() { pulsante.classList.remove('carica--gira'); void pulsante.offsetWidth; pulsante.classList.add('carica--gira'); if (RIDOTTO) { cambiaNoteFerme(); return; } if (!avviato || inCarica || regia.time() >= regia.labels.carica) return; inCarica = true; regia.pause(); base = stato.G % GIRO_TOTALE; Gprima = base; stato.G = base; const giri = GIRI - stato.carica; gsap.timeline({ onComplete: () => { inCarica = false; regia.restart(); }, }) .to(stato, { mano: 1, duration: 0.6, ease: 'power3.out' }) .to(stato, { carica: GIRI, duration: Math.max(0.4, giri * GIRO_DI_CARICA), ease: 'power2.inOut' }, '+=0.05') .fromTo(scatola, { scaleY: 0.993 }, { scaleY: 1, duration: 0.45, ease: 'elastic.out(1, 0.4)', svgOrigin: '450 746', immediateRender: false }, '-=0.05') .to(stato, { mano: 0, duration: 0.55, ease: 'power2.in' }, '<+0.1'); } pulsante.addEventListener('click', ricarica); $('[data-scena]').addEventListener('click', ricarica); /* ---------------------------------------------------------------- movimento ridotto: tutto fermo, le note si dissolvono */ const NOTE_FERME = [ [[372, 300, 0], [520, 250, 7], [610, 330, 12], [450, 180, 4], [300, 230, 10]], [[400, 250, 9], [560, 300, 2], [330, 320, 13], [500, 170, 6], [620, 220, 0]], ]; let giroFermo = 0; function mettiNoteFerme(i) { NOTE_FERME[i].forEach(([x, y, dente], k) => { const g = note[k]; vestiNota(g, k + i, dente); gsap.set(g, { x, y, scale: 1.25, rotation: (k % 2 ? 1 : -1) * 10 }); }); } function cambiaNoteFerme() { const vecchie = note.slice(0, 5); gsap.killTweensOf(vecchie); gsap.to(vecchie, { opacity: 0, duration: 0.35, onComplete: () => { giroFermo = (giroFermo + 1) % NOTE_FERME.length; mettiNoteFerme(giroFermo); gsap.to(vecchie, { opacity: 1, duration: 0.6, stagger: 0.08 }); }, }); } /* ---------------------------------------------------------------- l'avvio: il coperchio si apre e la ballerina sale */ gsap.ticker.add(disegna); disegna(); if (RIDOTTO) { gsap.set('[data-chiuso]', { autoAlpha: 0 }); stato.G = 38; disegna(); mettiNoteFerme(0); gsap.to(note.slice(0, 5), { opacity: 1, duration: 0.8, stagger: 0.1, delay: 0.2 }); avviato = true; } else { gsap.set('[data-coperchio]', { scaleY: 0, svgOrigin: '450 384' }); gsap.set(figura.g, { scale: 0, transformOrigin: '50% 100%' }); gsap.timeline({ delay: 0.3, onComplete: () => { avviato = true; regia.play(0); } }) .to('[data-chiuso]', { scaleY: 0, duration: 0.45, ease: 'power2.in', svgOrigin: '450 382' }) .set('[data-chiuso]', { autoAlpha: 0 }) .to('[data-coperchio]', { scaleY: 1, duration: 0.8, ease: 'back.out(1.7)', svgOrigin: '450 384' }) .to(figura.g, { scale: 1, duration: 0.9, ease: 'elastic.out(1, 0.45)' }, '-=0.55') .from(riflesso.g, { opacity: 0, duration: 0.5 }, '<'); }