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 : f(x) = 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:
Fonction de 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.
Fonction de 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.
Fonction de 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 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 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.
La dérivée de f(x) = x² est f '(x) = 2x
On regarde la formule ci-dessous pour comprendre que la dérivée de f(x) = x² est : f '(x) = 2x ou 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 à notre courbe Cf.
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.
Formules de dérivée de 1ère S (lycée)
La dérivée de f(x) = x² est f '(x) = 2x ou d/dx(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 d'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 avec la dérivée « ici » et une seconde archive du programme sans la dérivée « ici » mais en bas de cette page web, 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'abscisse 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
- Les 2 barres obliques (//) sont des commentaires.
- On déclare trois variables x, y, coef_dir.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
une primitive de : F(x) = -0.02 * x + C
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, nous retombons bien sûr notre fonction 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, j'ai présenté l'une des primitives -0.02 * x + C, juste pour rappel.
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.
Je mets un tableau de quelques primitives pour rappel ci-dessous.
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.
Voici les mastodontes de calculatrices CAS qui se font actuellement au temps présent, elles sont en couleur et certaine tactile.
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 avec la dérivée
Vous pouvez télécharger une archive du programme « ici ».
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 : 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, 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 a.x² dans vos jeux vidéo ou autres programmes et vous verrez si vous mettez 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, 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.
Note : la fonction exemple que je vous ai cité ci-dessus : y(x) = 2 * ( sin(x / frequence) * amplitude ) - 100, je l'ai utilisé dans le jeu vidéo War in Space pour les mines qui suivent une trajectoire sinusoïdale mais ici, je ne calcule pas la dérivée mais si vous la mettez 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 votre fonction que vous viendrez de définir.
Voici une capture d'écran de cette fonction avec des échelles différente de la calculatrice que j'utilise Ti Npire CX CAS en version logiciel.
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.
Conclusion
Tout d'abord, 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.
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.