gsap

GSAP et les function

dans la ou les catégorie(s) : code et avec pour étiquette(s) : ,

GSAP est parfait pour modifier, placer ou déplacer des éléments d’une page web.

Petit exemple, j’ai une variable de type tableau avec des couleurs :

var colors = ['red', 'green', 'blue', 'orange', '#f60','yellow'];

En javascript pour avoir un élément du tableau au hasard, on fait :

// une couleur au hasard dans le tableau colors
var colorAuPif = colors[Math.floor(Math.random() * colors.length)];

Avec GSAP pour assigner une couleur à tous les éléments de la class item

TweenLite.set('.item',{backgroundColor : 'red'});
Si vous ne passez pas par une function (comme ci‐dessous), vous aurez une seule couleur au hasard pour tous les items !

Mixage des deux codes :

TweenLite.set('.item',{
    backgroundColor : function() {
return colors[Math.floor(Math.random() * colors.length)]; // le return renvoie une couleur
}
})

Démonstration et plus sur CodePen

See the Pen gsap + random by Benoît Wimart (@benoitwimart) on CodePen.0

Souvenir scolaire, trajectoire, vitesse, angle et gravité

Attention, je monte le niveau d’un cran ou deux et je parle de maths et physique !

Il existe des équations écrites par rapport au temps (je ne parle pas de météo), elles ont des avantages en maths, code et en graphisme.
Un peu de processing sauce P5JS, parce que les graphistes aiment bien P5 :

function setup() {
  createCanvas(400, 400);
}
 
function draw() {
  point(frameCount,20); // un point placé à x = la frame actuelle et y = 20
}

Ici frameCount représente le temps (on pourrait prendre le temps en javascript, mais je simplifie).

Variation avec des cosinus et des sinus :

function draw() {
  point(frameCount,50+20*cos(radians(10*frameCount)));
  point(frameCount,50+20*sin(radians(10*frameCount)));
}

See the Pen p5js by Benoît Wimart (@benoitwimart) on CodePen.0

Une trajectoire circulaire :

function draw() {
  background(255,255,255,10);
  point(200+100*cos(radians(frameCount)),200+100*sin(radians(frameCount)));
}

Ce dernier peut s’écrire x = R * cos(t) et y = R * sin(t) avec R le rayon et t le temps et en plaçant le centre à 0,0.

Trajectoire d’un lancer

Dans des conditions simplifiés (pas de vents, pas de frottements…) on lance un objet (une balle, un oiseau pas content, une charentaise…) avec un angle déterminé « alpha » et une vitesse de départ « v ».
Voici l’équation magique :
x = v * cos(alpha) * t
y = -1/2*g*t2 + v * sin(alpha) * t
avec g = gravité (9.81 à Amiens)

// version p5js
var v = 50; // la vitesse
var g = 9.81; // la gravité
var angle = 60; // l'angle en degré // alpha est réservé
 
function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  background(0);
  strokeWeight(2);
  stroke(255, 100, 0);
}
 
function draw() {
  var  t = frameCount/10;
  x = v * cos(angle) * t
  y = 1/2*g*t*t - v * sin(angle) * t;
  point(x,y+200);
}
Petite arnaque sur y, en maths le zéro des répères orthonormés est en bas, « plus y est grand, plus le point est placé vers le haut », en code on inverse et le zéro est en haut, il faut donc faire y = -y.

See the Pen Gravité + p5js by Benoît Wimart (@benoitwimart) on CodePen.0

Avec GSAP :

  • J’utilise le plugin modifiers, il permet de recalculer une valeur selon une de ses propriétés ;
  • J’ajoute des attributs data (c’est du GSAP + JS) data‐v et data‐alpha ;
  • « target » va lire les propriétés de l’item ;
  • Je triche pour avoir un t, j’utilise le z du « target »
var colors = ['red', 'green', 'blue', 'orange', '#f60', 'yellow'];
 
 
TweenLite.set(".item", {
  backgroundColor: function() {
    return colors[Math.floor(Math.random() * colors.length)]; // le return renvoie une couleur
  },
  attr: {
    'data-v': function() {
      return Math.random() * 100
    },
    'data-alpha': function() {
      return 2 * Math.PI * Math.random()
    }
  }
});
 
 
TweenMax.to(".item", 10, {
  x: 0,
  y: 0,
  z: 100,
  modifiers: {
    x: function(x, target) {
      var t = target._gsTransform.z;
      var g = 9.81;
      var v = target.dataset.v;
      var alpha = target.dataset.alpha;
      var x = v * Math.cos(alpha) * t;
      return x;
    },
    y: function(y, target) {
      var t = target._gsTransform.z;
      var g = 9.81;
      var v = target.dataset.v;
      var alpha = target.dataset.alpha;
      var y = -0.5 * g * t * t + v * Math.sin(alpha) * t;
      return -y;
    }
  },
  ease: Linear.easeNone
})

See the Pen gsap + gravité by Benoît Wimart (@benoitwimart) on CodePen.0

GSAP, le timing et la musique

dans la ou les catégorie(s) : code et avec pour étiquette(s) :

À 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):


beats.json à importer

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.0