Positionner sur un cercle
#########################

.. image:: ../images/capture-positionnement-cercle.png

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 :

.. code-block:: javascript

   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 :

.. code-block:: javascript

   /* 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
********

.. raw:: html

   <video controls width="100%">
      <source src="../../_static/cours-5-videos/positionner-en-cercle.mp4">
   </video><br><br>