Coding für Kids: Mathe im Koordinatensystem

In den letzten Teilen haben wir uns mit der Programmierung von Spielen beschäftigt. Jetzt wird es Zeit für eine andere Richtung. Jeder der schon einmal in der Schule Funktionen oder andere Elemente in ein Koordinatensystem einzeichnen musste, wird mit diesem Teil seine Freude haben, denn nach dem Lesen dieses Artikels kannst Du sie selber programmieren und anzeigen lassen!

Bevor es losgeht brauchen wir aber eine Voraussetzung. Lazarus kann ohne Hilfsmittel nur schwierig Grafik oder gar ein Koordinatensystem darstellen. Damit wir deswegen keine großen Schwierigkeiten haben und uns voll auf die Programmierung und die Mathematik im Koordinatensystem konzentrieren können, habe ich eine Komponente entwickelt, die diese Aufgabe übernimmt.

Die Komponente kann unter Komponente TCoordinateSystem heruntergeladen werden. Dort ist auch eine kurze Anleitung enthalten, wie sie Lazarus hinzugefügt wird.

Ein Koordinatensystem für Lazarus

Hat die Installation geklappt, gibt es in der Palette eine neue Komponente TCoordinateSystem unter der Register-Seite Mylib.

Komponenten-Palette von Lazarus — Komponenten-Palette mit TCoordinateSystem

Um die Komponente verwenden zu können, muss sie auf einem Formular abgelegt werden. Legt dafür am besten gleich ein neues Projekt an und speichert es.

Damit ist schon alles vorbereitet, um fast alles, was mit einem Koordinatensystem zu tun hat, mit Lazarus zu programmieren.

Die Länge einer Strecke

In diesem Teil soll es um eine kleine Einführung mit Mathe-Funktionen in Lazarus und der Komponente TCoordinateSystem gehen. Die Aufgabe ist folgende:

Es soll eine Anwendung entwickelt werden, die nach der Eingabe von 2 beliebigen Punkten mit X und Y Koordinate, diese im Koordinatensystem darstellt. Die Punkte sollen zu einer Strecke verbunden werden (Linie). Die Anwendung soll dann die Länge der Strecke berechnen und das Ergebnis anzeigen.

Formulardesign

Los geht’s. Bei diesem Beispiel können wir klassisch nach EVA (Eingabe – Verarbeitung – Ausgabe) vorgehen und mit dem Designen des Formulars beginnen. Dafür gibt es mehrere Möglichkeiten.

Die einfachste Möglichkeit ist es Labels und Edits zu verwenden. Fügt auf dem Formular die Komponenten ein und benennt die Name-Eigenschaft entsprechend sinnvoll.

Koordinatensystem skalieren

Im Programm wird die Berechnung innerhalb des OnClick-Ereignisses des Buttons ausgeführt. Da wir aber nicht wissen, welche Punkt-Koordinaten ein Benutzer einträgt, müssen wir sicherstellen, dass die Punkte auch im Koordinatensystem angezeigt werden.

Dafür gibt es in der Komponente TCoordinateSystem mehrere Eigenschaften, welche dieses Verhalten steuern.

Sie geben die Grenzen der Achsen an.

X-Achse: Xmin bis Xmax (als Integer)
Y-Achse: Ymin bis Ymax (als Integer)

Die Eingaben der Punkt-Koordinaten erfolgen über eine TEdit-Komponente. TEdit speichert die Benutzereingabe als String unter dem Namen Text. Möchten wir diesen String für Berechnungen verwenden, müssen wir diesen String erst einmal umwandeln.

Da die Punkte auch Kommazahlen (=Float) enthalten können, müssen zwei Umwandlungen durchgeführt werden. Mit StrToFloat wird der Text in eine Gleitkommazahl umgewandelt. Round erzeugt daraus einen Integer-Wert.

px1:=StrToFloat(EditXP1.Text); >>> Zahl als Gleitkommazahl

x1:=Round(px1); >>> Zahl als Integer

Für die X-Achse prüfen wir nun als erstes, welches der größere X-Wert ist. Dieser wird dann für Xmax verwendet. Der kleinere entsprechend für Xmin. Damit Bezeichnungen besser lesbar sind, werden die Grenzen jeweils um 1 vergrößert. Bei Xmax bedeutet das +1, bei Xmin -1.

Wenn Xmin kleiner als 0 sein sollte, soll trotzdem der komplett I. Quadrant des Koordinatensystems angezeigt werden. Das bedeutet der Wert Xmin wird auf 0-1 = -1 gesetzt.

Im Programm wird das so umgesetzt.

procedure TForm1.Button1Click(Sender: TObject);
var
  x1,y1,x2,y2 : integer;
  px1,px2,py1,py2,l : extended;

begin
  //Übernehmen der Eingaben
  px1:=StrToFloat(EditXP1.Text);
  py1:=StrToFloat(EditYP1.Text);
  px2:=StrToFloat(EditXP2.Text);
  py2:=StrToFloat(EditYP2.Text);

  //Achsen des Koordinatensystems anpassen
  x1:=Round(px1);
  x2:=Round(px2);
  if x1>x2 then Cs1.Xmax:=x1+1
    else Cs1.XMax:=x2+1;
  if x1<x2 then Cs1.XMin:=x1-1
    else Cs1.Xmin:=x2-1;
  if Cs1.Xmin>=0 then Cs1.Xmin:=-1;
  y1:=Round(py1);
  y2:=Round(py2);
  if y1>y2 then Cs1.Ymax:=y1+1
    else Cs1.YMax:=y2+1;
  if y1<y2 then Cs1.YMin:=y1-1
    else Cs1.Ymin:=y2-1;
  if Cs1.Ymin>=0 then Cs1.Ymin:=-1;

Die Funktion StrToFloat ist aber leider nicht problemlos. Wenn eine falsche Eingabe erfolgt, beispielsweise ein leeres Feld übergeben wird, erzeugt sie eine Fehlermeldung. Das kann für den Benutzer lästig werden. Schaut auch doch mal die Funktion Val (z. B. über eine Google-Suche) an. Mir ihr kann eine bessere Umwandlung erfolgen.

TCoordinateSystem verwenden

Jetzt wird die Komponente TCoordinateSystem mit der Instanz Cs1 verwendet. Das geht, wie Ihr gleich seht, ziemlich einfach. Um einen Punkt einzuzeichnen gibt es einen passenden Befehl.

DrawPoint(x,y,Bezeichnung)

Beispiel: DrawPoint(3,2,‘A‘);

In unserem Fall sieht das für die beiden Punkte mit den bereits definierten Variablen so aus:

  Cs1.DrawPoint(px1,py1,EditNameP1.Text);
  Cs1.DrawPoint(px2,py2,EditNameP2.Text);

Jetzt fehlt noch die Verbindung der beiden Punkte durch eine Linie. Das funktioniert genauso einfach mit der Prozedur DrawLine(x1,y1,x2,y2).

  Cs1.DrawLine(px1,py1,px2,py2);

Damit ist die Visualisierung im Koordinatensystem schon fertig. Jetzt müssen wir uns noch um die Berechnung der Länge kümmern.

Ein bisschen Theorie

Natürlich weiß jeder auswendig, wie die Länge der Strecke berechnet wird. Andernfalls hilft uns der gute alte Pythagoras mit a² + b² = c² (https://de.wikipedia.org/wiki/Pythagoras).

Im Koordinatensystem brauchen wir für a und b die Differenz aus den X- bzw. Y-Werten. Dann können wir aus der Summe der Quadrate die Wurzel ziehen und die Länge erhalten.

Berechnung in Pascal

In Pascal funktioniert die Berechnung genauso. Die Funktion für die Wurzel heißt SQRT (Square Root) und die Funktion für das Quadrat SQR (Square). Die Reihenfolge von x2 und x1 spielt keine Rolle, da wir mit 2 potenzieren.

  l:=sqrt(sqr(px2-px1)+sqr(py2-py1));

Im letzten Schritt geben wir noch die Länge als Text aus. Das könnte z. B. so gelöst werden:

  LabelErgebnis.Caption:='Länge der Strecke '+EditNameP1.Text+EditNameP2.Text;
  EditErgebnis.Text:='√('
    +FormatFloat('0.0',px2-px1)+'² + '
    +FormatFloat('0.0',py2-py1)+'² ) = '
    +FormatFloat('0.0',l);

Unser fertiges Programm mit einem Beispiel

Jetzt ist eure Kreativität gefragt. Was könnte man denn noch so alles im Koordinatensystem berechnen und anzeigen?

Im nächsten Artikel findet Ihr noch ein Beispiel, wie eine beliebige Funktion gezeichnet werden kann. Damit habt Ihr dann fast alle Möglichkeiten der Komponente TCoordinateSystem kennengelernt.

Viel Spaß beim Nachprogrammieren!