Thema: Satz des Pythagoras

Hört oder liest man die Formel a² + b² = c² weiß man sofort, es geht um den Satz des Pythagoras. Dieser Satz lässt sich mit Quadraten visualisieren und was wäre da besser geeignet, als das in Processing zu machen?

Doch bevor wir loslegen, müssen wir uns erstmal Gedanken machen was wir wollen und wie es sich umsetzen lässt. Allerdings auch welche Eigenheiten Processing mit sich bringt.

Wenn man mit zweidimensionalen Grafiken arbeitet, hat man ein Koordinatensystem mit x und y Achse auf der die Zeichnung angelegt wird. In unserem Fall wäre dies das Fenster, welches sich beim Ausführen unseres Sketches öffnet. Hierbei ist zu beachten, dass unser Koordinatensystem folgendermaßen aussieht:


Wie man sieht, beginnt das Koordinatensystem nicht in der unteren linken Ecke unseres Fensters, sondern in der oberen linken Ecke. Die Y-Achse ist demnach invertiert, wird aber dennoch positiv hochgezählt um einen bestimmten Punkt zu erreichen.

Mit dieser Eigenheit im Gedächtnis, können wir auch schon gleich loslegen und unsere erste Konzeptzeichnung anfertigen. Der Satz des Pythagoras findet Anwendung auf rechtwinklige Dreiecke. Um das Ganze einfach zu beginnen, wählen wir daher ein rechtwinkliges und gleichschenkliges Dreieck für die Zeichnung.


Wie zu erkennen ist, wurde das besagte Dreieck nicht wirklich "gezeichnet" sondern durch die passende Anordnung von Quadraten erzeugt. Die farbigen Rechtecke an den Kanten kennzeichnen die Punkte im Koordinatensystem. Sofern ein Rechteck zwei oder mehrere Farben besitzt, haben zwei oder mehrere Quadrate die selben Koordinaten.
Doch bevor wir jetzt einfach mit dem Programmieren loslegen, betrachten wir zunächst das Quadraten mit den blauen Ecken.


Dieses hat eine Seitenlänge von 6 und die Koordinaten von welcher aus die Zeichnung entsteht liegt bei (0,6) wobei x = 0 und y = 6. Der Befehl zum Zeichnen eines Rechtecks lautet in Processing rect(coordX, cordY, width, height).

In unserem Fall wäre dies nun: rect(0, 6, 6, 6)

Wollen wir nun ein zweites Quadrat hinzufügen, immer mit dem Hintergedanken wir möchten zunächst ein rechtwinkliges und gleichschenkliges Dreieck so müssen wir prüfen, an welcher Koordinate es anzusetzen gilt um die Ecke (6,6) des bereits gezeichneten Quadrats zu berühren.


Wie unschwer zu erkennen ist, startet das Quadrat mit den grünen Ecken bei (6,0) wobei x = 6 und y = 0. Das heißt für uns, dass rect(6, 0, 6, 6) das gewünschte Resultat erzielen sollte.


Die roten Kanten bilden hierbei die beiden Katheten unseres geplanten Dreiecks.

Quadrat mit blauen Ecken: rect(0, 6, 6, 6)
Quadrat mit grünen Ecken: rect(6, 0, 6, 6)

Wenn wir nun allerdings die größe eines der Quadrate ändern, passiert folgendes.


Das liegt daran, dass die Quadrat untereinander ihre Position nicht abhängig voneinander bestimmen. Dies lässt sich mit ein wenig Aufwand ändern. Dazu benennen wir die beiden Katheten (Seiten) unseres Dreiecks a und b.


Daraus ergibt sich dann:

                int a = 6;
                int b = 6;

                rect(0, b, a, a); // Blau
                rect(a, 0, b, b); // Grün
                 
                

Das blaue Quadrat hat die Seitenlänge a und geht um b nach unten wobei das grüne Quadrat die Seitenlänge b hat und um a nach rechts geht.


Nach diesem Prinzip könnte man nun auch das Quadrat der Hypotenuse zeichnen, wobei man dieses dann mit rotate() in die richtige Position bringen müsste. Allerdings verwenden wir diesmal Vertices.
Vertices sind Punkte im Koordinatensystem, die durch Linien miteinander verbunden werden.

Hier wird es nun etwas komplizierter. Fangen wir daher damit an, die Punkte welche wir bereits kennen zu verbinden.


Das geschieht durch folgende Befehle:

                int a = 6;
                int b = 6;

                rect(0, b, a, a); // Blau
                rect(a, 0, b, b); // Grün

                beginShape();
                    vertex(a+b, b);
                    vertex(a, b+a);
                endShape(CLOSE);
                 
                


Zwei Punkte im Koordinatensystem fehlen uns noch. Um diese Punkte zu erhalten schauen wir uns eine weitere Zeichnung an.


Die grün-blaue Ecke ist unser Startpunkt und wir möchten zur lila Ecke unten rechts. Dies erreichen wir durch folgenden Weg


Das gleiche gilt für die untere lila Ecke. Hier lauten die Koordinaten (a+b, b+2*a).

                int a = 6;
                int b = 6;

                rect(0, b, a, a); // Blau
                rect(a, 0, b, b); // Grün

                beginShape();
                    vertex(a+b, b);
                    vertex(a, b+a);
                    vertex(a+2*b, b+a)
                    vertex(a+b, b+2*a)
                endShape(CLOSE);
                 
                

Da die Grafik etwas klein ist, versehen wir das Ganze noch mit einem Vergrößerungsfaktor "magn" und füllen die Kästchen farbig aus. Außerdem legen wir noch die passgenaue Fenstergröße fest.

                int magn = 5;
                int a = magn*6;
                int b = magn*6;

                size(b+2*a, a+2*b);

                fill(0,0,255);
                rect(0, b, a, a); // Blau

                fill(0,255,0);
                rect(a, 0, b, b); // Grün

                fill(255,0,0);
                beginShape();
                    vertex(a+b, b);
                    vertex(a, b+a);
                    vertex(a+b, b+2*a);
                    vertex(a+2*b, b+a);
                endShape(CLOSE);
                 
                

Wenn alles funktioniert können wir nun für beliebige a und b Werte eine Grafik für den Satz des Pythagoras erstellen.

So könnte es dann aussehen: