positionner en rangs et colonnes

Dans ce chapitre, nous allons voir comment positionner des éléments en rangs et colonnes

calculer colonne et rang

Pour calculer le rang et la colonne d’un élément d’après :

• son index
• le nombre de colonnes

on procède comme suit :

Appliquons en effet ce calcul sur une grille :

On peut voir que :

• le dividende est constant dans chaque rang
• le reste est constant dans chaque colonne

calculer les coordonnées

Reprenons le premier schéma :

Nous pouvons voir ici que :

• la largeur d'une colonne est égale à la largeur de la composition divisée par le nombre de colonnes
• la position en x d’un élément est égal à : largeur d'une colonne multiplié par la somme du numéro de colonne + 0,5 (la même chose en y avec la hauteur d’une colonne)

Application sur After Effects

prérequis

Différents mots-clés nous serons nécéssaires :

• width : largeur de la composition en pixels (fourni par After Effects)
• index : numéro du calque (de 1 à n)

définir le nombre de colonnes

On peut définir ce nombre « en dur » directement dans le code, où en ajoutant un calque « controles » avec un effet « options pour expressions ».

// définition "en dur"
var nombre_de_colonnes = 4;

// depuis un effet pour expression situé sur un calque « contrôle »
var nombre_de_colonnes = Math.round( thisComp.layer("controles").effect("Paramètre glissière")("Curseur") );

index → colonne

var colonne = (index - 1) % nombre_de_colonnes;

index → rang

var rang = Math.floor( (index - 1) / nombre_de_colonnes );

calculer la largeur d’une colonne

var largeur_colonne = width / nombre_de_colonnes

calculer la marge externe

var marge_interieure = largeur_colonne / 2;

colonne → x

var x = marge_interieure + colonne * largeur_colonne;

rang → y

var y = marge_interieure + rang * largeur_colonne;

au final

var nombre_de_colonnes = 4;

var colonne = (index - 1) % nombre_de_colonnes;
var rang = Math.floor( (index - 1) / nombre_de_colonnes );

var largeur_colonne = thisComp.width / nombre_de_colonnes
var marge_interieure = largeur_colonne / 2;

var x = marge_interieure + colonne * largeur_colonne;
var y = marge_interieure + rang * largeur_colonne;

[ x, y ]

En vidéo