Découvrir les ingrédients des algorithmes avec Processing

Transcription

1 Découvrir les ingrédients des algorithmes avec Processing Dans cette partie on explore un environnement Java qui sert surtout à produire des graphiques ( animés)..il s agit de : Processing. I. Séquences d instruction Ouvrir Processing : l espace de travail est le suivant : 1) Ecrire la ligne de code suivante : println( hello World ) ; et exécuter le programme. 2) En plus du «hello world» dans la console il est apparu une fenêtre de dessin ( sans dessin) de dimension 100 pixels x 100 pixels. L instruction pour modifier cette dimension est : size(largeur,hauteur) ; 3) Essayez avec : size(200,200) ; 4) Le fond de la fenêtre est par défaut gris. On va le changer en blanc avec l instruction : background(255,255,255) ; RQ : Ecran et couleur Observer l écran à l aide du microscope fourni, les points lumineux sont appelés des sous pixels, il y en a de trois couleurs :,., et.. Les codes couleurs sont à exprimer en RVB, c'est-à-dire 3 chiffres qui varient de 0 à 255 pour indiquer l intensité lumineuse de chaque sous pixel Rouge, Vert et Bleu. Par exemple (0,0,0) aucun sous pixel n est allumé, dans la couleur est noir. (255,0,0) seuls les sous pixels rouges sont allumés donc la couleur est rouge (0,255,0) seuls les sous pixels sont allumés donc la couleur est (0,0,255) seuls les sous pixels sont allumés donc la couleur est (255,255,255) tous les sous pixels sont éclairés la couleur est Un quatrième argument optionnel, dans [0,255], gère la transparence : 255 = opaque, 0 = transparente. 1

2 5) Quand on travaille en 2 dimensions (2D), on utilise deux axes de coordonnées x et y correspondant respectivement à la largeur (axe horizontal) et à la hauteur (axe vertical) d'une situation. Dans la fenêtre de Processing, le coin en haut à gauche correspond aux valeurs x=0 et y=0. Les valeurs x sont croissantes vers la droite et les valeurs y sont croissantes vers le bas, contrairement à notre habitude en math. Bien qu'il soit possible d'en définir d'autres, le langage Processing nous offre certaines formes géométriques prédéfinies. Il s agit de réaliser dans une fenêtre de taille 400 x 400 pixels le dessin suivant : f 2

3 Taper et compléter le programme suivant : size (400,400); background (?,?,?); fill (?,?,?); //le rectangle est bleu rect (?,?,?,?); //le rectangle est à 25 px du bord gauche, au milieu pour l axe des ordonnées et mesure 25 px sur 80px fill(?,?,?); //la balle est blanche stroke(255,0,0); //avec un contour rouge strokeweight(3);//le contour a une épaisseur de 3 px ellipse(200,200,20,20); //la balle est au milieu de la fenêtre et mesure 20 px de diamètre. L ordre des instructions est-il important? FAITES VALIDER VOTRE TRAVAIL PAR LE PROFESSEUR Enregistrer votre travail pour pouvoir l utiliser plus tard sur votre site (pong1) A RETENIR et à faire apparaitre dans la partie programmation de votre site : Un programme est une séquence (série) d, à effectuer pour obtenir un résultat. C est la forme électronique et numérique d un exprimé dans un langage de programmation et destiné à être exécuté par une machine. II. Deuxième ingrédient : les variables Une variable permet de mémoriser des valeurs. Le nom d une variable peut contenir des lettres et des chiffres, mais doit débuter par une lettre minuscule. Par exemple : x x31 vitesse centrederotation 3

4 Ce ne doit bien entendu pas être un mot réservé du langage, comme print ou line! Nos premières variables seront des entiers exacts [comme -203] ou des nombres réels approchés [comme ]. L'ensemble des valeurs possibles pour une variable se nomme un type. Par exemple, int est le type entier, et float un type réel approché. Un ordinateur ne peut connaître TOUS les nombres. Par exemple, les entiers de type int varient dans [-2 31,2 31-1].= [ , ] (32 bits) Pour éviter de faire plusieurs fois le même calcul, on utilise les variables : Rq : noter que width et height contiennent la largeur et la hauteur du Sketch de Processing. Ici les variables sont x et y. L'instruction int x = 8; déclare la variable x comme étant de type entier int, et initialise sa valeur à 8. On pouvait aussi simplement déclarer la variable par int x; puis l'initialiser plus tard par x = 8; Au moment de son utilisation dans une expression, une variable doit être à la fois déclarée et initialisée! Elle ne peut pas changer de type! L'opérateur = permet de changer la valeur d'une variable : variable = expression; Exemples : x = 3; x = y + 1; x = x + 2; x + 2 = x; une affectation : x devient égal à x+2 float hypo = sqrt(x * x + y * y); //sqrt est une fonction qui calcule la racine carrée du nombre donné en argument. projx = r * cos(pi/5); // la constante PI = RQ : Le signe = de Processing/Java n'est pas celui des maths! Dans l'instruction x = x + 2;, ne simplifiez pas par x! PREVOIR sans l ordinateur, ce que va être affiché, FAIRE VALIDER PAR LE PROFESSEUR, PUIS taper le code pour vérifier. Prévision Affichage réél Explications 4

5 On appelle conversion de type de données, parfois transtypage (traduction de l'anglais cast), le fait de modifier le type d'une donnée en une autre. Cela se fait en rajoutant devant le type entre parenthèse. Que se passe-t-il si on tape l instruction : x=y ; Proposez une solution pour supprimer l erreur, sans intervertir y et x dans l instruction.. Faites afficher la nouvelle valeur de x (Dans une phrase du style : «La nouvelle valeur de x est :..). Que se passe-t-il si on tape l instruction : y=x ; Faites afficher la nouvelle valeur de y (Dans une phrase du style : «La nouvelle valeur de y est :..). FAIRE VALIDER PAR LE PROFESSEUR Il existe d autres types en particulier String pour les chaines de caractère : String couleur = «rouge» ; Et boolean pour les booléens que nous verrons plus tard. Dans notre première incursion dans Processing, nous avons directement écrit du code (une liste d instructions) qui s exécutaient du début jusqu à la fin. Nous allons utiliser cette fois-ci des méthodes qui contiendront des morceaux de notre programme. Processing nous offre une instruction ayant pour fonction de contenir le code de début de notre programme. Il s'agit de la méthode setup() : void setup() { C'est à l'intérieur des accolades de la méthode setup() que nous allons placer tout le code qui doit être exécuté au début de notre programme. Pour l'instant, ne cherchez pas à savoir à quoi sert le mot void, sachez juste qu'il faut l'écrire, suivi du mot setup, puis de parenthèses, et enfin les accolades. La plupart du temps, nous nous servirons de la méthode setup() pour définir la taille de notre sketch. Cette taille ne peut être définie qu'une seule fois ce qui tombe bien, car le démarrage n'a lieu qu'une seule fois dans la vie d'un programme. void setup() { size(500,500); 5

6 La méthode draw(), propre à Processing, permet d exécuter (30 fois par seconde) les instructions se trouvant dans les accolades. void draw(){ instructions Par exemple taper le code suivant et commenter le. Vous ne connaissez pas l instruction random (255)!! Aidez vous en allant voir les explications dans l API de processing : sur le site de processing.org (onglet reference, puis Ctrl+F pour chercher random()) On peut modifier la fréquence de répétition dans draw() par l instruction : framerate(10) ; // qui exécute les instructions 10 fois par seconde Tester cette instruction dans le programme précédent. Essayer de prévoir ce que fait le programme suivant avant de le taper ATTENTION : portée des variables. La variable x DOIT être ici déclarée en dehors de toute méthode (setup et draw), sinon elle ne serait utilisable que dans la méthode dans laquelle est a été déclarée. On peut retenir que la variable n existe qu entre les accolades (le bloc) entre lesquelles elle a été déclarée. Que se passe-t-il si on déplace l instruction background dans la méthode setup? Défi 1 : Reprendre le programme du début (pong1), l enregistrer sous le nom pong2. Votre mission : Faire bouger la balle de sa position du début vers la droite (elle sort et on la perd pour l instant). FAITES VALIDER PAR LE PROFESSEUR Rq : l opérateur %(lire : modulo) retourne le reste de la division euclidienne. Ex : 7 % 2 retourne le reste de la division euclidienne de 7 par 2, c est à dire : 1. Exemple : 1%10 = 2%10 = 9%10 = 10%10 = 11%10 = (Attention aux priorités des opérations, % est prioritaire sur l addition et la soustraction) 6

7 Défi 2 : Faire tomber la balle de pong1 du haut vers le bas, elle doit remonter directement en haut lorsqu elle sort de la fenêtre. (Ne pas utiliser de structure conditionnelle) L enregistrer sous le nom pong3 FAITES VALIDER PAR LE PROFESSEUR 7

8 III. Troisième ingrédient : l instruction conditionnelle : LA PRISE DE DECISION Dans la vie, comme en algorithmique, la prise de décision est essentielle. La prise de décision nécessite des tester un certains nombre de conditions. Si la condition est vérifiée (vraie-true) un certain traitement sera réalisé, sinon un autre traitement sera réalisé. Exemple : condition Si condition est VRAI Si condition est fausse Il pleut? Je prendrai mon parapluie avant de Sinon je sors directement sortir A recopier dans votre site : Condition SI - ALORS Condition SI - ALORS - SINON SI-SINON SI if (condition) { Instruction1 ; Instruction2 ; if (condition) { Instruction1 ; else { Instruction2 ; Instruction3; if (condition1) { Instruction1 ; else if (condition2){ Instruction2 ; Instruction3; 1. Comment programmer le fait de faire des choix. A ce stade, nous savons programmer une liste d'instruction, qui... font toujours la même chose! Voilà qui est bien limité. Un vrai programme doit pouvoir exécuter des instructions différentes selon certaines conditions et il existe une structure universelle pour implémenter ce mécanisme. Par exemple : if(hour() == 12) { background(255,255,0) ; //la méthode hour() renvoie un entier (int) entre 0 et 23, correspond à l heure du systeme Le fond de notre sketch sera jaune si il est midi 8

9 ATTENTION : Noter le «==» qui permet de tester l égalité!! «=» permet d affecter une valeur à une variable (x=3 ; ) Par contre, x==3 ; est une expression booléenne, elle prend la valeur true si la condition est réalisée (la valeur de x est effectivement égale à 3) ou false, si la condition n est pas réalisée (la valeur de x n est pas 3) Si nous voulons que le fond soit jaune le matin (c'est-à-dire entre 0 et 12 h!!) et bleu l après midi (entre 12 et 23!!) nous écrirons : if(hour() < 12) { background(255,255,0) ; //fond vert else { background(0,0,255) ; //fond bleu La même chose, mais le fond doit être magenta entre 12h et 13h if(hour() < 12) { background(255,255,0) ; //fond vert else if (hour() < 13){ background(255,0,255) ; //fond magenta else{ background(0,0,255) ; //fond bleu 2. Définir des conditions à tester. Pour définir le test à effectuer nous avons vu que nous pouvions comparer deux valeurs numériques, voici une liste de tests possibles pour des nombres a et b et des chaînes de caratères s et c: // Vrai si et seulement si le nombre a est strictement plus petit que le nombre b: a < b // Vrai si et seulement si le nombre a est strictement plus petit ou égal au nombre b: a <= b // Vrai si et seulement si le nombre a est égal 1 au nombre b: 9

10 a == b // avec bien sûr les symboles similares pour > et >= (strictement plus grand et plus grand ou égal) et!= (pas égal). // Vrai si et seulement si la chaîne s est égale à la chaîne c equal(s, c) Nous pouvons ensuite combiner ces conditions : // Vrai si et seulement si une_condition ET autre_condition sont vraies : une_condition && autre_condition // Vrai si et seulement si une_condition OU autre_condition, ou les deux, sont vraies : une_condition autre_condition // Vrai si et seulement si une_condition n'est PAS vraie : (!une_condition) ce qui nous permet de définir des expressions aussi complexes que nous avons besoin, par exemple : // Vrai si et seulement si x est plus grand que a et plus petit que b donc dans l'intervale ]a, b[: a < x && x < b // Vrai si et seulement si la reponse égale oui en minuscule ou majuscule : equal(reponse, "oui") equal(reponse, "OUI") // Vrai si et seulement si l'age est plus que 10 et le nom n'est pas Jean: age > 10 && (! equal(nom, "Jean")) en utilisant des parenthèses pour ne pas mélanger les termes de ces expressions. 3. Un nouveau type de variable. Les variables qui ne prennent que les valeurs true et false, sont des variables booléennes. La valeur true veut dire vrai et la valeur false veut dire faux, par exemple true && true donne true puisque si deux choses sont vraies alors on peut dire que l'une ET l'autre sont vraies. De même true && false donne false puisque si une chose est vraie et l'autre fausse on ne peut dire que l'une ET l'autre sont vraies. Exercice : PREVOIR sans l ordinateur, ce que va être affiché, FAIRE VALIDER PAR LE PROFESSEUR, PUIS taper le code pour vérifier. 10

11 int x = 3 ; int y =10; if (x>3) { println("ok") ; else { println("ko") ; if ((x==2) (x>18)){ println("ok") ; else { println("ko") ; if ((x==2)&&(y>18)){ println("ok") ; else { println("ko") ; if (x<2) { println("ok") ; else if (x<4) { println("kook") ; else { println("ok") ; Prévision Affichage réél Explications boolean a =true; boolean b =false; println("a&&b : " +(a&&b)); println("a b : " +(a b)); println("!a b : " +(!a b)); println("!(a&&b) : " +(!(a&&b))); Modifier la dernière partie du code précédent, pour utiliser les opérateurs ou &&, et ne pas imbriquer les if. FAIRE VALIDER PAR LE PROFESSEUR Défi : PONG Dans notre dernière version de pong, la balle ne rebondit pas! Nous allons essayer de la faire rebondir!! 1) Reprendre le code de pong2 2) Déclarer une variable dx de type entier et une variable dy de type entier (ces variables seront déclarées en dehors de toutes méthodes (c'est-à-dire tout en haut, pour que ce soit des variables globales-nous reverrons cela). Ces variables représentent la vitesse de la balle, à chaque nouvelle position x = x+dx et y = y +dy 3) Faites partir la balle du milieu du canevas (c est le nom de la fenêtre). (utiliser width et height, qui signifient largeur et hauteur du canevas) 4) Affecter les valeurs 1 et 2 à dx et dy (cela se fera dans la méthode setup). 5) Faites tourner plusieurs fois le programme en affectant à dx et dy différentes valeurs (positive et négative). Observez 6) Affectez à dx la valeur 1 et à dy la valeur 2. Comment faire pour que la balle rebondisse sur le bord du bas? Améliorer, pour que la balle rebondisse lorsque son bord et non son centre touche le bord. (Reprenez votre programme, en déclarant une variable rayonballe, et utiliser rayonballe, lorsque c est nécessaire). FAIRE VALIDER PAR LE PROFESSEUR 7) Faites en sorte que la balle rebondisse sur tous les bords FAIRE VALIDER PAR LE PROFESSEUR 8) Faites bouger la raquette avec la souris (aide : mousex et mousey donne la position de la souris) 11

12 9) Faites rebondir la balle sur la raquette, si la raquette ne permet pas le rebond, le jeu est fini et la méthode draw ne doit plus être appelée, cela se fait en donnant l instruction : noloop() ; 10) Allez voir dans l aide ce que fait la méthode keypressed() et à quoi correspond key, pour que le jeux recommence (loop() ) lorsque l on appuie sur la touche o. 11) Améliorez encore un peu, pour qu un message s affiche («GAME OVER Pour rejouer appuyer sur la touche o») lorsqu on a perdu. AIDE : allez voir la fonction text() 12) Si cela n est pas fait, rajouter des commentaires à votre programme, puis mettez le sur une page de votre site!!! POUR LES PLUS RAPIDES : - Faites en sorte que l on puisse donner de l effet à la balle, c'est-à-dire : - Rajouter une cible (un cercle c est plus facile), le jeu est gagné si la cible est détruite, puis selon votre inspiration 12

13 IV. Quatrième ingrédient : les boucles : A recopier sur votre site : Boucle WHILE while(condition){ Instruction1 ; Instruction2 ; Boucle FOR for (int compteur = 0 ;compteur <fin ;compteur++) { Instruction1 ; Instruction2 ; Lire le cours de Jean-Noël Lafargue à l adresse : Ex1 : Réalisé ce dégradé dans un canevas de 255*255 FAIRE VALIDER Ex2 : Réaliser ce dessin en utilisant une boucle for, dans un canevas de 100*100 : FAIRE VALIDER 13

14 Ex3 : Puis ce dessin : FAIRE VALIDER Ex4 : Puis celui-ci : FAIRE VALIDER : A enregistrer pour mettre sur votre site Utiliser 2 boucles for imbriquées FAIRE VALIDER Défi : réaliser ce dessin et le FAIRE VALIDER A enregistrer pour mettre sur votre site Pour les plus rapides : Réaliser le dessin ci-dessous. Il ne faut qu'une seule boucle. Utiliser translate(width/2,height/2) pour que le repère du canevas soit au centre, cela sera plus facile. Le code ne fait pas plus de 8 lignes. Vous pouvez observer une version interactive (étoile.jar) dans la dropbox dans le répertoire Processing pour comprendre son fonctionnement. Il n a que des lignes droites! 14

15 15

16 V. Cinquième ingrédient : les fonctions : L objectif des fonctions est de : une. - Découper les programmes en sous-parties ce qui permet de diviser les difficultés et de les traiter une par - Avoir un code plus facile à lire, car plus court et plus facile à débugger. - permettre d utiliser plusieurs fois une portion de code sans tout réécrire. Une fonction (ou méthode lorsqu on est en programmation orientée objet) est un bloc qui contient une série d'instructions que l'on souhaite réutiliser. L'intérêt des fonctions réside dans la possibilité de réutiliser du code : nous aimerions écrire une seule fois une action tout en pouvant la répéter autant de fois que nécessaire. En englobant notre code dans une fonction, il devient possible d'appeler celle-ci à différents moments de notre programme. Vous connaissez déjà plusieurs fonctions, mais uniquement en tant qu'utilisateur. Par exemple, rect(), ellipse(), line() stroke() sont toutes des fonctions. Voici comment votre pong aurait pu être écrit : void draw() { effacer(); dessinerraquette(); dessinerballe(); avancerballe(); rebondir(); Evidemment reste encore à écrire toutes les fonctions : effacer(), dessinerballe(). Le code est plus facile à lire. Définir une fonction Lorsque nous créons nos propres fonctions, il faut donner à chacune d'entre elles un nom. Une fois la fonction définie, on peut s'en servir dans le programme. Il suffit de l'appeler par son nom. Une fonction est définie en trois parties : - Le type de la valeur de retour communiquée éventuellement, au reste du programme. Si aucune valeur n est retournée au reste du programme, on utilise le mot clef : void - Son nom - Les arguments, éventuellement, nécessaires à la fonction. Ce qui donne : typedelavaleurretournée nomdelafonction (arguments ) { instructions ; 16

17 Premier exemple void setup() { size(200,200); void draw() { background(255); dessineruncerclenoir(); void dessineruncerclenoir() { fill(0,0,0); ellipse(50,50,20,20); Lorsque l instruction dessineruncerclenoir(); est lue, le programme exécute, les instructions de la fonction dessineruncerclenoir(). Le mot clef void signifie que la fonction ne retourne pas de valeur au programme. Maintenant nous aimerions que cette fonction dessine toujours un cercle noir, mais que l on puisse indiquer où le cercle doit se placer. void setup() { size(200,200); void draw() { background(255); dessineruncerclenoir(20,30); dessineruncerclenoir(50,100); dessineruncerclenoir(150,150); void dessineruncerclenoir(int x, int y) { fill(0,0,0); ellipse(x,y,20,20); Nous rajoutons des arguments. Il faut indiquer le type des arguments. Modifier le code précédent pour que l on puisse aussi indiquer le rayon du cercle, et tracer 3 cercles de rayons différents. FAIRE VALIDER. Retourner une valeur int sum(int a, int b, int c) { int total = a + b + c; return total; Cette fonction additionne trois entiers et retourne la valeur de la somme. Notez la ligne : return total ; cela signifie que total va être retournée au reste du programme. 17

18 int x = sum(5,6,8); int y = sum(8,9,10) * 2; int z = sum(x,y,40); line(100,100,110,sum(x,y,z)); Notez que c'est la position des arguments qui détermine quelle valeur sera affectée à quel argument. Pour résumer notre exemple, on a créé une méthode qui retourne le résultat de la multiplication de ses deux arguments. Un commentaire précède la définition de la méthode (une bonne pratique de programmation pour se rappeler ultérieurement de la fonction d'un morceau de code). /* * Retourne le résultat de la multiplication de ses * deux arguments. */ int multiplier(int a, int b) { return a * b; void setup() { int resultat = multiplier(2, 2); print(resultat); La console de Processing affichera : La portée des variables Profitons de ce chapitre sur les méthodes et les variables pour vous mettre en garde contre une erreur classique qui peut survenir lorsque l'on utilise des variables et des méthodes dans un programme. 18

19 Les variables que ce soit des objets ou des types fondamentaux de données ne sont pas forcement accessibles à l'ensemble de votre programme! Tout dépend de l'endroit où elles ont été déclarées. Une variable déclarée à l'intérieur d'une méthode ne sera accessible que dans celle-ci : void setup() { int x = 10; void draw() { /* Le programme générera une erreur car la variable x * n'existe qu'à l'intérieur de la méthode setup() */ x = x + 1; En lançant l'exécution du programme ci-dessus, la console de Processing affichera le message d'erreur suivant : Pour qu'une variable soit accessible à tout votre programme il faut la déclarer en en-tête comme ceci : int x; void setup() { x = 10; void draw() { x = x + 1; La variable est alors appelée variable globale. 19

20 VI. Les tableaux Ce n est pas à proprement parlé un ingrédient des algorithmes, mais, les tableaux permettent de stocker les données de manière efficace. C est l occasion pour vous d utiliser tout ce que nous avons vu jusqu à présent. Visionner le diaporama que vous trouverez dans la dropbox. Puis faire les exercices suivants : Exercice 1 : Créer un tableau de 10 nombres entiers ; le remplir a avec des nombres tirés au hasard entre 0 et 9 ; afficher toutes les valeurs du tableau. Exercice 2 : Prolonger le programme précédent programme précédent pour créer un nouveau tableau qui contient les dix premiers carrés : 0, 1, 4, 9,...81, et afficher ce deuxième tableau. Normalement, à la fin de cet exercice vous aurez compris l intérêt de créer une fonction pour afficher un tableau quelconque. Faites-le si ce n est pas encore fait. Exercice 3 : Dans un nouveau fichier : Créer une fonction int[] creertableaualeat(int n, int max) qui créée un tableau de n entiers, et le remplit avec des valeurs aléatoires entre 0 et max. Recopier votre fonction qui permet d afficher un tableau. Dans la méthode setup, appeler ces deux fonctions. Exercice 4 : Toujours dans le même fichier. Créer une fonction : int maximum(int t[]) qui prend un tableau d entiers en argument et retourne son maximum. La méthode setup doit maintenant ressembler à cela : void setup() { int[] tab =creertableaualeat(10, 20); affiche(tab); int max = maximum(tab); println("le maximum de ce tableau est : "+max); Exercice 5 : Toujours dans le même fichier. Créer une fonction qui prend un tableau d entiers en argument et retourne le nombre d entiers pairs de ce tableau. Appeler cette fonction, et afficher le nombre d élément paire de votre tableau «aléatoire». 20

21 Exercice 6 : Tableau à deux dimensions. Dans un nouveau fichier. Ecrire un programme qui remplisse ce tableau à deux dimensions : int [][]table = new int[5][5] avec la table de multiplication, c'est à dire de manière à ce que table[i][j] soit le produit de i par j et affiche le résultat sous forme de table. ( aide : print(table[i][j] +"\t"); permet de tabuler) Exercice 7 : Graphisme. 1. Pour représenter n points du plan M0(x0 ;y0),...,mn-1(xn-1 ;yn-1), on va utiliser un tableau pour les coordonnées : int [][] coor = new int [n][2] (le point Mi aura pour abscisse coor [i][0] et pour ordonnée coor [i][1]). Ecrire une méthode int[][] initpolygone (int n) qui initialise au hasard un tableau, donc les coordonnées des n points, mais sans trop s approcher du bord (disons à 20 pixels du bord). Utiliser width et height. Ecrire ensuite une méthode void dessine(int[] [] t) reliant les points Mi et Mi+1 pour 0 i n-2, puis M n - 1 et M0 afin de dessiner le polygone. Utiliser ces méthodes dans le setup() afin de dessiner un hexagone ( n = 6). 2. Le but de cette question est de dessiner en rouge le plus petit rectangle contenant ce polygone. Réfléchissez aux coordonnées du coin supérieur gauche et inférieur droit, avant de vous lancer dans le code. (vous pourrez utiliser : rectmode(corners); (voir l aide de Processing). Ecrire une fonction : dessinecarre 3. Pour transformer l exercice précédent en une animation : à chaque image, les points bougent un tout petit peu (de 1 ou 2 pixels dans n importe quelle direction) : le polygone se déforme peu à peu mais le rectangle rouge suit. On empêchera bien entendu les points de s échapper de la fenêtre. 21