8.581
Bearbeitungen
Lernpfad:Einführung in Processing/9: Unterschied zwischen den Versionen
Lernpfad:Einführung in Processing/9 (Quelltext anzeigen)
Version vom 28. Januar 2022, 16:09 Uhr
, 16:09, 28. Jan. 2022keine Bearbeitungszusammenfassung
Jneug (Diskussion | Beiträge) |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 14: | 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 31: | 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 38: | 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 50: | 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 91: | 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. | ||
| Zeile 105: | Zeile 105: | ||
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! | 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 198: | Zeile 198: | ||
{{P5js|https://editor.p5js.org/Ngb/full/CZ31NSZHE|height=100}} | {{P5js|https://editor.p5js.org/Ngb/full/CZ31NSZHE|height=100}} | ||
Du | 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 | 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: | ||