Axes quantitatifs + axe de famille

Comment ça marche

Chaque famille est elle-même paramétrique : le pétale se génère avec rx et kappa, l'étoile avec un rayon intérieur et un étirement horizontal. À chaque mouvement de slider, on génère les deux tracés à jour, puis Flubber calcule l'état intermédiaire selon l'axe Famille. La rotation reste une simple transformation CSS. Le compteur sous la forme affiche le temps de calcul : c'est le coût de recréer l'interpolateur à chaque frame, acceptable ici parce que les formes sont simples.

// 1. chaque famille = une fonction qui prend les axes quantitatifs
const petal = petalPath(rx, kappa);
const star  = starPath(rx, innerRatio);

// 2. l'axe qualitatif = Flubber entre les deux familles, à jour
const d = fam === 0 ? petal
      : fam === 1 ? star
      : flubber.interpolate(petal, star, { maxSegmentLength: 6 })(fam);

// 3. la rotation reste indépendante
shapePath.setAttribute("d", d);
shapePath.style.transform = `rotate(${rot}deg)`;

Règle à retenir pour l'atelier : quand les deux états se décrivent avec les mêmes paramètres, une formule suffit. Quand ils ne se décrivent pas de la même façon (pétale contre étoile), on interpole les tracés avec Flubber, mais on garde les axes quantitatifs en amont pour ne pas perdre le contrôle fin sur chaque famille.