Animer selon un cercle
######################

Nous allons maintenant voir comment animer un élément selon un cercle.

C'est extrêmement simple, nous allons simplement utiliser ``time`` comme valeur d'angle : cette valeur s'incrémentant avec le temps, les coordonnées calculées correspondront à un point mouvant le long du cercle.

.. code-block:: javascript

   // rayon du cercle
   var rayon = width / 3;

   /* la vitesse désirée
      plus le nombre est bas
      plus c'est lent */
   var vitesse = 0.5;

   /* calcul des positions */
   var x = position[0] + Math.cos( time * 2 * Math.PI * vitesse ) * rayon;
   var y = position[1] + Math.sin( time * 2 * Math.PI * vitesse ) * rayon;

   [x,y]

Pour aller plus loin
********************

Comme nous l'avons vu, il existe différents paramètres : vitesse, rayon…

Mais il est possible d'aller plus loin en choisissant :

* la position de départ (de 0 à 2π)
* le sens de rotation
* un nombre de tour à effectuer du début à la fin de la composition

.. code-block:: javascript

   // rayon du cercle
   var rayon = width / 3;

   /* nombre de tours à effectuer
   sur la durée de la composition */
   var nombre_tours = 2;

   /* position de départ sur le cercle */
   var position_de_depart = Math.PI/2;

   /* situation temporelle dans la composition :
   0 = première image, 1 = dernière image */
   var position_ds_la_compo = time / thisComp.duration;

   /* calcul de l'angle */
   var angle = 2 * Math.PI * position_ds_la_compo * nombre_tours + position_de_depart;

   /* calcul de la position
   Le - devant l'angle du sinus permet
   d'inverser la direction */
   var x = position[0] + Math.cos( angle ) * rayon;
   var y = position[1] + Math.sin( -angle ) * rayon;

   [x,y]

En vidéo
********

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/0xccpJG2TkY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>