positionner en rangs et colonnes
################################

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

.. figure:: ../images/colonnes.png

calculer colonne et rang
************************

Pour calculer le rang et la colonne d'un élément d'après son index et le nombre de colonnes, on procède comme suit :

.. image:: ../images/rangs-et-colonnes--calcul.png
   :width: 400px

Appliquons en effet ce calcul sur une grille :

.. image:: ../images/rangs-et-colonnes--illustration.png
   :width: 400px

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 :

.. figure:: ../images/colonnes.png

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 ».

.. code-block:: javascript

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

.. code-block:: javascript

   var colonne = (index - 1) % nombre_de_colonnes;

index → rang
============

.. code-block:: javascript

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

calculer la largeur d'une colonne
=================================

.. code-block:: javascript

   var largeur_colonne = width / nombre_de_colonnes

calculer la marge externe
=========================

.. code-block:: javascript

   var marge_interieure = largeur_colonne / 2;

colonne → x
===========

.. code-block:: javascript

   var x = marge_interieure + colonne * largeur_colonne;

rang → y
========

.. code-block:: javascript

   var y = marge_interieure + rang * largeur_colonne;

au final
========

.. code-block:: javascript

   var nombre_de_colonnes = Math.round( thisComp.layer("controles").effect("Paramètre glissière")("Curseur") );

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

.. raw:: html

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