GSAP et les function

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*t² + 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 et les function GSAP et les function

Souvenir scolaire, trajectoire, vitesse, angle et gravité

Trajectoire d’un lancer