Coding für Kids: Funktionsgraphen im Koordinatensystem

Im letzten Teil der Reihe ging es bereits um Koordinatensysteme. In diesem Teil lernt ihr weitere Möglichkeiten kennen, um beliebige Funktionsgraphen selber zu berechnen und in einem Koordinatensystem zu zeichnen.

Um die Beispiele auszuprobieren, ist die Komponente TCoordinateSystem erforderlich. Die Komponente kann unter Komponente TCoordinateSystem heruntergeladen werden. Dort ist auch eine kurze Anleitung enthalten, wie sie Lazarus hinzugefügt wird. Sinnvoll ist auch ein Blick auf den ersten Teil mit der Komponente: Mathe im Koordinatensystem

Besondere Funktionen in TCoordinateSystem

Bestimmte Funktionen kommen in der Geometrie immer wieder vor. Ein Beispiel haben wir im letzten Teil schon kennengelernt – eine Strecke. In TCoordinateSystem definieren wir das durch die Angabe von den zwei Endpunkten.

DrawLine(x1,y1,x2,y2)

Eine weitere Funktion ist eine Gerade. Die Einflussgrößen werden durch die Geradengleichung y = m*x + t definiert. Auch dafür ist eine eigene Prozedur vorhanden. Als Parameter werden die Steigung m und der Y-Achsversatz t übergeben.

DrawStraightLinie(m,t)

Soll die Gerade y= 2x – 6 gezeichnet werden, lautet der Befehl:

DrawStraightLinie(2,-6);

Gerade als Funktionsgraph im Koordinatensystem — Gerade mit DrawStraightLine: y=2x-6

Eigene Funktionsgraphen

Spannender ist es aber, wenn man eigene Funktionsgraphen darstellen könnte. Das möchten wir jetzt tun – und es ist viel einfacher als es sich anhört.

Grundlage ist eine Funktion, z. B. eine Parabel mit der Funktionsgleichung:

f(x) = 0.1x² -6

Mit dem Computer machen wir nun genau das Gleiche, das wir auch tun würden, wenn wir die Funktion per Hand in ein Koordinatensystem einzeichnen wollten. Wir erstellen eine Wertetabelle. Nur mit dem Unterschied, dass wir mit einem Programm viel kleinere Schrittweiten und damit viel mehr Funktionswerte berechnen können.

Ist ein Funktionswert berechnet, zeichnen wir im Programm eine Linie vom vorherigen zum neu berechneten Punkt. Je kleiner ∆x wird, desto genauer wird die Funktion gezeichnet.

Kurven-Aufbau — Erstellung einer Kurve aus Linien-Teilsegmenten

Zuerst müssen wir aber festlegen in welchem Bereich die Funktion dargestellt werden soll. Da wir im Koordinatensystem die Grenzen durch Xmin und Xmax festgelegt haben, bietet sich dieser Bereich für die Berechnung an.

Um Funktionswerte für die einzelnen X-Positionen zu ermitteln, verwenden wir eine Schleife. Dafür bietet sich repeat / until an.

Vorher setzen wir den Startwert für x. In unserem Fall erfolgt das mit einer Zuweisung x:=Cs1.Xmin. Wir weisen damit x den Startwert der X-Achse zu.

Die repeat-Schleife hat diesen Aufbau:

repeat
beliebige Befehle
x:=x+Wert;
until x>=Cs1.Xmax

Der Bereich zwischen repeat und until wird solange durchlaufen bis die until-Bedingung erfüllt wird. Bei uns ist das der Fall, wenn der x-Wert das Ende der rechten X-Achse erreicht hat.

Der y-Wert wird über die Funktion berechnet. Die Funktion muss allerdings in Pascal-verständlichen Code übersetzt werden.

Für f(x) = 0.1x² -6 sieht der Code so aus: y:=0.1*SQR(x)+2;

Funktionsgraphen zeichnen

Damit können wir das Liniensegment zeichnen lassen. Im Zeichensystem von Lazarus wird intern immer die letzte gezeichnete Position gespeichert. Deshalb muss am Beginn der Linie dieser Punkt auf unseren ersten berechneten Funktionswert gesetzt werden – ohne schon eine Linie zu zeichnen. Der Befehl dazu lautet MoveTo(x,y). Mit dem Befehl LineTo(x,y) zeichnen wir dann eine Linie vom Move-Punkt aus. Wird das nächste Mal LineTo aufgerufen, beginnt die Linie beim letzten Punkt von LineTo. Die Funktionen LineTo und MoveTo sind Funktionen der Eigenschaft Canvas (Zeichenfläche).

Deshalb lautet der Aufruf z. B. Cs1.Canvas.LineTo(x,y);

Würden wir jetzt einfach unsere berechneten x und y Werte als Parameter übergeben, liegt die Kurve irgendwo. Die Problematik liegt im Koordinatensystem. Dieses arbeitet mit den Positionskoordinaten von Lazarus. Hier ist der Nullpunkt links oben. Unser Koordinatensystem hat aber einen anderen Nullpunkt. Um dieses Problem zu lösen, gibt es in der Komponenten TCoordinateSystem zwei Funktionen, die Werte entsprechend umrechnen. Die beiden Funktionen heißen GetPosX und GetPosY. Sie erwarten als Parameter jeweils eine Koordinate.

Der vollständige Code zum Zeichnen des Beispiels ist dieser:

  x:=Cs1.XMin;
  repeat
    y:=0.1*SQR(x)+2;
    if x=Cs1.XMin then Cs1.Canvas.MoveTo(Cs1.GetPosX(x),Cs1.GetPosY(y))
    else Cs1.Canvas.LineTo(Cs1.GetPosX(x),Cs1.GetPosY(y));
    x:=x+0.25; //deltaX = 0.25
  until x>=Cs1.XMax;

Wollen wir die Kurve auch noch beschriften, verwenden wir die Prozedur DrawText.

  cs1.DrawText(-12,8,'h(x)=0.1*x²+2');

Als Ergebnis erhalten wir diese schöne Parabel.

Parabel als Funktionsgraph im Koordinantensystem — Beispiel einer Parabel

Mit dieser Lösung haben wir eine universelle Variante programmiert. Nach Anpassen der Funktionsgleichung wird jede Kurve gezeichnet. Das funktioniert beispielsweise genauso mit einer Sinus-Kurve. Mit der Eigenschaft LineColor kann auch die Farbe der Kurve geändert werden, z. B. in grau.

  Cs1.LineColor:=clGray;
  x:=Cs1.XMin;
  repeat
    y:=3*sin(x)-5;
    if x=Cs1.XMin then Cs1.Canvas.MoveTo(Cs1.GetPosX(x),Cs1.GetPosY(y))
    else Cs1.Canvas.LineTo(Cs1.GetPosX(x),Cs1.GetPosY(y));
    x:=x+0.25; //deltaX = 0.25
  until x>=Cs1.XMax;
  Cs1.DrawText(-7,-10,'f(x)=3*sin(x)-5');

Sinus-Kurve als Funktionsgraph im Koordinantensystem — Beispiel einer Sinus-Kurve

Einen Schnittpunkt berechnen

Jetzt sind mehrere Kurven im Koordinatensystem dargestellt. Wir könnten damit auch weitere Berechnungen anstellen. Möchten wir z. B. wissen, an welchen Punkten sich die Gerade und die Parabel schneiden, können wir die Schnittpunkte berechnen und im Koordinatensystem anzeigen.

In diesem Fall muss eine quadratische Gleichung gelöst werden. Das geht natürlich mit der Mitternachtsformel.

  //Schnittpunkt Gerade und h(x) berechnen und lösen:
  //0.1*x²+2 = 2x-6;
  //0.1*x²-2x+8 = 0
  a:=0.1;
  b:=-2;
  c:=8;

  x1:=(-b+SQRT(SQR(b)-4*a*c))/(2*a);
  x2:=(-b-SQRT(SQR(b)-4*a*c))/(2*a);

  cs1.DrawPoint(x1,2*x1-6,'S1');
  cs1.DrawPoint(x2,2*x2);

Mehrere Funktionsgraphen im Koordinatensystem — Ergebnis-Darstellung unserer Kurven und Berechnungen

Damit habt Ihr das Handwerkzeug für eure eigenen Berechnungen. Schaut euch am besten das Beispiel-Projekt an. Dort gibt es noch weitere Funktionen. Wie z. B. der Button im obigen Bild zum Abspeichern des Koordinatensystems als Bild. Damit könnt Ihr euer Ergebnis ganz einfach in ein Textverarbeitungsprogramm einfügen, drucken und in euer Matheheft einkleben.

Noch ein Tipp

Die Komponente eignet sich auch hervorragend, um nur ein leeres Koordinatensystem in den entsprechenden Grenzen zu zeichnen und auszudrucken. Damit habt Ihr immer eine schnelle Lösung für euere Hausaufgaben.

Beispiel-Projekt „Leeres Koordinatensystem“ als Druckvorlage fürs Matheheft

Aber vielleicht fallen euch ja noch mehr Ideen ein, die Komponente selber zu erweitern. Es gibt bestimmt noch weitere Funktionen zusätzlich zu DrawLine oder DrawStraightLine, die Ihr jetzt selber programmieren könnt. Lasst eurer Phantasie mal freien Lauf.

Viel Spaß beim Nachprogrammieren und Erweitern!