telephone

Après le SOS de Fred, j'ai trouvé la problématique intéressante, et relativement concrète.
Voici donc ma solution :














Je posterai la solution surement la semaine prochaine, parce que là, pas trop le temps (et oui, l'expression n'est pas très compliquée (environ 35 lignes, ya pire), mais écrire l'article, c'est un peu plus long...)

Molécule

Bonjour bonjour,

de retour parmi vous, nous allons utiliser un peu de trigo pour faire ça :



La question est évidemment de trouver comment bien placer la balle rouge.
Une 1ere solution pourrait biensur être de déplacer le point d'ancrage de la balle rouge, pour que la rotation se fasse autour de la balle jaune.
Toutefois, ça n'est pas terrible, car cela utiliserait la rotation, alors que la position deviendrait inutilisable.

Nous allons donc utiliser la position pour faire tourner la balle rouge autour de la jaune.
Rappelez vous, la trigo nous permet de tranformer une rotation en position.

Créez vos 2 baballes, puis ajoutez deux paramètres glissières à la balle rouge en les nommant "distance" et "angle".

Dans la position de la balle rouge, commençons par :

distance=effect("distance")("Curseur");
angle=degreesToRadians ( effect("angle")("Curseur"));
target=thisComp.layer("Orange uni 1");

target sera donc notre balle jaune.
Je n'explique pas hein. La suite :

P=target.position;

Voilà, P sera le centre de rotation.Maintenant on cherche la distance entre la boule jaune et la boule rouge.
Cette distance est égale à la moitié du diamètre de la boule jaune + la moitié du diamètre de la boule rouge.

D=(target.width*target.scale[0]/100)/2 + (width*scale[0]/100)/2 +distance;

Ca parait confus, mais les parties rouges font en sorte que le changement d'échelle soit pris en compte.
Le +distance fait donc référence au paramètre glissière, et permet donc à la balle rouge de se décoller de la balle jaune, quand la valeur de distance vaut plus de 0.
La suite :

x=Math.cos (angle)*D;
y=Math.sin(angle)*D;

P+[x,y]

Pour mon animation, j'ai créé une expression wiggle dans l'angle, mais on fait évidemment ce qu'on veut.

Tout ça vous connaissez. A la fin, on rajoute P à x et y pour que P soit tjs le centre.
Dans l'animation, j'ai donc placé un wiggle dans l'échelle de la balle jaune :

x=wiggle(1,100);
[x[0] , x[0] ]

Pourquoi n'ai je pas juste écrit :

wiggle(1,100)

Testez, et vous verrez qu' After Effect vous créera un wiggle différent pour chaque dimension.
Et oui, n'oubliez pas, le wiggle est un mot particulier, qui crée un nombre de variables égale au nombre de valeur présente : 1 pour la rotation, 2 pour l'échelle, 3 pour une position 3d...

Maintenant, utilisons la rotation pour faire roule la balle sur l'autre:








Ouvrez la rotation de la balle rouge :

target=thisComp.layer("Orange uni 2");
angle=effect("angle")("Curseur");

Ca, vous connaissez. La différence avec la position, c'est qu'ici, l'angle est égale à la valeur du paramètre glissière, et non à sa valeur degreesToRadians. En effet, pour la position, on avait besoin de la valeur en radians, car cette dernière était contenu dans un Math.cos et Math.sin.

Plus la balle rouge est petite, plus elle va tourner vite. Il faut donc créer une variable qui définit la différence de périmètre entre la balle jaune et la balle rouge :

p=width*(scale[0]/100)*Math.PI;
P=target.width*(target.scale[0]/100)*Math.PI;
ratio=P/p;

On applique tout simplement la formule "diamètre * pi". Sauf que comme les deux ont *PI, on peut le retirer :
p=width*(scale[0]/100);
P=target.width*(target.scale[0]/100);
ratio=P/p;

Ensuite, il faut savoir que pour qu'une balle fasse un tour autour d une balle d un même diamètre, elle fait 2 tours. Testez, vous verrez.

On a donc pour la dernière ligne :

angle*2*ratio


Et voilà !

promis

Les vacances sont terminées ! (si si)
Les posts sont de retour dès la semaine prochaine.

et bah alors ?

Et oui, beaucoup de travail en ce moment, je reviens bientôt avec de nouvelles choses, promis.

En attendant, vous avez à faire !

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"