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 nous 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 : x² 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:

La fonction carrée : f(x) = x²

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.

La fonction carrée : f(x) = x²

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

La fonction carrée : f(x) = x²

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 carrée : 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 à leurs fonctions carrées : x² de 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.

On dérivée notre fonction carré : x²

On regarde la formule ci-dessous pour comprendre que la dérivée de la fonction carrée : f(x) = x² est : f '(x) = 2x ou l'on peut écrire plus formellement comme cela : d/dx(x²) = 2x, tout simplement, c'est du niveau 1re S au lycée.

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 de notre fonction carrée : x² à notre courbe Cf.

On ne dérive pas notre fonction carré : 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 notre fonction carrée : x² à notre courbe Cf.

d/dx(x²) = 2x

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

Tableau de dérivé de 1re S au lycée

Code source échantillon
avec la dérivée de notre fonction f

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 de la dérivée « ici » et une seconde archive avec la version Windows du programme sans la dérivée « ici » mais en haut de cette page web sur la barre des rubriques, vous avez un lien de téléchargement pour les versions Linux, pour les versions Mac OS X, les versions 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                      
   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 de l'avion 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'abscisses des x
x += 2;

//  Test si la coordonnée cartésienne x de l'avion 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 du type 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) dans le programme ci-dessous, on va calculer avec les variables suivantes : x = -200 et coef_dir = -0.01 qui est le coefficient directeur de notre fonction carrée : y = coef_dir * sq(x) qui est équivalent à : y = -0.01 * x² 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                                   
                                                                                
*******************************************/

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 de l'avion 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'abscisses des x
x += 2;

//  Test si la coordonnée cartésienne x de l'avion sort de la fenêtre d'écran
if(x > width/2) { x = -width/2; }
}

Calcule de notre dérivé avec calculatrice logicielle de la TI Nspire CX CAS

Nous avons tout d'abord assigné notre fonction carrée : y = -0.01 * x² ensuite nous calculons la dérivée de notre fonction y qui est égale à -0.02 * x et son nombre dérivé qui est égale à 4 pour x = -200 pour sa première valeur, car l'avion est en mouvement permanent sur sa trajectoire parabolique et il y a donc plusieurs valeurs pour toute une série de nombre dérivé qui évolue par pas de 2 sur l'axe des x ou des abscisses si vous préférez, regarder le programme ci-dessus, on a x += 2 qui est équivalent à x = x + 2 et vous verrez l'axe des images des avions que nous allons utiliser dans votre jeu vidéo qui se calera en chaque point à la tangente suivent leurs différentes trajectoires paraboliques à notre courbe Cf. Voilà tout ce qu'il y avait à dire pour ce calcul de dérivé pour que les mouvements des séries d'avions qui suivent leurs différentes trajectoires paraboliques soient réalistes.

Voici un petit rappel sur les primitives ci-dessous pour ceux que ça intéresse, car les dérivées ne vont pas sans les primitives et vice-versa, mais sinon nous n'aurons pas besoin de primitive pour la suite de votre jeu vidéo et donc passer le sujet.

Calculer une 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 :

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

article Wikipédia.

Voici un tableau de quelques primitives pour rappel ci-dessous.

Rappel : notre fonction de départ ci-dessus était du type carrée définie à : y = -0.01 * x², ensuite, nous calculons l'une de ses primitives en faisant le calcul inverse ƒ(-0.01 * x²) dx, le résultat est égale à -0.003333 * x³ et lorsque nous dérivons de nouveau d/dx(-0.0033333333333333 * x³) dx, nous retombons bien sur notre fonction carrée de départ : y = -0.01 * x².

note : nous avons calculé une primitive parmi une infinité de primitives de notre fonction carrée de départ : y = -0.01 * x², c'est pour cela que l'on doit rajouter une constante C avec C ∈ ℝ qui signifie que C appartient à l'ensemble des nombres réels s'écrivant en symboles mathématiques : « ℝ ».

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. Voici les mastodontes de calculatrices CAS qui se font actuellement au temps présent, elles sont en couleur et certaine tactile comme la HP Prime et la fx CP400+E.

Et maintenant, après analyse complète de ses différents algorithmes, 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.

Note : je vous ai fait voir le code source du programme avec le calcul de dérivé ci-dessus, mais le second programme sans la dérivée, je ne vous l'ai pas fait voir, mais c'est exactement le même que le premier, mais sans le calcul de la dérivée cette fois-ci, la fonction où se trouve le calcul de dérivé dans le second programme que je ne vous ai pas fait voir, je l'ai mis en commentaire en interne. Si vous voulez voir le programme, cliquez sur « le mouvement de l'avion sans la dérivée » ci-dessous et si vous êtes sur le navigateur chrome, cliquez sur les trois point en haut à droite ensuite cliqué sur « plus d'outils » ensuite cliqué sur « outils de développement » et vous verrez sur la barre en haut l'onglet « sources » qui sera sélectionner et sur la gauche cliquez sur « sketch.js » et vous verrez le programme complet ou sinon télécharger l'archive du programme ci-dessous.

Le mouvement de l'avion avec la dérivée

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

Le mouvement de l'avion sans la dérivée

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

Note : vous aurez remarqué que notre fonction qui est du type carré : y = -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, la parabole sera bien tournée vers le bas mais nous avons là un problème, 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à mathématiquement 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 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(x + width/2, y + heigth/2) comme nous l'avons fait pour afficher notre parabole 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 vous faudra rajouter la composante z pour un espace avec les coordonnées {x, y, z}, ce qui deviendrait translate(x, y, z).

Note : une dernière chose à vous dire, vous pourrez rentrer d'autres fonctions autre que y = a.x² dans vos jeux vidéo ou autres programmes et vous verrez si vous calculez la dérivée, 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. Il faudra vérifier la référence du langage de programmation que vous utiliserez pour voir ce qu'il propose en mathématiques.

Note : voici un exemple avec cette fonction : y = 2 * ( sin(x / frequence) * amplitude ) - 100, je l'ai utilisé dans le jeu vidéo que j'ai développé War in Space pour les mines qui suivent des différentes trajectoires sinusoïdales mais ici, je ne calcule pas la dérivée.

Capture d'écran de cette fonction avec la calculatrice TI Npire CX CAS en version logiciel avec différentes échelles pour cadrer sur l'écran.

Maths trajectoires (2016)

Note : voici une application que j'ai développé, en 2016, qui traite des pentes des tangentes de différentes trajectoires dont équation de droite du type x = k, affine du type : y = a.x + b, linéaire du type : y = a.x, paraboliques du type : y = a.x² suivi de x = a.y² et sinusoïdal du type : x = a.sin(y), vous verrez dans cette application des mouvements réalistes d'avions au-dessus d'un décor sur fonds de mer et vous aurez des commandes avec des sliders au-dessus d'un décor sur fonds de désert, en faisant varié les paramètres, vous modifierez les pentes des tangentes en temps réel ainsi que le nombre d'avions.

Cliquer sur l'image ci-dessous pour essayer Maths trajectoires en ligne.

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 différents algorithmes.

Conclusion

Je remercie 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 et je remercie aussi le professeur de mathématique François Foucault m'ayant appris comment transposer des dérivées en langage algorithmique pour que les mouvement des séries d'avions qui visent vers l'avion mère soient réaliste. 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. 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 à la rubrique finale « programmation » sans ce découragé surtout.