je mords pas

Si un post ne vous parait pas clair, ou si vous avez un besoin particulier pour une animation, n'hésite pas à laisser vos commentaires.
En général, les expressions naissent d'un besoin pratique, donc certains de vos besoins peuvent créer de nouveaux types de réponses.
Attention, pour les questions dont les réponses sont déjà sur le blog, j'envoie des décharges dans vos ports USB.

Comment faisiez vous avant les expressions ?... Franchement, c'était galère.
Maintenant, c'est galère aussi, mais pour d'autres raisons.

Et n'oubliez pas :
Si il y a quelque chose que je n'explique pas dans un post, ou bien que je survole, c'est que ça été forcément expliqué en long en large et en travers dans un post précédent.

on fait une tomate ?

Il y a tellement de choses à faire avec la trigo, je ne sais pas par quoi continuer...(en fait, si, mais bon...)
Nous avons vu que nous pouvions faire évoluer un objet sur une trajectoire circulaire, ou bien en spirale si on fait évoluer le diamètre dans le temps.
Nous avons vu, au tout début du blog, que la fonction INDEX permet que chaque calque ait une constante différente de ces voisins en fonction de sa position dans la timeline.

Nous allons mixer ensemble trigo et index. (ça fait indigo !)
Plaçons plein de calques sur un cercle, ou un arc de cercle :










Ici, on fait évoluer le diamètre, l'angle, et la taille de l'arc.

Vous allez voir, c'est pas bien compliqué.

On commence par les classiques Null : un "plafond" et un "sol"( le sol en dessous évidemment merci).
Nous allons utiliser le Null "plafond" comme calque de contrôle.
Rajoutez 2 paramètres angle "angle" et "arc"
Rajoutez également un paramètre glissière "diamètre".

Rentrez d'ores et deja 120 dans arc, et 50 dans diamètre. Qu'importe les valeurs, pourvu que ça ne soit pas 0.

Créez un calque, qui sera le centre (ça peut aussi être un Null, ou meme le calque "plafond"(pensez à le passer en 3d si tout ça est en 3d), pour être invisible)
Créez un petit calque tout mignon, et ouvrez sa position, et c'est parti.

origine=thisComp.layer("centre").transform.position;
plafond=thisComp.layer("plafond").index;
I=index-plafond; nombre=thisComp.layer("sol").index-plafond-1;
angle=thisComp.layer("plafond").effect("angle")("Angle");
arc=thisComp.layer("plafond").effect("arc")("Angle");
diametre=thisComp.layer("plafond").effect("diametre")("Curseur");

Ça impressionne plein de gens, mais pas vous !
On a juste créé les variables que vous connaissez, on a vu récemment le coup de l'index entre plafond et sol, nombre, pour connaitre le nombre de calques, et les 3 variables du calque de contrôle.

pos=linear(I,1,nombre,0,1); // j'ai appelé la variable "pos" pour la position du calque dans la timeline. Je ne peux pas utiliser "position", c'est déjà pris.
Ca aussi vous connaissez. On attribut à chaque calque un nombre entre 0 et 1 en fonction de la position entre plafond et sol.

x= Math.cos ( degreesToRadians ( angle+arc*pos ) )*diametre;
y= Math.sin ( degreesToRadians ( angle+arc*pos ) )*diametre;
[x,y]+origine

Et voilà les dernières lignes.
On va juste voir "x", puisque pour "y", c'est la même chose à part le Math.sin.
Alors :
( angle+arc*pos ) Ca, c'est notre angle, en degré, de chaque calque. Il est donc égale à l'angle général, plus l'arc. Cette arc est multiplié par "pos", qui va de 0 à 1.
Donc on comprend que si angle vaut 25, et que arc vaut 90, pour le premier calque, l'angle total vaut 25, puisque 90*0=0, et le dernier calque vaudra 115.

Comme cet angle est en degré, on rajoute degreesToRadians pour que Math.cos lise bien un angle en radian à l'interieur de la parenthèse. Comme les cos et sin vont de -1 à 1, on multiplie le tout par le diamètre, pour avoir la distance voulue jusqu'au centre.

Voilà, comme ça, vous pourrez postuler chez TF1...



Dans mes 2 exemples, les variables angle, arc et diamètre sont animées. Ces variables ne sont pas forcément à animer, elles peuvent également être des variables d'ajustement. Imaginer la vidéo "qui veut gagner des expressions", avec une camera au mileu des lumières. Vous n'allez donc que placer les lumières que la camera verra. Ensuite, en fonction des mouvements de camera et de sa focale, vous allez pouvoir régler l'espacement et le nombre de lumière en un rien de temps. Vous pourrez ainsi ajuster votre scène à loisir.

Dans l'animation avec les petits carrés, ils sont bien autour du centre, mais la rotation ne change pas. On peut biensur faire en sorte qu'ils soient tous orientés vers le centre. Au moins, on a le choix, contrairement à la technique "décalage du point d'ancrage et utilisation de la rotation".
Si votre calque est en 3d, vous vous en doutez, ils vous suffit d'utiliser lookAt dans l'orientation.

Et kesako si votre calque est un calque 2d, et que pour diverses raisons, vous ne pouvez pas le passer en 3d ? Comment orienter votre calque ?

Il y a toujours la solution de l'orientation automatique, mais celle ci ne fonctionne que quand le calque se déplace.

Nous verrons dans le prochain post comment faire pour qu'un calque 2d soit orienté par rapport à un autre calque.

c'est pas compliqué pourtant...

une autre petite parenthèse, voilà une petite animation qu'à présent vous savez tous faire :












Allez, au boulot.
Juste un petit truc qu'on n'a pas encore vu (je crois)

calque.propriété.speed

Je vous laisse chercher.

Allez hop, une petite variante.

gestion multi couleurs

Je fais une parenthèse pendant la trigo, voilà un post que j'avais oublié de poster.


On a vu comment gérer une meme couleur sur plusieurs calques à la fois ici :
http://lefreelancesaucisse.blogspot.com/2008/03/expressions-gestion-dune-couleur.html

Voyons comment gérer plusieurs couleurs pour plusieurs calques.
Par exemple, on veut créer plein de petits carrés, chaque carré prenant une couleur au hasard parmi nos 3 couleurs définies au préalable.












Créez un Null de control que nous appellerons "control couleurs"
Ajouter lui 3 effets "paramètre couleur"
Appliquez leur à chacun la couleur de votre choix.
Ajoutez également un paramètre glissière, votre ami de longue date. Appelez le "nombre"
Mettez 3 dans la valeur de "nombre", qui correspond donc au nombre de couleurs. Évidemment, si vous changez le nombre de couleurs, ce nombre doit changer aussi. Attention ! Si vous avez 4 couleurs, et que vous mettez 10, toutes les expressions vont s'annuler, car AE va vous dire qu'il n y a pas de 10eme effet dans le calque de contrôle.

Créez votre petit calque carré. Appliquez lui l'effet "remplir"
Nous allons créer une expression pour la couleur appliquée à "remplir"

Ce que nous voulons, c'est que le carré prenne une des 3 couleurs au hasard.
Déterminons deja le nombre de couleur:

max=thisComp.layer("control couleurs").effect("nombre")("Curseur");

Ensuite, on va définir le nombre qui va varier de 1 à 3, pour choisir un des 3 effets au hasard:

seedRandom(5,true);
R=random(1,max);

seedRandom(x,y), vous connaissez. x définit quelle présérie de chiffres aléatoires va etre utilisée, y (égale à true ou false) définit si le random sera fixe (true) ou bien changera à chaque frame (false) Là j'ai mis 5 comme j'aurais pu mettre 2, 15265, ou Math.PI. Qu'importe, c'est juste un nombre. Tous les calques auront donc ce 5, mais comme ce sont des calques différents, il n'auront pas la meme suite de chiffres.
Ainsi, R varie de 1 à 3.
La dernière ligne :

thisComp.layer("control couleurs").effect(R)("Couleur")

notez le R. Pour écrire cette phrase, faites comme d'habitude, prenez votre corde, et aller chercher par exemple la couleur du 1er effet "paramètre couleur"
Vous aurez ainsi une ligne qui ressemble à ça :

thisComp.layer("control couleurs").effect("Paramètre couleurs")("Couleur")
Dans la parenthèse de effect, vous avez, comme d'habitude, le nom de l'effet.
Nous l'avons donc remplacer par R, sans les "" donc. R joue ainsi le rôle d'index :
Va cherche l'effet qui est en R position.
Ainsi, il va chercher la couleur qui est dans l'effet 1,2 ou 3.

Si vous testez ça, vous vous rendrez compte que vous n'aurez quasiment jamais un carré de la 3eme couleur. C'est normal :
Imaginez une segment qui va de 1 à 3. AE va arrondir la valeur du random pour avoir une valeur entière...peu de chance d'avoir le chiffre 3 !

donc on va plutot écrire ça :

R=Math.ceil ( random(0,max));

Pour rappel, Math.ceil(x) donnc la valeur entière supérieure à x.
Math.ceil(1.2)=2
Math.ceil(3.9)=4
etc
Donc là, on force R à avoir la valeur entière supérieure. C'est pour cela que j'ai remplacé (1,max) par (0,max).
Ainsi, les 3 valeurs ont autant de chance de tomber que les autres :
de 0 à 1, R=1
de 1.01 à 2, R=2
de 2.01 à 3, R=3

L'expression finale :

max=thisComp.layer("control couleurs").effect("nombre")("Curseur")
seedRandom(5,true);
R=Math.ceil ( random(0,max));
thisComp.layer("control couleurs").effect(R)("Couleur")

si on écrit :
seedRandom(index,true);

Chaque calque changera de couleur quand il changera de position dans la timeline, ou dès qu'on rajoutera un calque dans la composition.

Et voilà !

Petite précision tout de même:
Une succession de valeurs aléatoires ne signifie pas homogénéité. Ca n'est pas la meme chose.
Pour chaque calque, chaque couleur a autant de chance de sortir qu'une autre, même si elle vient de sortir. Vous pouvez donc vous trouver avec 4 calques verts, ou bien 1 rouge et 3 bleus.
C'est comme pile ou face.
pile/face/pile/face/pile face n'est pas plus probable que
pile/pile/pile/face/pile
Ces 2 séries ont toutes les deux 1 chance sur 32 de sortir.

L'homogénéité sera visible avec un grand nombre de calques.

Ce principe ne sert évidemment pas qu'à remplir des calques, il peut aussi servir pour teinter des calques, ou je ne sais quoi...

trigolo, oscillation

On a vu rapidement le début de l'utilisation de la trigo dans les expressions dans AE.
voyons à présent une autre utilisation citée précédemment, l'oscillation.

Comme nous l'avons vu, quand une valeur évolue de manière linéaire, son cos et son sin oscillent entre -1 et 1. Je parle de valeur et non d'angle, car finalement, on se fiche qu'il s'agisse d'un angle ou pas. Un angle est une valeur, donc n'importe quelle valeur a son cos et son sin.

Alors voilà, nous voulons faire osciller un petit baton de droite à gauche, comme ceci :










On le comprend, la valeur de rotation ici correspond au cos (ou au sin) d'un angle qui évolue de manière linéaire. Nous allons donc créer la valeur d'un angle fictif :

cercle=Math.PI*2;
hop, on a crée un constante qui correspond au périmètre du cercle (c'est une bonne habitude pour etre précis dans ce qu'on fait) freq=2;
ça, ça va etre le nombre de tour à la seconde que fait notre angle.
amp=40;
ça, ça va etre l'amplitude non pas de cet angle, mais de celui que nous appliquerons au final au haricot bio.
Math.cos(time*cercle*freq)*amp
et ça, c'est la dernière phrase.
Dans le Math.cos, on a bien notre angle en radian qui évolue, qui effectue un tour de périmètre (cercle) tous les tours (time), multiplié par 2 (freq), le tout, multiplié par amp.

Attention !! amp multiplie bien l'ensemble du Math.cos, et non pas à l'interieur de la parenthèse. Souvenez vous, le cos et le sin n'évoluent que de -1 à 1. Avec le amp à 40, le haricot bio va de -40 à 40.

Maintenant, nous voulons que le haricot bio soit freiné par l'air, et s'arrète au bout d'un certain temps.
La base est exactement la meme, il va juste falloir que le Math.cos tende vers 0.

Il y a plein de moyens de faire ça. En gros, on veut un truc comme ça :

Math.cos(time*cercle*freq)*amp*DEC
On veut donc que DEC aille de 1 à 0. Il y a différente façon de faire ça, le control va s'effectuer sur la façon dont on va de 1 à 0.
On peut par exemple créer un paramètre glissière qu'on va faire varier de 1 à 0, en jouant sur la courbe pour avoir l'effet voulu.

Je le montre meme pas, vous savez le faire ça.
Je vous montre un autre moyen, avec Math.exp. Cette fonction ici est assez légitime, car comme vous le savez, b=Math.exp(a), avec a qui évolue linéairement, b augmente en accélérant.

On peut par exemple vouloir que la décélération soit de plus en plus rapide. En d'autre terme, plus le haricot sera lent, plus il est freiné :
cercle=Math.PI*2;
freq=4;
amp=80;
dec=Math.max(2-Math.exp(time/2.5),0);
Math.cos(time*cercle*freq)*amp*dec

voyons la ligne rouge.
On veut donc que dec aille de 1 à 0. On veut qu'il reste quelques temps autour de 1, puis que ça chute vers 0 accélère.

Math.exp(time) augmente de en accélérant. Pour rappelle, Math.exp(0)=1
donc 1-Math.exp(time) demarre à 0, et diminue en accélérant.
On veut partir de 1, donc :
2-Math.exp(time) demarre à 1, et diminue en accélérant.
On veut s'arrêter à 0, donc :
Math.max( 2-Math.exp(time) , 0 ) une fois que 2-Math.exp(time) passe sous 0, on reste à 0.

J'ai divisé time par 2.5 pour ralentir le freinage. Cette valeur peut biensur être un paramètre glissière pour etre réglable à souhait.












et voilà !!!

un exemple, ou les vitesses de vibration et de freinage sont en fonction de la taille de la boule, comme dans la vraie vie bio.

la trigolo

Aller on s'y met, on passe à la trigonométrie.

Derrière ce mot barbare se cache vos pires souvenirs du collège. Oui je dis bien collège et non lycée, car dans mes souvenirs, il s'agit du programme de 4eme, honte à vous donc.
Commençons par ce petit dessin :























Petite précision avant tout. Le dessin ci dessus est celui que vous verrez partout.
Toutefois, le point [0,0] de la composition d'AE est en haut à gauche. Ca veut dire que Y augmente de valeur en descendant. Donc inversé le 1 et le -1 de l'axe verticale dans votre tete quand vous etes dans aE.
Alors alors, kénécé...
Nous allons voir la trigonométrie uniquement dans la partie qui nous interesse, celle qui s'applique à After Effect.
La trigonométrie nous dit ceci :
-A chaque angle correspond un sinus, un cosinus et une tangente.
-le cosinus et le sinus sont compris entre -1 et 1
-cos(A)+sin(A)=1

Comme vous le voyez sur le dessin, à l'angle A correspond un cosinus environ égale à 0,4, un sinus environ égale à 0,9, et une tangente environ égale à 2.
Pour le moment nous allons nous intéresser au cosinus et au sinus.
Le cercle ayant un rayon de 1, on comprend pourquoi sin et cos varient de -1 à 1. Et en faisant augmenter l'angle à vitesse constante, vous comprenez ainsi que le cos et le sin vont osciller de -1 à 1. vous comprenez également instinctivement que lorsque l'angle A est proche de 90° (barre verte verticale) le sin s'attarde autour de 1, puis replonge brusquement vers 0 puis -1.
C'est pour cela qu'on parle par exemple de courbe sinusoïdale. L'allé-retour est arrondi aux extrémité, il en va exactement de même pour le cosinus.
Grace à ce dessin, vous comprenez également que le sin et le cos soient des vases communicants.
Quand sin=1, alors cos=0, et inversement.

Mais alors concrètement, dans after effect, à quoi ça va nous servir ?
Très concrètement, à trois choses :

-traduire un angle en position.
-traduire une position en angle.
-créer un phénomène oscillatoire.

Comment ça traduire un angle en positon ???
Et bien oui, regarder le dessin. On comprend que pour l'angle A correspond un point sur le cercle, de coordonnées [cos,sin]
Et inversement, si on a un point de coordonnée [x,y], on peut donc trouver son angle par rapport à un autre objet.

Passons à un peu de pratique, et voyons un point important.
Vous ètes habitués aux angles en degrés, de 0 à 360. C'est d'ailleurs la mesure utilisée par AE pour les rotations.
MAIS pour la trigonométrie, on utilise non pas les degrés, mais les radians.
Alors avant de dire beurk, voyons ce que c'est.

Comme vous savez, le périmètre d'un cercle se trouve par cette "formule" : Pi*R*2, ou R est le rayon.
Ici, notre cercle a un rayon de 1, donc son périmètre vaut 2*Pi.
Voilà comment fonctionnent les radians.
L'angle A vaut la section du périmètre du cercle délimité par l'angle.
On comprend donc que si A=90 en degré, on a donc un 1/4 de cercle, l'angle A vaut donc Pi/2 en radian.
180 degré=Pi
270 degré=(3*pi)/2
etc

Mais ne vous inquiétez pas, vous n'aurez pas à les calculer, AE a une fonction qui sert à ça.
L'important est de le savoir pour ne pas faire d'erreur, c'est un grand classique.

Ca veut dire que quand on écrit cos(A), A doit etre en radian.

Et comme souvent, A sera en dégré (car récupéré sur la valeur de rotation d'un calque), on écrira ça :
cos ( degreesToRadians ( A ) )
Et quand on voudra faire l'inverse, on utilisera RadiansToDegrees, on verra dans quel cas.

Un peu de pratique pour détendre tout le monde.
Créez un petit calque carré.
Dans sa postion, écrivez ceci :

vitesse=2*Math.PI*time;
diametre=50;
x=Math.cos(vitesse)*diametre;
y=Math.sin(vitesse)*diametre;
[x,y]+value

Et hop, un petit carré qui tourne autour d'un centre, mais sans rotation, il s'agit de sa position. D'ailleurs comme le voyez, il reste droit comme un i.
Explication :

vitesse=2*Math.PI*time; on définit la variable, selon le temps ici. comme 2*Pi vaut un tour complet, on comprend quand quand time=1, ça fait 1 tour, quand time=3, ça fait 3 tours.

diametre=50; Comme cos et sin varient de -1 à 1, on comprend qu'il faille augmenter la valeur, sinon notre carré va tourner autour du cercle de base, qui va de -1 à 1, c'est tout petit.

x=Math.cos(vitesse)*diametre;
y=Math.sin(vitesse)*diametre;
[x,y]+value

La suite est sans histoire. J'ai rajouté +value, car sinon, le carré tournerait autour du coin supérieur gauche de votre composition, puisqu'il évoluerait dans les 2 dimensions de -50 à 50.
le +value permet donc de le placer où l'on veut, ou même de l'animer.

Et là vous vous dites "hey cool, je peux aussi changer au cours le diamètre pour créer une spirale !!"

oui oui, vous pouvez, faites donc.

restons groupés et en ligne, merci. Et que ça soit joli aussi merci

Alors bon, oui je sais, j'ai promis le graal, le sésame, la trigonométrie, promis, bientôt.
Mais je fais un rapide détour par les vecteurs.

Souvenez vous, on a vu comment placer une image devant un spot pour que cette dernière soit projetée comme une vulgaire diapositive dont personne n'a plus besoin. On avait utiliser les vecteurs pour ça.

Voyons aujourd'hui une autre utilisation des vecteurs :












Comme vous l'aurez compris, comment faire pour que des calques soient entre deux calques, qu'ils y restent, qu'ils soient tous équidistants, et qu'ils s'adaptent selon leur nombre.
Ouais, tout ça...

C'est parti :
Commençons simple, créez deux solides oranges, ils seront les cibles. Mettez les légèrement en transparence, pour que l'on puisse voir en dessous, comme des coquins.

Créez un Null que vous allez appeler "plafond", et placez le sous les deux calques.
Créez un autre Null, nommez le "sol", et placez le tout en bas.
Nous allons voir l'utilité de ces deux calques.

Créez un petit calque rouge par exemple. Placez le entre plafond et sol.

Créez une expression pour sa position :

a=thisComp.layer("A").transform.position;
b=thisComp.layer("B").transform.position;
plafond=thisComp.layer("plafond").index;
nombre=thisComp.layer("sol").index-plafond-1;

c'est ultra simple : a et b sont les positions respectives des deux calques principaux, plafond est l'index du plafond, et nombre sera le nombre de calques placés entre plafond et sol.
En effet, s'il y a 5 calque entre plafond et sol, plafond aura 3 comme index, et sol aura 3+5+lui=9 comme index. donc 9-3-1=5, on a bien le nombre de calques.

J'ai crée les calques plafond et sol pour pouvoir avoir autant de calques que je veux dans la composition. Tant que mes calques rouges resteront entre plafond et sol, tout ira bien.

Voilà comment on va procéder.
Tous les calques partiront de a.
On va crée un vecteur V qui va de a vers b.
Donc si un calque par de a, et qu'on rajoute le vecteur, le calque sera sur b.
Si on fait a+V/2, le calque sera donc entre a et b, pile au milieu.
Donc, on va diviser la taille de V en autant de fois qu'il faut, donc en autant de calques présents.

écrivez à la suite :

V=sub(b,a);

donc ça, pas de problème, vous vous souvenez, on crée un vecteur qui va de a vers b.

I=index-plafond;

On utilise I comme nouvel index de calque, pour que ce dernier soit relatif à la position de "plafond" dans la composition.

increment=linear(I,0,nombre+1,0,1)

C'est ici que tout se joue.
La position du calque dépend de sa position dans la composition. Selon sa position, on va lui appliquer a+V*x, ou x varie donc de 0 à 1 (de 0% à 100% du vecteur donc)
La variable est donc la position dans la timeline, I.
Disons que N est le nombre de calques à placer.
I va donc varier de 1 à N, mais nous allons la faire varier de 0 à N+1, et nous allons voir pourquoi.
Donc, quand I=0, increment vaut 0. Et quand I vaut le nombre total de calques (le dernier calque de la liste donc), incrément vaut 1.

la dernière ligne :

a+V*increment

On rajoute donc V*increment à "a".
Donc quand increment vaut 1, on rajoute la valeur entière de V à a, on tombe donc sur b.
C'est pour cela que j'ai écrit increment=linear(I,0,nombre+1,0,1) et non increment=linear(I,1,nombre,0,1), car sinon, le premier calque aurait été à la meme position que le calque a, puisque on aurait eu a+V*0, et pareil pour dernier calque avec a+V*1.

Donc en écrivant increment=linear(I,0,nombre+1,0,1), les valeurs 0 et 1 pour incrément ne sont pas utilisées, puisque I ne peut varier que de 1 à nombre.

l'expression en entier :

a=thisComp.layer("A").transform.position;
b=thisComp.layer("B").transform.position;
plafond=thisComp.layer("plafond").index;
nombre=thisComp.layer("sol").index-plafond-1;

V=sub(b,a);
I=index-plafond;
increment=linear(I,0,nombre+1,0,1)
a+V*increment


une question que certains peuvent se poser:
on avait vu comment simplement placer un calque entre deux autres, c'était simple :

(a+b)/2

Alors pourquoi ne pas utiliser la meme technique en faisant varier "2" ?
Diviser par 3, on se rapproche de a, diviser par 1.5, on se rapproche de b.

Et bien car ça ne marche pas pour la situation suivante : quand b est à gauche de a.
Vous pouvez tester. En effet, si un calque a pour expression (a+b)/3, quand b passe à gauche de a, le calque ne restera pas collé à a, il ira vers b. Tout va s'inverser au moment de la bascule.
Et c'est bien normal, puisque quand on dit (a+b), on ne fait aucune différence entre les deux, alors que pour ce coup là, on en a besoin.

voilà, c'était simple non ?