Tracer une courbe mathématique
En maths, on trace des courbes dans un repère : deux axes, une origine au centre. Sur une toile, l'origine est en haut à gauche et l'axe vertical descend. Pour tracer une courbe, il faut donc apprendre à convertir.
Du repère à la toile
Prenons une toile de 400 sur 320 pixels. On décide que :
- l'origine du repère est au centre de la toile, au point (200, 160) ;
- une unité vaut 40 pixels.
Le point mathématique (2, 1) se trouve alors 2 unités à droite du centre, et 1 unité au-dessus : en pixels, (200 + 80, 160 - 40) = (280, 120). Deux petites fonctions font la conversion :
fonction ecranX(v)
retourne 200 + v * 40
fin fonction
fonction ecranY(v)
retourne 160 - v * 40
fin fonction
affiche ecranX(2) // 280
affiche ecranY(1) // 120
affiche ecranX(-5) // 0 : le bord gauche
affiche ecranY(-4) // 320 : le bas de la toile
Remarque le moins dans ecranY : sur la toile, monter, c'est diminuer y.
Question : Où se trouve, en pixels, le point mathématique (0, 0) ? — (200, 160). ecranX(0) vaut 200 et ecranY(0) vaut 160 : c'est le centre de la toile, l'origine du repère.
Dessiner le repère
Une grille de fond, deux axes, et un point pour vérifier :
t est une toile
dimension(t, 400, 320)
fonction ecranX(v)
retourne 200 + v * 40
fin fonction
fonction ecranY(v)
retourne 160 - v * 40
fin fonction
procédure repere()
remplir(t, #FFFFFF)
grille(t, 40, #E5E7EB)
ligne(t, 0, 160, 400, 160, #6B7280, 2)
ligne(t, 200, 0, 200, 320, #6B7280, 2)
label(t, 385, 152, 'x', #6B7280, 13)
label(t, 208, 14, 'y', #6B7280, 13)
fin procédure
appelle repere()
cercle(t, ecranX(2), ecranY(1), 5, #E5484D)
label(t, ecranX(2) + 8, ecranY(1) - 6, '(2 ; 1)', #E5484D, 12)
affiche t
grille(t, 40, couleur) trace un quadrillage tous les 40 pixels : chaque carreau représente une unité.
Une fonction, des valeurs
Traçons la parabole d'équation y = x² / 4 - 3. Commençons par calculer quelques points :
fonction parabole(v)
retourne v * v / 4 - 3
fin fonction
valeurX est un nombre
pour i de 0 à 8
valeurX vaut i - 4
affiche 'x = ' + valeurX + ' y = ' + parabole(valeurX)
fin pour
Pour x = -4, y vaut 1 ; pour x = 0, y vaut -3 ; pour x = 4, y vaut de nouveau 1. La courbe descend, puis remonte.
Tracer la courbe
Une courbe, sur un écran, c'est une suite de petits segments mis bout à bout. On avance de quart d'unité en quart d'unité, et on relie chaque point au suivant.
t est une toile
dimension(t, 400, 320)
fonction ecranX(v)
retourne 200 + v * 40
fin fonction
fonction ecranY(v)
retourne 160 - v * 40
fin fonction
fonction parabole(v)
retourne v * v / 4 - 3
fin fonction
remplir(t, #FFFFFF)
grille(t, 40, #E5E7EB)
ligne(t, 0, 160, 400, 160, #6B7280, 2)
ligne(t, 200, 0, 200, 320, #6B7280, 2)
x1 est un nombre
x2 est un nombre
y1 est un nombre
y2 est un nombre
pour i de 0 à 39
x1 vaut (i - 20) / 4
x2 vaut (i - 19) / 4
y1 vaut parabole(x1)
y2 vaut parabole(x2)
ligne(t, ecranX(x1), ecranY(y1), ecranX(x2), ecranY(y2), #1D9BF0, 3)
fin pour
affiche t
i va de 0 à 39 : quarante segments.(i - 20) / 4 fait aller x1 de -5 à 4,75 par pas de 0,25.x2 est le point suivant, un quart d'unité plus loin.
Avec seulement 10 segments, la courbe serait anguleuse. Avec 40, l'œil voit une courbe lisse.
Deux courbes sur le même repère
Les fonctions sinus et cosinus dessinent des vagues. On les multiplie par 2 pour qu'elles soient plus hautes. Une procédure segment se charge de convertir les coordonnées et de tracer un trait :
t est une toile
dimension(t, 400, 320)
fonction ecranX(v)
retourne 200 + v * 40
fin fonction
fonction ecranY(v)
retourne 160 - v * 40
fin fonction
remplir(t, #FFFFFF)
grille(t, 40, #E5E7EB)
ligne(t, 0, 160, 400, 160, #6B7280, 2)
ligne(t, 200, 0, 200, 320, #6B7280, 2)
procédure segment(xa, ya, xb, yb, teinte)
ligne(t, ecranX(xa), ecranY(ya), ecranX(xb), ecranY(yb), teinte, 3)
fin procédure
x1 est un nombre
x2 est un nombre
pour i de 0 à 79
x1 vaut (i - 40) / 8
x2 vaut (i - 39) / 8
appelle segment(x1, 2 * sinus(x1), x2, 2 * sinus(x2), #E5484D)
appelle segment(x1, 2 * cosinus(x1), x2, 2 * cosinus(x2), #16A34A)
fin pour
label(t, 12, 24, 'sinus', #E5484D, 14)
label(t, 12, 44, 'cosinus', #16A34A, 14)
affiche t
Les deux vagues ont la même forme, mais elles sont décalées : le cosinus est en avance d'un quart de vague sur le sinus.
À toi de jouer
Reprends le programme de la parabole et change seulement la ligne retourne :
- une droite :
retourne v / 2 + 1 ; - une parabole renversée :
retourne 3 - v * v / 3 ; - une courbe en S :
retourne v * v * v / 10 - v.
Une partie de la courbe sort de la toile ? Ce n'est pas grave : ce qui dépasse n'est simplement pas visible. Tu peux aussi changer l'échelle, en remplaçant 40 par 20 dans ecranX et ecranY.
En résumé
- Deux fonctions convertissent les coordonnées mathématiques en pixels.
- L'axe vertical de la toile descend : d'où le signe moins dans
ecranY. - Une courbe est une suite de petits segments reliant des points voisins.
- Pour changer de courbe, il suffit de changer la formule.
