images bannieres

Mathgames

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

Analyse

Lorsque l'on étudie les fonctions, on se sert tout le temps de la dérivée. C'est infiniment simple car il n'y a quasiment que des formules à apprendre!!! Si vous avez une fonction f, vous pouvez calculer une autre fonction qui se note f ' (on prononce f prime), que l'on appelle la dérivée. Vous verrez plus tard l'utilité de f ' (ca vous servira pour votre jeu vidéo). On va voir comment calculer cette dérivée f ' à partir de la fonction f. Comme je vous ai dit, c'est infiniment simple : il faut juste apprendre les formules!!


Qu'est-ce que la dérivée

En analyse, le nombre dérivé en un point d'une fonction à variable et valeurs réelles est le coefficient directeur de la tangente au graphe de cette fonction en ce point. C'est le coefficient directeur de l'approximation affine de cette fonction en ce point; ce nombre n'est donc défini que si cette tangente — ou cette approximation — existe.

article Wikipédia.


Coefficient directeur de la tangente

Dans l'image ci-dessous, nous voyons graphiquement le nombre dérivé au point A de la tangente T à notre courbe Cf. Nous avons choisi ici une courbe représentante de la fonction carrée : x², cette fonction est une parabole tournée vers le haut à cause du signe positif de son coefficient directeur : f(x) = +1 * x² et non : f(x) = -1 * x², j'ai un petit peu décomposé pour que vous compreniez mieux et est un monôme du second degré, dans un repère orthogonal, elle est symétrique par rapport à l'axe des ordonnées. Voyez-vous ce que l'on observe:

Fonction derivée

Le nombre dérivé au point A = -5, ce point A est le coefficient directeur de la pente de la tangente T à notre courbe Cf.

Fonction dérivée

Le nombre dérivé au point A = 0, le coefficient directeur de la pente de la tangente T à notre courbe Cf est nul.

Fonction dérivé

Le nombre dérivé au point A = 4, ce point A est le coefficient directeur de la pente de la tangente T à notre courbe Cf.


Avez-vous une idée, pourquoi l'on aura besoin de calculer la dérivée de la fonction x² à notre courbe Cf? Je vais vous expliquer, car dans votre jeu vidéo que l'on va programmer ensemble, on aura besoin de la dérivée pour que les mouvements des séries d'avions qui suivent leurs différentes trajectoires paraboliques soient réalistes, les sprites, c'est-à-dire l'axe des images des avions que nous allons utiliser dans votre jeu vidéo, se calera en chaque point à la tangente à notre courbe Cf et l'on verra les avions faire des rotations sur eux-mêmes suivant leurs différentes trajectoires paraboliques alors que si l'on n'avait pas calculé les points de dérivées des avions de leurs fonctions x² à notre courbe Cf, les avions n'auraient pas pu faire des rotations sur eux-mêmes suivant leurs différentes trajectoires paraboliques. Observer les images ci-dessous, vous allez comprendre immédiatement, elle parle d'elle-même.


Fonction de f '(x²) = 2x

Ici, l'avion fait une rotation sur lui-même le long de sa trajectoire, car nous calculons les points de dérivées donc les coefficients directeurs des pentes des tangentes à notre courbe Cf.

Fonction dérivée

Fonction de f(x) = x²

Ici, l'avion ne fait pas de rotation sur lui-même le long de sa trajectoire, car nous ne calculons pas les points de dérivées de sa fonction x² à notre courbe Cf.

Fonction f(x²)

Formules de dérivée de 1ère S (lycée)

triangle rectangle

Fonction de f '(x²) = 2x

Nous avons besoin de calculer les dérivées des fonctions x² à notre courbe Cf pour faire votre jeu vidéo pour avoir plus de réalisme lors des mouvements des séries avions. Pour calculer les dérivées des fonctions x², on regarde le tableau ci-dessus et on voit que x² est égale à 2x. C'est tout ce dont on a besoin pour accomplir la suite de votre jeu vidéo pour le moment.


Code source échantillon avec la dérivée

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. Cette archive du programme est la version avec la dérivée, si vous voulez voir la version sans la dérivée, je vous laisse une seconde archive du programme « ici ».

/******************************************* Autheur de ce programme : himalaya2004 tuto Analyse : dérivée Date le 24/10/2017 Programmation Java dans IDE Processing *******************************************/ PImage img_avion; // Stocke notre image img_avion PImage img_mer; // Stocke notre image img_mer (fonds mer) // Variables x, y, coef_dir float x, y, coef_dir; // 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); // Charge l'image de l'avion et de la mer img_avion = loadImage("avion.png"); img_mer = loadImage("fonds_mer_0.jpg"); x = -200; y = 0; coef_dir = -0.01; } // Méthode draw() appelée sans arrêt jusqu'à la fin du programme. void draw() { // Affichage ecran fonds mer. image(img_mer, 0, 0); // Fonction y(x) = -0.01 * x² y = coef_dir * sq(x); pushMatrix(); translate(x + width/2, y + height/2); // Calcul de la dérivée de y'(x) soit d/dx(-0.01 * x²) // à l'intérieur de notre fonction arctan (atan) // dans le rotate. rotate(PI/2 + atan(coef_dir * 2 * x)); // Affichage avion mère aux coordonnées cartésiennes 0, 0 ajouté // aux coordonnées cartésiennes translatées image(img_avion, 0, 0); popMatrix(); // Mouvement de la trajectoire x = x + 2 sur les l'abscisse des x x += 2; // Test si la coordonnée cartésienne x sort de la fenêtre d'écran if(x > width/2) { x = -width/2; } }

Commentaire du programme

  1. Les 2 barres obliques (//) sont des commentaires.
  2. On déclare trois variables x, y, coef_dir.
  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 (mer et avion) et nous assignons nos trois variables x, y et coef_dir.
  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(mer, 0, 0) qui affiche le fond de mer.
  5. Ensuite, nous avons notre fonction carrée : y = coef_dir * sq(x), avec sq qui éleve notre variable x au carré ou à la puissance 2 qui fait partie de la bibliothèque mathématique de Processing et on l'assigne à y.
  6. Ensuite, la prochaine instruction est pushMatrix( ) qui va de pair avec popMatrix( ) et entre ces deux instructions, nous trouvons translate(x + width/2, y + height/2) qui sert à translater le repère des coordonnées cartésiennes de l'avion sur votre fenêtre d'écran, nous avons donc les coordonnées cartésiennes de l'avion qui est ajoutée à la moitié de la largeur et de la hauteur de la fenêtre d'écran.
  7. Ensuite, se trouve une nouvelle instruction rotate(PI/2 + atan(coef_dir * 2 * x))); et c'est à l'intérieur entre les parenthèses que l'on doit mettre notre dérivé pour que l'avion ait un mouvement réaliste. Il faut mettre la dérivée à l'intérieur de notre fonction atan (arctan) qui est notre fonction inverse de la tangente (tan), le PI/2 est la position de l'image dès le départ, c'est-à-dire que vous pouvez faire une rotation de l'image sur elle-même, l'image est bien réglée, l'avion vient du haut de l'écran et est dans la bonne direction ou le bon sens, le devant de l'avion pointe vers le bas dès le départ du mouvement.
    Le rotate( ) s'occupe de faire les rotations de l'avion sur la pente de la tangente (à nos points de dérivées) dans la fonction atan (arctan) pendant la trajectoire de l'avion.
  8. Ensuite, nous affichons notre avion avec image(img_avion, 0, 0), on affiche l'avion mère aux coordonnées cartésiennes (0, 0) ajoutées aux coordonnées cartésiennes translatées au-dessus.
  9. Ensuite, nous avons le mouvement de l'avion qui se fait sur les abscisses en x = x + 2, l'avion se déplace alors sur sa parabole.
  10. Et pour finir, on teste si la coordonnée cartésienne x de l'avion est plus grande que width/2 (largeur/2), si c'est le cas, on assigne la coordonnée cartésienne x de l'avion à -width/2 (-largeur/2) ainsi l'avion tourne en boucle quand il sort de l'écran.

Je vais vous expliquer plus en détail le calcul de notre dérivée dans le rotate et plus précisément à l'intérieur de notre fonction atan (arctan) de ce programme, on va calculer avec les variables suivantes : x = -200, y = 0 et coef_dir = -0.01 notre coefficient directeur dans les calculs ci-dessous.


 
/*******************************************
      
   Autheur de ce programme : himalaya2004                      
   tuto Analyse : dérivée
   Date le 24/10/2017                                    
   Programmation Java dans IDE Processing                                   
                                                                                
 *******************************************/

//  Variables x, y, coef_dir
float x, y, coef_dir;

x = -200;
y = 0; 
coef_dir = -0.01;

//  fonction y(x) = -0.01 * x²
y = coef_dir * sq(x);

pushMatrix();
translate(x + width/2, y + height/2);
//  Calcul de la dérivée de y'(x) soit d/dx(-0.01 * x²)
//  à l'intérieur de notre fonction arctan (atan) 
//  dans le rotate.
rotate(PI/2 + atan(coef_dir * 2 * x));
image(img_avion, 0, 0);  //  image aux coordonnées 0, 0 des coordonnées translatées
popMatrix();


Calculatrice logiciel de la TI Nspire CX CAS

Fonction d/dx(-0.01 * x²)

On voit bien le résultat dans le calcul à l'intérieur du rotate et plus précisément dans notre fonction atan (arctan), le résultat après le calcul de notre dérivée est égal à -0.02 * x puis après -2 * x en prenant compte de notre largeur d'ecran diviser par 2 et de notre hauteur d'écran diviser par 2, et en vérifiant avec le calcul inverse de notre dérivée, c'est-à-dire en prenant l'une de ses primitives* qui est : -0.02 * x + C, on n'oublie pas la constante C car il y a une infinité de primitives.

une primitive de : F(x) = -0.02 * x + C

Calcul intégrale

nous retombons bien sûr notre fonction dérivée de départ : y' (x) = -0.01 * x², mais ici, nous n'avions pas besoin du calcul de la primitive pour la suite de votre jeux vidéo, je l'ai mis parce que les dériver ne va pas sans les primitives et vice-versa, c'était juste un rappel.


Avec les calculatrices graphiques ou logicielles de mathématiques sur PC, nous pouvons calculer des dérivées et des primitives et bien plus encore que si elles ont la fonction CAS qui est l'acronyme de computer Algebra System, je vous mets la capture d'écran de la calculatrice TI Nspire CX CAS en version logiciel avec laquelle je travaille en mathématiques ci-dessous.

Calcul primitive
Voici les mastodontes de calculatrices CAS qui se font actuellement au temps présent, elles sont en couleur et certaine tactile.

Calcul primitive Calcul primitive Calcul primitive


Définition : une primitive* c'est « l’inverse de la dérivée ». La dérivée d’une fonction f se note f ’, et généralement la primitive de f se note F. Par définition, f est la dérivée de F, on a alors la relation :

Primitive

F est la primitive de f, donc f est la dérivée de F.

article Wikipédia.

Ici, notre primitive est bien : -0.02*x.


Je mets un tableau de quelques primitives pour rappel ci-dessous.

Primitive


Et maintenant, après analyse complète de ses différents algorithmes ou de ces deux programmes si vous préférez et si je ne me suis pas trompé, je vous laisse analyser ces deux démos ci-dessous en cliquant sur l'image, l'une avec calcul de la dérivée et l'autre sans calcul de la dérivée.

Mouvement de l'avion mère avec la dérivée

analyse : dériver

Mouvement de l'avion mère sans la dérivée

analyse : sans dériver

Note : vous aurez remarqué que notre fonction dérivée qui est y' (x) = -0.01 * x², à un coefficient directeur égale à -0.01 de signe négatif, je rappel qu'un polynôme ou monôme du second degré est une parabole tournée vers le haut ou vers le bas, cela dépend du signe de son coefficient directeur, si le signe du coefficient directeur de notre fonction est négatif alors la parabole sera tourné vers le bas et si le signe du coefficient directeur de notre fonction est positif alors la parabole sera tourné vers le haut, essayé d'entrer cette fonction sur des calculatrices graphiques ou autres logiciels de mathématique sur PC, elle sera bien tournée vers le bas mais nous avons un problème ici, quand vous lancez le programme, l'avion mère qui se déplace sur sa parabole est tournée vers le haut alors qu'elle devrait être tournée vers le bas. Nous avons là une anomalie.

Note : Cette anomalie dans notre programme vient du repère orthonormé ou plus précisément de l'axe d'origine (0, 0) qui se trouve toujours en haut à gauche de notre fenêtre d'écran, nous avons là deux axes, l'axe des x qui se trouve sur l'horizontale et l'axe des y qui se trouve sur la verticale. En fait, cette anomalie vient du fait que l'axe des y qui se trouve sur la verticale est toujours inversé dans notre repère orthonormé, c'est pour cela que notre parabole est tournée vers le haut en non vers le bas et c'est pour cela que l'on a des aberrations lorsque l'on fait des mathématiques comme de la trigonométrie sur le PC avec sortie graphique par exemple, lorsque l'on prend la lecture d'un angle au lieu d'aller dans le sens positif contraire aux aiguilles d'une montre, la lecture de cet angle va dans le sens inverse. C'est dû aux ingénieurs qui ont construit les premiers micro-ordinateurs à partir de l'année 1973 et jusqu'à maintenant, ils les on construit en gardant une certaine convention de l'époque où on avait des écrans à balayage*.

L'affichage à balayage* : dans le cas des téléviseurs et des écrans d’ordinateurs, toute la face du tube est parcourue selon un trajet bien défini, et l’image est créée en faisant varier l’intensité du flux d’électrons (le faisceau), et donc l’intensité lumineuse du spot, au long de son parcours. Le flux dans tous les téléviseurs modernes est dévié par un champ magnétique appliqué sur le col du tube par un « joug magnétique » (magnetic yoke en anglais), qui est composé de bobines (souvent deux) enroulées sur du ferrite et contrôlées par un circuit électronique. C’est un balayage par déflexion magnétique.

article Wikipédia.

Au cours du balayage, le faisceau parcourt de gauche à droite des lignes qui se succèdent de haut en bas (comme les lignes d’un livre), le retour à la ligne suivante et en début de page se fait à faisceau éteint.

article Wikipédia.

Voilà pourquoi notre repère orthonormé et plus précisément l'axe d'origine (0, 0) se trouve toujours en haut à gauche et que l'axe vertical sur les y est inversé parce que cet axe vertical sur les y en haut à gauche évolue vers les positifs en dessous du 0 alors que dans un repère orthonormé en mathématique, l'axe vertical des y évolue toujours vers les négatifs en dessous du 0, c'est pour cela que notre parabole est inversé. Nous pouvons quand même translater notre repère orthonormé au centre de la fenêtre d'écran grâce à l'instruction informatique translate(width/2, heigth/2) ou translater à d'autres coordonnées dans la limite de notre fenêtre d'écran, cette instruction est pratiquement dans tous les langages informatiques et une dernière chose à vous dire, ici, nous étions en 2d, mais si vous étiez en 3d, il faudra rajouter la composante z pour un espace avec les coordonnées {x, y, z}, ce qui deviendrait translate(x, y, z).


analyse : second degrès

Note : Une dernière chose à vous dire, vous pourrez entrer d'autres fonctions autre que a.x² dans vos jeux vidéo ou autres programmes et vous verrez l'axe des images qui se calera en chaque point à la tangente à votre courbe Cf en faisant une rotation le long de sa trajectoire suivant la fonction mathématique que vous aurez défini, un exemple avec cette fonction : y(x) = 2 * ( sin(x / frequence) * amplitude ) - 100. Il faudra vérifier la référence du langage de programmation que vous utiliserez pour voir ce qu'il propose en mathématiques.

Voilà tout, je pense avoir tout dit sur ce qui était essentiel sur cette rubrique « analyse » et la dérivée dont on aura besoin pour pouvoir programmer votre jeu vidéo pour la suite.

Nous pouvons donc poursuivre la rubrique « programmation » avec sagesse, alors, allons-y et découvrons la programmation de langage informatique et ses algorithmes*.

Note : 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.


Conclusion

Je remercie tout d'abord Ali Kaced un ami d'enfance qui est professeur de mathématiques en classe de terminale m'ayant aidé à rédiger ce cours sur les dérivées. Voici, nous avons fini ces trois cours de base qui sont la trigonométrie, les vecteurs et cette partie infime de l'analyse pour pouvoir programmer avec plus de facilité votre jeu vidéo. Il y a immensément plus à en dire sur ces bases des mathématiques que je vous ai rappelées. Je vous rappelle que la science des mathématiques ne peut pas être bornée d'un point à un autre et est en mouvement perpétuel et indéfini jusqu'à une limite temporelle. Continuons à la rubrique finale « programmation » sans se décourager surtout, avec de la patiente, de la volonté et de la persévérance, on arrive à se surpasser et à réussir tout ce que l'on entreprend comme projet dans la limite du possible si ce projet est bien licite, bien entendu. Nous sommes tout prêts du but, alors, continuons.


Flèche pour remonter la page