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 passera des coordonnées polaires aux coordonnées cartésiennes 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 développement intégré 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.


Sprite* : 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 de l'hypoténuse de 10 ul (unité de longueur). Vous pouvez ensuite brancher ces valeurs dans la formule :

sin(45) = opposé / 10 ul

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é par le 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 ul

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 ul
opposé = 7.07 ul

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 intégré, 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 tous les triangles rectangles, équilatérales, isocèles et quelconques de la géométrie euclidienne des Éléments d'Euclide.


Angles géométriques


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°.
Obtus 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é est adjacent.

différents angles

Rappel sur le théorème de Thalès

théorème de Thalès théorème de Thalès théorème de Thalès

Vous n'aurez pas besoin du théorème de Thalès pour la suite de votre jeu vidéo que l'on programmera ensemble à la rubrique « programmation », j'ai mis ce théorème de géométrie juste pour rappel sur les mathématiques en général et plus particulièrement à la géométrie avec ses différents angles et mesure que l'on a vus jusqu'à maintenant par contre la trigonométrie avec l'arc tangent pour diriger les munitions des séries d'avions qui visent vers l'avion mère, les vecteurs pour positionner l'avion mère dans notre plan et les dérivées de nos fonctions f pour que les séries d'avions soient réalistes, nous servirons à fond pour programmer les différents algorithmes* de votre jeu vidéo avec notre boîte à outils des mathématiques.


Définition : un algorithme* est une suite finie et non ambiguë d’opérations ou d'instructions permettant de résoudre un problème. Le mot algorithme vient du mot arabe الخوارزمي, nom du mathématicien perse dû IXe siècle Al-Khawarizmi, écrivant en langue arabe, surnommer « le père de l'algèbre ». Le domaine qui étudie les algorithmes est appelé l'algorithmique. On retrouve aujourd'hui des algorithmes dans de nombreuses applications telles que la cryptographie, le routage d'informations, la planification et l'utilisation optimale des ressources, la bio-informatique, etc.

Définition générale : un algorithme* est une méthode générale pour résoudre un ensemble de problèmes. Il est dit correct lorsque, pour chaque instance du problème, il se termine en produisant la bonne sortie, c'est-à-dire qu'il résout le problème posé. On mesure l'efficacité d'un algorithme notamment par sa durée de calcul, par sa consommation de mémoire RAM (en partant du principe que chaque instruction a un temps d'exécution constant), par la précision des résultats obtenus (par exemple avec l'utilisation de méthodes probabilistes, comme la méthode de Monte-Carlo), sa scalabilité (son aptitude à être efficacement parallélisé), etc. Les ordinateurs sur lesquels s'exécutent ces algorithmes ne sont pas infiniment rapides : le temps de machine reste une ressource limitée, malgré une augmentation constante des performances des ordinateurs. Un algorithme sera donc dit performant s'il utilise avec parcimonie les ressources dont il dispose, c'est-à-dire le temps CPU et la mémoire RAM ou plus récemment sa consommation électrique. L’analyse de la complexité algorithmique permet de prédire l'évolution en temps calcul nécessaire pour amener un algorithme à son terme, en fonction de la quantité de données à traiter.

article Wikipédia.


Code source échantillon
avec l'arc tangent (atan) et passage des coordonnées polaires aux coordonnées cartésiennes

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 avec la version Windows du programme « 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 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 et les variables coord_x et coord_y 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é du type : y = a.x² avec a comme coefficient directeur fixe et une autre fonction carré du type : y = b.x² avec b comme coefficient directeur aléatoire et dans la troisième vague on va utiliser une fonction affine du type : y = a.x + b avec a comme coefficient directeur soit positif ou soit négatif et l'on verra les séries d'avions arriver du haut de notre fenêtre d'écran par la droite ou par la gauche en direction du bas de notre fenêtre d'écran 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 et y_bullet en deux dimensions donc dans notre plan que l'on verra à la rubrique « vecteur » et r le rayon, 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 en passant des coordonnées polaires aux coordonnées cartésiennes pour faire
les déplacements des munitions des séries d'avions vers l'avion mère

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, 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 en passant des coordonnées polaires aux coordonnées cartésiennes vers l'avion mère

Vous pouvez télécharger une archive du programme « ici ».

analyse : dériver

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


Coordonnées polaires suites

Lorsque que nous avons besoin d'afficher une forme avec Processing, il nous faut indiquer une position exprimée en pixels avec 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 donc dans un plan) 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.


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 !


Coordonnées polaires et cartésiennes

coordonnées polaire coordonnées polaire

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

cercle trigonométrique

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. 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 (XIVe 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

article Wikipédia.


Conclusion

Voici, 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 de 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 la théorie pour programmer votre jeu vidéo, vous y verrez plus clair un peu plus loin.

Flèche pour remonter la page