PROCESSING Semaine 03

PLAN DE LEÇON Interaction avec un programme Gestion de la souris Gestion du clavier

INTERACTION AVEC UN PROGRAMME Pour qu’un programme soit interactif, il doit communiquer avec un utilisateur Une des façons de faire est d’acquérir l’information à l’aide de périphérique d’entrée tel qu’une souris, un clavier, une caméra vidéo, etc. Dans le cadre du cours, nous allons nous limiter à la souris et au clavier Dans un premier temps, on verra comment lire les informations de la souris Dans un second temps, on verra comment lire les informations du clavier

GESTION DE LA SOURIS Dans Processing, il est possible d’obtenir certains renseignement de la souris Les valeurs possibles sont les suivantes Le clic ou le relâchement d’un bouton Le bouton qui a été cliqué La position de la souris Le déplacement de la souris Le roulement de la molette de la souris

CLIC DE LA SOURIS Pour savoir lorsqu’un bouton a été appuyé sur la souris, on peut utiliser la variable système « mousePressed » Généralement, on utilise cette variable dans un « if » if (mousePressed) {…} Exemple

POSITION DE LA SOURIS Pour obtenir la position de la souris, on utilisera les variables systèmes « mouseX » et « mouseY » qui sont respectivement la position X et Y du pointeur dans la fenêtre de l’application Exemple

GESTION DU CLAVIER En plus de la souris, il est possible d’obtenir des informations relatifs au clavier Principalement, les informations sont les moments où une touche est appuyée et le caractère de la touche appuyée Pour savoir si une touche est appuyé, on utilisera la variable système « keyPressed » Généralement, on utilise cette variable dans un « if » if (keyPressed) {…} Exemple

TOUCHE DU CLAVIER Pour savoir quelle touche a été appuyée lorsqu’une touche est active, il faut utiliser la variable système « key » Souvent, on utilise cette variable dans l’expression conditionnelle du « if » Exemple if (key = ‘a’) {…} Remarquez dans l’exemple que l’on compare « key » avec un caractère entre apostrophe Exemple

TOUCHE DU CLAVIER Toutes les touches n’affichent pas un caractère Par exemple, les touches fléchées ou encore CTRL, ALT ou MAJ Certaines touches ont des identificateurs Exemple if (key == LEFT) {….} Spécificité pour la touche “Entrée” if (key == RETURN || key == ENTER) {...} Il faut regarder pour les deux ToucheCode FlèchesLEFT, RIGHT, AltALT ContrôleCONTROL MajusculeSHIFT Retour arrièreBACKSPACE EntréeRETURN TabulationTAB ÉchappementESC SupprimerDELETE Entrée sur pavéENTER

ÉVÉNEMENT Un événement est une action qui exécute un bloc code Exemple : Clic de souris, touche du clavier, etc. Les événements reliés à la souris ou clavier sont les suivants mouseClicked(), mouseReleased(), mousePressed() mouseMoved(), mouseDragged(), mouseWheel() keyPressed(), keyReleased(), keyTyped()

ÉVÉNEMENT - EXEMPLE Pour utiliser un événement, il faut créer une méthode à l’extérieur de draw ou setup Exemple void mousePressed() { // Faire le code ici } void mouseReleased() { // Faire le code ici }

EXERCICES 1.Faites un rectangle dont le centre suit le pointeur de la souris 2.À l’aide du numéro précédent, lorsque l’utilisateur appuyera sur espace, le rectangle changera de couleur de manière aléatoire 3.Dans un nouveau programme, lorsque une des lettres suivantes « t », « r », « e » ou « l » est appuyée, il se dessinera à l’écran respectivement un nouveau triangle, rectangle, ellipse ou ligne de couleur aléatoire 4.Dans un nouveau programme, à l’aide des touches de direction faites déplacer un rectangle dans la fenêtre Ce rectangle ne devra pas dépasser le cadre de la fenêtre

DÉFI Le défi de cette semaine sera de faire déplacer un personnage avec les touches WASD et que celui-ci pointe dans la direction de la souris Personnage en « top-down view » (Vol d’oiseau?) Pour Google Processing multiple key Processing load image