Share
Explore

icon picker
Exercices

Exercice 1 : Un mini Paint

Le peut être modifié pour créer une petite application de coloriage.
Une palette contient une série de couleurs.
Si on clique sur une des cases de cette palette, on sélectionne la couleur indiquée par un petit triangle pointé sur sa case.
On peut colorier les cases de la grille de dessin avec la couleur sélectionnée en cliquant () ou en "glissant et appuyant" () dessus.
Capture d’écran 2020-04-19 à 12.54.54.png
Pour générer les couleurs de la palette, on peut s'inspirer de cet.
Il est basé sur la commande de Processing qui permet de passer du mode de couleur RGB habituel au mode de couleur
, basé sur une autre représentation des couleurs où les trois composantes ont une signification différente.
Voici le code permettant de générer un tableau contenant les couleurs de la palette illustrée ci-dessus :
color p[] = new color[m]; // Couleurs de la palette
// Initialisation de la palette de couleurscolorMode(RGB, 255, 255, 255);for (int j=0;j<m/2;j++) { p[j] = color(255-2.0*j/m*255); // Dégradés de gris}colorMode(HSB, 360, 100, 100);for (int j=m/2;j<m;j++) { p[j] = color((j-m/2)*720/(m+2), 100, 100); // Arc-en-ciel}colorMode(RGB, 255, 255, 255); // Retour au mode RGB
Cet exercice permet de combiner les notions vues précédemment :
Un tableau à une dimensions contient les couleurs de la palette.
Un tableau à deux dimensions contient les codes des couleurs des cases de la grille. Ce code est un numéro qui fait référence à l'indice du tableau à une dimension.
Les interactions permettent de détecter où on clique avec la souris pour déclencher l'action correspondante : sélectionner une couleur lorsque l'on est au-dessus de la palette ou colorier une case lorsque l'on est au-dessus de la grille.

Correction de l'exercice 1

This link can't be embedded.
int n = 25; // Nombre de cases horizontalementint m = 25; // Nombre de cases verticalementint a = 20; // Dimension d'une caseint x0 = 200; // Coordonnées du coin supérieur gauche de la grilleint y0 = 50;int b = m/2; // Couleur choisie dans la palette initialement
color p[] = new color[m]; // Couleurs de la palette
color c[][] = new color[n][m]; // Déclaration d'un tableau à 2 dimensions
void setup() { frameRate(30); // Taux de rafraîchissement de 30 Hz size(800,600);
// 1. Initialisation de la palette de couleurs colorMode(RGB, 255, 255, 255); for (int j=0;j<m/2;j++) { p[j] = color(255-2.0*j/m*255); // Dégradés de gris } colorMode(HSB, 360, 100, 100); for (int j=m/2;j<m;j++) { p[j] = color((j-m/2)*720/(m+2), 100, 100); // Arc-en-ciel } colorMode(RGB, 255, 255, 255); // Retour au mode RGB
// 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] = p[0]; // Remplir les cases de la grille // en blanc = couleur de la première case de la palette } }}
void draw() { background(100); // Fond gris // Dessin de la grille for (int i=0;i<n;i++) { // i numérote 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(c[i][j]); // Couleur de chaque case de la grille rect(x,y,a,a); // Dessin de chaque case de la grille } } // Dessin de la palette for (int j=0;j<m;j++) { // j numérote les lignes int y = y0 + j*a; fill(p[j]); // Couleur de chaque case de la palette rect(100,y,a,a); // Dessin de chaque case de la palette // Dessin du curseur triangulaire if (j == b) triangle(100,y+a/2,100-a,y,100-a,y+a); }}
void mousePressed() { interaction();}
void mouseDragged() { interaction();}
void interaction() { 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] = p[b]; // Change la couleur de la case avec la couleur sélectionnée boolean dansLaPalette = mouseX >= 100 && mouseX < 100+a && mouseY >= y0 && mousej < m; if (dansLaPalette) b = mousej; // Change la couleur sélectionnée dans la palette}

Exercice 2 : Des pions qui rebondissent dans une grille

Dans une grille de 25x25 cases de 20 pixels de côté, 10 pions noirs et ronds de 10 pixels de diagonale se déplacent en rebondissant sur les côtés de la grille. Les pions peuvent se déplacer indépendamment d'une case à la fois horizontalement, verticalement ou en diagonale.
Il s'agit d'utiliser deux tableaux à une dimension qui contient les différentes coordonnées des pions dans le système de la grille : i et j de chaque pion.
Capture d’écran 2020-04-28 à 11.46.08.png

Correction de l'exercice 2

This link can't be embedded.
int n = 25; // Nombre de cases horizontalementint m = 25; // Nombre de cases verticalementint a = 20; // Dimension d'une caseint x0 = 150; // Coordonnées du coin supérieur gauche de la grilleint y0 = 50;
int np = 10; // Nombre de pions
// Déclaration des tableaux contenant les caractéristiques des pions// dans le système de coordonnées de la grille (i,j)int pi[] = new int[np]; // Composantes horizontales des positionsint pj[] = new int[np]; // Composantes verticales des positionsint vi[] = new int[np]; // Composantes horizontales des déplacementsint vj[] = new int[np]; // Composantes verticales des déplacements
void setup() { size(800,600); frameRate(10); // Initialisation des tableaux des caractéristiques des pions for (int p=0;p<np;p++) { // On parcoure la série de pions pi[p] = (int)(random(n-2))+1; // Entre 1 et n-1 (pas sur les bords) pj[p] = (int)(random(m-2))+1; // Entre 1 et m-1 vi[p] = (int)(random(3))-1; // Entre -1 et 1 (cases adjacentes) vj[p] = (int)(random(3))-1; // Entre -1 et 1 }}
void draw() { background(100); // Dessin de la grille for (int i=0;i<n;i++) { // i numérote les colonnes for (int j=0;j<m;j++) { // j numérote les lignes int x = x0 + i*a; // Coordonnées (x,y) du coin supérieur gauche de chaque case int y = y0 + j*a; // en fonction des coordonnées de la grille (i,j) fill(255); rect(x,y,a,a); } } // Animation et dessin des pions for (int p=0;p<np;p++) { // On parcoure la série de pions pi[p] += vi[p]; // Déplacement des pions pj[p] += vj[p]; if (pi[p] <= 0 || pi[p] >= n-1) vi[p] = -vi[p]; // Rebonds if (pj[p] <= 0 || pj[p] >= m-1) vj[p] = -vj[p]; // Dessin des pions fill(0); int x = x0 + pi[p]*a + a/2; // Coordonnées (x,y) du centre de la case int y = y0 + pj[p]*a + a/2; // où se trouve le pion ellipse(x,y,a/2,a/2); }}

Exercice 3 : Variante avec des murs dans la grille

Capture d’écran 2020-05-05 à 11.38.00.png
Le code ci-dessous est une variante de l'exercice précédent où on construit des "murs" (cases noires) dans la grille.
Un tableau à 2 dimensions permet de mémoriser les emplacements des murs : 0 pour une case vide, 1 pour une case murée.
L'exercice consiste à trouver comment faire rebondir les balles de l'exercice précédent sur les murs et non plus seulement sur les bords de la grille.
int n = 25; // Nombre de cases horizontalementint m = 25; // Nombre de cases verticalementint a = 20; // Dimension d'une caseint x0 = 150; // Coordonnées du coin supérieur gauche de la grilleint y0 = 50;
int np = 10; // Nombre de pions
// Déclaration des tableaux contenant les caractéristiques des pions// dans le système de coordonnées de la grille (i,j)int pi[] = new int[np]; // Composantes horizontales des positionsint pj[] = new int[np]; // Composantes verticales des positionsint vi[] = new int[np]; // Composantes horizontales des déplacementsint vj[] = new int[np]; // Composantes verticales des déplacements
// Déclaration d'un tableau 2D pour la grilleint grid[][] = new int [n][m];
void setup() { size(800,600); frameRate(10); // Initialisation des tableaux des caractéristiques des pions for (int p=0;p<np;p++) { // On parcoure la série de pions pi[p] = (int)(random(n-2))+1; // Entre 1 et n-1 (pas sur les bords) pj[p] = (int)(random(m-2))+1; // Entre 1 et m-1 vi[p] = (int)(random(3))-1; // Entre -1 et 1 (cases adjacentes) vj[p] = (int)(random(3))-1; // Entre -1 et 1 } // Initialisation d'un tableau 2D pour la grille for (int i=0;i<n;i++) { // i numérote les colonnes for (int j=0;j<m;j++) { grid[i][j] = (int)(random(10)); // Entre 0 et 9 if (grid[i][j] > 1) grid[i][j] = 0; // => 9 chances sur 10 d'avoir 0 } }}
void draw() { background(100); // Dessin de la grille for (int i=0;i<n;i++) { // i numérote les colonnes for (int j=0;j<m;j++) { // j numérote les lignes int x = x0 + i*a; // Coordonnées (x,y) du coin supérieur gauche de chaque case int y = y0 + j*a; // en fonction des coordonnées de la grille (i,j) if (grid[i][j] == 1) fill(0); // Noir else fill(255); // Blanc rect(x,y,a,a); } } // Animation et dessin des pions for (int p=0;p<np;p++) { // On parcoure la série de pions pi[p] += vi[p]; // Déplacement des pions pj[p] += vj[p]; if (pi[p] <= 0 || pi[p] >= n-1) vi[p] = -vi[p]; // Rebonds if (pj[p] <= 0 || pj[p] >= m-1) vj[p] = -vj[p]; // Dessin des pions fill(0); int x = x0 + pi[p]*a + a/2; // Coordonnées (x,y) du centre de la case int y = y0 + pj[p]*a + a/2; // où se trouve le pion ellipse(x,y,a/2,a/2); }}

Correction de l'exercice 3

Pour éviter que les pions ne soient sur une case noire dès le début :
Initialiser le tableau des pions après le tableau de la grille (inverser les deux parties de code par rapport au code précédent)
Si un pion est sur une case noire, mettre la case en blanc
Tester si la case où sera le pion juste après son déplacement est un mur ou non

Loading…
int n = 25; // Nombre de cases horizontalementint m = 25; // Nombre de cases verticalementint a = 20; // Dimension d'une caseint x0 = 150; // Coordonnées du coin supérieur gauche de la grilleint y0 = 50;
int np = 10; // Nombre de pions
// Déclaration des tableaux contenant les caractéristiques des pions// dans le système de coordonnées de la grille (i,j)int pi[] = new int[np]; // Composantes horizontales des positionsint pj[] = new int[np]; // Composantes verticales des positionsint vi[] = new int[np]; // Composantes horizontales des déplacementsint vj[] = new int[np]; // Composantes verticales des déplacements
// Déclaration d'un tableau 2D pour la grilleint grid[][] = new int [n][m];
void setup() { size(800,600); frameRate(10); // Initialisation d'un tableau 2D pour la grille for (int i=0;i<n;i++) { // i numérote les colonnes for (int j=0;j<m;j++) { grid[i][j] = (int)(random(10)); // Entre 0 et 9 if (grid[i][j] > 1) grid[i][j] = 0; // => 9 chances sur 10 d'avoir 0 } } // Initialisation des tableaux des caractéristiques des pions for (int p=0;p<np;p++) { // On parcoure la série de pions pi[p] = (int)(random(n-2))+1; // Entre 1 et n-1 (pas sur les bords) pj[p] = (int)(random(m-2))+1; // Entre 1 et m-1 vi[p] = (int)(random(3))-1; // Entre -1 et 1 (cases adjacentes) vj[p] = (int)(random(3))-1; // Entre -1 et 1 if (grid[pi[p]][pj[p]] == 1) // Si la case où se trouve le pion est noire, grid[pi[p]][pj[p]] = 0; // on la met en blanc }}
void draw() { background(100); // Dessin de la grille for (int i=0;i<n;i++) { // i numérote les colonnes for (int j=0;j<m;j++) { // j numérote les lignes int x = x0 + i*a; // Coordonnées (x,y) du coin supérieur gauche de chaque case int y = y0 + j*a; // en fonction des coordonnées de la grille (i,j) if (grid[i][j] == 1) fill(0); // Noir else fill(255); // Blanc rect(x,y,a,a); } } // Animation et dessin des pions for (int p=0;p<np;p++) { // On parcoure la série de pions // Rebonds sur les murs // Tester si la case où sera le pion juste après son déplacement est un mur ou non if (pi[p] > 0 && pi[p] < n-1 && pj[p] > 0 && pj[p] < m-1) // Si pas de rebonds sur les bords, if (grid[pi[p]+vi[p]][pj[p]+vj[p]] == 1) { // Si le pion va se cogner sur un mur vi[p] = -vi[p]; // Il rebondit vj[p] = -vj[p]; } pi[p] += vi[p]; // Déplacement des pions pj[p] += vj[p]; if (pi[p] <= 0 || pi[p] >= n-1) vi[p] = -vi[p]; // Rebonds if (pj[p] <= 0 || pj[p] >= m-1) vj[p] = -vj[p]; // Dessin des pions fill(0); int x = x0 + pi[p]*a + a/2; // Coordonnées (x,y) du centre de la case
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.