Boucle et expressions

Avertissement

Attention : vérifiez bien si votre cible pour l’export supporte bien les expressions, et si ce n’est pas le cas, pensez à les transformer en images clés !

contexte

Ici nous allons considérer que nous travaillons sur une boucle de 3 secondes.

Nous avons donc :

Données
Nom Valeur/étendue
time [0→3]
thisComp.duration 3

Nous souhaitons utiliser la fonction Math.sin() afin d’obtenir une oscillation régulière.

Rappel sur Math.sin()

La fonction Math.sin() effectue une boucle tous les 2 * PI :

../../_images/x-et-sin-x.gif

Nous devons donc fournir une étendu égale à 2PI pour obtenir une valeur bouclant parfaitement entre -1 et 1.

étape 1 : obtenir une valeur de 0 à 1

Pour commencer, nous allons essayer d’obtenir une valeur allant de 0 à 1 au fur et à mesure du déroulement de time.

Pour cela effectuons un premier calcul : time / thisComp.duration.

On obtiens les courbes suivantes :

../../_images/t-et-t-par-d.gif
  • en bleu time, de 0 à thisComp.duration
  • en bordeau time / thisComp.duration, de 0 à 1

On obtient ici une valeur de 0 à 1, mais qui ne boucle pas.

étape 2 : obtenir une boucle

Il est maintenant facile d’obtenir une valeur de [0-2PI] : on multiplie le calcul précédent par 2PI :

../../_images/t-t-par-d-et-t-par-d-par-2pi.gif
  • en bleu time, de 0 à thisComp.duration
  • en bordeau time / thisComp.duration, de 0 à 1
  • en jaune time / thisComp.duration * Math.PI * 2, de 0 à 2PI

Ce qui nous donne une fois passé par la fonction Math.sin() :

../../_images/t-t-par-d-et-t-par-d-par-2pi-et-sin.gif
  • en bleu time, de 0 à thisComp.duration
  • en bordeau time / thisComp.duration, de 0 à 1
  • en jaune time / thisComp.duration * Math.PI * 2, de 0 à 2PI
  • en vert Math.sin( time / thisComp.duration * Math.PI * 2 )

étape 3 : nombre de boucles

Nous avons donc ici une oscillation par thisComp.duration.

Mais si l’on souhaite deux, trois oscillations ?

On multiplie tout simplement 2PI par 2, 3 etc…

Exemple ici où l’on multiplie 2PI par 3 :

../../_images/t-t-par-d-et-t-par-d-par-2pi-par-3-et-sin.gif
  • en bleu time, de 0 à thisComp.duration
  • en bordeau time / thisComp.duration, de 0 à 1
  • en jaune time / thisComp.duration * Math.PI * 2 * 3, de 0 à 2PI
  • en vert Math.sin( time / thisComp.duration * Math.PI * 2 * 3)

étape 4 : étendue

Maintenant, on peut se dire qu’une variation de -1 à 1 pixels ne vont pas donner grand chose sur After Effects… Il faut encore effectuer quelques calculs.

De [-1→1] à [0→1]

Si l’on veut une oscillation de [0→1], on prend [-1→1] à quoi on ajoute un pour obtenir [0→2] et l’on divise par 2 pour obtenir [0→1]

calcul
étendue de base opération résultat
[-1→1] +1 [0→2]
[0→2] / 2 [0→1]

Cela donnera :

../../_images/de--1-1-a-0-1.gif
  • en bleu : Math.sin( time / thisComp.duration * 2 * Math.PI * 3 )
  • en bordeau : 1 + Math.sin( time / thisComp.duration * 2 * Math.PI * 3 )
  • en jaune : (1 + Math.sin( time / thisComp.duration * 2 * Math.PI * 3 )) / 2

De [-1→1] à [-20→20]

On peut simplement ici multiplier par 20.

Cela donnera :

../../_images/de--1-1-a--20-20.gif

Un peu plus loin

Il est aussi possible de composer des fonctions à l’aide de plusieurs sinusoïdes.

Par exemple cette boucle :

La même avec ses composantes :

../../_images/composee-composants.gif