Dans cette activité, nous allons travailler sur le clavier.

p5 propose 2 fonctions qui devront être complétées par le programmeur :

• le code se trouvant dans la fonction "keyPressed" est exécuté une fois quand l'utilisateur enfonce une touche
• le code se trouvant dans la fonction "keyReleased" est exécuté une fois quand une touche du clavier est relâchée

Ces 2 fonctions ne prennent aucun paramètre et ne retournent aucune valeur.

À faire vous-même 8.1

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(200,200);
  fill(0);
}
function draw(){
  background(240);
  ellipse(100,100,50,50);
}
function keyPressed(){
  fill(255);
}
function keyReleased(){
  fill(0);
}
       

---

Attention : pour pouvoir utiliser les 2 fonctions que nous venons de voir, il faut que la fonction "draw" soit présente dans le programme (même si elle est vide)

Il est possible de détecter la touche qui a été frappée grâce à la variable "keyCode". Cette variable "keyCode" est égale aux codes des touches JavaScript que vous trouverez ici

Par exemple pour savoir si c'est la touche "a" qui a été frappée, il suffira d'écrire :

function keyPressed(){
  if (keyCode==65){
    //mettre ici le code a exécuter quand la touche "a" est enfoncée
  }
}
        

À faire vous-même 8.2

Créez un programme permettant d'afficher un carré incolore au centre de la fenêtre. En cas d'appui sur la touche r, le carré devient rouge, en cas d'appui sur la touche v, le carré devient vert et en cas d'appui sur la touche b, le carré devient bleu. Ce même carré redevient incolore dès que la touche est relâchée.

À faire vous-même 8.3

Créez un programme permettant d'afficher une "balle" noire (utilisation de la fonction "ellipse"). Cette balle pourra être déplacée à l'aide des flèches du clavier. La balle ne devra pas pouvoir sortir de la fenêtre.

Il faut cliquer dans la fenêtre ci-dessus pour que cet exemple fonctionne.