P5js en ligne : https://alpha.editor.p5js.org/

Partie 7 :

Nous allons maintenant nous intéresser à l'interaction avec l'utilisateur. Pour l'instant nous allons nous contenter de la souris et du clavier. Commençons par la souris.

p5js propose 4 fonctions qui devront être complétées par le programmeur :

• le code se trouvant dans la fonction "mousePressed" est exécuté une fois quand l'utilisateur appuie sur un des boutons de la souris
• le code se trouvant dans la fonction "mouseReleased" est exécuté une fois quand un bouton de la souris qui avait été préalablement pressé est relâché.
• le code se trouvant dans la fonction "mouseMoved" est exécuté à chaque image tant que la souris se déplace
• le code se trouvant dans la fonction "mouseDragged" est exécuté à chaque image tant que la souris se déplace et que le bouton de la souris est enfoncé.

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

À faire vous-même 7.1

Saisissez, analysez et testez ce code

var r;
function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
  r=10;
}
function draw(){
  background(240);
  ellipse(200,200,2*r,2*r);
}
function mousePressed(){
  if (r<200){
    r=r+5;
  }
}
       

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

À faire vous-même 7.2

Saisissez, analysez et testez ce code

var r;
function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
  r=10;
}
function draw(){
  background(240);
  ellipse(200,200,2*r,2*r);
}
function mousePressed(){
  r=r+100;
}
function mouseReleased(){
  r=r-100;
}
       

À faire vous-même 7.3

Créez un programme permettant d'afficher un carré vert au centre de la fenêtre. En cas d'appui sur un bouton de la souris le carré devient rouge. Ce même carré redevient vert dès que le bouton de la souris est relâché.

Il est possible de connaitre les coordonnées du curseur de la souris grâce aux variables proposées par Processing : "mouseX" et "mouseY"

À faire vous-même 7.4

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(400,400);
  noStroke();
  fill(0);
}
function draw(){
  background(240);
  ellipse(mouseX,mouseY,30,30);
}
       

À faire vous-même 7.5

Créez un programme qui permettra d'afficher un nouveau carré à chaque clic de souris (sans effacer les carrés déjà présents). Le centre du carré devra se trouver au niveau du pointeur de la souris au moment du clic. La couleur du carré devra être aléatoire.

À faire vous-même 7.6

Créez un programme qui permettra d'obtenir ceci :

Cliquez uniquement dans le rectangle rouge

À faire vous-même 7.7

Saisissez, analysez et testez ce code

var val;
function setup(){
  createCanvas(200,200);
  background(240);
  val=0;
}
function draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

function mouseMoved()
{
  val = val + 5;
  if (val > 255) {
    val = 0;
  }
}
       

À faire vous-même 7.8

Saisissez, analysez et testez ce code

var val;
function setup(){
  createCanvas(200,200);
  background(240);
  val=0;
}
function draw() {
  fill(val);
  rect(75, 75, 50, 50);
}

function mouseDragged()
{
  val = val + 5;
  if (val > 255) {
    val = 0;
  }
}
       

Si "mouseX" et "mouseY" vous donnent la position de la souris à l'instant t, "pmouseX" et "pmouseY" vous permettent d'avoir les coordonnées de la souris à l'instant t-dt, avec dt le temps qui s'est écoulé entre 2 images.

À faire vous-même 7.9

Saisissez, analysez et testez ce code

function setup(){
  createCanvas(300,300);
  background(240);
}
function draw() {

}

function mouseDragged()
{
  line(pmouseX,pmouseY,mouseX,mouseY);
}
       

Partie 8 :

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.

Partie 9 : 

Il est possible d'écrire du texte dans la fenêtre de dessin.

La fonction "text" permet d'afficher une chaine de caractères. Cette fonction prend 3 paramètres : la chaine de caractères, la coordonnée x du coin "haut-gauche" du texte, la coordonnée y du coin "haut-gauche" du texte .

À faire vous-même 9.1

Saisissez et testez ce code

script.js

function setup(){
    createCanvas(200,200);
    background(240);
    fill(0);
    text("Hello World",60,100);
}
function draw(){
}
        

"fill" permet de choisir la couleur du texte.

Il est possible de choisir la taille de la police de caractère avec la fonction "textSize" qui prend pour unique paramètre la taille de la police de caractère.

J'ai dit un peu plus haut que les 2 derniers paramètres de la fonction "text" correspondaient aux coordonnées du coin "haut-gauche" du texte. Il est possible de modifier ce comportement par défaut grâce à la fonction "textAlign". Cette fonction prend un seul paramètre qui peut être : "LEFT", "RIGHT" ou "CENTER".

Dans le schéma ci-dessus, le point A a pour coordonnées les 2 derniers paramètres de la fonction "text".

• le cas 1 correspond à "LEFT" (comportement par défaut)
• le cas 2 correspond à "RIGHT"
• le cas 3 correspond à "CENTER"

À faire vous-même 9.2

Saisissez et testez ce code

script.js

function setup(){
    createCanvas(200,200);
    background(240);
    fill(0);
    text("Hello World",100,70);
    textAlign(RIGHT);
    text("Hello World",100,100);
    textAlign(CENTER);
    text("Hello World",100,130);
}
function draw(){
}
        

À faire vous-même 9.3

Écrire un programme permettant d'obtenir quelque chose qui ressemblera à ceci :

Pour vous aider :

• la fonction "random" permet d'obtenir un nombre aléatoire : random(100,200) permet d'obtenir un nombre aléatoire compris entre 100 et 200.
• la fonction "floor" permet d'arrondir un nombre : floor(5.6) sera égale à 6

 Source : http://www.ac-grenoble.fr/disciplines/informatiquelycee/ICN_sec.html