Mathematik

Sinus und Cosinus

Die Trigonometrie beschäftigt sich mit Berechnungen rund um Dreiecke, wobei vieles bereits zur Zeit der Antike bekannt war. Wir nutzen in der Computergrafik auch rege verschiedene Funktionen, wobei wir auf zwei sehr wichtige, den Sinus und den Cosinus, genauer eingehen wollen.

Wenn wir auf einem Computerbildschirm einen Kreis zeichnen wollen, ist das nicht so einfach, wie auf Papier. Auf Papier braucht man nur einen Anfangspunkt und den Radius, mit dem man händisch oder mit Zirkel einen Kreis zeichnet.

Auf dem Computer haben wir keine Zirkel und wir müssen stattdessen eine Anzahl Punkte zeichnen, die dann einen Kreis bilden. Hierzu nutzen wir jetzt Sinus und Cosinus.

Im folgenden Diagramm sehen wir ein rechteckiges Dreieck, wobei eine Gegenseite der rechtwinkligen Ecke eine Länge von 1 hat. Diese Seite wird Hypotenuse genannt. Wenn die Seite die Länge eins hat und wir den Winkel a von 0 bis 360 Grad einsetzen, bilden sich 360 Dreiecke. Die Punkte der Aussenkante bilden dann einen Kreis mit einem Radius von 1. Dies ist der Einheitskreis.

Wie wir weiter sehen, hat die horizontale Seite des Dreiecks die Länge cos(a), d.h. der Wert Cosinus des Winkels a entspricht der Länge der einen der beiden Kathete genannten kürzeren Seiten des Dreiecks.
Die zweite, vertikale Seite hat die Länge Sinus von a. Die Sinus- und Cosinus-Werte können auch in Tabellen nachgeschlagen werden, wenn man keinen Computer zur Hand hat. Zu jedem Winkel finden wir in solchen Tabellen den entsprechenden Wert.

Interessant ist nun, dass cos(a) eigentlich unsere X-Koordinaten, und der sin(a) unserer Y-Koordinaten entspricht. Wenn wir einen Winkel haben, können wir uns also mit diesen Funktionen die Koordinate der äusseren Ecke des Dreiecks ausrechnen lassen.

Beispiel:

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

angle = 0.0

def onDraw():
    push()
    background(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

Dieses Programm zeichnet das ebene besprochene Dreieck. Nach jedem Durchgang wird der Winkel um 0.1 erhöht. Achtung: der Winkel ist in der Einheit Radiant angegeben, nicht in Grad.

Um aus dem Einheitskreis mit dem Radius 1 einen beliebig grossen Kreis zu bekommen, multiplizieren wir auf den folgenden Zeilen einfach mit der gewünschten Länge (LENGTH):

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

Gradmass/ Bogenmass

Ein Winkel kann in Grad- oder Bogenmass (Radiant) angegeben werden.

Wenn wir eine runde Torte betrachten und diese in Stücke schneiden, können wir die Winkel auf zwei Arten angeben: Im Gradmass umfasst die gesamte Torte 360 Grad. Beim Radiant ist der maximale Winkel, der 360 Grad entspricht «2 * PI», d.h. ungefähr 6.2831 Radiant.

Beispiel: ein Viertel einer Torte hat einen 90 Grad Winkel bzw. den Winkel 6.2831/4 ~ 1.57 im Bogenmass.

Die Werte können über eingebaute Funktionen umgewandelt werden:

Grad aus Radiant:

grad = deg(radiant)

Radiant aus Grad:

radiant = rad(grad)

Vektor

Ein (zweidimensionaler) Vektor ist bildlich gesprochen ein Pfeil mit einer Richtung und einer Länge. In unserem kartesischen Koordinatensystem wird ein Vektor anhand zweier Zahlen x und y angegeben.

Mit Vektoren kann man verschiedene Berechnungen machen, die u.a. in der Computergrafik- und Animation eine grosse Vereinfachung darstellen. Beispielsweise lassen sich Beschleunigung und Geschwindigkeiten als Vektoren abbilden, wodurch einfache physikalische Prozesse umgesetzt werden können.

In NanoPy gibt es zudem eine Vektor-Klasse «vector», die bereits fertige Vektor-Berechnungsfunktionen enthält. Die Klasse kennt die zwei Variablen x und y (Datentyp: float).

Initialisierungen:

v1:vector

deklariert ein Vektor-Objekt mit x=0, y=0

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

deklariert ein Objekt mit x = 10, y = 20

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

deklariert einen beliebigen Richtungsvektor mit einer Länge von 10.

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

deklariert einen Richtungsvektor mit dem Winkel PI/2 Radiant und einer Länge von 20 Pixeln.

Siehe auch Vektor-Funktionen.

Einheitskreis

Als Einheitskreis wird der Kreis bezeichnet, der einen Radius von 1 hat.

Rechnen mit Variablen

Wenn man sich mit Programmieren beschäftigt, kommen rasch auch mathematische Begriffe auf. Wir rechnen beispielsweise häufig mit Variablen, die wir auch in der Algebra kennen. Zudem haben wir die Grundrechenoperationen, die man in der Schule lernt, zur Verfügung. Und natürlich noch viel mehr Möglichkeiten.

Wir fassen die wichtigsten Punkte zusammen:

Wie in der Algebra, kann man bei den Berechnungen auf einem Computer neben Zahlen auch Buchstaben oder sogar ganze Worte verwenden. Diese Platzhalter nennen wir Variablen.

Um mit Variablen zu rechnen, schreibt man einfach eine Formel mit Buchstaben oder sogar Wörtern auf. Ein Beispiel:

Um das Volumen eines Gebäudes zu rechnen, muss man Länge, Breite und Höhe kennen. Das Volumen berechnet sich also so: v = Volumen, b = Breite, h = Höhe und l = Länge

v=b*h*l

Diese Formel ist allgemeingültig und da keine Zahlen eingesetzt sind, kann man die Formel immer wieder für verschiedene Zahlenkombinationen verwenden.

Im obigen Beispiel haben wir “=” verwendet, um etwas zu definieren. Wir sagen: v “ist gleich” irgendwas und definieren nach dem Gleichheitszeichen eine Formel.

Auf der rechten Seite der Formel haben wir die Multiplikation “*” genutzt. Wie auch beim Rechnen mit Taschenrechnern, haben wir verschiedene Rechenoperationen, die wir verwenden können:

Zusätzlich können wir eine Zahl auch negieren, indem wir “-“ voranstellen oder die Ausführungsreihenfolge ändern, indem wir die runden Klammern “(“ und “)” nutzen.

Hierzu einige Beispiele:

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

a hat den Wert 10 zugewiesen. b ist 10 * a, d.h. 100. c ist b - a, d.h. 100-10 = 90.
d ist c % 5. Das %-Zeichnen bedeutet, dass d den Restwert der ganzzahligen Division durch 5 zugewiesen bekommt. D.h. c=90, 90%7= 6, weil 7 nur 12 mal in 90 Platz hat (84) und dann noch ein Rest von 6 bleibt. Bei e werden zuerst (a +b) und (c- d) berechnet und dann erst multipliziert (110 * 84 = 9240). Bei f negieren wir e, d.h. f wird zu -9240.

Beispiel 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)

Mit der Funktion “drawRectangle(x,y,width, height)” zeichnen wir ein Rechteck. “x” und “y” entsprechen dem Startpunkt, “width” der Breite und “height” der Höhe. Anstelle von Zahlen, haben wir “w” als Breite und “w*2” als Höhe angegeben. Wenn man einen beliebigen Button klickt, wird “w” jeweils um 10 erhöht, wodurch beim nächsten Zeichnen ein grösseres Rechteck erscheint. w ist unsere Variable, die wir überall verwenden können. Das Programm kann so auf Knopfdruck verschiedene Rechtecke zeichnen, je nachdem, was w für einen Wert hat.

Beispiel 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()

Bei diesem Beispiel nutzen wir Modulo-Funktion. Haben zwei Variablen. “x” wird von 0 bis 240 hochgezählt. “y” enthält die Formel “x % 40” und weist “y” also den Restwert der Division durch 40 zu. D.h. die Zahl läuft eine Reihe durch von 0 bis 39.