formes de bruits
################

wiggle()
********

``wiggle( fréquence, amplitude )`` prend deux paramètres et renvoi un nombre non explicitement borné.

.. raw:: html

   <video controls loop autoplay width="100%" style="max-width:320px">
      <source src="../_static/cours-5-videos/wiggle.mp4" type="video/mp4">
   </video><br><br>

.. code-block:: javascript

   transform.position.wiggle(1,20);

   // ou simplement

   // changement 1 fois par seconde
   // amplitude 20
   wiggle(1,20)

   // changement 50 fois par seconde
   // amplitude 20
   wiggle(50,20);

random()
********

``random()`` renvoie un nombre de 0 à 1.

.. raw:: html

   <video controls loop autoplay width="100%" style="max-width:300px">
      <source src="../_static/cours-5-videos/random.mp4" type="video/mp4">
   </video><br><br>

version courte
==============

.. code-block:: javascript

   [transform.position[0]+random()*200-100,transform.position[1]+random()*200-100]

version longue
==============

.. code-block:: javascript

   /* on récupère la position en x et y
   de notre élément avant l'exécution
   de l'expression */
   var x_au_depart = transform.position[0];
   var y_au_depart = transform.position[1];

   // on prend deux nombres entre **0 et 1**
   var nombre_au_hasard_1 = random();
   var nombre_au_hasard_2 = random();

   var x_en_sortie = nombre_au_hasard_1 // 0 à 1
                     * 200 // 0 à 200
                     - 100 // -100 à 100
                     + x_au_depart;

   var y_en_sortie = nombre_au_hasard_2 // 0 à 1
                     * 200 // 0 à 200
                     - 100 // -100 à 100
                     + y_au_depart;

   // la position est un tableau [x,y]
   // donc je termine mon expression par un tableau [x,y]
   [x_en_sortie,y_en_sortie]

noise()
*******

``noise( n )`` renvoie un nombre de **-1 à 1**.

.. note::

   ``noise( n )`` prend un paramètre n. L'idée est de passer un paramètre linéaire comme ``time``. À cette courbe dont la progression est linéaire, correspondra une courbe horizontale présentant un bruit :

   .. image:: images/noise-time.png

.. raw:: html

   <video controls loop autoplay width="100%" style="max-width:640px">
      <source src="../_static/cours-5-videos/comparaison 4-5_1.mp4" type="video/mp4">
   </video><br><br>

version courte
==============

.. code-block:: javascript

   var x = transform.position[0] + Math.sin ( index * Math.PI / 6 ) * ( index * 25 ) + noise ( time * 2 + index/25 ) * 50;
   var y = transform.position[1] + Math.cos ( index * Math.PI / 6 ) * ( index * 25 ) + noise ( time * 2 + index/25 + 200 ) * 50;

   [x,y]

version longue
==============

.. code-block:: javascript

   /* on récupère la position en x et y
   de notre élément avant l'exécution
   de l'expression */
   var x_au_depart = transform.position[0];
   var y_au_depart = transform.position[1];

   /* calcul du positionnement en spiral selon l'index du calque */
   var x_spirale = Math.sin ( index * Math.PI / 6 ) * ( index * 25 );
   var y_spirale = Math.cos ( index * Math.PI / 6 ) * ( index * 25 );

   /* bruit
   à noter qu'on utilise l'index que l'on divise pour conserver une proximité entre les différents éléments */
   var bruit_x = noise ( time * 2 + index/25 ) * 50;
   var bruit_y = noise ( time * 2 + index/25 + 200 ) * 50;

   var x = x_au_depart
        + x_spirale
        + bruit_x;
   var y = y_au_depart
         + y_spirale
         + bruit_y;

   [x,y]

----

.. note::

   .. image:: images/noise-vs-random.png