.. _chap-tpIntroductionProcessing:

################################################################################
Travaux pratiques - Introduction à Processing
################################################################################
 
Références externes utiles :

  * `Téléchargement et documentation Processing <https://processing.org>`_


Exercice 1 - Processing en mode immédiat
========================================

Ecrire le code Processing correspondant à chacune des trois images ci-dessous. La première utilise seulement des primitives de tracé et s'inspire d'un tableau de Mondrian. La deuxième nécessite des boucles et du (pseudo)hasard, elle s'inspire de Le Parc et Vasarely. La troisième demande de la récursivité.

|

.. image:: figures/inspirationMondrian.png
   :width: 40 %
   :alt: inspiration Mondrian
   :align: center
|

.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	.. code-block:: java

    	 size(400,500);
    	 smooth();
    	 
    	 stroke(0);
    	 strokeWeight(10);
    	 strokeCap(SQUARE);
    	 
    	 //le fond
    	 background(255);
    	 
    	 // le grand carre rouge
    	 fill(255,0,0);
    	 rect(100,0,300,300);
    	 // le rectangle bleu
    	 fill(0,0,255);
    	 rect(0,300,100,200);
    	 // le carre jaune
    	 fill(255,255,0);
    	 rect(300,400,100,100);
    	 // le trait vertical pres du carré jaune
    	 line(300,300,300,400);
    	 // le trait horizontal en haut
    	 line(0,100,100,100);
    	 // le bord
    	 noFill();
    	 rect(0,0,400,500);
    	 
    	 save("mondrian1.png");

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.

.. image:: figures/inspirationVasarely.png
   :width: 40 %
   :alt: inspiration Vasarely
   :align: center
|

.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	.. code-block:: java

    	   size(600,600);
    	     rectMode(CENTER);
    	     ellipseMode(CENTER);
    	     smooth();
    	     noStroke();
    	   
    	     for (int x=30; x<600; x+=60){
    	       for (int y=30; y<600; y+=60){
    	         fill(random(0,255));
    	         rect(x,y,60,60);
    	         fill(random(0,255));
    	         ellipse(x,y,50,50);
    	       }
    	     }
     	     
    	     save("leparc.png");

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.


.. image:: figures/divisionRecursive.png
   :width: 40 %
   :alt: division récursive
   :align: center
|

.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	.. code-block:: java

    	 void setup(){
    	   size(600,600);
    	   rectMode(CORNERS);
    	   noFill();stroke(0);
    	   subdiv(7,0,0,width,height);
    	   save("resu.png");
    	 }
    	 
    	 void subdiv(int n,int x1,int y1,int x2,int y2) {
     	   strokeWeight(n);
    	   rect(x1,y1,x2,y2);
    	   if (n>0) {
    	   int cx = (int)gauss(x1,x2);
    	   int cy = (int)gauss(y1,y2);
    	   subdiv(n-1,x1,y1,cx,cy);
    	   subdiv(n-1,cx,y1,x2,cy);
    	   subdiv(n-1,x1,cy,cx,y2);
    	   subdiv(n-1,cx,cy,x2,y2);
    	  }
    	 }
    	 
    	 // remarque : tirage gaussien existe dans processing 2.0
    	 
    	 float gauss(int a, int b){
    	   return ((a+b)/2.0) + (b-a)*gauss01()/12;
    	 }
    	 
    	 float gauss01(){
    	   float theta = random(0,2*PI);
    	   float r = sqrt(-2*log(random(0,1)));
    	   return r*cos(theta);
    	 }

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.


Exercice 2 - La boucle d'animation ``draw()``
=============================================

Un grand classique de l'animation procédurale est le mouvement brownien. Créer une classe Particule avec des attributs de position (x,y), une méthode de dessin et une autre pour la mise à jour de position. Pour cette dernière, on se contente d'incrémenter les coordonnées selon une valeur (pseudo)aléatoire de quelques pixels (en plus ou en moins). Créer ensuite un tableau d'un bon nombre N d'objets particule. Etudier le comportement du programme (en terme de *framerate*) avec N croissant et selon le type des primitives de tracé utilisées pour les particules (ellipses ou rectangles, par exemple).

|

.. image:: figures/brownien1.png
   :width: 40 %
   :alt: brownien 1
   :align: center
|

.. image:: figures/brownien2.png
   :width: 40 %
   :alt: brownien 2
   :align: center
|
    	 
.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	.. code-block:: java

    	 class particule {
    	   float x,y;
    	   
    	   particule(){
    	     x=random(0,width); 
    	     y=random(0,height); 
    	   }
    	   
    	   void dessin(){
    	     noStroke();fill(0);
    	     ellipse(x,y,6,6);
    	   }
    	 
    	   void evolution(){
    	     x = (x+random(-1,+1))%width;
    	     y = (y+random(-1,+1))%height;
    	   }
    	 }
    	 
    	 
    	 particule[] p = new particule[1000];
    	 
    	 void setup() {
    	   size(600,600);
    	   smooth();
    	   for (int i=0;i<p.length;i++) p[i] = new particule();
    	 }
    	 
    	 void draw() {
    	   background(200);
    	   for (int i=0;i<p.length;i++){
    	     p[i].dessin();
    	     p[i].evolution();
    	   }
    	 }

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.


Exercice 3 - Mode réactif pour l'interaction
=============================================

Ajouter au programme précédent deux boutons (**start** et **stop**), qu'il faut coder soi-même. Créer une classe ``Button`` qui s'en charge. Etudier ensuite une classe ``Slider``, qui par exemple ici pourrait faire évoluer le diamètre des particules en temps réel.

.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.

Reprendre ensuite l'exercice avec à la place les composants de GUI de la librairie ``controlP5`` (qu'il faut installer soi-même).

.. ifconfig:: tpscala in ('public')

   .. admonition:: Correction

   	 Les programmes solutions pour ce TP se trouvent `ici <http://cedric.cnam.fr/vertigo/Cours/RCP216/tpvisinfo1.zip>`_.