Positionner sur un cercle

Pour positionner des éléments sur un cercle, il nous suffit de faire quelques calculs simples.

Imaginons que nous souhaitons disposer n éléments sur un cercle

• de diviser le périmètre d’un cercle de rayon 1 (2π) par le nombre d’éléments à placer afin d’obtenir un valeur Â
• pour chaque point p numéroté de 1 à n, obtenir le cosinus et le sinus de p × Â.

Nous obtenons maintenant les coordonnées des différents points sur un cercle de 1 de côté.

Si l’on souhaite par exemple obtenir les coordonnées des points sur un cercle de rayon 12, il suffit de multiplier les coordonnées par 12.

Comment faire :

Voyons un exemple, avec les éléments suivants :

• thisComp.numLayers : le nombre de calques dans la composition
• width : la largeur de la composition
• index : le numéro de calque

Nous allons donc :

• créer un calque de forme
• ajouter une ellipse
• ajouter une couleur de fond

Et lui ajouter l’expression suivante sur la position :

var x = position[0] + Math.cos( 2 * Math.PI / thisComp.numLayers * index ) * width / 3;
var y = position[0] + Math.sin( 2 * Math.PI / thisComp.numLayers * index ) * width / 3;

[ x, y ]

Ou en version longue :

/* on va arbitrairement choisir
un rayon égal au tiers de la largeur_colonne
composition */
var rayon = width / 3;

/* Le périmètre d'un cercle de rayon 1 = 2π */
var perimetre_cercle_rayon_1 = 2 * Math.PI

/* on récupère le nombre de calque
cela va nous permettre d'espacer
les éléments de manière régulière */
var nombre_de_calques = thisComp.numLayers;

/* calcul de l'angle pour le calque contenant l'expression */
var angle_A = perimetre_cercle_rayon_1 / nombre_de_calques * index;

// calcul de la position en x et y
var x = position[0] + Math.cos( angle_A ) * rayon;
var y = position[1] + Math.sin( angle_A ) * rayon;

[ x, y ]

En vidéo