8.581
Bearbeitungen
Lernpfad:Einführung in Processing/9: Unterschied zwischen den Versionen
Lernpfad:Einführung in Processing/9 (Quelltext anzeigen)
Version vom 16. Februar 2022, 21:33 Uhr
, 21:33, 16. Feb. 2022keine Bearbeitungszusammenfassung
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{NNavigation}} | {{NNameAnzeigen}}{{NNavigation}} | ||
{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}} | |||
* Variablen benutzen, um Animationen zu erzeugen. | |||
* ''Ausführungsreihenfolge'' von Befehlen. | |||
{{Tldr:End}} | |||
Mit der Hilfe von Variablen lassen sich nun schon einfache ''Animationen'' programmieren. | Mit der Hilfe von Variablen lassen sich nun schon einfache ''Animationen'' programmieren. | ||
| Zeile 9: | Zeile 14: | ||
</center> | </center> | ||
In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen | In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen aufweist. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung. | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
| Zeile 26: | Zeile 31: | ||
Eigentlich soll die Animation so aussehen: | Eigentlich soll die Animation so aussehen: | ||
{{P5js|https://editor.p5js.org/Ngb/full/zKqaYk1A7|height=100}} | {{P5js|https://editor.p5js.org/Ngb/full/zKqaYk1A7|height=100}} | ||
(Falls nichts zu sehen ist auf die graue Fläche klicken und dann die Leertaste drücken, damit die Animation von vorne beginnt.) | (Falls nichts zu sehen ist, auf die graue Fläche klicken und dann die Leertaste drücken, damit die Animation von vorne beginnt.) | ||
Passe das Programm entsprechend an. | Passe das Programm entsprechend an. | ||
| Zeile 33: | Zeile 38: | ||
Wichtig für Animationen ist die ''Ausführungsreihenfolge''. Denk daran, dass es einen Unterschied macht, ob eine Variable ganz zu Beginn (global), in <code>setup()</code> oder in <code>draw()</code> ''deklariert'' bzw. benutzt wird. | Wichtig für Animationen ist die ''Ausführungsreihenfolge''. Denk daran, dass es einen Unterschied macht, ob eine Variable ganz zu Beginn (global), in <code>setup()</code> oder in <code>draw()</code> ''deklariert'' bzw. benutzt wird. | ||
Um dir dies noch einmal | Um dir dies noch einmal klarzumachen kannst du im Programm oben die Deklaration und Initialisierung <code>int x {{=}} 0;</code> einmal in <code>setup()</code> und einmal in <code>draw()</code> verschieben.}} | ||
{{Info:Start}} | {{Info:Start}} | ||
Es gibt zwei typische Anwendungen für ''Variablen'': | Es gibt zwei typische Anwendungen für ''Variablen'': | ||
| Zeile 45: | Zeile 50: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
; Variablen als Speicher für Werte, die sich während der Programmausführung verändern. Die also "''variabel''" sind. | ; Variablen als Speicher für Werte, die sich während der Programmausführung verändern. Die also "''variabel''" sind. | ||
: | : Etwa das <code>x</code> im Programm oben, das bei jedem Frame (Aufruf von <code>draw()</code>) um <code>1</code> erhöht wird. | ||
{{Info:End}} | {{Info:End}} | ||
Bei Animationen spielt | Bei Animationen spielt primär die zweite Anwendungsart eine Rolle. Aber die Erste kann einem viel Arbeit sparen, wenn man sie richtig einsetzt. | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
| Zeile 86: | Zeile 91: | ||
== Übungsaufgaben == | == Übungsaufgaben == | ||
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Aufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
# Animiere ein Quadrat in der Mitte der | # Animiere ein Quadrat in der Mitte der Zeichenfläche, das beginnend von der Kantenlänge 1 immer weiter wächst. | ||
# Animiere eine Form, die ihre Position zufällig auf der Zeichenfläche verändert. | # Animiere eine Form, die ihre Position zufällig auf der Zeichenfläche verändert. | ||
#: Du kannst mit {{Processing Ref|random()}} eine zufällige ''Dezimalzahl'' (Datentyp <code>float</code>) erzeugen. Beachte, dass du dann auch die Variablen mit dem Typ <code>float</code> deklarieren musst. | #: Du kannst mit {{Processing Ref|random()}} eine zufällige ''Dezimalzahl'' (Datentyp <code>float</code>) erzeugen. Beachte, dass du dann auch die Variablen mit dem Typ <code>float</code> deklarieren musst. | ||
#: '''Tipp''': Geht dir die Animation zu schnell, kannst du mit {{Processing Ref|frameRate()}} die Geschwindigkeit ändern, in der <code>draw()</code> aufgerufen wird. | #: '''Tipp''': Geht dir die Animation zu schnell, kannst du mit {{Processing Ref|frameRate()}} die Geschwindigkeit ändern, in der <code>draw()</code> aufgerufen wird. | ||
# Ändere das Programm aus 2. so ab, dass sich auch die Farbe der Form zufällig ändert. | # Ändere das Programm aus 2. so ab, dass sich auch die Farbe der Form zufällig ändert. | ||
#: '''Tipp''': Denk an | #: '''Tipp''': Denk an Aufgabe 4 aus dem {{Pfad|8|letzten Schritt|Anker=#Übungsaufgaben}}. | ||
#: '''Bonus''': Ändere auch noch die Größe der Form zufällig. | #: '''Bonus''': Ändere auch noch die Größe der Form zufällig. | ||
# Programmiere einen Ball, der vom Punkt <code>(50, 0)</code> (bzw. von der Mitte des oberen Randes, falls das Fenster größer ist als 100x100) in einer zufälligen Richtung über den Bildschirm fliegt. | # Programmiere einen Ball, der vom Punkt <code>(50, 0)</code> (bzw. von der Mitte des oberen Randes, falls das Fenster größer ist als 100x100) in einer zufälligen Richtung über den Bildschirm fliegt. | ||
| Zeile 100: | Zeile 105: | ||
Ob du die Namen auf Deutsch oder Englisch wählst ist dir überlassen. In der Regel programmieren wir auf | Ob du die Namen auf Deutsch oder Englisch wählst, ist dir überlassen. In der Regel programmieren wir auf Englisch. Achte aber darauf, dass du '''keine Umlaute in den Namen''' verwendest! | ||
}} | }} | ||
{{Lösung:Start|Aufgabe 1}} | {{Lösung:Start|Aufgabe 1}} | ||
| Zeile 189: | Zeile 194: | ||
{{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}} | {{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}} | ||
Animiere einen Ball, der im Kreis fliegt. | |||
{{P5js|https://editor.p5js.org/Ngb/full/CZ31NSZHE|height=100}} | |||
Du brauchst hier die Befehle {{Processing Ref|sin()}} und {{Processing Ref|cos()}}. Zeichnen dir die Situation am besten zunächst auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia]. | |||
Du benötigst dann noch eine Variable für den Winkel; entweder im [https://mathepedia.de/Winkelmasze.html Bogenmaß oder als Grad] mit der Funktion {{Processing Ref|radians()}}. | |||
{{Zusatzaufgabe:End}} | {{Zusatzaufgabe:End}} | ||
{{Zusatzaufgabe:Start|Sprinteraufgabe|Icon=Processing_2021_logo.svg}} | {{Zusatzaufgabe:Start|Sprinteraufgabe|Icon=Processing_2021_logo.svg}} | ||
Eine wichtige Rechenoperation, die man beim Programmieren häufig verwendet, ist die ''Modulo''-Operation. Modulo bezeichnet das ''Teilen mit Rest'' und berechnet den Rest der übrig bleibt, wenn man zwei Zahlen dividiert. | Eine wichtige Rechenoperation, die man beim Programmieren häufig verwendet, ist die ''Modulo''-Operation. Modulo bezeichnet das ''Teilen mit Rest'' und berechnet den Rest, der übrig bleibt, wenn man zwei Zahlen dividiert. | ||
Zum Beispiel: | Zum Beispiel: | ||