À partir d’une petite boucle de batterie, voici comment travailler sur une pulsation avec GSAP.
Les timelines de GSAP utilisent comme unité de temps la seconde, la musique se base sur le BPM, battements par minute.
- À 60 bpm, un temps par seconde, 0s 1s 2s 3s donne la pulsation ;
- À 120 bpm (le tempo de la Marseillaise) 2 temps par seconde, 0s 0.5s 1s 1.5s donne la pulsation ;
- À 88 bpm, c’est plus complexe, 0s 0.6818s 1.3636s 2.04545s (60/88*t)
GSAP a une fonction pour accélérer ou décélérer les timelines !
tl.timeScale(2); // double la vitesse tl.timeScale(0.5); // divise par 2 la vitesse
L’astuce est de compter le nombre de temps dans l’extrait musical et de faire un timeScale(nombre de temps/durée de l’extrait).
Voici ma boucle de 8 temps.
http://www.orangefreesounds.com/funk-drum-loop/, elle dure 5,333333 secondes.
En écriture musicale de boite à rythmes sur https://drumbit.app/, j’obtiens ceci pour les 4 derniers temps (une petite variation d’ouverture de hit-hat):
La base SVG
Je vais utiliser 3 cercles, un rouge pour la grosse caisse (BD), un orange pour la caisse claire (SD) et un dernier jaune pour l’ouverture de la charleston.
<svg width="800px" height="800px"> <circle id="ho" cx="400" cy="400" r="50" fill="yellow"/> <circle id="sd" cx="500" cy="400" r="50" fill="#f60"/> <circle id="bd" cx="300" cy="400" r="50" fill="red"/> </svg>
Pour le son, je copie/colle pour créer une répétition.
Version 1 fois
Version 4 fois
GSAP est chargé via <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Le reste est en commentaire sur le code.
var audio = document.querySelector("audio"); var duration = 5.333333; // durée des 8 temps en seconde; var beat = 8; var tl = new TimelineMax({repeat:4}); tl.pause(); // antidémarrage tl.set("circle", { transformOrigin: "center center", opacity: 0 }); // réglage important pour le scale /* la grosse caisse */ tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 0); // zoom rapide à 0 = 1er temps tl.to("#bd", 0.9, { scale: 1, opacity: 0.0 }, 0.1); // dézoom à 0.1 temps pendant 0.9 temps tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 2); // 2 = 3e temps tl.to("#bd", 0.1, { scale: 1, opacity: 0.0 }, 2.1); tl.to("#bd", 0.1, { scale: 4, opacity: 0.5 }, 2.5); // 2.5 = contretemps du 3e temps tl.to("#bd", 0.1, { scale: 1, opacity: 0.0 }, 2.6); /* (…) */ tl.to("#sd", 0.1, { scale: 4, opacity: 0.5 }, 1); // 1 = 2e temps tl.to("#sd", 0.1, { scale: 1, opacity: 0.0 }, 1.1); /* (…) */ tl.to("#ho", 0.4, { scale: 8, opacity: 0.5 }, 6.5); // 6.5 = contretemps du 3e temps de la 2e mesure à 4 temps tl.to("#ho", 0.1, { scale: 0, opacity: 0 }, 6.9); /* l'astuce */ tl.timeScale(beat / duration); audio.addEventListener("play", function() { tl.play(0); // lecture quand on clique sur play }); audio.addEventListener("pause", function() { tl.pause(); });
Version Codepen
See the Pen GSAP & BPM by Benoît Wimart (@benoitwimart) on CodePen.
