Share
Explore
Les interactions
Ressources externes
Etape 1 : Une simple réaction au clic de la souris
Partons du code du et ajoutons une nouvelle méthode qui est exécutée chaque fois que l'on clique dans la fenêtre.
Le type , spécifique à Processing, est utilisé pour créer une variable unique contenant les informations des composantes de couleur Rouge, Vert, Bleu lorsque trois nombres sont spécifiés, ou d'intensité du gris lorsqu'un seul nombre est spécifié.
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;
color b = color(100); // Couleur initiale du fond
int c[][] = new int[n][m]; // 1. Déclaration d'un tableau à 2 dimensions
void setup() {
frameRate(25); // Taux de rafraîchissement de 25 Hz
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
// 2. Initialisation des éléments du tableau à 2 dimensions
for (int i=0;i<n;i++) {
for (int j=0;j<m;j++) {
c[i][j] = (int)random(10);
}
}
}
void draw() {
background(b);
b = color(100); // Retour au gris au cas où la couleur de fond a été changée
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);
text(c[i][j],x+a/2,y+a/2); // 3. Utilisation des éléments du tableau
}
}
}
void mousePressed() {
b = color(255,0,0); // Change la couleur du fond en rouge
}
Etape 2 : Récupérer les coordonnées de la souris
Les variables systèmes et permettent d'obtenir les coordonnées de la souris dans le système de coordonnées de la fenêtre.
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;
color b = color(100); // Couleur initiale du fond
int c[][] = new int[n][m]; // 1. Déclaration d'un tableau à 2 dimensions
void setup() {
frameRate(10); // Taux de rafraîchissement de 10 Hz
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
// 2. Initialisation des éléments du tableau à 2 dimensions
for (int i=0;i<n;i++) {
for (int j=0;j<m;j++) {
c[i][j] = (int)random(10);
}
}
}
void draw() {
background(b);
b = color(100); // Retour au gris au cas où la couleur de fond a été changée
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);
text(c[i][j],x+a/2,y+a/2); // 3. Utilisation des éléments du tableau
}
}
// Remarque : cette partie du code est en dehors des boucles
// pour n'être exécuté qu'une fois par cycle
fill(0,0,255);
if (mouseX != 0 && mouseY != 0) // Quand la souris passe sur la fenêtre,
// afficher ses coordonnées à côté du pointeur
text(mouseX+","+mouseY,mouseX,mouseY);
}
void mousePressed() {
b = color(255,0,0); // Change la couleur du fond en rouge
}
Etape 3 : Trouver sur quelle case de la grille passe la souris
Pour trouver sur quelle case de la grille est positionnée la souris, il faut faire un changement de coordonnées : passer du système de coordonnées de la fenêtre, de type (x,y), au système de coordonnées de la grille, de type (i,j).
Les relations surlignées ci-dessous sont en quelque sorte l'inverse l'une de l'autre. Elles permettent de passer respectivement du système de la fenêtre à celui de la grille et inversement.
Une variable de type est utilisée pour vérifier si le curseur est au-dessus de la grille à cet instant. Les conditions qui la compose sont hétérogènes dans le sens où elles font intervenir à la fois des variables du système de coordonnées de la fenêtre et du système de coordonnées de la grille. Il n'y a pas de raison fondamentale à cela. On pourrait ne tester que des variables du même système de coordonnées mais il me semble que c'est la forme la plus concise pour que le fonctionnement soit correct.
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;
color b = color(100); // Couleur initiale du fond
int c[][] = new int[n][m]; // 1. Déclaration d'un tableau à 2 dimensions
void setup() {
frameRate(10); // Taux de rafraîchissement de 10 Hz
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
// 2. Initialisation des éléments du tableau à 2 dimensions
for (int i=0;i<n;i++) {
for (int j=0;j<m;j++) {
c[i][j] = (int)random(10);
}
}
}
void draw() {
background(b);
b = color(100); // Retour au gris au cas où la couleur de fond a été changée
int mousei = (mouseX - x0) / a; // Changement de système de coordonnées :
int mousej = (mouseY - y0) / a; // (mouseX,mouseY) -> (mousei,mousej)
boolean dansLaGrille = mouseX >= x0 && mousei < n && mouseY >= y0 && mousej < m;
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
if (i == mousei && dansLaGrille)
fill(0,255,255); // Colorie le numéro de la colonne où se trouve la souris
text(i,x+a/2,y-a/2); // Décalage vertical pour écrire au-dessus des cases
}
fill(0);
if (i == 0) { // Au début de chaque ligne
if (j == mousej && dansLaGrille)
fill(0,255,255); // Colorie le numéro de la ligne où se trouve la souris
text(j,x-a/2,y+a/2); // Décalage horizontal pour écrire au-dessus des cases
}
fill(255,0,0);
text(c[i][j],x+a/2,y+a/2); // 3. Utilisation des éléments du tableau
}
}
// Remarque : cette partie du code est en dehors des boucles
// pour n'être exécuté qu'une fois par cycle
fill(0,0,255);
if (mouseX != 0 && mouseY != 0) // Quand la souris passe sur la fenêtre,
// afficher ses coordonnées à côté du pointeur
text(mouseX+","+mouseY,mouseX,mouseY);
}
void mousePressed() {
b = color(255,0,0); // Change la couleur du fond en rouge
}
Etape 4 : Interagir avec la case de la grille sur laquelle on clique
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;
color b = color(100); // Couleur initiale du fond
int c[][] = new int[n][m]; // 1. Déclaration d'un tableau à 2 dimensions
void setup() {
frameRate(10); // Taux de rafraîchissement de 10 Hz
size(800,300);
textSize(20); // Taille des caractères
textAlign(CENTER,CENTER); // Alignement horizontal et vertical
// 2. Initialisation des éléments du tableau à 2 dimensions
for (int i=0;i<n;i++) {
for (int j=0;j<m;j++) {
c[i][j] = (int)random(10);
}
}
}
void draw() {
background(b);
b = color(100); // Retour au gris au cas où la couleur de fond a été changée
int mousei = (mouseX - x0) / a; // Changement de système de coordonnées :
int mousej = (mouseY - y0) / a; // (mouseX,mouseY) -> (mousei,mousej)
boolean dansLaGrille = mouseX >= x0 && mousei < n && mouseY >= y0 && mousej < m;
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
if (i == mousei && dansLaGrille)
fill(0,255,255); // Colorie le numéro de la colonne où se trouve la souris
text(i,x+a/2,y-a/2); // Décalage vertical pour écrire au-dessus des cases
}
fill(0);
if (i == 0) { // Au début de chaque ligne
if (j == mousej && dansLaGrille)
fill(0,255,255); // Colorie le numéro de la ligne où se trouve la souris
text(j,x-a/2,y+a/2); // Décalage horizontal pour écrire au-dessus des cases
}
fill(255,0,0);
text(c[i][j],x+a/2,y+a/2); // 3. Utilisation des éléments du tableau
}
}
}
void mousePressed() {
b = color(255,0,0); // Change la couleur du fond en rouge
int mousei = (mouseX - x0) / a; // Changement de système de coordonnées :
int mousej = (mouseY - y0) / a; // (mouseX,mouseY) -> (mousei,mousej)
boolean dansLaGrille = mouseX >= x0 && mousei < n && mouseY >= y0 && mousej < m;
if (dansLaGrille) c[mousei][mousej] = (int)random(10);
}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.