Etape 1 : Dessiner une ligne horizontale de cases avec une boucle de compteur i
size(800,150);
int n = 12; // Nombre de cases
int a = 50; // Dimension d'une case
int x0 = 100; // Coordonnées du coin supérieur gauche de la ligne
int y0 = 50;
for (int i=0;i<n;i++) { // i numérote les cases de la ligne
int x = x0 + i*a; // Coordonnées du coin supérieur gauche de chaque case
int y = y0;
rect(x,y,a,a);
}
Etape 2 : Numéroter les cases
size(800,150);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
int n = 12; // Nombre de cases
int a = 50; // Dimension d'une case
int x0 = 100; // Coordonnées du coin supérieur gauche de la ligne
int y0 = 50;
for (int i=0;i<n;i++) { // i numérote les cases de la ligne
int x = x0 + i*a; // Coordonnées du coin supérieur gauche de chaque case
int y = y0;
fill(255);
rect(x,y,a,a);
fill(0);
text(i,x+a/2,y-a/2); // Décalage de a/2 pour écrire au-dessus des cases
}
Etape 3 : Afficher une valeur aléatoire dans chaque case
size(800,150);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
int n = 12; // Nombre de cases
int a = 50; // Dimension d'une case
int x0 = 100; // Coordonnées du coin supérieur gauche de la ligne
int y0 = 50;
for (int i=0;i<n;i++) { // i numérote les cases de la ligne
int x = x0 + i*a; // Coordonnées du coin supérieur gauche de chaque case
int y = y0;
fill(255);
rect(x,y,a,a);
fill(0);
text(i,x+a/2,y-a/2); // Décalage de -a/2 pour écrire au-dessus des cases
fill(255,0,0);
int c = (int)random(10);
text(c,x+a/2,y+a/2); // Décalage de +a/2 pour écrire dans les cases
}
Etape 4 : Dessiner une grille en ajoutant une boucle imbriquée de compteur j
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
int n = 12; // Nombre de cases horizontalement
int m = 4; // Nombre de cases verticalement
int a = 50; // Dimension d'une case
int x0 = 100; // Coordonnées du coin supérieur gauche de la grille
int y0 = 50;
for (int i=0;i<n;i++) { // i numérote (les cases de chaque ligne =>) les colonnes
for (int j=0;j<m;j++) { // j numérote les lignes
int x = x0 + i*a; // Coordonnées du coin supérieur gauche de chaque case
int y = y0 + j*a;
fill(255);
rect(x,y,a,a);
fill(0);
if (j == 0) // Au début de chaque colonne
text(i,x+a/2,y-a/2); // Décalage vertical pour écrire au-dessus des cases
if (i == 0) // Au début de chaque ligne
text(j,x-a/2,y+a/2); // Décalage horizontal pour écrire au-dessus des cases
fill(255,0,0);
int c = (int)random(10);
text(c,x+a/2,y+a/2); // Décalage de +a/2 pour écrire dans les cases
}
}
Etape 5 : Créer une animation avec les méthodes setup() et draw()
int n = 12; // Nombre de cases horizontalement
int m = 4; // Nombre de cases verticalement
int a = 50; // Dimension d'une case
int x0 = 100; // Coordonnées du coin supérieur gauche de la grille
int y0 = 50;
void setup() {
frameRate(2); // Taux de rafraîchissement de 2 Hz
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
}
void draw() {
for (int i=0;i<n;i++) { // i numérote (les cases de chaque ligne =>) les colonnes
for (int j=0;j<m;j++) { // j numérote les lignes
int x = x0 + i*a; // Coordonnées du coin supérieur gauche de chaque case
int y = y0 + j*a;
fill(255);
rect(x,y,a,a);
fill(0);
if (j == 0) // Au début de chaque colonne
text(i,x+a/2,y-a/2); // Décalage vertical pour écrire au-dessus des cases
if (i == 0) // Au début de chaque ligne
text(j,x-a/2,y+a/2); // Décalage horizontal pour écrire au-dessus des cases
fill(255,0,0);
int c = (int)random(10);
text(c,x+a/2,y+a/2); // Décalage de +a/2 pour écrire dans les cases
}
}
}
Que remarque-t-on?
Etape 6 : Introduire un tableau à deux dimensions
Cela permet de conserver la valeur de chaque case au cours du temps même lors d'une animation.
Ici, c'est la variable locale c qui doit être tranformée en tableaux car c'est elle qui contient les valeurs affichées dans chaque case.
Jusque-là, une seule variable était suffisante car elle était calculée "à la volée", juste au moment où on devait l'afficher. Ensuite, sa valeur était perdue, remplacée par la valeur de la case suivante.
Comme le tableau c[][] qui la remplace est déclaré au niveau global, il peut conserver ses valeurs au cours du temps.
Grâce à ses deux dimensions, il peut être utilisé dans une boucle imbriquée à deux niveaux qui est pratique pour parcourir les cases d'une grille par exemple.
Apparemment, l'exécution du code suivant revient donc à l'étape 4, avant l'animation, mais ce n'est qu'une apparence car, maintenant, on peut tirer avantage de l'animation comme nous allons le voir en introduisant
Les tableaux à deux dimensions
