images bannieres

Mathgames

Cours de mathématiques pour la programmation de jeux vidéo

Vecteurs

Définition mathématique d'un vecteur : un bipoint (ou une flèche) est un segment orienté. C'est un segment auquel s'ajoute l'information sens. Ainsi pour 2 points A et B, le bipoint (A,B) est différent du bipoint (B,A) car ils n'ont pas le même sens. (respectivement de A vers B et de B vers A). Une direction est un ensemble de toutes les droites parallèles entre elles. Un vecteur AB est défini par :

  1. sa direction : celle de la droite (AB)
  2. son sens : de A vers B
  3. sa norme : la longueur AB noté par ||AB||

Note : les physiciens ajoutent à ces trois notions définissant un vecteur la notion de point d'application, pour les physiciens, le vecteur devient donc un objet géométrique fixe, ce que nous appelons un bipoint.

Note : en physique, des quantités comme l'aire, le volume, la longueur, la température et le temps n'ont qu'une intensité et peuvent être entierement représentées par un nombre réel (accompagné de l'unité de mesure adéquate, cm², m³, cm, ° ou s). Une grandeur de ce type est une grandeur scalaire et le nombre réel correspondant est un scalaire. Des concept tels que la vitesse ou la force ont à la fois une intensité, un sens et une direction et sont souvent représentés par un segment de droite orienté, C'est-à-dire un segment de droite avec une direction propre et un sens. On nomme aussi ce segment de droite orienté un vecteur. Comme le montre la figure ci-dessous, nous utilisons AB pour désigner le vecteur dont l'origine est A et l'extrémité B et nous indiquons le sens du vecteur en traçant une flèche dirigée de A vers B dont la pointe est au point B. La norme (ou intensité) de AB est la longueur du segment (AB) et est noté par ||AB||. Comme sur la figure, nous utilisons la notation u ou v pour désigner des vecteurs dont les extrèmités ne sont pas spécifiées.

Vecteur dimension 2

Nous verrons le long de ce cours des vecteurs qui se présentent dans un plan*, nous pouvons donc aussi les nommer vecteurs de dimension 2.

Plan* : en mathématiques, un plan est un objet fondamental à deux dimensions. Intuitivement il peut être visualisé comme une feuille d'épaisseur nulle qui s'étend à l'infini. L'essentiel du travail fondamental en géométrie et en trigonométrie s'effectue en deux dimensions donc dans un plan.

Article Wikipédia : plan.


Note : cette rubrique sur les vecteurs que je vous présente est au programme de seconde, 1ère S et terminal S au lycée.


Coordonnées d'un vecteur

Techniquement parlant, la définition d'un vecteur est la différence entre deux points. Réfléchissez comment vous pourriez aller d'un point A à un point B en suivant des instructions sur une carte géographique avec les points cardinaux, N (Nord) S (Sud) E (Est) et W (Ouest).

Coordonnées d'un vecteur

Calcul de coordonnées d'un vecteur

Soit (O, I, J) un repère du plan et u un vecteur dont un représentant est AB. Pour lire les coordonnées du vecteur u, on décompose la translation qui transforme A en B, c'est-à-dire la translation de vecteur u, en deux translations successives : d'abord une translation parallèlement à l'axe (OI), puis une translation parallèlement à l'axe (OJ).
Le déplacement parallèlement à (OI) donne l'abscisse du vecteur :
Si ce déplacement s'effectue dans le sens des x croissants (de O vers I), il est compté positivement;
Si ce déplacement s'effectue dans le sens des x décroissants (de I vers O), il est compté négativement.
Le déplacement parallèlement à (OJ) donne l'ordonnée du vecteur :
Si ce déplacement s'effectue dans le sens des y croissants (de O vers J), il est compté positivement;
Si ce déplacement s'effectue dans le sens des y décroissants (de J vers O), il est compté négativement.
Par exemple , pour aller de A à B, on se déplace parallèlement à (OI) de 5 unités dans le sens des x croissants;
l'abscisse du vecteur u est donc +5.
On se déplace ensuite parallèlement à (OJ) de 2 unités dans le sens des y croissants;
l'ordonnée du vecteur u est donc +2.
Le vecteur u a donc pour coordonnées (5 ; 2). On note alors u(5; 2).
On peut vérifié notre calcul en faisant : u = (xB - xA ; yB - yA) pour l'abscisse et l'ordonnée.
On remplace u = (7 - 2 ; 5 - 3) ⇔ u = (+5 ; +2).

Coordonnées d'un vecteur

Vecteurs de l'espace

La notion de vecteur du plan se généralise sans difficulté à l’espace. Soient A et B deux points distincts de l'espace. Le vecteur AB est parfaitement déterminé par sa direction celle de la droite (AB), son sens de A vers B, sa norme, qui est la longueur du segment AB noté ||AB||.

notion d'un vecteur

Vecteurs égaux

Soient A,B,C et D quatre points de l’espace. Les deux vecteurs non nuls AB et CD sont égaux si et seulement si ils ont même direction, même sens et même norme (même longueur), si et seulement si ABCD est parallélogramme.

vecteur égaux

Vecteurs opposés

Soient A,B,C et D quatre points de l’espace. Les deux vecteurs non nuls AB et CD sont opposés si et seulement si ils ont même direction, des sens opposés et même norme (même longueur).
AB = -CD Les deux vecteurs AB et CD sont opposés si et seulement si les vecteurs AB et DC sont égaux.
AB = -CDAB = DC

vecteur opposé

Vecteurs coplanaires

Des vecteurs sont coplanaires si et seulement en traçant leurs représentants à partir d’un même point A, les extrémités de ces représentants sont coplanaires avec A.

Vecteurs coplanaires

Vecteurs sommes

Soient u et v deux vecteurs de l’espace. Comme les vecteurs u et v sont coplanaires, on peut obtenir la somme de ces deux vecteurs en utilisant les deux méthodes utilisées dans le plan : la règle du parallélogramme ou la relation de Chasles*.

Relation de Chasles* : En mathématiques, plus précisément en géométrie vectorielle euclidienne, la relation de Chasles est une relation permettant d'additionner deux vecteurs dans un espace affine. Par extension, elle peut aussi être utilisée en géométrie plane, en intégration, en analyse complexe, etc.

Son nom vient de Michel Chasles, un mathématicien français du XIXe siècle. Cette relation était connue depuis déjà longtemps, mais les travaux de Chasles en géométrie ont largement contribué à son adoption dans le monde francophone

Article Wikipédia : relation de Chasles.

Addition d'un vecteur

Vecteurs soustractions

Soient u et v deux vecteurs de l’espace. Comme les vecteurs u et v sont coplanaires, on peut soustraire ces deux vecteurs en utilisant la méthode de la relation de Chasles vu ci-dessus. Soustraire le vecteur v au vecteur u, c'est ajouter à u l'opposé de v : en clair u - v = u + ( -v ).

Soustraction d'un vecteur

Produit d'un vecteur par un scalaire

Soit u un vecteur de l’espace et soit k un nombre réel. On définit le vecteur k.u de la façon suivante :
Si k = 0 alors k.u = 0.u = 0.
Si u = 0 alors k.u = 0.u = 0
Si k ≠ 0 et u ≠ 0 alors k.u
est le vecteur qui a même direction que u, même sens que u si k > 0 et sens contraire à celui de u si k < 0
pour norme celle de u multiplier par k, ||k.u|| = k.||u||

multiple scalaire d'un vecteur

Rappel sur le théorème de Pythagore

Nous pouvons trouver la norme de tout vecteur assez facilement en utilisant le théorème de Pythagore. En particulier, la longueur de l’hypoténuse est donc toujours supérieure à celle de chaque autre côté. Le terme « longueur » est parfois omis, chaque côté étant assimilé à sa longueur. Toutefois l’élévation au carré (algébrique), qui n’a de sens que pour une grandeur numérique comme la longueur, correspond à la construction d’un carré (géométrique) sur chaque côté du triangle. Certaines démonstrations du théorème de Pythagore s’appuient d’ailleurs sur une égalité d’aires entre le carré construit sur l’hypoténuse et la réunion des carrés construits sur les deux autres côtés. En nommant les sommets du triangle, le théorème de Pythagore peut se reformuler dans l’implication suivante : si un triangle abc est rectangle en b, alors = + .
Avec cela en mémoire nous pouvons jeter un regard sur le diagrame ci-dessous.

Théorème de Pythagore

Norme, ou longueur d'un vecteur

Nous voyons que dans le diagramme ci-dessus, le calcul de la norme d'un vecteur ressemble remarquablement au théorème de Pythagore, nous remplaçons donc a par x, pour l'axe des abscisses et b par y, pour l'axe des ordonnées (voir la figure ci-dessus le rappel du théorème de Pythagore).
Ce qui veut dire que l'on reprend la formule du théorème de Pythagore : norme² = + .
Bien entendu, nous ne voulons pas la norme élevée au carré, mais juste la norme régulière, nous éliminons donc la norme élevée au carré et prenons la racine carré des deux autres côtés, c'est-à-dire x et y.
Ce qui finalement revient à dire que la norme = ( + ).
Maintenant vous savez tout ce qu'il faut pour calculer la norme, intensité ou encore longueur d'un vecteur.

Théorème de Pythagore

Vecteur unitaire

Un vecteur dont la norme est 1 est appelé un vecteur unitaire. Un vecteur dont la norme est 0 et dont le sens et la direction ne sont pas définis est appelé un vecteur nul. On le note 0E ou 0 ou encore 0 avec une flèche haut dessus. Pour normaliser ce vecteur, de longueur quelconque et en le gardant pointant dans la même direction, il faut diviser ce vecteur u par sa norme ou intensité, ce qui donne un vecteur unitaire égal à 1.

Normalisation d'un vecteur

Produit scalaire de deux vecteurs

Le produit scalaire de deux vecteurs permet de connaître l'angle théta entre ces deux vecteurs. Ça fonctionne aussi bien sur un plan que dans un espace. Si vous avez deux vecteurs u et v et que vous souhaitez connaître leur produit scalaire, le calcul se fait comme ceci:

dot = u.v = ||u||.||v||.cos(θ)

ou

u.v = ux.vx + uy.vy

Et si vous êtes dans l'espace vour rajouter une troisième composante qui est z, ce qui devient:

u.v = ux.vx + uy.vy + uz.vz

On calcule le cosinus de l'angle θ.

Si dot vaut 1, les deux vecteurs pointent dans la même direction (0°).
Si dot vaut 0, alors les deux vecteurs pointent dans deux directions qui sont à angle droit (90°).

Donc logiquement, quand dot est entre 0 et 1, l'angle est compris entre 90° et 0°. pour obtenir l'angle θ, il suffit d'utiliser la simple fonction mathématique arc cosinus (cos-1 ou arccos sur les calculatrices) sur notre valeur dot. attention, arc cosinus ne fonctionne pas sur des nombres négatifs, et lorsque l'angle qui sépare deux vecteurs est supérieur à 90°, dot prend alors une valeur négative, et on ne peut alors plus calculer l'angle qui sépare nos vecteurs.

Mais rassurez-vous, en 3d cela est inutile, car nous contentons de vérifier si dot se situe entre 0 et 1, sinon on considérera sa valeur comme étant de 0, à quoi sert le produit scalaire ? À calculer le taux de réception de lumière d'un plan par exemple, lorsque l'on travaille avec (OpenGL et de la 3d) ou sur des moteurs graphiques 3d comme (OGRE, Irrlicht, etc.)

Ce qu'il faut retenir, c'est que le produit scalaire sert à calculer l'angle entre deux vecteurs et ne fonctionne que sur des vecteurs normaliser.

Produit scalaire de deux vecteurs

Note : nous venons de voir des vecteurs qui se présentent dans un plan avec les coordonnées {x, y}, mais si nous rajoutons la coordonnée z nous avons là un espace avec les coordonnées {x, y, z}. Ce n'est pas plus difficile que cela, les opérations de calcul sont les mêmes avec les vecteurs de l'espace qu'avec les vecteurs du plan, mais en rajoutant z en plus comme composante aux coordonnées des deux autres {x, y}. Nous pouvons donc aussi les nommer vecteurs de dimension 3.


Code source échantillon
avec notre vecteur (PVector v1.x et v1.y)

Voici un exemple de code source avec Processing qui résume ce que l'on vient de voir ci-dessus et qui sera similaire à votre jeu vidéo que l'on va programmer ensemble, je vous laisse télécharger cette archive avec la version de Windows ici mais en haut de cette page web sur la barre des rubriques, vous avez un lien de téléchargement pour la version Linux, pour la version Mac OS X, la version Linux devrait être compatible car ces deux derniers systèmes son programmé sur un même noyau système commun qui se nomme Unix.


/**************************************************************  
    Autheur de ce programme : himalaya2004                     
    Date le 07/11/2017 - PVector avion (vecteur de dimension 2d)                                  
    Programmation Java dans IDE Processing                                   

****************************************************************/    
  

//  On définit toutes nos variables globales avant la méthode setup()                                  
                                                                                
PImage img_mer;                 //  Stocke notre image img_mer (fonds mer)
PImage img_avion_mere;          //  Stocke notre image img_avion_mère

int speed_Aircraft;             //  Vitesse de l'Aircraft (avion mère)

//  5 booleans qui prennent soit (true) ou (false) vrai où faut
boolean ri, le, up, dw, sp;     //  pour touche claviere appuyée

//  PVector v1 pour coordonnées cartésiennes v1.x et v1.y de l'Aircraft (vecteur 2d)
PVector v1;

//  Méthode setup() appelée une seule fois au lancement du programme.
void setup() {
  //  Taille de la fenêtre d'écran 600 par 800 pixels
  size(600, 800);

  //  PVector v1 pour coordonnées cartésiennes v1.x et v1.y de l'Aircraft (vecteur 2d)
  v1 = new PVector (width/2,  height/2 + 300);

  //  On charge toutes les images
  img_avion_mere      = loadImage("avion_mere.png");
  img_mer             = loadImage("fonds_mer_0.png");
  ri                  = false;   //  Boolean pour right
  le                  = false;   //  Boolean pour left
  up                  = false;   //  Boolean pour haut
  dw                  = false;   //  Boolean pour bas
  speed_Aircraft      = 3;       //  Vitesse avion mère
}

//  Méthode draw() appelée sans arrêt jusqu'à la fin du programme.
void draw() {

  // Affichage ecran fonds mer
  image(img_mer, 0, 0);

  //  Méthode action_Aircraft()
  action_Aircraft();
  
  //  Centre le repère sur l'image
  imageMode(CENTER);
  image(img_avion_mere, v1.x, v1.y);
  textSize(18);
  //  Remets le mode imageMode par défaut
  imageMode(CORNER);
 
  text("PVector (avion mère) : " + "v1.x = " + v1.x + " v1.y = " + v1.y, 10, 25);
}

//  Méthode keyPressed()
//  Évènemment si on presse sur une touche du clavier
void keyPressed() {
    if (key == CODED) {
    //  On appuye sur la flèche du haut
    if (keyCode == UP) { 
      up = true;
    } else 
      //  On appuye sur la flèche du bas
    if (keyCode == DOWN) { 
      dw = true;
    } else 
      //  On appuye sur la flèche de gauche
    if (keyCode == LEFT) { 
      le = true;
    } else 
      //  On appuye sur la flèche de droite
    if (keyCode == RIGHT) { 
      ri = true;
    }
  }
}

//  Méthode keyReleased()
//  Évènemment si on relâche une touche du clavier 
void keyReleased() {
    if (key == CODED) {
    if (keyCode == UP) 
    {
      up = false;
    } else if (keyCode == DOWN)
    {
      dw = false;
    } else if (keyCode == LEFT)
    {
      le = false;
    } else if (keyCode == RIGHT)
    { 
      ri = false;
    }
  }
}

//  Méthode Action_Aircraft()  
void action_Aircraft() {
  
  //  La touche flèche droite est appuyée 
  if (ri == true)
  {   
    v1.x = v1.x + speed_Aircraft;
    //  Test sortie écran à droite
    if (v1.x > width - 30) v1.x = width - 30;
  }
  //  La touche flèche gauche est appuyée 
  if (le == true)
  {  
   v1.x = v1.x - speed_Aircraft;
    //  Test sortie écran à gauche  
    if (v1.x < 30) v1.x = 30; 
  }
  //  La touche flèche haut est appuyée 
  if (up == true)
  {   
    v1.y = v1.y - speed_Aircraft;
    //  Test sortie écran en haut
    if (v1.y < 22) v1.y = 22; 
  }
  //  La touche flèche bas est appuyée 
  if (dw == true)
  {  
    v1.y = v1.y +  speed_Aircraft;
    //  Test sortie écran en bas
    if (v1.y > height - 22) v1.y = height - 22;
  }
}

Commentaire du programme

  1. Les 2 barres obliques (//) sont des commentaires.
  2. Nous avons d'abord nos variables globales du type PImage, int, boolean et PVector, regarder les commentaires dans le code source qui explique ce que ces variables accomplissent.
  3. Ensuite, vient la méthode setup( ) qui est lue une seule fois et à l'intérieur de son corps entre accolades, nous définissons notre fenêtre d'écran 600px par 800px avec l'instruction size(600, 800), nous chargeons nos images (avion et mer) et nous assignons nos variables booléennes pour les quatre directions et la vitesse de l'avion mère.
  4. Ensuite, vient la méthode draw( ) qui est appelée sans arrêt jusqu'à la fin du programme et dans son corps entre accolades, on place toutes nos instructions du programme, on commence par notre image de fonds d'écran (mer) avec image(img_mer, 0, 0) qui affiche le décor de mer suivi de la méthode action Aircraft( ) qui sera appellée et qui s'occupera de faire les mouvements de l'avion dans les quatre directions suivant que l'on appuie sur les touches fléchées du clavier, ensuite vient l'affichage de notre avion mère aux coordonnées cartésiennes v1 x et v1 y, avant de finir avec notre méthode draw( ), nous affichons en haut à droite sur notre fenêtre d'écran notre PVector qui affiche les coordonnées cartésiennes de l'avion mère.
  5. Ensuite, nous avons notre méthode keyPressed( ) qui teste si les touches fléchées du clavier sont appuyées, si c'est le cas, on assigne true aux variables up, dw, le ou ri.
  6. Ensuite, nous avons notre méthode keyReleased( ) qui teste si les touches fléchées du clavier sont relâchées, si c'est le cas, on assigne false aux variables up, dw, le ou ri.
  7. Ensuite, nous avons notre dernière méthode Action_Aircraft( ) qui s'occupe de faire les mouvements de l'avion mère dans les quatre directions, et même en diagonale suivant les variables testées up, dw, le ou ri qui prennent comme valeurs true et en même temps, on teste si l'avion mère sort de la fenêtre d'écran avec un test de condition dans chaque cas de figure ou les touches fléchées sont appuyées.

En résumé, ici nos vecteurs v1.x et v1.y qui sont définis avec notre PVector v1 se présentent dans un plan, nous pouvons donc aussi le nommer vecteur de dimension 2. Rien de plus facile que cela, tout simplement, cliquer sur la démo ci-dessous et fait bouger l'avion mère avec les touches fléchées de votre clavier.

Le mouvement de l'avion avec PVector
notre vecteur 2d (v1.x et v1.y)

Télécharger l'archive du programme avec notre PVector ici.

analyse : dériver

Conclusion

Je remercie le professeur de physique Faouzi Hamdi qui m'a corrigé et conseillé sur cette rubrique vecteurs. Voici, c'est la fin de ce cours sur les vecteurs, avec ceci et la trigonométrie vue précédemment nous pouvons déjà calculer les relations entre les distances et angles des triangles rectangles et leurs fonctions trigonométriques telles que sinus, cosinus et tangente qui nous servirons pour les mouvements de nos avions dans votre jeu vidéo, nous pourrons aussi les situer dans un plan grâce aux vecteurs, ces deux branches vastes des mathématiques que sont la trigonométrie et les vecteurs ainsi que les dérivées que l'on verra à la rubrique analyse servent par exemple en permanence aux sciences physiques telles que la compréhension de ce monde dans lequel nous vivons et de ce que nous observons de façon générale autour de nous. Il nous reste à voir une rubrique importante des mathématiques pour que les mouvements des avions soient réalistes, nous devons étudier les dérivées de fonction ƒ(x), patience et continuons, vous comprendrez mieux après avoir lu le cours à la rubrique analyse.

Flèche pour remonter la page