Comment gérer et dessiner des chaînes de caractères tapées "en live" sur le clavier, dans la fenêtre d'affichage ?

Ce programme est très largement inspiré de celui effectué par Alexandre Sauzedde en 2014 lors de son projet concernant un logo interactif.

Damien MUTI.

Description l'algorithme

Dans le programme suivant, nous allons montrer comment afficher en temps réel une chaine de caractère tapée au clavier, sur la fenêtre d'affichage. Le programme suivant permet:

gérer les effacement de lettres
d'afficher une images à chaque nouvelle lettre écrite. L'image affichée affichée correspond à la dernière lettre de la chaine de caractère. Cette image correspond à la dernière lettre tapée ou à la dernièr elettre de la chaine de caractère lorsque la touche d'effacement “ ← ” a été tapée.

Présentation du programme

Le programme se compose de 3 sous-sketch (permettant une lecture plus simple) :

le sketch principal nommé “afficheChaineCaractere” qui contient void setup(), void draw(), void keyPressed().
La classe lettre dont les attributs sont une lettre, et une image associée à le lettre. Cette classe ne comporte qu'une méthode: “lPictoAffiche” qui permet d'afficher l'image associée à la lettre considérée.
Une méthode nommée “testEtAfficheLettre” qui permet d'afficher l'image assocée à la dernière lettre de la chaine de caractère “name”.

ATTENTION: Avant de lancer le programme il faut impérativement placer dans le dossier “data” du sketch toutes les images associées aux lettres.

Le code est le suivant:

afficheChaineCaractere :

PFont font;

//------------------------------------plein écran à l'ouverture du programme
boolean sketchFullScreen() {
  return true;
}

String name = new String();

// variables globales

lettre a;
lettre b;
lettre c;
lettre d;
lettre e;
lettre f;
lettre g;
lettre h;
lettre i;
lettre j;
lettre k;
lettre l;
lettre m;
lettre n;
lettre o;
lettre p;
lettre q;
lettre r;
lettre s;
lettre t;
lettre u;
lettre v;
lettre w;
lettre x;
lettre y;
lettre z;

void setup(){
  size(displayWidth, displayHeight);
  //size (400,400);
  noStroke();
  
  a = new lettre ("a", loadImage("Chat.jpg"));
  b = new lettre ("b", loadImage("PICT3579.JPG"));
  c = new lettre ("c", loadImage("PICT3557.JPG"));
  d = new lettre ("d", loadImage("PICT3592.JPG"));
  e = new lettre ("e", loadImage("PICT3592.JPG"));
  f = new lettre ("f", loadImage("PICT3592.JPG"));
  g = new lettre ("g", loadImage("PICT3592.JPG"));
  h = new lettre ("h", loadImage("PICT3592.JPG"));
  i = new lettre ("i", loadImage("PICT3592.JPG"));
  j = new lettre ("j", loadImage("PICT3592.JPG"));
  k = new lettre ("k", loadImage("PICT3592.JPG"));
  l = new lettre ("l", loadImage("PICT3592.JPG"));
  m = new lettre ("m", loadImage("PICT3592.JPG"));
  n = new lettre ("n", loadImage("PICT3592.JPG"));
  o = new lettre ("o", loadImage("PICT3592.JPG"));
  p = new lettre ("p", loadImage("PICT3592.JPG"));
  q = new lettre ("q", loadImage("PICT3592.JPG"));
  r = new lettre ("r", loadImage("PICT3592.JPG"));
  s = new lettre ("s", loadImage("PICT3592.JPG"));
  t = new lettre ("t", loadImage("PICT3592.JPG"));
  u = new lettre ("u", loadImage("PICT3592.JPG"));
  v = new lettre ("v", loadImage("PICT3592.JPG"));
  w = new lettre ("w", loadImage("PICT3592.JPG"));
  x = new lettre ("x", loadImage("PICT3592.JPG"));
  y = new lettre ("y", loadImage("PICT3592.JPG"));
  z = new lettre ("z", loadImage("PICT3592.JPG"));  
  
  // FONT
  font = loadFont ("DIN-Medium-48.vlw");
  textFont (font, 25);
  
  background(255); // fond blanc
}


void draw(){
  
  /// affiche l'image assocée à la dernière lettre de la chaine de caractère "name"
  testEtAfficheLettre();
  

// Font syle
  textSize(52);
  smooth();
  pushStyle();
  textAlign(CENTER);
  //fill(random(255), random(255), random(255), random(255)); Random Couleur
  fill(170);
  //text(name.toString(),width/2,640);
  text(name,width/2,640);
  popStyle();
}

//------------------------------------méthode effacer
void keyPressed(){
   if(key == BACKSPACE){
     if (name.length() > 0){
       pushStyle();
       fill(255);
       //rect(0,0,width,height);
       name = name.substring(0, name.length()-1); //effacer le dernier caractères (-1)
       popStyle();
       
     }
   } else if(key != CODED) {
      name += key;   
    }
    
    // affiche l'image associée à la derière lettre affichée
    
    
}

class lettre:

class lettre {
  /// attributs
 String nom;
 PImage lPicto;
 
 /// constructeur
 lettre(String name, PImage im) {
  nom = name;
  lPicto = im; 
 }
 /// méthodes
   void lPictoAffiche(){
    pushStyle();
    //fill(255);
    //rect(0,0,width,height);    
    //popStyle();
    image(lPicto, 0, 0, width,height);
  }
}

méthode testEtAfficheLettre :

void testEtAfficheLettre(){ 
  /// affiche l'image assocée à la dernière lettre de la chaine de caractère "name"
  
  if (name.length() > 0){
    
    // sélection de la dernière lettre de la chaine de caractère
    char lastLettre = name.charAt(name.length()-1); 
  
    if (lastLettre =='a' || lastLettre == 'A') { 
      a.lPictoAffiche();
    }

    if (lastLettre=='b' || lastLettre == 'B') {
      //fill(100, 60, 60) ; // remplissage rouge
      b.lPictoAffiche();
    }
    
    if (lastLettre=='c' || lastLettre == 'C') {
      c.lPictoAffiche();
    }
    
    if (lastLettre=='d' || lastLettre == 'D') {
      d.lPictoAffiche();
    }
    
    if (lastLettre=='e' || lastLettre == 'E') {
      e.lPictoAffiche();
    }
    
    if (lastLettre=='c' || lastLettre == 'F') {
      c.lPictoAffiche();
    }
    
    if (lastLettre=='g' || lastLettre == 'G') { ////////////////////PROBLEME ???
      d.lPictoAffiche();
    }
    
    if (lastLettre=='h' || lastLettre == 'H') {////////////////////PROBLEME ???
      e.lPictoAffiche();
    }
    
    if (lastLettre=='i' || lastLettre == 'I') {////////////////////PROBLEME ???
      f.lPictoAffiche();
    }
    
    if (lastLettre=='j' || lastLettre == 'J') {////////////////////PROBLEME ???
      g.lPictoAffiche();
    }
    
    if (lastLettre=='k' || lastLettre == 'K') {////////////////////PROBLEME ???
      h.lPictoAffiche();
    }
    
    if (lastLettre=='l' || lastLettre == 'L') {
      i.lPictoAffiche();////////////////////PROBLEME ???
    }
    
    if (lastLettre=='m' || lastLettre == 'M') {
      j.lPictoAffiche();////////////////////PROBLEME ???
    }
    
    if (lastLettre=='n' || lastLettre == 'N') {
      k.lPictoAffiche();////////////////////PROBLEME ???
    }
    
    if (lastLettre=='o' || lastLettre == 'O') {
      o.lPictoAffiche();
    }
    
    if (lastLettre=='p' || lastLettre == 'P') {
      p.lPictoAffiche();
    }
    
    if (lastLettre=='q' || lastLettre == 'Q') {
      q.lPictoAffiche();
    }
    
    if (lastLettre=='r' || lastLettre == 'R') {
      r.lPictoAffiche();
    }
    
    if (lastLettre=='s' || lastLettre == 'S') {
      s.lPictoAffiche();
    }
    
    if (lastLettre=='t' || lastLettre == 'T') {
      t.lPictoAffiche();
    }
    
    if (lastLettre=='u' || lastLettre == 'U') {
      u.lPictoAffiche();
    }
    
    if (lastLettre=='v' || lastLettre == 'V') {
      v.lPictoAffiche();
    }
    
    if (lastLettre=='w' || lastLettre == 'W') {
      w.lPictoAffiche();
    }
    
    if (lastLettre=='x' || lastLettre == 'X') {
      x.lPictoAffiche();
    }
    
    if (lastLettre=='y' || lastLettre == 'Y') {
      y.lPictoAffiche();
    }
    
    if (lastLettre=='z' || lastLettre == 'Z') {
      z.lPictoAffiche();
    }
  }
  else{ // si la chaine de caractère name est nulle (aucun caractère mémorisé)
    pushStyle();
    fill(255);
    rect(0,0,width,height);
    popStyle();
  
  }

}