Lösung Aufgabe 1

Hi,

im heutigen Artikel möchte ich die Auflösung zu Aufgabe 1 posten. Gegeben war, sofern du dich erinnerst, nur ein Bild

Ein Screenshot des fertigen Sketches
Ein Screenshot des fertigen Sketches

und der Code für void setup(). Falls du es nicht lösen konntest, fragt sich nun wie das denn jetzt genau funktioniert. Wichtig zu wissen ist, dass hier in einer Schleife nur eine einzige Linie gezeichnet wird, dabei verändern sich die Parameter für line() nur bei y1 und x2. Bei einer Linie ist es ja nun so, dass wir zuerst den ersten Punkt x1 und Punkt y1 angeben, an dem die Linie beginnt, und dann Punkt x2 und y2 an dem diese endet. Beachten wir dabei, dass der Anfang und das Ende der Linie in diesem Screenshot nie direkt in den Raum, sondern immer nur am linken oder unteren Rand des Fensters gezeichnet werden. Das heißt wir setzen die Linie jeweils am linken Rand an, und zeichnen sie bis irgendwohin an den unteren Rand. Dabei wirst du feststellen, dass x1 (der erste X-Punkt der Linie) immer bei 0 ist, und y2, also der End-Punkt der Linie, immer den Wert für die Höhe des Fensters (height) hat, somit also am unteren Rand. Was ändert sich also? Eigentlich nur y1, also jeweils die Höhe des Anfangspunktes (vertikal) und x2, das wäre dann der Endpunkt der sich nur horizontal verschiebt.
Nochmal kurz die Parameter für line() veranschaulicht: line(x1, y1, x2, y2);
Ich zeige dir das anhand eines Bildes, bei der die Schrittweise der Linien nicht bei 10 (so ist der Wert wenn man das Ergebnis wie im ersten Bild erreichen möchte) sondern bei 50 angesetzt sind:

Beispiel mit weniger Linien
Beispiel mit weniger Linien

Du siehst, hier sind viel weniger Linien, oder anders gesagt der Abstand zwischen den Linien ist hier einfach größer.
Erkennst du nun die Funktionalität die dahintersteckt? In einer Schleife wird sooft durchlaufen wie die Breite / Höhe des Fensters ist. Dabei wird je Schleifendurchlauf eine Linie gezeichnet, die Schrittweise ist hier immer +10. Da nur y1 und x2 sich verändern, übernehmen wir hier die Schleifenvariable als Wert. Sehen wir uns einmal an, was in dieser Schleife passiert und wie sich das auf die Parameter für line() und damit auf unsere gezeichneten Linien auswirkt:

Du siehst den aktuellen Schleifendurchlauf. Daneben, welchen Wert i in dem Moment hat und am Schluss noch wie der Code für die zu zeichnende Linie wäre. Würde man das ohne Schleife machen und dafür aber alle Befehle für Line (die ganze Liste die Ich eben geschrieben hab) in den Code setzen, würden wir dasselbe Ergebnis bekommen, aber davon abgesehen, wer will sich die Mühe machen 😉

Tja und das war es eigentlich schon. Am einfachsten ist es übrigens, wenn du für Breite und Höhe des Fensters dieselben Werte nimmst. Es geht natürlich auch wenn diese verschieden sind, andernfalls müsstest du halt aber wiederum besondere Berechnungen anstellen um das dann in rechteckigen Fenstern genauso schön zustande zu bringen.

Der Code für das ganze Teil hier sieht wie folgt aus:

Ich hoffe du konntest wieder was lernen 😉

Bis dahin
Marius

2 Kommentare

Schreibe einen Kommentar zu Andreas Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich stimme zu.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.