Expressions/Simulation/Exemples

Quelques exemples

On va voir dans cette partie quelques exemples regroupant la plupart des notions abordées dans les deux sections précédentes. On s'intéressera notamment à l'utilisation des fonctions trigonométriques pour positionner ou animer un calque.

Commençons par introduire un nouvel attribut, l'attribut index. Il permet de faire référence à un calque dans la composition en indiquant son rang dans la pile de calques. Le calque au sommet de la pile aura un index égal à 1, le calque juste en-dessous aura un index égal à 2, et le dernier calque de la composition aura un index égal à thisComp.numLayers (c'est à dire le nombre de calques dans la composition). Cet attribut n'en a pas forcément l'air mais il est très puissant: il permet d'avoir un contrôle sur chaque calque indépendamment. En écrivant par exemple sur un calque une expression utilisant l'attribut index, on va pouvoir créer des animations simplement en dupliquant ce calque, ou en appliquant la même expression sur différents calques qui adopteront un comportement lié à leur index respectif. Une unique expression donc, mais agissant différemment sur chacun des calques suivant leur position dans la pile de calques.

Pour le premier exemple, simplement dans le but de manipuler des expressions, on va tenter de créer un effet d'optique. Pour cela, on souhaite écrire une seule expression sur un calque (un calque qui servira de base) de telle sorte qu'en le dupliquant les nouveaux calques viennent se placer automatiquement sous forme circulaire. Pour produire un effet visuel on souhaite animer les calques en rotation. On aimerait donc que tous les calques soient placés selon une forme circulaire en dupliquant le calque de base, et que tous soient animés de la même rotation.

On commence par créer une nouvelle composition (160x120, couleur de fond gris "808080") avec un calque solide de taille 640x480 (on le prend plus grand que la composition car il va tourner). On le choisit de couleur noire pour le moment et on lui applique l'effet "Volet en diaphragme en x" qui se trouve dans les effets de "Transitions". Le nombre de "pointes" est réglé sur 10 et le "rayon externe" sur 30. On obtient un pentagone (le nombre de "pointes" représente le double du nombre de côtés, pour obtenir un triangle par exemple on aurait pris 6 "pointes", 8 pour un carré, etc). On a la forme de base et on veut maintenant qu'en dupliquant ce calque, d'autres pentagones viennent se positionner en forme de cercle (et ce de façon équidistante), centrés autour du milieu de la composition. On ajoute l'expression suivante sur la propriété de position:

nb = 15; // nombre de figures
r = 30; // rayon en pixel
a = degreesToRadians(360 / nb); // angle intercalque
x = r * Math.cos(index * a);
y = r * Math.sin(index * a);
position + [x,y];

Lorsque l'index du calque va augmenter (calque 2, calque 3, etc), le cosinus et le sinus vont retourner différentes valeurs qui vont positionner le calque sur un point de cercle. Chaque calque sera décalé de a radians (ce qui correspond à 24° ici, 360/15=24) et l'ensemble des 15 calques formera ainsi un cercle (360°). On utilise l'équation paramétrique d'un cercle, à savoir x = r * Math.cos(t) et y = r * Math.sin(t). On se souvient que les fonctions trigonométriques s'attendent à un angle en radians, pas en degrés, c'est pourquoi la fonction de conversion degreesToRadians() a été utilisée. On anime maintenant la propriété de rotation à l'aide d'images clés (clé1:0, clé2:360), puis on remplace la couleur noire du calque par du gris ("808080"). On ne voit plus le calque à l'écran puisqu'il est de même couleur que celle du fond de la composition. On le passe maintenant en mode "Écart" (cela ne changera rien pour l'instant). La fenêtre de montage ressemble à cela:

mise en place de l'animation

Mise en place de l'animation

On duplique maintenant ce calque de base pour avoir 15 calques au total (15 étant le nombre de figures que l'on a choisi dans l'expression). On obtient quelque chose comme cela

On verra dans la dernière partie comment avoir un plus grand contôle sur l'animation même une fois le calque de base dupliqué, car dans l'exemple précédent, si l'on souhaite modifier le nombre de figures ou le rayon, on doit supprimer tous les calques dupliqués, changer la valeur des paramètres sur le calque de base et dupliquer à nouveau pour obtenir une autre animation. Cela n'est donc pas très pratique. De plus ces paramètres ne sont pas animables car ils sont inscrits dans l'expression. On verra comment résoudre ce problème avec l'utilisation de "Paramètres glissières".

Dans le deuxième exemple, on va voir comment combiner les fonctions trigonométriques avec la fonction exponentielle. On souhaite que le calque (en l'occurence un cercle plein) s'étire puis se rétracte de façon oscillatoire, avec une intensité de plus en plus faible au cours du temps. Pour cela on va chercher à combiner les oscillations apportées par une fonction sinus avec la décroissance de la fonction exponentielle (décroissance car on lui passera un argument négatif). On écrit l'expression suivante sur la propriété d'échelle:

ampl = 50; // amplitude en pixel
freq = 3; // oscillations par seconde
decroi = 1; // facteur décroissance
u = ampl * Math.sin(freq * time * 2 * Math.PI) * Math.exp(- decroi * time);
scale + [u,u];

La variable decroi contrôle l'intensité de la décroissance. Une valeur trop importante pour ce paramètre annulerait l'effet oscillatoire (produit par le sinus) et le calque garderait sa taille initiale. L'échelle du calque oscillera autour de sa valeur initiale (scale) et ne sera pas modifiée au début de l'animation puisque Math.sin(0) = 0. La fenêtre de montage ressemble à cela

effet stretch

Effet stretch

En prévisualisant on obtient ceci

Dans le troisième exemple on aimerait simuler un rebond. De la même façon que l'on a fait osciller l'échelle du calque, on va utiliser les oscillations d'une fonction trigonométrique (qui sera un cosinus cette fois-ci car on souhaite que la balle commence en haut de la composition, Math.cos(0) = 1) et la décroissance de l'exponentielle (toujours avec un argument négatif car la balle est sensée rebondir de moins en moins haut). L'expression est similaire à la précédente, néanmoins on doit faire attention à ne récupérer que la moitié des oscillations (la moitié positive) pour empêcher la balle de traverser le sol. On réalise cela grâce à la fonction Math.abs() qui retourne la valeur absolue de l'argument qu'on lui passe (par exemple Math.abs(-2) = 2 et Math.abs(4) = 4). On écrit l'expression suivante sur la propriété de position

ampl = 220; // amplitude en pixel
freq = 1.1; // oscillations par seconde
decroi = 0.5; // facteur décroissance
u = ampl * Math.abs(Math.cos(freq * time * 2 * Math.PI)) * Math.exp(- decroi * time);
position - [0,u];

Le déplacement horizontal a été animé avec des points clés (un pour le départ, un pour l'arrivée). L'animation obtenue ressemble à cela

On termine cette série d'exemples par la simulation d'un mouvement de pendule. L'expression est du même type que les précédentes, à savoir un mouvement oscillatoire qui s'atténue avec le temps. On écrit l'expression suivante sur la propriété de rotation du pendule (qui est matérialisé ici par une ampoule au bout d'un fil):

ampl = 60; // amplitude en pixel
freq = 0.7; // oscillations par seconde
decroi = 0.5; // facteur décroissance
ampl * Math.sin(freq * time * 2 * Math.PI) * Math.exp(- decroi * time);

L'animation correspondante est la suivante

On peut remarquer que l'intensité de la lumière varie pendant l'animation. En effet il lui a été appliqué une expression de type aléatoire, un tremblement aléatoire plus précisément. Les méthodes aléatoires seront le thème de la partie suivante.