images bannieres

Mathgames

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

Trigonométrie

Est-ce que l'idée de faire des mathématiques peut vous donner des sueurs froides? Êtes-vous prêt à renoncer à votre carrière en tant que développeur de jeux vidéo en herbe, car le calcul n'a tout simplement pas de sens pour vous? Ne vous inquiétez pas les mathématiques peuvent être amusantes, et cool à là fois. Vous n'avez pas vraiment besoin d'avoir un grand niveau de maths pour programmer un jeu vidéo. Si vous savez ajouter ou multiplier deux nombres ensemble, vous êtes déjà à mi-chemin du parcours. La plupart des calculs que nous faisons dans nos vies professionnelles ne vont pas beaucoup plus loin que l'arithmétique de base. Cela dit, pour développer des jeux vidéo, il est utile d'avoir un peu plus de compétences en mathématiques dans votre boîte à outils. Vous n'avez pas besoin de devenir aussi intelligent qu'Archimède ou Einstein, mais une compréhension de base, combiné avec un certain bon sens, vous sera utile. Dans ce cours, vous apprendrez à connaître certaines fonctions trigonométriques importantes et comment vous pourrez les utiliser dans vos programmes de jeux vidéo ou autres. Ensuite, on passera à la pratique dans la rubrique « programmation » en appliquant les théories en développant un prototype de jeu vidéo simple où il y aura un avion mère qui vise sur plusieurs séries d'avions avec tir de munitions et animation de collision.


Votre jeu vidéo nécessitera de faire beaucoup de calculs trigonométriques pour que les munitions des séries d'avions visent vers l'avion mère, pour cela, on utilisera en trigonométrie la fonction arctan (arc tangent) des mathématiques qui se nomme atan dans notre environnement de programmation dans Processing et on utilisera les coordonnées polaires que l'on verra plus bas pour faire les mouvements des trajectoires des munitions des séries d'avions qui visent vers l'avion mère.


Votre jeu vidéo sera entièrement programmé avec une couche du langage Java orienté objet. Ne vous inquiétez pas si vous n'avez jamais utilisé de langage de programmation, je vais macher le travail à travers les différents processus étape par étape. Les mathématiques que nous couvrirons dans ce cours pourront s'appliquer avec n'importe quel autre environnement de programmation ou moteur de jeu vidéo 2d ou 3d si vous rajoutez la composante z pour un espace avec les coordonnées {x, y, z}.


Si vous suiver le fil conducteur et vous y mettez de votre bon sens, ce cours va vous permettre d'accélérer sur la trigonométrie, alors allons-y un pas devant l'autre sans sauter les étapes et commencont !


Tout d'abord qu'est-ce que la trigonométrie? La trigonométrie (du grec τρίγωνος / trígonos, « triangulaire », et μέτρον / métron, « mesure ») est une branche des mathématiques qui traite des relations entre distances et angles dans les triangles et des fonctions trigonométriques telles que sinus, cosinus et tangente.

article Wikipédia.


Quelle est la distance entre les deux avions?

Vous ne pouvez pas l'avoir réalisé jusqu'à présent, mais les jeux sont pleins de triangles. Par exemple, imaginez que vous avez un jeu vidéo avec des avions, et que vous voulez calculer la distance entre ces deux avions :


triangle rectangle


vous avez x et y, les coordonnées cartésiennes de chaque avion, mais comment pouvez-vous trouver la longueur de cette ligne? Eh bien, vous pouvez simplement tracer une ligne qui part du centre de chaque avion pour former un triangle comme ceci.

triangle rectangle


Comme vous avez les coordonnées cartésiennes de chaque avion avec ici x et y, vous pouvez calculer la longueur de chacune des nouvelles lignes. Maintenant que vous connaissez les longueurs des deux côtés du triangle, vous pouvez utiliser un peu de trigonométrie pour calculer la longueur de la ligne diagonale, c'est à dire la distance entre ces deux avions.

Note : l'un des coins de ce triangle présente un angle droit de 90 degrés. Ceci est également connu comme un triangle rectangle, et c'est ce genre de triangle que vous aurez affaire tout le long de ce cours sinon il y a aussi d'autres types de triangles autres qu'angle droit, ce sont par exemple les triangles équilatéraux, isocèles et quelconques et je ferais un rappel plus bas sur cette page web sur le théorème d'Al-Kashi qui était mathématicien perse au 14e siècle qui a généralisé le théorème de Pythagore aux triangles non-rectangles.

Chaque fois que vous exprimer quelque chose comme des déplacement de sprite* dans votre jeu vidéo comme des triangles avec un angle droit de 90 degrés, tels que la relation spatiale entre ces deux avions ci-dessus, vous pouvez utiliser les fonctions trigonométriques et faire des calculs sur eux.


Note : un sprite* (ou lutin) est dans le jeu vidéo un élément graphique qui peut se déplacer sur l'écran. En principe, un sprite est en partie transparent, et il peut être animé (en étant formé de plusieurs bitmaps qui s'affichent les uns après les autres). Le fond de l'écran constitue généralement le décor et les sprites sont les personnages et les objets qui se superposent au fond d'écran et qui se déplacent. Un sprite peut parfois aussi passer derrière un élément du fond d'écran.

article Wikipédia.


Donc, en résumé, la trigonométrie et les mathématiques sont utiles pour calculer les longueurs des côtés de ces triangles, ainsi que les angles entre les côtés. Lorsque c'est possible, pensez-y, cela vous rendra un grand service. Dans cet exemple de jeu vidéo que l'on va programmer ensemble, vous voudriez peut t'être que l'avion mère se déplace et tire devant lui, sur des séries d'avions à fréquence régulière et que les séries d'avions tirent des munitions vers l'avion mère, tout cela et plus encore est possible, vous pouvez le faire avec la trigonométrie et les mathématiques.


Votre boîte à outils de fonctions

Tout d'abord, nous allons voir la théorie. Ne vous inquiétez pas, je vais être bref afin que vous puissez comprendre le plus rapidement possible. Voici les parties qui composent un triangle rectangle :


triangle rectangle


Dans l'image ci-dessus, le côté oblique est appelée hypoténuse. Il se trouve toujours en face de l'angle à 90 degrés (également appelé: angle droit ), et c'est toujours le plus long des trois côtés. Les deux autres côtés sont appelés côté opposé et côté adjacent, comme on le voit, il y a un coin particulier sur le triangle, qui est le coin inférieur gauche dans ce cas. Si vous regardez le triangle ci-dessous : Le côté opposé et adjacent se sont inversé ainsi que le coin particulier qui se retrouve en haut à droite :


triangle rectangle


Alpha (α) et bêta (β) sont les noms des deux autres angles. Vous pouvez appeler ces angles comme vous voulez, mais généralement alpha est l'angle dans le coin d'intérêt et bêta est l'angle dans le coin opposé. En d'autres termes, vous étiquetez vos côtés opposés et adjacents par rapport à l'alpha. Le truc cool, c'est que si vous ne connaissez que deux de ses côtés, la trigonométrie vous permet de trouver l'autre côté manquant en utilisant les fonctions sinus, cosinus et tangentes. Par exemple, si vous connaissez un angle et la longueur de l'un des côtés, avec les fonctions sinus, cosinus et tangentes vous pouvez retrouvé la longueur des autres côtés :

triangle rectangle

Vous pouvez vous servir d'une mnémonique très pratique pour vous rappeler les formules de fonction trigonométrique de base soh-cah-toa qui veut dire pour :

fonction trigonométrique

Savoir un angle et une longueur, sait retrouver le côté recherché

Prenons un exemple. Dites-vous que vous savez l'angle (α) entre les deux avions que l'on a vu plus haut qui est de 45 degrés et la longueur qui est l'hypoténuse de 10 unités de longueur. Vous pouvez ensuite brancher ces valeurs dans la formule :

sin (45) = opposé / 10

Pour résoudre cette équation on utilise les règles de calcul que vous avez appris au collège, on fait le produit en croix, on multiplie le numérateur d'un côté de l'égalité au dénominateur de l'autre côté de l'égalité et on fait ça des deux côtés de l'égalité :

opposé * 1 = sin(45) * 10

Si vous utilisez la calculatrice ou la boîte noire de l'ordinateur, sin(45) vous renverra 0,707 (arrondi).
Poursuivont :

opposé = 0.707 * 10
opposé = 7.07

Pensez aux fonctions sin, cos et tan qui sont comme des « boîtes noires ». Vous branchez des nombres dessus et vous avez un retour de résultats. Ce sont des fonctions pré-écrites que vous pouvez appeler à partir de presque tous les langages de programmation. On verra cela de plus près dans l'environnement Processing avec sa bibliothèque mathématique et sa couche du langage Java orienté objet.


Connaître deux côtés, sait retrouver l'angle recherché

Les formules ci-dessus sont utiles lorsque vous savez déjà un angle et une longueur, mais ce n'est pas toujours le cas, l'autre solution c'est si vous connaissiez les longueurs d'au moins deux des côtés du triangle rectangle, ils ne vous restent plus qu'à brancher ces longueurs dans la boîte noire vu plus haut, en utilisant les fonctions inverses.

triangle rectangle
fonction trigonométrique


En d'autres termes, si : sin (α) = β, alors il est également vrai qu'arcsin (β) = α. On peut dire que la fonction sin est la réciproque de la fonction arcsin et vice-versa. Parmi ces fonctions inverses dans la pratique, vous allez utiliser le plus souvent la fonction arctan, ces fonctions sont également notées sur les calculatrices sin-1, cos-1, et tan-1 ou asin, acos et atan, et c'est ses fonctions que l'on va brancher dans la boîte noire de Processing, notre environnement de développement, alors ne prenez pas peur lorsque vous les verrez. Voilà, nous avons vu un aperçu des fonctions trigonométriques de base, mais vous n'en n'avez pas encore fini avec la leçon de théorie. Il y a encore beaucoup plus que vous pouvez imaginer de calculer avec des triangles.


Voila ce sont toutes les formules de base que vous devez savoir! Quelle formule utilisée dans la pratique dépend des pièces que vous avez déjà. Habituellement, vous devez savoir soit l'angle et la longueur d'au moins l'un des côtés du triangle rectangle, ou vous ne savez pas l'angle mais vous avez deux des côtés du triangle rectangle. Donc soit vous utilisez les fonctions (cos, sin, tan) ou sinon (arccos, arcsin, arctan).


Connaître deux côtés, sait retrouver le troisième côté

Pythagore


Parfois, vous pouvez connaître la longueur de deux des côtés seulement et vous avez besoin de connaître la longueur du troisième côté, comme dans l'exemple au début de ce cours où vous vouliez trouver la distance entre les deux avions. C'est là que la trigonométrie et le théorème de Pythagore vient à la rescousse. Même si vous avez oublié tout le reste sur les mathématiques, c'est probablement la seule formule dont vous vous souvenez :

Pythagore Ce qui est équivalent par rapport au triangle rectangle vu plus haut :
Pythagore

Note : racine carré est l'une des fonctions parmi une multitude de fonctions que l'on va brancher dans notre boîte noire vue précédemment qui fait partie de la bibliothèque mathématiques du langage de programmation de Processing dans lequel l'on programmera votre jeu vidéo.


Savoir un angle autre que l'angle droit, c'est savoir tous les angles de ce triangle rectangle

Enfin, si vous savez la mesure d'un des angles autres que l' angle droit du triangle rectangle, alors, vous savez toutes les mesures des angles de ce triangle. Dans un triangle rectangle, la somme des mesures de ses angles est toujours égale à 180 degrés. Vous savez déjà que l'un de ses angles est de 90 degrés :

α + β + 90° = 180°

Ou tout simplement:

α + β = 90°

α + β sont des angles complémentaires.

Les deux angles restants doivent être égale à 90 degrés. Donc, si vous savez l'angle α, vous savez aussi l'angle β, et vice-versa.

triangle rectangle


Note : la somme des mesures des angles qui est égale à 180° est vraie pour tous les triangles, c'est-à-dire pour les triangles rectangles, équilatérales, isocèles et quelconques de la géométrie euclidienne des Éléments d'Euclide.


Toutes ces définitions se rapportent à la mesure d'un angle. Ainsi, un angle est dit :


saillant si sa mesure est comprise entre 0° et 180°.
plat si sa mesure vaut 180°.
rentrant si sa mesure est comprise entre 180° et 360°.
plein si sa mesure vaut 360°.
aigu si sa mesure vaut entre 0° et 90°.
obtu si sa mesure vaut entre 90° et 180°.
droit si sa mesure vaut 90°.

Deux angles dont la somme des mesures est égale à 90° sont complémentaires.
Deux angles dont la somme des mesures est égale à 180° sont supplémentaires.
Par exemple, dans un triangle rectangle, les deux angles qui ne sont pas l'angle droit sont complémentaires.
Deux angles ayant le même sommet, un côté commun et situés de part et d'autre de ce côté sont adjacents.

triangle rectangle

Code source échantillon avec l'arc tangent (atan) et les coordonnées polaires

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 une archive du programme « ici » pour les systèmes Linux et Windows, 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 11/11/2017 - Avion atan(arctan) 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 PImage img_enemy; // Stocke notre image img_enemy PImage img_balle; // Stocke notre image img_balle 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; // Variables pour tir de munitions de l'avion ennemi // Coordonnée cartésienne avion ennemi // Coordonnées polaires munitions de l'avion ennemi float x_tireur, y_tireur, x_cible, y_cible, theta, r = 0, vitesse; float x_bullet, y_bullet, x_bullet_before, y_bullet_before, coord_x, coord_y; float x_enemy, y_enemy; boolean on; // 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"); img_enemy = loadImage("enemy.png"); img_balle = loadImage("balle_fire.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 on = true; x_enemy = width/2; y_enemy = -50; } // Méthode draw() appelée sans arrêt jusqu'à la fin du programme. void draw() { // Affichage ecran fonds mer image(img_mer, 0, 0); // Affichage avion ennemi imageMode(CENTER); image(img_enemy, x_enemy, y_enemy); imageMode(CORNER); // Évolution de l'avion ennemi plus test de sortie d'écran sur l'axe y y_enemy += 2; if(y_enemy > 850) y_enemy = -50; // Méthode action_Aircraft() action_Aircraft(); // Méthode action_Enemy() action_Enemy(); // Centre le repère sur l'image imageMode(CENTER); image(img_avion_mere, v1.x, v1.y); textSize(18); // Remets le mode imagetMode par défaut imageMode(CORNER); // Affichage sur la fenêtre d'écran du vecteur v1 // avec ses coordonnées catésiennes v1.x et v1.y en temps réel fill(255); 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; } } void action_Enemy() { if(on) { x_tireur = x_enemy; y_tireur = y_enemy; coord_x = 0; coord_y = 0; x_cible = v1.x; y_cible = v1.y; r = 0; on = false; } if ( r==0 ) { if (x_cible >= x_tireur) { theta = atan((y_cible-y_tireur) / (x_cible-x_tireur)); // Calcul angle de tir //theta += random(-0.1, 0.1); vitesse = random(2, 5); } else { theta = atan((y_cible-y_tireur) / (x_cible-x_tireur)); // Calcul angle de tir //theta += (random(-0.1, 0.1)); vitesse = -(random( 2, 5 )); } } // Coordonnées polaires des munitions des avions ennemis r += vitesse; x_bullet = cos(theta) * r + x_tireur + coord_x; y_bullet = sin(theta) * r + y_tireur + coord_y; // On teste les sorties d'écran des munitions if(x_bullet > width || x_bullet < 0 || y_bullet > height || y_bullet < 0) { on = true; } // Affichage des munitions imageMode(CENTER); image(img_balle, x_bullet, y_bullet); imageMode(CORNER); }

Commentaire du programme

  1. Les 2 barres obliques (//) sont des commentaires.
  2. Nous avons d'abord nos variables globales du type PImage, int, boolean, PVector et float, regarder les commentaires dans le code source qui explique ce que font ces variables.
  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 600 par 800, nous chargeons nos images (avion, mer, ennemi et munition) et nous assignons nos variables booléennes pour les quatre directions, la vitesse de l'avion mère et un boolean on qui nous servira plus bas dans la mèthode action_Enemy( )..
  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 l'affichage de notre avion ennemi centrer sur l'image et en dessous on test la sortie d'écran de l'avion ennemi sur l'axe y ensuite on a la méthode action Aircraft( ) qui sera appellée et qui s'occupera de faire bouger l'avion dans les quatre directions suivant que l'on appuie sur les touches du clavier, ensuite vient la mèthode action_Enemy( ) qui sera appellée aussi et qui s'occupera de faire les mouvements des munitions de l'avion enemi vers l'avion mère, ensuite on a 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 à la variable 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 à la variable up, dw, le ou ri.
  7. Ensuite, nous avons notre dernière méthode Action_Enemy( ), à l'intérieur de son corps entre accolades, nous avons un teste sur la variable booléenne on, elle est égale à true au départ donc on rentre dans le corps du if(on) entre accolades et on assigne les différentes variables comme x_tireur et y_tireur qui sont respectivement égale à x_enemy et y_enemy, les coordonnées cartésiennes de notre avion ennemi, coord_x et coord_y égale à 0, x_cible et y_cible assigner à notre vecteur pour les coordonnées cartésiennes v1.x et v1.y de notre avion mère, r pour le rayon égale à 0 et la dernière variable on assigner à false qui nous fera sortir du corps de la condition du if(on) juste on dessus.
  8. Ensuite, nous avons un teste sur le rayon r = 0 qui amorce la condition suivante juste en dessous qui teste si x_cible >= x_tireur, si c'est le cas, ont calcul notre arc tangent avec l'angle thêta et on donne une vitesse aléatoire avec l'instruction random entre 2 et 4 car le 5 entre parenthèses n'est pas inclus, sinon si x_cible <= x_tireur, on fais la même chose que précédemment, ont calcul l'arc tangente avec l'angle thêta mais avec cette fois-ci une vitesse négative pour avoir toujours un angle théta positif, sinon nos angles thêta serons négatives et les munitions se déplacerons à l'opposé de notre avion mère.
  9. Nous avons redessiné un triangle rectangle avec les coordonnées cartésiennes de notre avion mère et de notre avion ennemi et nous avons calculé l'arc tangent en récupérant les longueurs des côtés de ce triangle rectangle et suivant les cas de figure nous pouvons nous retrouver avec des angles thêta négatif, c'est pour cela que dans un des cas de figure ci-dessus, nous avons passé notre vitesse en négative pour toujours avoir des angles thêta positif.
  10. Ensuite, nous avons notre calcul des coordonnées polaires des munitions de l'avion ennemi avec x_bullet et y_bullet puis le rayon r, on applique simplement la formule et tout se passera bien.
  11. Pour finir, on n'oublie pas d'afficher notre image de la munition pour la voir se déplacer sur notre fenêtre d'écran.

Nous pouvons donc après calculs avoir nos angles de viser, mais il y a un problème encore, si nos angles de viser sont négatifs, les munitions des séries d'avions au lieu d'aller dans la direction et le sens de notre avion mère iront à l'opposé de l'avion mère, alors on passe la variable vitesse qui fait faire les mouvements des munitions en négatif et tout ira bien et pour le produit de cos(θ) et sin(θ) par le rayon r, on a ajouté à x_tireur + coord_x et à y_tireur + coord_y qui sert à faire tirer les munitions depuis la position des coordonnées cartésiennes des séries d'avions x_tireur et y_tireur et on a ajouté aussi coord_x et coord_y qui sert à translater le repère (0, 0) mais ici ca nous servira à rien pour cet exemple de code source par contre dans le jeu vidéo que l'on va programmer ensemble, il y aura trois vagues successives d'avions dont deux ou le repère sera translaté à (width/2, height/2) au centre de la fenêtre d'écran, car nous allons utiliser une fonction carré : a.x² avec a comme coefficient directeur fixe et une autre fonction carré : b.x² avec b comme coefficient directeur aléatoire et dans la troisième vague on va utiliser une fonction affine : c.x + b avec quelques modifications avec c comme coefficient directeur positif ou négatif et on verra les séries d'avions arriver du haut de notre fenêtre d'écran soit par la droite ou soit par la gauche en diagonale.


Maintenant que nous connaissons les angles(θ) entre les séries d'avions et l'avion mère et les coordonnées cartésiennes des munitions des séries d'avions qui visent vers l'avion mère avec ici x_bullet, y_bullet en deux dimensions donc dans un plan que l'on verra à la rubrique « vecteur » et r le rayon que l'on peut aussi appeler le module. On peut ainsi passer des coordonnées polaires aux coordonnées cartésiennes pour l'affichage. Regarder les images ci-dessous, elle parle d'elle-même.

Ici, on calcule avec l'arc tangent pour retrouver les angles entre les séries d'avions et l'avion mère

arc tangente

Ici, on calcule avec les coordonnées polaires pour faire les déplacements des munitions des séries d'avions

coordonnées polaire

Ça paraît compliqué, mais en vrai, c'est extrêmement simple, ce sont juste des formules à appliquer, mais, concentrez-vous quand même pour comprendre les raisonnements de ces calculs, pour l'arc tangent (arctan), c'est juste la fonction inverse de la tangente (tan) qui est égal à l'arc tangent du rapport du côté opposé par le côté adjacent de notre triangle rectangle que l'on a vue plut haut, et pour les coordonnées polaires, c'est juste le produit de cos(θ) par le rayon r pour les abscisses qui est égal à x_bullet et le produit de sin(θ) par le même rayon r pour les ordonnées qui est égal à y_bullet, on peut ainsi passer des coordonnées polaires aux coordonnées cartésiennes pour l'affichage. Ce n'est vraiment pas d'un niveau élevé, on apprend cela au collège et lycée. Ce sera le plus gros des calculs dans votre jeu vidéo que vous aurez à faire avec les calculs de dérivées de nos fonctions f que l'on verra à la rubrique « analyse » pour que les séries d'avions aient des mouvements réalistes. Vous pouvez cliquer sur la démo ci-dessous et faire bouger l'avion mère avec les touches fléchées de votre clavier.

Les munitions trouvent les angles θ avec l'arc tangent (atan) puis se déplacent avec les coordonnées polaires.

analyse : dériver

Juste ci-dessous, j'explique mieux ce que sont les coordonnées polaires.


Coordonnées polaires suite

Dès que nous avons besoin d'afficher une forme avec Processing, il nous faut indiquer une position exprimée en pixels : les coordonnées x et y. Ces coordonnées sont appelées coordonnées cartésiennes, du nom de René Descartes, le mathématicien Français qui a développé ce que l'on appelle l'espace cartésien au XVIIe siecle. Un autre système de coordonnées utile est appelé coordonnées polaires décrit un point dans l'espace (en 2d) comme un angle de rotation autour de l'origine et le rayon (la distance) depuis l'origine. Si on fait le parallèle avec les vecteurs : les coordonnées cartésiennes sont les coordonnées {x, y} du vecteur. Les coordonnées polaires sont la norme (longueur) et la direction (angle) du vecteur, par contre, les fonctions de dessin en Processing ne savent pas utiliser les coordonnées polaires.
Dès que nous voulons afficher quelque chose, nous devons indiquer les positions sous forme de coordonnées cartésiennes {x, y}. Il est parfois pourtant beaucoup plus pratique de travailler avec les coordonnées polaires, lorsqu'on dessine. Heureusement pour nous, grâce à la trigonométrie, nous pouvons convertir dans les deux sens entre le système polaire et le système cartésien. Cela nous permet de travailler avec le système de coordonnées qui nous arrange mais toujours utiliser les coordonnées cartésiennes pour l'affichage.

coordonnées polaire coordonnées polaire


Comme il s’agit d’un système bidimensionnel, chaque point est déterminé par les coordonnées polaires, qui sont la coordonnée radiale et la coordonnée angulaire. La coordonnée radiale (souvent notée r ou ρ, et appelée rayon) exprime la distance du point à un point central appelé pôle (équivalent à l’origine des coordonnées cartésiennes). La coordonnée angulaire (également appelée angle polaire ou azimut, et souvent notée t ou θ) exprime la mesure, dans le sens trigonométrique (sens positif), de l’angle entre le point et la demi-droite d’angle 0°, appelée axe polaire (équivalente à l’axe des abscisses en coordonnées cartésiennes). Ce type de conversion est très utile dans certains cas. Par exemple, déplacer une forme le long d'une trajectoire circulaire en utilisant les coordonnées cartésiennes n'est pas si facile ! Alors, qu'au contraire, utiliser les coordonnées polaires, dans ce cas, est très simple :
Il suffit simplement d'augmenter l'angle !


Pour aller plus loin avec le cercle trigonométrique, sinus et cosinus

cercle trigonométrique

Je rappel sur le lien suivant : Ces Savants Musulmans Qui Ont Changé La Face Du Monde comme Al-Khawarizmi surnommer « le père de l'algèbre » que je présente à la rubrique « analyse » et Al-Kashi que je présente ci-dessous.


Rappel sur le théorème d'Al-Kashi

Note : nous pouvons aussi trouver les relations entre distances et angles dans les triangles quelconque cette fois-ci, nous devons ce théorème à Al-Kashi. Le théorème d'Al-Kashi est aussi appélé loi des cosinus ou encore théorème de Pythagore généralisé. Ce théorème de géométrie relie dans un triangle, la longueur d'un côté à celles des deux autres et au cosinus de l'angle formé par ces deux côtés. Il généralise ainsi le théorème Le théorème d'Al-Kashi est aussi appélé loi des cosinus ou encore théorème de Pythagore aux triangles non rectangles. Ce résultat est déjà connu du célèbre mathématicien grec Euclide dès le IIIe siècle av. J.-C. mais uniquement sous forme géométrique (sans la notion de fonction cosinus). Cependant, assez étrangement, on lui associe en France uniquement, le nom du mathématicien perse Al-Kashi (14e siècle) dès les années 1990 alors que les appellations théorème de Pythagore généralisé ou loi des cosinus étaient utilisées jusque-là. C'est ainsi d'ailleurs que l'on nomme cette propriété, dans tout le reste du monde !

Le théorème d'al-Kashi s'énonce de la façon suivante:

Al-kashi
Formule d'Al-kashi

article Wikipédia.


Conclusion

C'est la fin de ce cours sur la trigonométrie qui est le B.a.-ba d'une science indéfini qui traite des relations entre distances et angles dans les triangles et des fonctions trigonométriques telles que sinus, cosinus et tangente. Avec ce que nous avons vu jusqu'ici, nous pouvons presque aborder les mathématiques de votre jeu vidéo. Mais il nous reste à voir encore les vecteurs et une partie infime de l'analyse, et plus précisément la dérivée d'une fonction f. Ces deux branches vastes des mathématiques ainsi que la trigonométrie, sont des outils dont on ne peut pas se passer dans le monde d'aujourd'hui, par exemple dans toutes les sciences confondues dans l'industrie et autres.

Note : j'oublie de vous dire que les cours que je vous présente sur la trigonométrie, les vecteurs et cette partie infime de l'analyse, sont apprises au collège et lycée. Cela reste d'un niveau abordable pour toute personne motivée voulant apprendre cette partie infime de cette science indéfinie des mathématiques.

Poursuivons à la rubrique « vecteur » et gardons courage, nous sommes qu'au début de votre jeu vidéo. Vous y verrez plus clair un peu plus loin...


Flèche pour remonter la page