====== Un exemple d'utilisation d'écriture et de lecture de données numérique externe au sketch, au format .cvs - Projet "esthétique du chaos" - BTS DG 2016-2017 ======
Par Damien MUTI

===== Description =====
Ce tutoriel propose deux programmes élaborés dans le cadre du projet "Esthétique du Chaos" effectué avec les étudiants de BTS DG en 2016-2017 sous la direction de Laurence Cléyet-Merle.
L'objectif est de modéliser l'évolution aléatoire d'un chat à l'intérieur d'une carte (effectuée par Gwendoline Bagot):


{{ :wiki:tutoriels:processing:cartogfond.jpg |}}

Un premier programme a pour but de mémoriser la position du chat en maintenant cliqué la sourie et en déplaçant le curseur dans la carte. Lorsqu'on relâche le bouton gauche de la sourie, un fichier au format .cvs est enregistré dans le fichier data.

Un deuxième programme a pour but de lire les différentes positions créées dans le programme précédant et d'afficher le chat automatiquement sur les différentes positions. Ici le chat a été modélisé par un  simple cercle...


===== Premier programme : enregistrer les différentes position de la sourie =====
__** Présentation du problème **__ 

L'ensemble des positions modélisées par les points M(x,y,z), de type //PVector//, sont mémorisées dans une liste de taille variable (dynamique) de type //ArrayList//. Dans un deuxième temps, les différents //PVector// contenus dans l'ArrayList sont transférés dans les lignes d'un tableau de type //Table// afin d'être enregistré au format .cvs. Ces trois types sont décrits dans la documentation :
  * //PVector// : [[https://www.processing.org/reference/PVector.html]], et les exemples ( [[https://www.processing.org/examples/bouncingball.html]], [[https://www.processing.org/examples/vectormath.html]], [[https://www.processing.org/examples/accelerationwithvectors.html]]).
  * //ArrayList// : [[https://www.processing.org/reference/ArrayList.html]], et l'exemple : [[https://www.processing.org/examples/arraylistclass.html]].
  * //Table// :  
    * https://www.processing.org/reference/Table.html 
    * [[https://www.processing.org/examples/loadsavetable.html]].

__**L'algorithme est le suivant**__:
  * tant que le bouton gauche de la sourie est maintenu appuyé, enrichir l'ArrayList avec l'ensemble des points parcourus par le curseur.
  * Lorsque le bouton est relâché, l'ArrayList reste mémorisé et peut être complétée en appuyant de nouveau sur le bouton de la sourie.
  * Lorsque l'on appuie sur le bouton "ENTER", les différents //PVectors// contenus dans l'ArrayList sont transférés dans les lignes d'un tableau de type //Table//, puis enregistré au format .cvs.

__**Le programme est le suivant**__:

<code>
PImage img;
float x0, y0, x1, y1;
int d = 10; 
ArrayList<PVector> pos ;

void setup() {
  pos = new ArrayList<PVector>();
  size(500, 707);
  img=loadImage("cartogfond2.jpg");
  image(img, 0, 0);
  x0=100;
  y0=100;
  ellipse(x0, y0, d, d);
}

void draw() {

  if (mousePressed == true) {
    pos.add(new PVector(mouseX, mouseY));
  }
}

void keyPressed() {
  if (key==ENTER) {
    Table t = new Table();
    t.addColumn("x");
    t.addColumn("y");


    int i=0;
    for (PVector p : pos) {
      TableRow newRow = t.addRow();
      newRow.setInt("x", (int)p.x);
      newRow.setInt("y", (int)p.y);

      println("i = "+i+" ,x = " + p.x +", y = " + p.y);
      i++;
    }
    saveTable(t, "data/coordonees.csv");
    println("Table coordonees.csv enregistrée au format .cvs, contenant : "+ pos.size() + " vecteurs");
  }
}

</code>  

Le code peut être téléchargé sur le lien suivant : {{:wiki:tutoriels:processing:affiche_interactive_cartographie_memo_positions.zip|}}

===== Deuxième programme : Lire les différentes positions du "chat" précédemment mémorisées dans fichier au format .cvs =====
__** Présentation du problème **__ 

Le deuxième programme a pour but de lire les différentes positions créées dans le programme précédant et d'afficher le chat automatiquement sur les différentes positions. Ici le chat a été modélisé par un simple cercle… 

__** L'algorithme est le suivant **__ 

__Dans le setup()__:

  * Lire la table "coordonnees.cvs" mémorisé dans le dossier "data" du sketch.
  * Créer une liste dynamique "pos" de type //ArrayList// qui contiendra tous les vecteurs positions des des différentes positions issues du fichier "coordonnees.cvs".
  * Récupérer chaque ligne de la table
  * Créer un nouveau vecteur de type PVector et remplir les attributs x et y avec les valeurs lue dans chaque ligne.
  * Enrichir l'ArrayList "pos" avec le vecteur précédemment créé.

__Dans le draw()__:
  * Frame par frame, lire un vecteur position de l'ArrayList et dessiner le "chat" modélisé par un cercle, à la position donné par le vecteur lu.


__** Le programme est le suivant **__ 
<code>
PImage img;
float x0, y0, x1, y1;
int d = 10; 
Table Positions;
ArrayList<PVector> pos;
int i = 0; // indice de l'image affichée

void setup() {
  size(500, 707);
  img=loadImage("cartogfond2.jpg");
  image(img, 0, 0);
  x0=100;
  y0=100;
  ellipse(x0, y0, d, d);
  
  // charger les positions dans le fichier "coordonnees.cvs"
  Positions = loadTable("coordonees.csv", "header");
  println("il y a "+Positions.getRowCount() + " lignes dans le fichier coordonnées");

  //lecture des valeurs des coordonnées dans la table
  pos = new ArrayList<PVector>(); // création de l'arraylist contenant les positions des points

  for (TableRow row : Positions.rows()) {
    int x = row.getInt("x");
    int y = row.getInt("y");
    pos.add(new PVector(x, y)); // rajout des positions x et y dans le ArayList de vecteur
  }
  frameRate(30);
}

void draw() {
  if (i<pos.size()) {
    PVector p = pos.get(i); // récupération du ième vecteur position
    ellipse(p.x, p.y, d, d);
    i++; // incrémentation de la position
  } else {
    fill(0);
    text("c'est fini", width/2, height/2);
  }
}
</code>

Le code peut être téléchargé sur le lien suivant : {{:wiki:tutoriels:processing:lecture_position_cartographie_chat.zip|}}

Le résultat est le suivant :
{{ :wiki:tutoriels:processing:cartochat.jpg |}}