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.
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
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 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 55.1046]. 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].= [- 2147483648, 2147483647] (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 = 3.14159... 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 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);} 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) 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