Hi,
im heutigen Artikel möchte ich die Auflösung zu Aufgabe 1 posten. Gegeben war, sofern du dich erinnerst, nur ein Bild
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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Schleifendurchlauf: 0 - i hat den Wert 0 -> line(0, 0, 0, height); Schleifendurchlauf: 10 - i hat den Wert 10 -> line(0, 10, 10, height); Schleifendurchlauf: 20 - i hat den Wert 20 -> line(0, 20, 20, height); Schleifendurchlauf: 30 - i hat den Wert 30 -> line(0, 30, 30, height); Schleifendurchlauf: 40 - i hat den Wert 40 -> line(0, 40, 40, height); Schleifendurchlauf: 50 - i hat den Wert 50 -> line(0, 50, 50, height); Schleifendurchlauf: 60 - i hat den Wert 60 -> line(0, 60, 60, height); Schleifendurchlauf: 70 - i hat den Wert 70 -> line(0, 70, 70, height); Schleifendurchlauf: 80 - i hat den Wert 80 -> line(0, 80, 80, height); Schleifendurchlauf: 90 - i hat den Wert 90 -> line(0, 90, 90, height); Schleifendurchlauf: 100 - i hat den Wert 100 -> line(0, 100, 100, height); Schleifendurchlauf: 110 - i hat den Wert 110 -> line(0, 110, 110, height); Schleifendurchlauf: 120 - i hat den Wert 120 -> line(0, 120, 120, height); Schleifendurchlauf: 130 - i hat den Wert 130 -> line(0, 130, 130, height); Schleifendurchlauf: 140 - i hat den Wert 140 -> line(0, 140, 140, height); Schleifendurchlauf: 150 - i hat den Wert 150 -> line(0, 150, 150, height); Schleifendurchlauf: 160 - i hat den Wert 160 -> line(0, 160, 160, height); Schleifendurchlauf: 170 - i hat den Wert 170 -> line(0, 170, 170, height); Schleifendurchlauf: 180 - i hat den Wert 180 -> line(0, 180, 180, height); Schleifendurchlauf: 190 - i hat den Wert 190 -> line(0, 190, 190, height); Schleifendurchlauf: 200 - i hat den Wert 200 -> line(0, 200, 200, height); Schleifendurchlauf: 210 - i hat den Wert 210 -> line(0, 210, 210, height); Schleifendurchlauf: 220 - i hat den Wert 220 -> line(0, 220, 220, height); Schleifendurchlauf: 230 - i hat den Wert 230 -> line(0, 230, 230, height); Schleifendurchlauf: 240 - i hat den Wert 240 -> line(0, 240, 240, height); Schleifendurchlauf: 250 - i hat den Wert 250 -> line(0, 250, 250, height); Schleifendurchlauf: 260 - i hat den Wert 260 -> line(0, 260, 260, height); Schleifendurchlauf: 270 - i hat den Wert 270 -> line(0, 270, 270, height); Schleifendurchlauf: 280 - i hat den Wert 280 -> line(0, 280, 280, height); Schleifendurchlauf: 290 - i hat den Wert 290 -> line(0, 290, 290, height); Schleifendurchlauf: 300 - i hat den Wert 300 -> line(0, 300, 300, height); Schleifendurchlauf: 310 - i hat den Wert 310 -> line(0, 310, 310, height); Schleifendurchlauf: 320 - i hat den Wert 320 -> line(0, 320, 320, height); Schleifendurchlauf: 330 - i hat den Wert 330 -> line(0, 330, 330, height); Schleifendurchlauf: 340 - i hat den Wert 340 -> line(0, 340, 340, height); Schleifendurchlauf: 350 - i hat den Wert 350 -> line(0, 350, 350, height); Schleifendurchlauf: 360 - i hat den Wert 360 -> line(0, 360, 360, height); Schleifendurchlauf: 370 - i hat den Wert 370 -> line(0, 370, 370, height); Schleifendurchlauf: 380 - i hat den Wert 380 -> line(0, 380, 380, height); Schleifendurchlauf: 390 - i hat den Wert 390 -> line(0, 390, 390, height); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span style="color: #cc6600;">void</span> <span style="color: #cc6600;"><b>setup</b></span>() { <span style="color: #cc6600;">size</span>(400, 400); <span style="color: #cc6600;">background</span>(0); <span style="color: #cc6600;">smooth</span>(); } <span style="color: #cc6600;">void</span> <span style="color: #cc6600;"><b>draw</b></span>() { <span style="color: #cc6600;">background</span>(0); <span style="color: #cc6600;">strokeWeight</span>(0.5); <span style="color: #cc6600;">stroke</span>(255); <span style="color: #cc6600;">for</span> (<span style="color: #cc6600;">int</span> i = 0; i < <span style="color: #006699;">width</span>; i += 10) { <span style="color: #cc6600;">line</span>(0, i, i, <span style="color: #006699;">height</span>); } <span style="color: #cc6600;">noLoop</span>(); } |
Ich hoffe du konntest wieder was lernen 😉
Bis dahin
Marius
Schöne Aufgabe…
Ja .. konntest du’s lösen? 😉
Marius