Expressions/Simulation/Trigonométrie

Trigonométrie

Cette partie vise à rappeler quelques rudiments de géométrie et plus généralement de mathématiques pour pouvoir les utiliser dans les expressions. La première figure représente les relations dans un triangle rectangle entre un angle et la longueur des côtés. La deuxième figure représente ces relations sur un cercle, le cosinus se lit sur l'axe horizontal, le sinus sur l'axe vertical.

trigonométrie dans un triangle

Trigonométrie dans un triangle

trigonométrie dans un cercle

Trigonométrie dans un cercle

On a vu qu'un vecteur était défini par ses composantes et qu'on le représentait par un tableau de nombres. Ceci était l'aspect informatique du vecteur. On peut également le voir sous un aspect géométrique. Si l'on choisit un point au hasard, disons le point de coordonnées [125,150], ce point définit un vecteur géométrique ayant pour origine l'origine du repère (le coin haut gauche de la composition) et pour extrémité le point lui-même. Il définit par conséquent deux triangles rectangles (en utilisant les axes du repère), et donc les formules précédentes entrent en jeu.

vecteur géométrique

Vecteur géométrique

Pour visualiser le comportement graphique des fonctions trigonométriques, on crée un calque d'effets (dans une composition 25i/s, d'une durée de 10s) et on lui ajoute un paramètre glissière (dans le menu "Effet", choisir "Options pour expressions" et "Paramètre glissière"). Le langage des expressions étant basé sur le JavaScript, les fonctions cos(), sin() et tan() sont notées Math.cos(), Math.sin() et Math.tan(). Il existe également les fonctions réciproques Math.acos(), Math.asin() et Math.atan() et enfin Math.atan2() (qui permet de calculer un angle orienté entre deux vecteurs).

Appliquons au paramètre glissière (à son "Curseur") l'expression suivante

Math.cos(time);

Si l'on clique sur l'icône de courbe et que l'on ajuste l'échelle du repère entre -1 et +1, la fenêtre de montage devrait ressembler à cela

fonction cosinus

Fonction cosinus

On remarque que toutes les valeurs fournies par la fonction cosinus sont comprises entre -1 et +1, cette particularité est valable aussi pour la fonction sinus. Ces deux fonctions ont également la propriété de se répéter tous les 2 * Pi. Pi est un nombre approximativement égal à 3.14 et il est noté Math.Pi dans le langage des expressions. Cela signifie que toutes 6.28 secondes, la fonction cosinus (ou sinus) va se répéter. On parle de période. La période indique la durée entre deux "pics" (ou entre deux "creux"). L'inverse de la période est appelée la fréquence. Dans l'exemple la fréquence est 1 / (2 * Pi).

On va maintenant s'intéresser à ce qui se passe lorsque l'on ajoute un coefficient multiplicateur devant time, disons 3. La courbe devient la suivante

augmentation de la fréquence

Augmentation de la fréquence

On constate qu'il y a trois fois plus de pics. La fréquence du cosinus a été multipliée par 3 et la période représente un tiers de ce qu'elle était auparavant. Plus on choisit un nombre élévé pour la fréquence, plus le nombre d'oscillations augmente. La variation se situe toujours par contre entre -1 et +1.

Enlevons le coefficient 3 et ajoutons un nouveau coefficient multiplicateur mais cette fois mettons le devant l'expression, disons d'une valeur de 10. On observe cela

augmentation de l'amplitude

Augmentation de l'amplitude

On constate cette fois que le nombre d'oscillations n'a pas changé mais en revanche les valeurs sont maintenant comprises entre -10 et +10. On appelle le coefficient que l'on vient d'ajouter l'amplitude du cosinus (ou du sinus si l'on utilise la fonction sinus). Plus ce nombre est grand, plus la distance entre un "pic" et un "creux" augmente. On pourra donc jouer sur ces paramètres de fréquence et d'amplitude pour contrôler le cosinus.

Si l'on souhaite tracer cette courbe à l'écran, on peut créer un solide et lui appliquer l'effet "Tracé dynamique". On ajoute ensuite l'expression suivante dans la propriété de position du "Tracé dynamique"

ampl = 50;
freq = 2;
vit = thisComp.width / thisComp.duration;
horiz = [0,thisComp.height / 2];
horiz + [vit * time,ampl * Math.cos(freq * time)];

Expliquons cette expression pas à pas. Elle comporte cinq instructions, toutes étant des affectations (variable à gauche, "=", valeur à droite). La denière étant, comme on l'a vu, automatiquement considérée comme une affectation par After Effects, elle ne nécessite pas le "=". Le résultat de cette dernière ligne sera la valeur affectée à la position du "Tracé dynamique". Les deux premières instructions définissent l'amplitude et la fréquence du cosinus. Un choix trop grand pour l'amplitude ferait sortir le "crayon" de l'écran. La troisième définit la vitesse (horizontale) du "Tracé". La vitesse s'exprime comme le rapport distance/temps. Dans cet exemple on souhaite que le "Tracé" parcourt toute la largeur de la composition (notée thisComp.width) pendant la durée de la composition (notée thisComp.duration). La quatrième instruction définit le point qui se situe sur le milieu du bord gauche de la composition (thisComp.height désignant la hauteur de la composition). Et enfin la dernière, elle porte en elle le résultat qui sera affecté à la position du "crayon". Commençons par la première composante du vecteur: elle va croître proportionnellement au temps qui s'écoule, lorsque ce temps sera celui de la durée de la composition, alors cette composante sera égale à la largeur de la composition.

On aurait pu également mettre des points clés pour animer le "Tracé" horizontalement, ce qui aurait éviter la variable de vitesse vit. Une première clé de position pour le départ (au milieu à gauche), une seconde à l'arrivée (au milieu à droite), que l'on place sur la propriété de position du "Tracé Dynamique"; ensuite dans l'expression on récupère la valeur de ce déplacement en la stockant dans la variable horiz (on utilise l'escargot pour faire cela rapidement). L'instruction est celle-ci

horiz = effect("Tracé dynamique")("Position");

horiz est ainsi un vecteur de dimension deux, représentant les valeurs de la position du "Tracé". Si l'on n'avait mis uniquement le terme position on aurait fait référence à la position du calque, pas à celui du "Tracé". Pour faire appel à la propriété d'un effet, on utilise le terme effect suivi du mon de l'effet et de la propriété que l'on souhaite atteindre. À l'aide de l'escargot, dans cette dernière instruction, on peut simplement écrire horiz = , et ensuite sélectionner l'escargot et le faire pointer vers la propriété de position du "Tracé". Le reste de la ligne effect(... vient s'afficher automatiquement. Il est bon d'ajouter un point virgule en fin d'instruction. Il est ausi possible d'atteindre la propriété d'un effet en précisant son rang parmi toutes les propriétés qu'il possède (ce rang commence à 1). La fenêtre de montage ressemble à cela

expression avec points clés pour le déplacement vertical

Expression avec images clés pour le déplacement vertical

et l'animation obtenue est la suivante

Profitons de l'occasion pour introduire quelque chose qui sert surtout lorsque l'on écrit des expressions contenant plusieurs lignes d'instructions avec plusieurs paramètres. Il est possible de rajouter des commentaires dans une expression, ceci en vue d'une meilleure lecture et d'une compréhension plus rapide quand, dans deux mois par exemple, on réouvre le projet. On utilise un double slash // pour indiquer que ce qui suit ne doit pas être pris en compte dans le calcul, on pourrait par exemple écrire

ampl = 50; // amplitude en pixel

Quand on utilise les fonctions trigonométriques pour calculer des angles, comme les deux premières images de cette section, il faut faire attention au fait que ces fonctions s'attendent à un angle exprimé en radians et non pas en degrés. La conversion est simple puisque un tour complet représente 2*Pi radians qui est équivalent à 360°. Le langage des expressions propose toutefois deux fonctions de conversion, notées degreesToRadians() et radiansToDegrees().

Remarque

Comme il est souvent plus commode de voir la fréquence comme le nombre d'oscillations par seconde, on ajoute parfois un coefficient multiplicateur égal à 2 * Math.Pi (qui représente une période). Ainsi pour une composition de 1 seconde par exemple, en écrivant quelque chose du type

Math.cos(freq * time * 2 * Math.PI);

on obtiendra six oscillations si l'on choisit une fréquence égale à 6, neuf oscillations si l'on choisit une fréquence égale à 9, etc. C'est simplement plus pratique.