Par Damien MUTI

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):

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…

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:

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");
  }
}

Le code peut être téléchargé sur le lien suivant : affiche_interactive_cartographie_memo_positions.zip

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

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);
  }
}

Le code peut être téléchargé sur le lien suivant : lecture_position_cartographie_chat.zip

Le résultat est le suivant :