Le fluide comme source d’animation ¶

Exercice final 🤓 (ressources complémentaires sur le fluide ci-dessous)

Finaliser votre animation de transition/ boucle visuelle.
Ajouter les couleurs, la typographie liée à votre univers visuel pour l’événement Louisa
Trouver un rythme qui puisse faire vivre votre composition pour proposer une ambiance graphique tout en fluidité. (L’ambiance sonore peut être un plus, où pas, à vous de voir.) 👀

Exemple de grille générée en expression :

// Récupération de l'index du layer 
s = thisComp.layer(index);

// Définition de la largeur de la composition et hauteur/largeur du layer
largeurComp=thisComp.width;
largeurLayer=s.sourceRectAtTime(time-s.inPoint,true).width;
HautLayer=s.sourceRectAtTime(time-s.inPoint,true).height;

// Définition de la valeur x de la position est égale à la largeur de l'élément précédent (index-1)
x=largeurLayer*(index-1);

// résolution de la grille
resolution=Math.floor(largeurComp/largeurLayer)+1;


// // Définition de la valeur y de la position
y= Math.floor((index-1)/resolution)*(HautLayer);


// Condition qui s'applique à chaque début de ligne   
if(Math.floor((index-1)/resolution)>0)
{
	// Condition pour obtenir un décalage toute les 2 lignes
	if(Math.floor((index-1)/resolution)%2==1)
		x=x-resolution*Math.floor((index-1)/resolution)*largeurLayer+largeurLayer/2;
	else
		x=x-resolution*Math.floor((index-1)/resolution)*largeurLayer;
}

// Return (mise à jour du tableau de la position (deux valeurs, x et y)
[x,y]

Solid animés par une expression :

Animation source

var sample = thisComp.layer("bg").sampleImage(position, [1, 1]);
var sampleHSL = rgbToHsl(sample);

var newOpacity = linear(sampleHSL[2], 0, 1, 100, 0);

[newOpacity];