Tutoriel sur l'Interaction Utilisateur avec la Souris et le Clavier en p5.js

1. Introduction

Dans ce tutoriel, nous allons explorer comment ajouter des interactions utilisateur à vos sketchs p5.js en utilisant la souris et le clavier. L'interaction rend les œuvres d'art plus dynamiques et engageantes.

2. Configuration de l'environnement

Utilisez le même fichier HTML que dans les tutoriels précédents pour configurer l'environnement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>p5.js Tutorial</title>
  <!-- Inclusion de la bibliothèque p5.js -->
  <script src="p5.min.js"></script>
</head>
<body>
  <!-- Inclusion du fichier JavaScript contenant notre code p5.js -->
  <script src="sketch.js"></script>
</body>
</html>

Explication :

Ce code crée une structure de base pour une page web avec un fichier HTML.
La balise <script src="p5.min.js"></script> inclut la bibliothèque p5.js dans notre projet.
Le fichier sketch.js contiendra notre code p5.js.

3. Création d'un canvas

Création d'un canvas

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  // Ici nous allons ajouter des interactions utilisateur
}

Explication : Ce code crée un canvas de 400x400 pixels et remplit le fond avec une couleur grise.

4. Interaction avec la souris

Exemple 1 : Dessiner avec la souris

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  if (mouseIsPressed) {
    fill(0); // Noir
  } else {
    fill(255); // Blanc
  }
  ellipse(mouseX, mouseY, 20, 20); // Dessine un cercle à la position de la souris
}

Explication :

La variable mouseIsPressed est true si un bouton de la souris est enfoncé.
Nous utilisons mouseX et mouseY pour obtenir les coordonnées actuelles de la souris.
Un cercle est dessiné à la position de la souris avec une couleur qui change selon que la souris est enfoncée ou non.

Exemple 2 : Changer le fond avec un clic de souris

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  // Pas de dessin dans draw()
}

function mousePressed() {
  background(random(255), random(255), random(255)); // Change la couleur de fond de manière aléatoire
}

Explication :

La fonction mousePressed() est appelée chaque fois que l'utilisateur clique sur le bouton de la souris.
Nous utilisons la fonction random(255) pour générer des valeurs de couleur aléatoires.

5. Interaction avec le clavier

Exemple 3 : Déplacer un cercle avec les touches du clavier

Exemple :

let x = 200;
let y = 200;

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  background(220); // Efface le dessin précédent
  ellipse(x, y, 50, 50); // Dessine un cercle
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    x -= 10; // Déplace le cercle vers la gauche
  } else if (keyCode === RIGHT_ARROW) {
    x += 10; // Déplace le cercle vers la droite
  } else if (keyCode === UP_ARROW) {
    y -= 10; // Déplace le cercle vers le haut
  } else if (keyCode === DOWN_ARROW) {
    y += 10; // Déplace le cercle vers le bas
  }
}

Explication :

Nous déclarons des variables x et y pour suivre la position du cercle.
La fonction keyPressed() est appelée chaque fois qu'une touche du clavier est enfoncée.
La variable keyCode contient le code de la touche enfoncée. Nous vérifions si elle correspond aux flèches directionnelles pour déplacer le cercle.

Exemple 4 : Changer la couleur du cercle avec des touches spécifiques

Exemple :

let x = 200;
let y = 200;
let col = 255; // Blanc

function setup() {
  createCanvas(400, 400);
  background(220); // Gris clair
}

function draw() {
  background(220); // Efface le dessin précédent
  fill(col); // Applique la couleur actuelle
  ellipse(x, y, 50, 50); // Dessine un cercle
}

function keyPressed() {
  if (key === 'r') {
    col = color(255, 0, 0); // Rouge
  } else if (key === 'g') {
    col = color(0, 255, 0); // Vert
  } else if (key === 'b') {
    col = color(0, 0, 255); // Bleu
  }
}

Explication :

Nous déclarons une variable col pour suivre la couleur du cercle.
La variable key contient la touche enfoncée sous forme de caractère. Nous vérifions si elle correspond à 'r', 'g' ou 'b' pour changer la couleur du cercle.

6. Conclusion

Vous avez maintenant appris à ajouter des interactions utilisateur à vos sketchs p5.js en utilisant la souris et le clavier. Vous savez comment dessiner avec la souris, changer des couleurs de fond ou de formes, et déplacer des objets avec les touches du clavier. Expérimentez avec ces concepts pour rendre vos œuvres d'art plus interactives et engageantes.

Retour