8.581
Bearbeitungen
Lernpfad:Einführung in Processing/10: Unterschied zwischen den Versionen
Lernpfad:Einführung in Processing/10 (Quelltext anzeigen)
Version vom 28. Januar 2022, 11:27 Uhr
, 11:27, 28. Jan. 2022keine Bearbeitungszusammenfassung
Jneug (Diskussion | Beiträge) |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 7: | Zeile 7: | ||
{{Tldr:End}} | {{Tldr:End}} | ||
Programme zur Lösung komplexerer Probleme können sehr lang werden. Um den Überblick zu behalten macht es daher Sinn, das Programm in kleinere Teile zu zerlegen. Diese kannst | Programme zur Lösung komplexerer Probleme können sehr lang werden. Um den Überblick zu behalten, macht es daher Sinn, das Programm in kleinere Teile zu zerlegen. Diese kannst du unabhängig voneinander programmieren und auf Fehler überprüfen, bevor du sie zur Gesamtlösung zusammensetzt. | ||
Du kennst mittlerweile schon ein Beispiel dazu: Im aktiven Modus gibt es verschiedene ''Programmblöcke'', die bestimmte Teile des Programms zusammenfassen. <code>setup()</code> und <code>draw()</code> sind ''Methoden'', die festgelegte Programmteile darstellen. <code>mousePressed()</code> ist ein anderes Beispiel. | Du kennst mittlerweile schon ein Beispiel dazu: Im aktiven Modus gibt es verschiedene ''Programmblöcke'', die bestimmte Teile des Programms zusammenfassen. <code>setup()</code> und <code>draw()</code> sind ''Methoden'', die festgelegte Programmteile darstellen. <code>mousePressed()</code> ist ein anderes Beispiel. | ||
| Zeile 101: | Zeile 101: | ||
# Ellipse <syntaxhighlight lang="java"> | # Ellipse <syntaxhighlight lang="java"> | ||
Eingabe: zwei Zahlen w und h | Eingabe: zwei Zahlen w und h | ||
Ausgabe: ein Oval in der Mitte des Fensters mit der Breite w und Höhe h | Ausgabe: ein Oval in der Mitte des Fensters mit der Breite <code>w</code> und Höhe <code>h</code> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
# Ergänze die Ellipse oben um | # Ergänze die Ellipse oben um eine zufällige Farbe. | ||
# Rechnen <syntaxhighlight lang="java"> | # Rechnen <syntaxhighlight lang="java"> | ||
Eingabe: zwei ganze Zahlen a und b | Eingabe: zwei ganze Zahlen a und b | ||
| Zeile 217: | Zeile 217: | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
# Programmiere zwei Methoden <code>void quadratWeiss(float x, float y)</code> und <code>void quadratSchwarz(float x, float y)</code>, die jeweils ein weißes bzw. schwarzes Quadrat mit der Kantenlänge 40 an die Position <code>(x, y)</code> zeichnen. | # Programmiere zwei Methoden <code>void quadratWeiss(float x, float y)</code> und <code>void quadratSchwarz(float x, float y)</code>, die jeweils ein weißes bzw. schwarzes Quadrat mit der Kantenlänge 40 an die Position <code>(x, y)</code> zeichnen. | ||
# Benutze die beiden Methoden, um die Methoden <code>void zeileA(int nummer)</code> und <code>void zeileB(int nummer)</code> zu programmieren, die eine Zeile der Zeichenfläche von links nach rechts abwechselnd mit weißen und schwarzen Quadraten füllt. <code>zeileA</code> beginnt mit weiß, <code>zeileB</code> mit | # Benutze die beiden Methoden, um die Methoden <code>void zeileA(int nummer)</code> und <code>void zeileB(int nummer)</code> zu programmieren, die eine Zeile der Zeichenfläche von links nach rechts abwechselnd mit weißen und schwarzen Quadraten füllt. <code>zeileA</code> beginnt mit weiß, <code>zeileB</code> mit Schwarz. Die <code>nummer</code> bestimmt die y-Koordinate der Zeile. Nummer 1 hat die Koordinate <code>0</code>, Nummer 2 <code>40</code>, usw. | ||
# Benutze <code>zeileA()</code> und <code>zeileB()</code>, um die vollständige Zeichenfläche mit einem Schachbrettmuster zu füllen. | # Benutze <code>zeileA()</code> und <code>zeileB()</code>, um die vollständige Zeichenfläche mit einem Schachbrettmuster zu füllen. | ||
# '''Bonus''': Ändere die Methoden so ab, dass die Farben der Quadrate von weiß/schwarz auf beliebige andere Kombinationen geändert werden können. | # '''Bonus''': Ändere die Methoden so ab, dass die Farben der Quadrate von weiß/schwarz auf beliebige andere Kombinationen geändert werden können. | ||
| Zeile 346: | Zeile 346: | ||
== Befehle mit Rückgabe programmieren == | == Befehle mit Rückgabe programmieren == | ||
Bisher haben wir die Ausgabe der Befehle direkt auf die Zeichenfläche oder in das Textfenster geschrieben. Oftmals ist es aber praktisch, die Ausgabe als ''Rückgabe'' zu erhalten, | Bisher haben wir die Ausgabe der Befehle direkt auf die Zeichenfläche oder in das Textfenster geschrieben. Oftmals ist es aber praktisch, die Ausgabe als ''Rückgabe'' zu erhalten, sodass wir damit weiterarbeiten können. | ||
Wir könnten etwa eine Methode schreiben, die für den Flächeninhalt eines Kreises als ''Eingabe'' den zugehörigen Radius bestimmt: | |||
<syntaxhighlight lang="java"> | <syntaxhighlight lang="java"> | ||
float radius(float area) { | float radius(float area) { | ||
| Zeile 356: | Zeile 356: | ||
{{Hinweis|Etwas Mathematik: Die Formel für den Flächeninhalt eines Kreises <math>A = \pi r^2</math> lässt sich durch Umstellen nach <math>d</math> auflösen: <math>\sqrt{\frac{A}{\pi}} = d</math>. Voilà!}} | {{Hinweis|Etwas Mathematik: Die Formel für den Flächeninhalt eines Kreises <math>A = \pi r^2</math> lässt sich durch Umstellen nach <math>d</math> auflösen: <math>\sqrt{\frac{A}{\pi}} = d</math>. Voilà!}} | ||
Wie du siehst fehlt bei dieser Methode das allgegenwärtige <code>void</code>. | Wie du siehst, fehlt bei dieser Methode das allgegenwärtige <code>void</code>. Stattdessen gibst du den ''Datentyp'' an, den das Ergebnis dieser Methode haben soll. Der eigentliche Wert des Ergebnisses (im Beispiel der Radius vom Datentyp <code>float</code>) wird mit dem Befehl <code>return</code> ''aus dem Block der Methode zurückgegeben''. Das bedeutet anders gesagt: Wenn der Befehl <code>radius()</code> benutzt wird, dann wird der Aufruf durch die passende Zahl ''ersetzt''. | ||
Nimm dieses Beispiel: | Nimm dieses Beispiel: | ||
| Zeile 378: | Zeile 378: | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
# Ändere das Programm oben so ab, dass bei einem Klick ein Kreis mit der Fläche <code>2000.0</code> gezeichnet wird. | # Ändere das Programm oben so ab, dass bei einem Klick ein Kreis mit der Fläche <code>2000.0</code> gezeichnet wird. | ||
# Ändere das Programm noch einmal ab, | # Ändere das Programm noch einmal ab, sodass ein Kreis mit der Fläche <code>mouseX*mouseY</code> gezeichnet wird. | ||
# Gehe die Beispiele durch und schaue dir noch einmal die neuen Befehle an. Wofür steht <code>sqrt</code>? | # Gehe die Beispiele durch und schaue dir noch einmal die neuen Befehle an. Wofür steht <code>sqrt</code>? | ||
#: Du kannst mathematische Funktionen ({{Processing Ref|sin()}}, {{Processing Ref|cos()}}, {{Processing Ref|sqrt()}}, {{Processing Ref|pow()}}, uvm.) jederzeit in deinem Programm einsetzen. Das ist | #: Du kannst mathematische Funktionen ({{Processing Ref|sin()}}, {{Processing Ref|cos()}}, {{Processing Ref|sqrt()}}, {{Processing Ref|pow()}}, uvm.) jederzeit in deinem Programm einsetzen. Das ist besonders für Animationen hilfreich. | ||
#: Übernimm das folgende Beispiel in Processing, probiere es aus und ändere dann die Berechnung in <code>radius()</code> ab. Was passiert? | #: Übernimm das folgende Beispiel in Processing, probiere es aus und ändere dann die Berechnung in <code>radius()</code> ab. Was passiert? | ||
#: <syntaxhighlight lang="java" line="1"> | #: <syntaxhighlight lang="java" line="1"> | ||
| Zeile 398: | Zeile 398: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
#: '''Zusatz''': Ergänze | #: '''Zusatz''': Ergänze zwischen Zeile8 und 9 die Zeile <code>farbe(time);</code>. Füge dann eine neue Methode <code>void farbe( float i )</code> ans Ende ein. Die Methode soll mittels {{Processing Ref|fill()}} die Farbe des Kreises abhängig von der Eingabe <code>i</code> ändern. | ||
#: {{P5js|https://editor.p5js.org/Ngb/full/GBtwDEfPF|height=100}} | #: {{P5js|https://editor.p5js.org/Ngb/full/GBtwDEfPF|height=100}} | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||