Les vecteurs ¶

Liste de vidéos de support

Vecteur : définition¶

Le terme vecteur peut signifier plusieurs choses dépendant du contexte.
- En biologie : Décrit un organisme qui transmet une infection d'un hôte à un autre.
- En programmation : Décrit une structure de tableau de données.
En mathématique, un vecteur est un concept permettant de représenter une magnitude (longueur) et une direction.
Un vecteur peut être représenté graphiquement par une flèche : la longueur indique la magnitude, l'orientation indique la direction.

alt text

Vecteur : utilité¶

Dans le monde des jeux vidéo, réalité virtuelle ou autre simulation, les vecteurs sont utilisés partout.
C'est une connaissance fondamentale à la programmation de jeux et d'applications multimédia.
C'est un bloc de construction nécessaire pour toute application ayant des implications mathématiques.
Exemples d'utilisation :
- Position d'objets dans l'espace
- Vitesse et direction de déplacement
- Forces physiques (gravité, vent, friction)
- Calcul de trajectoires et de collisions

Vecteur : exemple de problème sans vecteurs¶

Voici du code représentant une balle qui rebondit aux limites de l'écran
Fichier pour l'exécuter sur votre poste

alt text

Problèmes identifiés :

Utilisation de plusieurs variables X et Y similaires :
- Position X et Y
- Vitesse X et Y
Complexité de gestion de toutes ces variables
Imaginez maintenant que vous devez gérer l'accélération, la position d'une cible, le vent et la friction...
- Variables probables : accelX, accelY, targetX, targetY, windX, windY, frictionX, frictionY
- En 2D : 2 variables par concept
- En 3D : 3 variables par concept → explosion du nombre de variables!

Simplification avec les vecteurs¶

**Sans vecteurs (verbeux)**

float x, y, z;
float xSpeed, ySpeed, zSpeed;
float xAccel, yAccel, zAccel;
float targetX, targetY, targetZ;

**Avec vecteurs (concis)**

PVector position;
PVector velocity;
PVector acceleration;
PVector target;

✅ **Avantages** : Code plus lisible, moins d'erreurs, opérations mathématiques simplifiées

Vecteur : la classe PVector¶

Processing offre la classe PVector qui représente un vecteur.
Propriétés principales :
- x : Composante horizontale
- y : Composante verticale
- z : Composante en profondeur (pour la 3D, optionnelle)

Création et utilisation :

// Création d'un vecteur à la position (10, 20)
PVector position = new PVector(10, 20);

// Création d'un vecteur de vitesse
PVector vitesse = new PVector(2, -1); // 2 px/frame → droite, 1 px/frame ↑ haut

// Accès aux composantes
float x = position.x;  // Récupère la composante X
float y = position.y;  // Récupère la composante Y

// Modification des composantes
position.x = 50;
position.y = 100;

Vecteur : déplacement et mouvement¶

Concepts clés :

Mouvement = déplacement dans le temps
Vitesse = vecteur représentant un déplacement par unité de temps
Translation = addition de la vitesse à la position

Formule fondamentale :

1	`nouvelle_position = ancienne_position + vitesse`

Rappel : L'addition de vecteurs se fait composante par composante, c'est-à-dire :

1 2	`nouvelle_position.x = ancienne_position.x + vitesse.x nouvelle_position.y = ancienne_position.y + vitesse.y`

Exemple complet :

// Variables globales
PVector position;
PVector vitesse;
int rayon = 30;
int diametre = rayon * 2;

void setup() {
  size(600, 400);
  position = new PVector(width/2, height/2);  // Centre de l'écran
  vitesse = new PVector(3, 2);                // 3 px/frame en X, 2 en Y
}

void draw() {
  background(240);

  // 1. Déplacement : position = position + vitesse
  position.add(vitesse);

  // 2. Dessiner la balle
  fill(255, 100, 100);
  ellipse(position.x, position.y, diametre, diametre);

  // 3. Rebond sur les bords
  if (position.x > width - rayon || position.x < rayon) {
    vitesse.x *= -1;  // Inverse la direction X
  }
  if (position.y > height - rayon || position.y < rayon) {
    vitesse.y *= -1;  // Inverse la direction Y
  }
}

Comparaison sans vecteur (beaucoup plus verbeux) :

float posX = 300, posY = 200;
float vitX = 3, vitY = 2;

// Dans draw()
posX += vitX;
posY += vitY;

if (posX > width - 15 || posX < 15) vitX *= -1;
if (posY > height - 15 || posY < 15) vitY *= -1;
// + répétition pour chaque objet...

Exercice 1 : Balle qui rebondit avec vecteurs¶

Objectif : Créer une animation de balle qui rebondit en utilisant des vecteurs.

Instructions :

Créez deux variables globales de type PVector :
- position : pour la position de la balle
- vitesse : pour la vitesse de déplacement
Dans setup() :
- Initialisez position au centre de l'écran
- Initialisez vitesse avec des valeurs comme (4, 3)
Dans draw() :
- Effacez l'écran avec background(240)
- Déplacez la balle avec position.add(vitesse)
- Dessinez la balle à la position actuelle
- Gérez les rebonds en inversant les composantes appropriées

Code de base :

PVector position;
PVector vitesse;

void setup() {
  size(600, 400);
  // TODO: Initialiser position au centre
  // TODO: Initialiser vitesse (ex: 4, 3)
}

void draw() {
  background(240);

  // TODO: Déplacer la balle
  // TODO: Gérer les rebonds sur les 4 bords
  // TODO: Dessiner la balle (cercle de diamètre 25)
}

Bonus :

Ajoutez de la couleur qui change selon la direction
Laissez une traînée en utilisant background(240, 20) au lieu de background(240)
Ajoutez plusieurs balles avec des vitesses différentes

Opérations mathématiques avec les vecteurs¶

Addition et soustraction¶

PVector a = new PVector(5, 4);
PVector b = new PVector(1, 2);

// Addition : a = a + b
a.add(b);          // a devient (6, 6)

// Soustraction : a = a - b
a.sub(b);          // a devient (5, 4)

// Sans modifier l'original
PVector resultat = PVector.add(a, b);  // a et b restent inchangés

Multiplication et division par un scalaire¶

PVector v = new PVector(2, 1);

// Multiplication par un scalaire
PVector resultat = PVector.mult(v, 3);  // Multiplie v par 3
PVector resultatB = PVector.mult(v, -1.5);  // Multiplie v par -1.5

// Division par un scalaire
PVector resultatC = PVector.div(v, 2);          // v devient (1.5, 0.75)

Utilité : Changer la vitesse sans changer la direction.

Distance entre deux points¶

PVector point1 = new PVector(1, 2);
PVector point2 = new PVector(4, 2);

// Méthode : fonction statique (Pythagore)
float distance = PVector.dist(point1, point2);

Rotation d'un vecteur¶

PVector v = new PVector(1, 0);
float angle = PI/2;  // 90 degrés

// Méthode 1 : utiliser rotate()
v.rotate(angle);    // v devient (0, 1)

// Méthode 2 : utiliser des formules trigonométriques
float x = v.x * cos(angle) - v.y * sin(angle);
float y = v.x * sin(angle) + v.y * cos(angle);
v.set(x, y);

Angle entre deux vecteurs¶

PVector v1 = new PVector(1, 0);
PVector v2 = new PVector(0, 1);
float angle = PVector.angleBetween(v1, v2); // Résultat : PI/2 (90°)

Applications pratiques¶

Jeux de tir : Calculer la trajectoire des projectiles
Animation : Mouvements fluides et naturels
Intelligence artificielle : Comportements de groupe (boids)
Physique : Simulation de forces, collisions
Interface utilisateur : Animations d'éléments GUI

Références¶

À lire pour le prochain cours
https://natureofcode.com/book/introduction/
https://natureofcode.com/book/chapter-1-vectors/