Sélecteur graphique

De retour après pas mal de temps, j'ai donc pris le temps d'écrire ce nouveau post, qui ouvre une toute nouvelle dimension à l'animation; nous allons développer un outil assez puissant.

Je souhaite développer une idée très utilisée dans beaucoup de domaine : le sélecteur graphique. De quoi s'agit-il ? C'est très simple, le principe est de traduire une ligne droite en courbe. Tout le truc est évidemment de choisir la courbe que l'on souhaite.

Nous avions déjà vu ce principe sur de nombreux posts, j'en ai déjà parlé en long en large et en travers.
L'idée était d'utiliser une variable qui va de 0 à 1 (et linéaire), et d'altérer cette valeur pour en modifier la progression, selon ce tableau récapitulatif :

Maintenant, imaginons que nous voulons créer notre propre courbe, sans être bloqué par ces courbes mathématiques. Ensuite, nous allons nous en servir pour dispatcher des valeurs différentes à différents calques.

Nous allons utiliser la fonction valueAtTime.

Il y a une infinité d'applications, je vais donc en développer quelques unes.

Mais voyons déjà la structure.

Créez un Null avec un paramètre glissière.

Appelez le "courbe".

Allez dans courbe,, et animez la valeur, en mettant une clef à l'image 0 égale à 0, et une clef à 1 seconde égale à 1. Le choix de faire une courbe sur une seconde est arbitraire, mais pratique car on va de 0 à 1, et cela permet de ne pas se tromper entre chaque projet. "Comment j'ai fait ma courbe ce coup-ci déjà ?".

Passez cette ligne en easeInOut (F9), et dessiner la courbe qui vous plait.

Créez un petit carré, placez le en bas à gauche, et animer le sur X pour qu'il se déplace de gauche à droite.

On va dire qu'il se déplace sur X de 50 à 200 par exemple.

Ouvrer l'expression de la position, et écrivez :

courbe=thisComp.layer("Nul 1").effect("courbe")("Curseur");

hauteur=-200;

Quand le carré sera sur x=50, le cube sera en bas. Quand il sera à x=200, Y montera de 200 (hauteur = -200 car Y=0 est en haut).

Ensuite :

graphTime=linear(value[0],50,200,0,1);

Ici, on définit notre sélecteur, qui va nous permettre de prendre la valeur qui nous intéresse sur la courbe. Le 0 et le 1 de la fin correspondent donc au temps.

graph=courbe.valueAtTime(graphTime);

On a donc créer une valeur graph qui va prendre la courbe à un moment défini par la valeur de X.

La dernière ligne :

[value[0] , graph*hauteur+300]

Le graph va donc jouer son rôle d'interrupteur pour la hauteur, et 300 nous permet juste de mettre le carré vers le bas.

Voyez l'animation. Quand le carré avance, il monte en suivant une trajectoire qui ressemble à votre courbe.

Certains d'entre vous ont peut être une sensation de déjà-vu, puisqu'au final, on aurait pu dans ce cas utiliser simplement un linear(value,a,b,x,y) pour faire varier Y selon X, mais nous n'aurions pas eu la maîtrise des valeurs intermédiaires.

Ca n'a pas l'air comme ça, mais l'outil est surpuissant. Changer la forme de la courbe, et l'animation du carré changera sur Y.

L'outil est particulièrement pratique pour gérer plusieurs calques à la fois.

Un exemple que je ne vais pas développer mais qui parait évident : Faire un coverflow.

Car toute la question du coverflow est : de quelle façon mes calques s'avancent, reculent, grandissent. Vous pouvez ainsi tout contrôler facilement. Les calques ont une variable qui définisse leur distance par rapport au centre du coverflow, et la courbe vous permet de les faire commencer à grandir tout doucement au début, quand ils sont encore loin, puis de les faire grandir d'un coup, pour que celui du centre ait une taille bien plus grande que ceux d'à côté.

Ces applications pourraient être définies comme directes. En effet, l'utilisation de la courbe se retrouve plus ou moins visuellement dans l'animation, ici en trajectoire.

Mais on peut aller bien plus loin que cela, en créant par exemple des populations différentes. Soyons chiants 2 secondes, cela est comparable aux courbes que vous pouvez voir dans des magazines économiques par exemple. On vous montre une courbe des revenus moyens, et de la population qui est dans cette tranche. Résultat, la courbe est au plus haut sur le salaire médian, et très basse aux 2 extrémités.

Nous allons voir un exemple où l'on fait un peu la même chose, mais en moins chiant, pour ceux qui sont restés, merci à eux.

Nous allons reprendre l'animation des mouches que nous avons vu ici.

Les mouches suivent donc en retard, nous allons dessiner ce retard.

Voici ce que j'ai écrit pour chaque mouche :

target=thisComp.layer("Orange uni 1").transform.position;

courbe=thisComp.layer("Nul 1").effect("courbe")("Curseur");

retard=thisComp.layer("Nul 1").effect("retard")("Curseur");

seedRandom(index,true);

R=random(0,1);

graph=courbe.valueAtTime(R);

W=wiggle(2,10);

target.valueAtTime(time-graph*retard)+W-value

On comprend donc grace au random que chaque mouche va se voir attribuer une valeur aléatoire sur la courbe entre T0 et T1.

1er exemple :

Avec cette courbe, étant donné que la distribution des randoms est homogène entre 0 et 1, on comprend que les mouches auront plus de chance d'avoit une valeur proche de 1 que de 0.

On obtient donc cette animation :

La plupart des mouches ont un retard important.

2ème courbe :

Ici c'est l'inverse, la plupart des mouches auront un retard proche de 0, sauf certaines qui auront une valeur aléatoire attribuée dans la partie droite de la courbe.

En gros, nous avons créé un linear(value,a,b,x,y) beaucoup plus puissant, car nous contrôlons les valeurs intermédiaires.

Voilà, à vous de trouver comment cela peut vous servir. Le dernier exemple est assez parlant, car la simple utilisation du random aurait donné une distribution très homogène. Ici, on a pu créer un vilain petit canard très en retard.

Il vous suffit de changer la forme de la courbe pour voir toutes les mouches changer de position en prendre en compte la nouvelle distribution des retards.

Les applications sont infinies, et permettent de grandes finesses d'animation.