Mathématiques

Sinus et cosinus

La trigonométrie s’occupe des calculs autour des triangles, dont beaucoup étaient déjà connus à l’époque de l’Antiquité. Nous utilisons également beaucoup de fonctions différentes dans l’infographie, dont deux très importantes, le sinus et le cosinus, que nous allons examiner plus en détail.

Si nous voulons dessiner un cercle sur un écran d’ordinateur, ce n’est pas aussi simple que sur papier. Sur papier, il suffit d’un point de départ et d’un rayon avec lequel on dessine un cercle à la main ou au compas.

Sur l’ordinateur, nous n’avons pas de compas et nous devons à la place dessiner un certain nombre de points qui forment ensuite un cercle. Pour cela, nous utilisons maintenant le sinus et le cosinus.

Dans le diagramme suivant, nous voyons un triangle rectangle dont un côté opposé à l’angle droit a une longueur de 1. Ce côté est appelé hypoténuse. Si le côté a une longueur de un et que nous utilisons l’angle a de 0 à 360 degrés, nous formons 360 triangles. Les points du bord extérieur forment alors un cercle de rayon 1. C’est le cercle unité.

Comme nous le voyons plus loin, le côté horizontal du triangle a pour longueur cos(a), c’est-à-dire que la valeur cosinus de l’angle a correspond à la longueur de l’un des deux côtés courts du triangle appelés cathètes.
Le deuxième côté, vertical, a pour longueur le sinus de a. Les valeurs de sinus et de cosinus peuvent également être consultées dans des tableaux si l’on n’a pas d’ordinateur sous la main. Pour chaque angle, nous trouvons la valeur correspondante dans de tels tableaux.

Il est intéressant de noter que cos(a) correspond en fait à nos coordonnées X, et sin(a) à nos coordonnées Y. Si nous avons un angle, nous pouvons donc calculer la coordonnée du coin extérieur du triangle à l’aide de ces fonctions.

Exemple:

const LENGTH = 100 # 20 ... 119
const DELAY = 100 # 20 ... 1000
const STEP = 0.1 # 0.1 ... 1.0

angle = 0.0

def onDraw():
    push()
    fond(0,0,0)
    noFill()
    x = cos(angle)*LENGTH
    y = sin(angle)*LENGTH

    translate(120,120)
    stroke(200,200,200)
    drawCircle(0,0,LENGTH)

    stroke(0,0,150)
    drawTriangle(0,0,x,0,x,y)

    stroke(100,100,100)

    drawLine(0,0,x,y)
    drawCircle(0,0,2)
    stroke(200,0,0)
    drawCircle(x,y,2)

    update()
    delay(DELAY)
    pop()

    angle = angle + STEP
    if angle > PI * 2: angle = 0

Ce programme dessine le triangle plan dont il est question. Après chaque passage, l’angle est augmenté de 0,1. Attention: l’angle est exprimé en radians et non en degrés.

Pour obtenir un cercle de n’importe quelle taille à partir du cercle unitaire de rayon 1, il suffit de multiplier sur les lignes suivantes par la longueur souhaitée (LENGTH):

x = cos(angle)*LENGTH
y = sin(angle)*LENGTH

Mètre-étalon/ Mètre pliant

Un angle peut être exprimé en degrés ou en radians.

Si nous considérons un gâteau rond et que nous le coupons en morceaux, nous pouvons indiquer les angles de deux manières: En degrés, l’ensemble du gâteau comprend 360 degrés. En radian, l’angle maximal correspondant à 360 degrés est “2 * PI”, c’est-à-dire environ 6,2831 radians.

Exemple: un quart de tarte a un angle de 90 degrés ou l’angle 6.2831/4 ~ 1.57 en radians.

Les valeurs peuvent être converties à l’aide de fonctions intégrées :

degré à partir de radian :

grad = deg(radiant)

&#x200B ;

Radian à partir de degrés :

radiant = rad(deg)

Vecteur

Un vecteur (bidimensionnel) est, au sens figuré, une flèche avec une direction et une longueur. Dans notre système de coordonnées cartésiennes, un vecteur est indiqué à l’aide de deux nombres x et y. Ces deux nombres sont les mêmes que ceux utilisés pour les coordonnées cartésiennes.

Les vecteurs permettent d’effectuer différents calculs qui simplifient grandement l’infographie et l’animation, entre autres. Par exemple, l’accélération et la vitesse peuvent être représentées sous forme de vecteurs, ce qui permet de mettre en œuvre des processus physiques simples.

Dans NanoPy, il existe en outre une classe vectorielle “vector” qui contient des fonctions de calcul de vecteurs déjà prêtes. La classe connaît les deux variables x et y (type de données: float).

Initialisations:

v1:vector

déclare un objet vectoriel avec x=0, y=0

v2 = vector(x = 10, y = 20)

déclare un objet avec x = 10, y = 20

v3:vector
v3.random()
v3.mulScalar(10)

déclare un vecteur directionnel quelconque d’une longueur de 10.

v4:vecteur
v4.fromAngle(PI/2)
v4.mulScalar(20)

déclare un vecteur directionnel avec un angle PI/2 radians et une longueur de 20 pixels.

Voir aussi les fonctions vectorielles.

Cercle unifié

On appelle cercle unitaire le cercle dont le rayon est égal à 1.

Calculer avec des variables

Lorsque l’on s’intéresse à la programmation, des notions mathématiques apparaissent rapidement. Par exemple, nous calculons souvent avec des variables, que nous connaissons également en algèbre. De plus, nous avons à notre disposition les opérations arithmétiques de base que l’on apprend à l’école. Et bien sûr, bien d’autres possibilités encore.

Nous résumons les points les plus importants:

Comme en algèbre, il est possible d’utiliser des lettres ou même des mots entiers en plus des chiffres pour effectuer des calculs sur un ordinateur. Nous appelons ces caractères de remplacement des variables.

Pour calculer avec des variables, il suffit d’écrire une formule avec des lettres ou même des mots. Voici un exemple:

Pour calculer le volume d’un bâtiment, il faut connaître la longueur, la largeur et la hauteur. Le volume se calcule donc ainsi: v = volume, b = largeur, h = hauteur et l = longueur.

v=b*h*l

Cette formule est universelle et comme aucun nombre n’est inséré, on peut l’utiliser à plusieurs reprises pour différentes combinaisons de nombres.

Dans l’exemple ci-dessus, nous avons utilisé “=” pour définir quelque chose. Nous disons: v “est égal” à quelque chose et définissons une formule après le signe égal.

Sur le côté droit de la formule, nous avons utilisé la multiplication “*”. Comme pour le calcul avec les calculatrices, nous avons différentes opérations à utiliser:

En outre, nous pouvons également nier un nombre en le faisant précéder de “-“ ou modifier l’ordre d’exécution en utilisant les parenthèses rondes “(“ et “)”.

Voici quelques exemples à ce sujet:

a = 10
b = 10 * a
c = b - a
d = c % 7
e = (a + b) * (c-d)
f = -e

a se voit attribuer la valeur 10. b est 10 * a, c’est-à-dire 100. c est b - a, c’est-à-dire 100-10 = 90.
d est c % 5. Le dessin en % signifie que d se voit attribuer la valeur résiduelle de la division entière par 5. C’est-à-dire que c=90, 90 % 7 = 6, parce que 7 n’a que 12 fois la place de 90 (84) et qu’il reste encore un reste de 6. Pour e, on calcule d’abord (a +b) et (c- d) et ensuite seulement on multiplie (110 * 84 = 9240). Pour f, on nie e, c’est-à-dire que f devient -9240.

Exemple 1:

w = 20

def onDraw():
    background(0,0,0)
    fill(255,255,255)
    drawRectangle(20,20,w,w*2)
    update()

def onClick():
    w = w + 10
    if w > 120: w = 20
    delay(100)

Avec la fonction “drawRectangle(x,y,width, height)”, nous dessinons un rectangle. “x” et “y” correspondent au point de départ, “width” à la largeur et “height” à la hauteur. Au lieu de chiffres, nous avons indiqué “w” comme largeur et “w*2” comme hauteur. Lorsque l’on clique sur n’importe quel bouton, “w” est à chaque fois augmenté de 10, ce qui fait apparaître un rectangle plus grand lors du prochain dessin. w est notre variable que nous pouvons utiliser partout. Le programme peut ainsi dessiner différents rectangles en appuyant sur un bouton, en fonction de la valeur de w.

Exemple 2:

x = 0

def onDraw():
    if x == 0:
        background(0,0,0)
    x = x+1
    if x > 240:
        x=0
    y = x % 40
    drawLine(x,0,x,y)
    update()

Dans cet exemple, nous utilisons la fonction modulo. Nous avons deux variables. “x” est incrémenté de 0 à 240. “y” contient la formule “x % 40” et attribue donc à “y” la valeur résiduelle de la division par 40. C’est-à-dire que le nombre parcourt une série de 0 à 39.