un peu de pub...

Allez, un peu de pub, une fois n'est pas coutume.

Guillaume Tel, série écrite et réalisée par votre serviteur, est enfin en ligne !
Le pilote (en bas) + les 3 premiers épisodes sont disponibles, puis ça sera un par semaine, pour un total de 17 épisodes.


GUILLAUME TEL

A bientot !

freezeur de composition

Un petit truc très rapide, qui peut servir à beaucoup de choses.
Vous avez besoin de bloquer une vidéo, ou une composition, sur une image donnée.
Comme vous le savez, vous pouvez faire clic droit sur un calque, "instant", "geler l'image".
Sauf qu'une fois que c'est fait, vous ne pouvez pas changer l'image en question. Pour ce faire, vous devez desactiver le remappage temporel, et refaire l'opération.

Voici une astuce pour choisir en un clin d'oeil l'image que vous voulez.

Créez un marqueur sur le calque. Pour se faire, vous pouvez appuyer sur la touche * avec le calque selectionné. Ensuite, clic droit dessus, paramètre, et nommez le 1 par exemple (autant avoir quelque chose de simple)

Ensuite, activez le remappage temporel du calque, et créez une expression dedans :

marker.key("1").time

On demande donc que le temps soit celui du marqueur qui s'appelle "1".

Et voilà ! L'image bloquée sera celle du marqueur. Déplacez le marqueur, et vous changerez l'image choisie.

Cela peut également servir pour une composition qui contient une image/photo différente à chaque frame.
A vous de voir à quel moment ça peut vous servir.

le fil de téléphone

Bonjour à tous,

voici enfin l'explication de la dernière animation, le fil de téléphone.
Je vais aller relativement vite, car il n'y a ici rien de nouveau en terme d'outil.
Toute la difficulté est de découper le processus :
Nous voulons qu'un fil soit tendu par ses 2 extrémités, mais quand les extrémités sont trop proches l'une de l'autre, le fil se détend, et dessine une courbe vers le bas :













Créez votre petite scène : 2 ronds bleus (oui maintenant j'impose des contraintes), un petit rond blanc (au dessus des bleus), et un Null appelé "controle"
Pour le calque "controle", rajoutez 3 paramètre glissière, et nommez les "taille", "diametre" et "frequence". Merci.

"taille" va définir la taille du fil, c'est à dire la taille sous laquelle il commencera à fléchir, ça arrive aux meilleurs.
"diamètre" et "fréquence" nous serviront pour la spirale, pour la suite.

Créez également un Null "sol" à mettre sous le rond blanc. Vous connaissez le principe, on l'a déjà vu.
Ouvrez l'expression de position du rond blanc, et on y va :

plafond=thisComp.layer("controle");
I=index-plafond.index;
sol=thisComp.layer("sol");
nombre=sol.index-plafond.index-1;

Tout ça, c'est du déjà vu, j'explique pas.
Réfléchissons un peu. En gros, on veut que plus un rond est loin de chaque extrémité (donc au centre de la ligne), plus il va descendre selon la distance entre les 2 ronds bleus.
Il faut donc qu'on crée un valeur qui varie de 0 à 1. 0 correspond à un rond blanc à la même position qu'un rond bleu, et 1 au calque qui est pile poil au milieu.

pos=linear(I,1,nombre,0,1);
possin=ease(pos,0,1,0,Math.PI);
trigopos=Math.sin(possin);

pos vaut donc la position linéaire de chaque rond.
possin crée le sinus de pos. Visualisez le cercle trigo. Quand pos=0, possin=0, et quand pos=1, possin=Math.PI.
possin correspond donc à un arc de cercle allant de 0 à 180.
On comprend donc que trigopos vaut 1 quand possin vaut 0,5.

Rappelez vous de cette technique, c'est pratique pour crée un index en forme de bosse.
Pour possin, j'ai utiliser ease et non linear, ça évite que les premiers ronds blancs ne tombe tout de suite.
Bref, trigopos nous indique la distance des ronds blancs par rapport aux extrémités, en fonction de leur position dans la timeline (et non par rapport à leur distance réelle).

Créons ensuite les variables du calque "controle", ça sera fait :

taille=thisComp.layer("controle").effect("taille")("Curseur");
diametre=thisComp.layer("controle").effect("diamètre")("Curseur");
freq=thisComp.layer("controle").effect("freqence")("Curseur");

Commençons à placer les ronds. Je ne fais que reprender le même exercice qu'ici.


A=thisComp.layer("A").transform.position;
B=thisComp.layer("B").transform.position;
V=sub(B,A);

Les calques A et B sont évidemment mes ronds bleus.

ligne=A+V*pos;

On réutilise donc la position linéaire des calques pour les placer de la ligne.
Maintenant, occupons nous de la déformation :

dist=length(A,B);

Voilà, comme ça on a la distance entre les ronds bleus. Maintenant, nous devons la comparer à la "taille" :

delta=ease(dist,0,taille,Math.PI/2,0);

on a donc une valeur "delta" qui vaut 0 quand les ronds bleus sont aussi loin que "taille" (ou plus), et qui vaut Math.PI/2 quand les ronds bleus sont confondus.

G=(Math.sin(delta)*taille/2)*trigopos;

G est la valeur qui fait descendre nos ronds blancs :
Quand les ronds bleus sont confondus, on peut considérer que le fil est plié en 2, donc que le rond le plus bas sera descendu de taille/2 (c'est évidemment une approximation sans aucune prétention physique).
Quand delta=0, G=0 et n'est donc pas pris en compte.

Finalement, nous créons des potentiomètres, comme pour les lampes. On crée des variables qui vont de "éteind" à "allumé", et on se donne le droit d'utiliser les variables intermédiaire:
trigopos est l'interrupteur fonction de la position des ronds blancs.
delta est l'interrupteur fonction de la postion des ronds bleus.

courbe=ligne+ [0,G];

La déformation vaut donc la ligne, +G en Y.
Et voilà, vous avez votre fil qui se déforme. Vous pouvez multipliez votre ronds blancs, ça marche.

Passons à la spirale.
Alors alors, qu'est ce qu'on veut faire ici...
Nous voulons en fait créer une autre ligne, qui va suivre la 1ere, mais en forme de spirale.
C'est un peu comme si on collait un bout de plastique sur le rayon d'un vélo :
Quand le vélo avance, le bout de plastique suit la même trajectoire que le vélo, mais en suivant une spirale, ça s'appelle une cycloïde.
La différence, c'est qu'ici, ça n'est pas le mouvement qui fait faire des cercles au bout de plastique, mais la position des ronds, ce qui revient au même.

Vous pouvez vous entrainer en faisant ceci:
Créez un solide, utiliser cos en X et sin en Y, et faite varier l'angle avec son index.
Si vous dupliquez le solide, vous allez donc obtenir un cercle, nous avons déjà vu ça en long en large et en travers.
Mais si vous rajoutez une variable qui fait augmenter X en fonctione de l'index, vous aurez votre spirale.
C'est exactement ce que nous allons faire.

spiralX=Math.cos (pos*freq )*diametre;
spiralY=Math.sin (pos*freq )*diametre;

Simplissime, vous connaissez déjà tout ici.
Dernière ligne:

courbe+ [spiralX,spiralY]

Et voilà !
Vous remarquerez comme nous avons tout bien segmenté :

ligne+courbe+spirale.

C'est un bon moyen pour s'y retrouver et faire du travail propre.
J'avais dit que j'avais fait court, ça va quand même, c'est pas trop long.

Encore une fois, c'est évidemment du système D, mais ça fait la blague.
Par exemple, nous n'avons pas fait en sorte que la spirale suive le tracé, et aucun délai n'a été créé pour les ronds du milieu.
Mais si vous cherchez, je suis sur que vous trouverez...

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 !