mise à jour

Vous remarquerez que je suis en train de mettre tous les posts à jour, en commençant par les plus récents.
En effet, ce blog est construit de telle sorte que s'il y a une fonction qui vous échappe, vous en trouverez obligatoirement son explication dans un post précédent.

Donc à présent, toutes les expressions sont en rouge, sauf les mots clefs qui ont une explication entière dans un post. Ces derniers sont en bleu, et sont des liens vous emmenant au post correspondant !

vous pourrez ainsi cliquer sur le mot inconnu (en cliquant sur votre molette pour avec un nouvel onglet) pour avoir son explication, et garder un œil sur l'expression du jour.

je t'aime, moi non plus.

Aujourd'hui, quelque chose de rapide et simple.
Utilisons les vecteurs autrement. Nous allons faire en sorte que des objets soient attirés ou repoussés pas un autre.
Ne vous attendez pas à une entière simulation du champs électromagnétique, il s'agit juste d'une petite astuce.

Créez un Null "controle", et rajoutez lui 4 paramètres glissière : min, max, force et chaos.
Créez un solide, puis un autre, plus petit, et ouvrez la position de ce dernier.
C'est parti.

min=thisComp.layer("controle").effect("min")("Curseur");
max=thisComp.layer("controle").effect("max")("Curseur");
force=thisComp.layer("controle").effect("force")"Curseur")/100;
chaos=thisComp.layer("controle").effect("chaos")("Curseur");

J'ai divisé force par 100, car ça sera un réglage fin.

seedRandom(5,true);
hasard=random(-chaos,chaos);

Ça, ça sera donc pour la partie hasard si on en veut.

target=thisComp.layer("target").transform.position;
P=position;

vecteur=sub(P,target);
distance=length(vecteur);
F=ease(distance,min,max,force+chaos,0);

P+vecteur*F

Voilà, vous connaissez déjà tous les outils. On crée le vecteur qui va de la cible au calque, et on fait en sorte que plus la cible est proche, plus on "rajoute du vecteur" à la position du calque.
Comme on multiplie le vecteur par F, qui est au final la valeur de la force, vous comprenez pourquoi "force" doit rester petit.

Petite astuce, si vous rajouter à peu près la même expression dans l'échelle, en faisant en sorte, avec un truc du genre:

ease(distance,min,max,150,100);

Les calque grossiront quand ils seront proches de la cible. On aura ainsi l'impression qu'ils passent au dessus du calque cible.

Si vous mettez une valeur de force négative, les calques seront attirés par la cible.
Seul bémol de ce système D, le déplacement se fait par rapport à la position du calque AVANT l'expression. Donc si la cible passe très proche du calque dans sa position originale, le calque passera proche de la cible.
Mais bon, hein....

Il y a plein d'utilisation de cette expression, on peut aussi animer les valeurs max et force.

marchons carré

L'astuce du jour à plusieurs mérites :

-La technique est relativement simple, vous en connaissez tous les outils (si vous avez tout lu!), la difficulté se trouve plutôt dans la traduction de ce que l'on veut produire dans After Effect.
-Cette animation est infaisable avec des clefs.

Je parle de mérite, car ce sont les deux points principaux que j'essaye de développer sur ce blog.

Aujourd'hui, nous allons faire marcher un carré !


Alors alors....Analysons ce que nous voulons dire à After Effect.
Nous allons devoir créer une expression pour la position. Le mouvement sur X est simple, et celui sur Y sautille. Nous devons également créer une expression pour la rotation, et que tout ce beau monde soit synchrone.

C'est parti.
Créez un solide carré, la taille vous regarde.
Rajoutez lui un paramètre glissière, et nommez ce dernier "vitesse". Mettez 300 dans ce paramètre glissière comme valeur de base.

Commençons par la position. Pour le moment, on ne vas s'occuper que de X.

temps=time-inPoint;
V=effect("vitesse")("Curseur");

x=temps*V;
y=value[1];

[x,y]+value

Rien de bien méchant, on demande à ce que le carré se déplace de 300 pixels/sec vers la droite.
On fera Y après. Comme on l'a déjà vu, temps=time-inPoint permet d'avoir une variable de temps qui comme à 0 au moment où le calque commence.

Passons à la rotation.
Commençons par comprendre ce dont on a besoin.
Plus le carré est grand, moins il doit faire de rotation pour une même distance.
En fait, à chaque fois qu'il parcoure une distance égale à la longueur de son coté, il fait une rotation de 90° :

temps=time-inPoint;
V=effect("vitesse")("Curseur");
cote=width*scale[0]/100;
x=temps*V;

Rien de bien méchant, on retrouve ainsi la valeur de X, qui nous donne la distance parcourue par le carré.
On a également créer "cote". Il vaut la largeur multipliée par l'échelle, divisé par 100. Ainsi, on pourra modifier la taille du carré directement par l'échelle sans passer par les propriétés du calque. Je divise par 100 puisque l'échelle 1 vaut 100.

Donc on a dit que pour chaque "cote" parcouru, le carré tourne de 90°. on a donc :

(x/cote)*90

Et voilà, on a écrit notre rotation. Il y a plein de façon de trouver la même valeur, c'en était une.

Passons à Y.
Si on regarde notre animation, on comprend qu'à chaque fois que notre carré est à 45°, il doit être au plus haut, en tenant donc sur son coin du bas. Il faut donc trouver de combien.

Comme vous le savez, a²+b²=c² quand abc est un triangle rectangle donc C est l'hypothénuse.
Ici, nous avons un carré, donc a=b. Donc imaginons que a=1, on a donc c=racine carrée de 2.
Cette valeur est très connue, mais un petit rappel de raisonnement ne fait pas de mal.

Le point de rotation est bien évidemment au centre. De combien monte-il ?
Voilà un petit dessin (fait exprès pour vous !) avec lequel c'est tout simple:



















Assis, notre carré mesure X. Debout, il mesure donc XX=X multiplié par racine carré de 2.
La différence est donc XX-X. Cette différence est valable pour le point le plus haut du carré selon sa position, mais pour le centre du carré, il s'agit donc de la moitie.

On a donc :

V=effect("vitesse")("Curseur");
cote=width*scale[0]/100;
diagonale=cote*Math.pow(2,.5);
montee=(diagonale-cote)/2;

Voilà, on sait de combien doit monter le carré : "montee"

Maintenant, il faut qu'on trouve à quel moment.
Comme on l'a dit, il faut qu'il soit au plus haut quand le carré est à 45°.
C'est le moment de se remettre en tête le cercle trigo.
Nous allons utiliser le sinus. Le sinus vaut sa plus haute valeur, 1, quand l'angle est à 90°. Pour toujours avoir une valeur positive (puisque le carré doit "rebondir" et non avoir un mouvement sinusoïdale), nous allons utiliser Math.abs.
Le sinus vaut 1 tous les 180°. Or, nous avons besoin que le sin valle 1 tous les 90°. Il faut donc que la fréquence de la rotation soit doublée pour avoir un sin=1 tous les 90°.

Ce qui est chouette, c'est qu'on est en train de faire une pierre deux coups:
En effet, on a besoin que sin=1 quand rotation=45. Or, sin=1 quand rotation=90. Il faudrait décaler la valeur de 45 pour corriger ça, sauf que ça n'est pas la peine:
Etant donné qu'on a multiplié l'angle par 2, quand la rotation vaut 45, sa valeur dans l'expression vaudra donc 90 ! Donc tout rentre dans l'ordre.

Ouf, vous pouvez lacher votre apnée, voilà les dernières lignes:

y=Math.abs ( Math.sin ( degreesToRadians ( (rotation))*2))*-montee;

Regardez bien, il y a un - devant montee. Ca permet d'avoir la valeur négative de la variable sans devoir écrire montee*-1. Pourquoi *-1 d'ailleurs ? Car dans After Effect, le 0 de Y est en haut, donc si on veut qu'un calque monte, il faut que Y baisse.

La dernière ligne :

[x,y]+value

Le +value permet biensur de pouvoir mettre votre carré où vous voulez pour le départ.

Et voilà ! Vous avez un carré qui marche !

Vous pouvez biensur mettre une valeur négative dans la vitesse pour aller de droite à gauche.
vous pouvez modifier l'échelle. Si vous faites un carré plus grand, il tournera moins vite, et inversement avec un carré plus petit.
Installez 3 carrés de 3 tailles différentes, avec la meme vitesse. Vous verrez que les 3 iront à la même vitesse, meme si le plus petit a l'air de franchement galérer pour suivre les deux autres.

Ce que vous ne pouvez pas faire :
Changer la taille du carré dans le temps. En effet, sans rentrer dans les détails, dans cette expression, on ne rajoute pas à chaque image une valeur de position et de rotation. Pour chaque image, After Effect calcule l'image comme unique. Si vous changez l'échelle dans le temps, il va replacer le carré à chaque image comme si sa taille avait toujours été celle de l'image courante.

Vous pouvez également enlever les "time", et ainsi faire bouger votre carré en animant la valeur "vitesse"

un exercice pour ce week end

ça vous rappelle rien ?... Les indices du jour sont :

-particular (Tracpode), j'ai pas testé avec Particle Word ou autre...
-l'expression magique est utilisée en partie à 2 endroits.




Aller hop ! au boulot. Vous avez droit à une question sous forme de commentaire.

amélioration des lumières

Nous allons aujourd'hui essayer d'améliorer le système d'éclairage d'After Effect.
Comme vous le savez, After Effect propose plusieurs type d'éclairage, point, concentré, parallèle, ambiante.
Nous allons nous interesser aux plus utilisés, point et concentré (le spot).

After Effect permet de gérer en gros les ombres, les ombres douces, le spéculaire, la puissance. Il gère également l'angle camera-objet-lumière.

Il y a un paramètre que After Effect ne gère pas, c'est la déperdition de la puissance lumineuse. En effet, qu'importe la distance objet-lampe, l'objet reste toujours autant éclairé. Hors, bien évidemment, plus la lampe est loin de l'objet, moins la puissance est grande.

On va corriger ça, autant que faire ce peut.

Voilà notre schéma du jour:
















La boule jaune, c'est la lumière, et en bas, c'est le calque.
Alors on pourrait se dire :
"Et bah on assimiler la distance lampe-calque à la "diffuse" du calque !"

C'est en effet ce que l'on va faire, mais il y a un léger hic. AE éclaire le calque de manière uniforme (sans prendre en compte le spéculaire). Imaginez que la lampe se déplace sur le plan parallele au calque (donc là sur l'axe XY), la distance lampe-calque va augmenter.

Hors, si le calque fait 2000x2000, et que la le calque se déplace de 1000 sur X, la lumière va baisser (car la distance augmente), alors que la lumière est toujours "au dessus" du calque.

Nous allons donc séparer la distance Z, et la distance XY (la ligne jaune au sol)

Aller c'est parti.

Créons un calque Null de control, qui va nous permettre de regler l'atténuation. Ajoutez 2 paramètre glissère, "début" et "fin"

Créez également une lumière "point".

Créez un 1er calque 3d, aller dans le paramètre diffuse, et écrivez :

a=position; b=thisComp.layer("Lumière 1").transform.position;
debut=thisComp.layer("controle lumiere").effect("debut")("Curseur");
fin=thisComp.layer("controle lumiere").effect("fin")("Curseur");

J'explique pas.
La suite:

V=sub(b,a);
Vec=fromWorldVec(V);

La 1ere ligne, vous connaissez, on crée un vecteur de a vers b.
Pour la 2eme, je m'explique.
Voyez sur le dessin la ligne orange, le vecteur. C'est un vecteur qui appartient à l'espace général de AE. Nous avons besoin que ce vecteur soit regardé par le calque, pour pouvoir séparer Z,X et Y. C'est le role de fromWorldVec. On change de référenciel, du "monde" vers le calque.

On se libère ainsi des valeurs de rotation du calque.

distanceZ=Math.abs(Vec[2]);

On récupère ainsi la composante Z du vecteur. Si on avait faire ça avec V et non Vec, la composante Z ([2]) aurait été celle du monde AE, qu'importe l'angle du calque.
Le math.abs permet d'éviter le probleme d'orientation du calque.
Voilà, on a crée une valeur qui donne la distance perpendiculaire du calque vers la lampe.

valz=ease(distanceZ,debut,fin,value,0);

Là on a crée la valeur de la diffuse en fonction de distanceZ.
Vous comprenez ainsi que la valeur "début" doit correspondre au début de l'atténuation, et "fin" doit correspondre à la distance où le calque sera noir.

Passons à l'atténuation sur le plan parallèle au calque, le plan XY.
On va faire en sorte que la déperdition commence à début+"en gros la taille du calque". Ainsi, si début=0, l'atténuation commencera quand la lampe "sortira" du calque.

distanceM=(width+height)/4;
distanceXY=Math.abs ( add(Vec[0],Vec[1]) );
valXY=ease(distanceXY,debut+distanceM,fin+distanceM,value,0);

On crée donc une variable très approximative (mais ça fonctionne pas trop mal).
C'est donc la moyenne entre la largeur et la hauteur du calque (width+height)/2, que je redivise par 2, pour n'avoir que la moitié. En effet, on considèrera que le point d'ancrage est au milieu du calque.
Ensuite, on crée la longueur du trait jaune (sur le dessin), c'est à dire la projection du vecteur sur le calque. "add" fait l'addition de 2 vecteurs. Regardez le dessin, on voit bien que x+y=trait jaune.
Ensuite, on fait la même chose que pour Z, mais avec XY. C'est pour cela qu'on rajoute distanceM à début et fin, pour tout décaler.

La dernière ligne :

Math.pow(valz*valXY,.5);

C'est donc la multiplication des 2 valeurs crées, le tout à la racine carrée.
Ainsi, on reste au maximum à 50, et quand une des 2 valeurs est à 0, le tout est bien à 0.

On peut évidemment remplacer les 0 par une valeur positive, pour ne jamais avoir de calque noir.
Voilà, ça aide un peu, ça a ses limites... Si vous voulez utiliser une valeur spéculaire pour le calque, copier l'expression également dedans.

Aller, l'expression en entier :

a=position; b=thisComp.layer("Lumière 1").transform.position;
debut=thisComp.layer("controle lumiere").effect("debut")("Curseur");
fin=thisComp.layer("controle lumiere").effect("fin")("Curseur");

V=sub(b,a);
Vec=fromWorldVec(V);

distanceZ=Math.abs(Vec[2]);
valz=ease(distanceZ,debut,fin,value,0);


distanceM=(width+height)/4;
distanceXY=Math.abs ( add(Vec[0],Vec[1]) );
valXY=ease(distanceXY,debut+distanceM,fin+distanceM,value,0);

valeur=Math.pow(valz*valXY,.5);


Ca marche avec une seule lampe, c'est compliqué de le faire avec plusieurs lampes pour plusieurs raison :

On utilise un gros système D, qui fait que le calque devient lui meme plus sombre selon la distance de la lampe. Donc s'il y a une lampe rouge et une lampe bleue, et que la lampe bleu est loin, et la lampe rouge, ça ne marche pas : le calque sera bien éclairé car la rouge est proche, mais le calque sera donc violet, à cause de la lumière bleue.



Voilà, j'espère avoir été clair !
Plus début et fin sont petits, plus l effet sera fort.
Rechargez la page pour que les 2 animations soient syncrho.

avec:












sans:













un autre exemple, notez dans le "avec" le coin supérieur gauche qui s'assombri, et évidemment, tout devient noir quand la lumière monte trop haut.