Tutoriel 10 : Introduction à la Trigonométrie en p5.js

1. Introduction

Utiliser des fonctions trigonométriques pour dessiner des formes et des motifs intéressants en p5.js.

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. Mise en place du canvas et des paramètres

a) Initialisation de la taille du canvas

Exemple :

function setup() {
  createCanvas(400, 400); // Crée un canvas de 400x400 pixels
  background(220); // Remplit le fond avec une couleur gris clair
}

Explication :

createCanvas(400, 400) : Crée un canvas de 400x400 pixels.
background(220) : Remplit le fond du canvas avec une couleur gris clair.

4. Utilisation des fonctions trigonométriques

Nous allons explorer plusieurs exemples pour utiliser les fonctions trigonométriques et dessiner des motifs intéressants.

Exemple 1 : Cercle basé sur sin() et cos()

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  translate(width / 2, height / 2); // Déplace l'origine au centre du canvas
  strokeWeight(2);

  let radius = 100; // Rayon du cercle
  let points = 100; // Nombre de points sur le cercle

  for (let i = 0; i < points; i++) {
    let angle = map(i, 0, points, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    point(x, y); // Dessine un point sur le cercle
  }
}

Explication :

translate(width / 2, height / 2) : Déplace l'origine au centre du canvas.
map(i, 0, points, 0, TWO_PI) : Mappe l'index i à un angle entre 0 et 2π.
cos(angle) et sin(angle) : Calculent les coordonnées x et y des points sur le cercle.

Exemple 2 : Spirale

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  translate(width / 2, height / 2);
  strokeWeight(2);

  let points = 200; // Nombre de points dans la spirale
  let angleIncrement = 0.1; // Incrément d'angle
  let radiusIncrement = 0.5; // Incrément de rayon

  for (let i = 0; i < points; i++) {
    let angle = i * angleIncrement;
    let radius = i * radiusIncrement;
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    point(x, y); // Dessine un point sur la spirale
  }
}

Explication :

angle = i * angleIncrement : Calcule l'angle pour chaque point.
radius = i * radiusIncrement : Augmente le rayon progressivement pour créer une spirale.
cos(angle) et sin(angle) : Calculent les coordonnées x et y des points sur la spirale.

Exemple 3 : Motif oscillant

Exemple :

function setup() {
  createCanvas(400, 400);
  background(220);
  strokeWeight(2);

  let amplitude = 100; // Amplitude de l'oscillation
  let frequency = 0.05; // Fréquence de l'oscillation
  let yOffset = height / 2; // Décalage vertical

  for (let x = 0; x < width; x++) {
    let y = yOffset + amplitude * sin(frequency * x);
    point(x, y); // Dessine un point sur le motif oscillant
  }
}

Explication :

amplitude * sin(frequency * x) : Calcule la position y du point en utilisant une fonction sinusoidale.
yOffset + amplitude * sin(frequency * x) : Décale le motif verticalement et applique l'oscillation.

5. Conclusion

Vous avez maintenant appris à utiliser les fonctions trigonométriques sin() et cos() pour dessiner des formes et des motifs intéressants en p5.js. Expérimentez avec ces concepts pour créer des œuvres d'art encore plus variées et complexes.

Retour