Mathgames

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

Analyse

Note : cette rubrique sur les dérivés que je vous présente est au programme de mathématiques de 1re au lycée.

Introduction

La dérivée est très importante car on s’en sert tout le temps dans les études de fonction. L’avantage c’est qu’il n’y a pratiquement que des formules à apprendre, et une fois que vous les connaissez, c’est extrêmement simple !!

Quand on a une fonction ƒ, on peut calculer une autre fonction que l’on note ƒ ‘ (à prononcer ƒ prime), et qu’on appelle la dérivée. Nous verrons plus tard l’utilité de ƒ ‘. L’objectif est tout d’abord de savoir comment calculer cette dérivée ƒ ‘ à partir de la fonction ƒ. Pour cela c’est très simple : on apprend les formules !!

Article Wikipédia : Méthode Maths.

Note : les dérivés que nous allons voir ci-dessous, nous servirons pour votre jeu vidéo et plus précisément pour que les séries d'avions qui visent vers l'avion mère aient des mouvements réalistes sur notre fenêtre d'écran au-dessus de l'Océan.

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

En mathématiques, la dérivée d'une fonction d'une variable réelle mesure l'ampleur du changement de la valeur de la fonction (valeur de sortie) par rapport à un petit changement de son argument (valeur d'entrée). Les calculs de dérivées sont un outil fondamental du calcul infinitésimal. Par exemple, la dérivée de la position d'un objet en mouvement par rapport au temps est la vitesse (instantanée) de l'objet.

Article Wikipédia : dérivée.

Quelques dérivées

Note : Dans ce cours, nous utiliserons la notation ƒ '(x) pour désigner la dérivée de la fonction ƒ(x) et au niveau des algorithmes plus bas dans cette page web, nous utiliserons la notation y ' pour désigner la dérivée de la fonction y, cela est exactement la même chose sauf que les définitions changent, si vous ne comprenez pas cette liste de calcul de ces dérivés ci-dessus, ce n'est pas bien grave, lisez dans l'ordre cette rubrique sur ses dérivés et vous comprendrez comment on calcule la dérivée d'une fonction carrée ou parabolique et la dérivée d'une fonction affine et je vous présenterais graphiquement les trois vagues successives des series d'avions et leurs trajectoires dans votre jeu vidéo Prototype ci-dessous.

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 f. 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 : ƒ(x) = x²

Le nombre dérivé au point A = -6, le point A est le coefficient directeur de la pente de la tangente t à notre courbe f.

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

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

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

Le nombre dérivé au point A = 6, le point A est le coefficient directeur de la pente de la tangente t à notre courbe f.

Avez-vous une idée, pourquoi l'on aura besoin de calculer la dérivée de la fonction carrée : x² à notre courbe f ? 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 f 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 f, 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érive notre fonction carrée : ƒ(x) = x² est ƒ '(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 de notre fonction carrée : x² à notre courbe f.

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

Tableau de dérivées

Nous avons besoin de calculer les dérivées des fonctions carrées : x² à notre courbe f 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 de dérivées 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 mais je vais vous faire voir ci-dessous comment on calcule cette dérivée de notre fonction carrée : x² qui est une parabole.

On calcule notre fonction dérivée de x²

On regarde la formule ci-dessous pour calculer cette dérivée de notre fonction carrée:

Observez la formule ci-dessus pour calculer la dérivée de x², en remplace les, n, par 2 car nous avons une fonction carrée : x² et l'exposant est égal à 2, ensuite au niveau de l'exposant on fait la soustraction de n - 1, c'est à-dire, 2 - 1 = 1, et on remplace le n par 2, qui est en facteur devant le x, ce qui nous donne comme résultat 2x exposants 1 d'où 2x.

En mathématiques

En mathématiques on utilise la notation ƒ '(x) pour désigner la dérivée de la fonction ƒ(x).

En physique

En physique et partout ailleurs qu’en mathématiques, on notera plutôt d/dx(ƒ), pour signifier qu’on dérive la fonction ƒ par rapport à la variable x. Si j’avais mis d/dz(ƒ), ça aurait voulu dire qu’on dérive la fonction ƒ par rapport à la variable z. En physique, il arrive que certaines fonctions ont plusieurs variables (pas juste x) et il faut donc savoir par rapport à quoi on la dérive (quelle paramètre varie, en fait) : la température d/dT(ƒ) ? la pression d/dP(ƒ) ?

Voici un exemple de calcul en physique avec des dérivées partielles :

Note : ci-dessus, je vous ai fait voir notre fonction parabolique qui est du type : ƒ(x) = x² et sa dérivée qui est : ƒ '(x) = 2x, mais en réalité dans votre jeu vidéo nous aurons deux vagues successives avec des fonctions paraboliques et une vague successive avec des fonctions affines. Je vais vous faire voir ces trois vagues successives des trajectoires des séries d'avions qui visent vers l'avion mère dans votre jeu vidéo et on calculera quelques dérivées ci-dessous.

Fonctions affines avec un coefficient directeur soit positif ou soit négatif

Nous aurons notre 1re vague successives d'avions de votre jeu vidéo Prototype. Les séries d'avions suivront une trajectoire affine du type : ƒ(x) = c*x + b, comme sur l'image ci-dessus, mais avec c 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, nous ne calculerons pas la dérivée pour ces fonctions affines dans votre jeu vidéo, mais je vais vous faire voir comment cela se calcul quand même, le calcul de dériver d'une fonction affine est différent de celui d'une fonction carrée, c'est très simple, regarder le tableau de dérivées ci-dessus et vous verrez que pour dériver une variable : x, on obtient 1 et pour dériver une constante, on obtient 0. Voici un exemple, on va dériver une fonction affine avec des variables en calcul formel :

Voici un autre exemple, on va dériver une fonction affine avec un coefficient directeur égale à 4 et 7 qui est l'ordonnée à l'origine définie comme ceci :

Le résultat est 4 car quand on dérive : x on obtient 1 et 4*x devient 4*1 ce qui nous donne bien 4 et 7 devient 7*0 car 7 est une constante, lorsque l'on dérive une constante on obtient toujours 0 comme résultat, un autre exemple :

Ce n'est pas plus difficile que cela.

Fonctions carrées avec un coefficient directeur aléatoire

Nous aurons notre 2e vagues successives d'avions de votre jeu vidéo Prototype. Ce sera une trajectoire parabolique du type : ƒ(x) = b*x² avec b comme coefficient directeur aléatoire, les avions n'auront jamais les mêmes mouvements et comme vous voyez sur l'image ci-dessus, l'axe des images des avions se calera en chaque point à la tangente à leurs courbes respectives, f et/ou g suivant notre coefficient directeur aléatoire, le calcul de dériver est le même que celui vu plus haut sauf que le coefficient directeur qui est aléatoire changera de valeurs en permanence tout le long des trajectoires des séries d'avions sur notre fenêtre d'écran. Voici un exemple, on va dériver une fonction parabolique avec des variables en calcul formel :

On va calculer la dérivée d'une autre fonction parabolique avec un coefficient directeur égal à 3.5 définie comme ceci :

Fonctions carrées avec un coefficient directeur fixe

Nous aurons notre 3e vagues successives d'avions de votre jeu vidéo Prototype. Ce sera cette fois-ci une trajectoire parabolique du type : ƒ(x) = a*x² avec a comme coefficient directeur fixe, vous verrez dans la rubrique programmation que lors du calcul dans la méthode du mouvement des avions, vous pourrez changer la valeur d'un paramètre ou d'une variable nommé facteur qui déterminera l'ouverture de la courbe, elle sera plus ou moins arrondie suivant ce facteur. Et comme vous voyez sur l'image ci-dessus, l'axe des images des avions se calera en chaque point à la tangente de sa courbe f suivant notre coefficient directeur fixe, on va dériver une fonction parabolique avec des variables en calcul formel :

Si vous avez bien compris, car cela est très simple, je vous donne un autre exemple, on va calculer la dérivée d'une autre fonction parabolique avec un coefficient directeur égal à 5 définie comme ceci :

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

Voici un exemple de codes sources 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 de Windows du programme avec la dérivée ici et une seconde archive avec la version de 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 macOS, les versions Linux devrait être compatible car ces deux derniers OS son programmé sur un même noyau système d'exploitation 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 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 au centre de l'é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 le calcul de 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, l'image de l'avion est bien positionner, la queue de l'avion pointe vers le haut par rapport à l'écran et le cockpit pointe vers le bas.
   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) qui sont en réalité les coordonnées du translate(x + width/2, y + height/2) ajoutées aux coordonnées cartésiennes width/2 et height/2 translatées au centre de l'écran.
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), l'avion mère reprend sa place à gauche au départ et ainsi l'avion tourne en boucle de gauche à droite en formant une parabole.

Je vais vous expliquer plus en détail le calcul de notre dérivée en version algorithmique, on va calculer avec les variables suivantes : x = -200 et coef_dir = -0.01 qui est le coefficient directeur de notre fonction carrée définie ici à : y = coef_dir * sq(x), ici sq(x) = x² donc notre fonction carrée devient: y = -0.01 * x².

J'ai présenté la dérivée comme cela à l'intérieur de notre fonction rotate(PI/2 + atan(coef_dir * 2 * x)); et plus précisément à l'intérieur de notre fonction atan(coef_dir * 2 * x), là où se trouve notre dérivée.

Voici notre dérivée et son calcul : coef_dir * 2 * x, j'ai changé l'ordre des facteurs pour calculer notre dérivée mais le résultat est exactement le même que ce calcul : 2 * coef_dir * x, la multiplication est commutative on peut donc changer l'ordre des facteurs. Observez le programme ci-dessous et analysez-le, c'est le même que le programme avec ses commentaires ci-dessus.

/*******************************************
      
   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 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; }
}

Calcul de notre dérivée avec la 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 qui est égale à : y '= -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 nombres 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 en programmation informatique à : x = x + 2, cette assignation de variable n'est pas une équation comme en mathématiques car, le résultat serait toujours faux parce que les deux membres ne sont pas égaux, je vous rappelle que cela est une assignation de variable en programmation informatique, c'est-à-dire que l'on rajoute à notre variable définie à : x, une valeur numérique de 2 qui s'incrémente par pas de 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 et qui seront en mouvements et suivront leurs différentes trajectoires paraboliques à notre courbe f. 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.

casinour est positif et est tourné vers le bas si le signe de son coefficient directeur est négatif.

Note : notre fonction : y = -0.01 * x², a un coefficient directeur de signe négatif, qui est égal à : -0.01, cette parabole, devrait normalement être tournée vers le bas, mais là, elle sera tournée vers le haut dans votre jeu vidéo, nous avons là mathématiquement une anomalie liée à la conception des ordinateurs par les ingénieurs qui les on conçut à partir de l'année 1973, vous verrez plus bas dans cette page web, je vous expliquerais plus en détail cette anomalie.

Tableau de variation de la fonction carrée

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 primitives pour la suite de votre jeu vidéo et donc passer le sujet.

Calculer une primitive

Primitive* : en mathématiques, une primitive d’une fonction réelle (ou holomorphe) ƒ est une fonction F dont ƒ est la dérivée : F'= ƒ. Il s’agit donc d’un antécédent pour l’opération de dérivation.

La détermination d’une primitive sert d’abord au calcul des intégrales de fonctions continues sur un segment, en application du théorème fondamental de l'analyse.

Article Wikipédia : primitive.

Tableau de primitives

Rappel : notre fonction de départ ci-dessus était du type carrée définie à : y = -0.01 * x², ensuite ci-dessous, 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², pour que la réponse à ce calcul de primitive soit juste, nous devons rajouter une constante C qui signifie que cette constante appartient à l'ensemble des nombres réels (ℝ) s'écrivant en symboles mathématiques : C ∈ ℝ.

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 web Google Chrome, cliquez sur les « trois points » 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 sans la dérivée ci-dessous.

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.

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

Veuillez télécharger l'archive du programme avec la dérivée ici

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

Veuillez télécharger l'archive du programme sans la dérivée ici

Anomalie sur notre parabole

Note : vous remarquerez qu'après avoir lancé l'animation du programme « le mouvement de l'avion avec la dérivée » que notre parabole est tourné vers le haut alors que notre fonction carrée définie à : y = -0.01 * x², à un coefficient directeur, qui est égal à : -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 positif alors la parabole sera tourné vers le haut et si le signe du coefficient directeur de notre fonction est négatif alors la parabole sera tourné vers le bas, 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 avec cette fonction là : y = -0.01 * x², alors que là, elle est tourné vers le haut dans l'animation de notre programme, 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 ont construits 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.

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 : tube cathodique.

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ématiques, 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).

Fonction polynôme de degré 2
orientée vers le haut ou orientée vers le bas
suivant le signe du coefficient directeur de a
soit positif ou soit négatif
de notre fonction ƒ : x ↦ ax² + bx + c (a, b, c réels a ≠ 0)

Quelques calculatrices graphiques

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 voulant dire en français, Computer Algebra System. Voici les mastodontes de calculatrices CAS qui se vendent dans le commerce au temps présent en 2021, elles ont toutes des écrans en couleur comme la TI Nspire CX CAS et certaine tactile comme la HP Prime et la FX-CP400+E.

Note : j'ai un faible pour cette calculatrice ci-dessous de marque Casio, la Graph 90+E qui est très directe, intuitive et ergonomique comme la HP Prime par exemple mais elle n'a pas la fonction CAS mais ce n'est pas bien grave car vous pouvez installer un programme qui lui permet d'obtenir cette fonctionnalité-là.

Découvrir la Graph 90+E en ligne ici.

Note : vous pourrez rentrer d'autres fonctions autres 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 ƒ en faisant une rotation le long de sa trajectoire suivant la fonction mathématique que vous aurez définie. Il faudra vérifier la référence du langage de programmation que vous utiliserez pour voir ce qu'elle propose en mathématiques.

Note : voici un exemple avec cette fonction : y = 2 * ( sin(x / frequence) * amplitude ) - 100, que j'ai utilisé dans le jeu vidéo que j'ai développé War in Space pour les mines explosives qui suivent des différentes trajectoires sinusoïdales mais ici, je ne calcule pas sa 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 du type : 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 fond d'Océans et vous aurez des commandes avec des curseurs au-dessus d'un décor sur fonds de désert, en faisant varier les paramètres, vous modifierez les pentes des tangentes des trajectoires de chaque avion en temps réel ainsi que le nombre total 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 les différents algorihtmes de Processing et sa couche du langage de programmation Java orienté objet.

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 ses dérivées et je remercie aussi le professeur de mathématiques François Foucault m'ayant appris comment transposer des dérivées en langage de programmation algorithmique qui nous servira dans votre jeu vidéo à faire les mouvements réalistes des séries d'avions qui visent vers l'avion mère. Voici, nous avons fini ses 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 les mathématiques ne peuvent pas être bornées d'un point à un autre et sont 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 (programmation informatique) sans ce découragé surtout.