Lernpfad:Einführung in Processing/9 - Versionsgeschichte

Ngb am 2. Dezember 2024 um 09:17 Uhr

2024-12-02T09:17:22Z

← Nächstältere Version		Version vom 2. Dezember 2024, 11:17 Uhr
Zeile 42:		Zeile 42:
	Es gibt zwei typische Anwendungen für ''Variablen'':		Es gibt zwei typische Anwendungen für ''Variablen'':
	; Variablen als zentrale Stelle, wo häufig verwendete Werte abgelegt werden können.		; Variablen als zentrale Stelle, wo häufig verwendete Werte abgelegt werden können.
	: Zum Beispiel, wenn mehrere Kreise mit dem gleichen Durchmesser gezeichnet werden sollen, könnte der Durchmesser als Variable gespeichert ~~werden~~ und immer wieder verwendet:		: Zum Beispiel, wenn mehrere Kreise mit dem gleichen Durchmesser gezeichnet werden sollen, könnte der Durchmesser als Variable gespeichert und immer wieder verwendet werden:
	: <syntaxhighlight lang="java">		: <syntaxhighlight lang="java">
	int d = 20;		int d = 20;

Ngb: /* Übungsaufgaben */

2024-11-18T10:10:44Z

Übungsaufgaben

← Nächstältere Version		Version vom 18. November 2024, 12:10 Uhr
Zeile 102:		Zeile 102:
	{{Aufgabe:End}}		{{Aufgabe:End}}
	{{Hinweis\|		{{Hinweis\|
	Achte darauf, dass du den Variablen sinnvolle ~~Bezeichnet~~ gibst. Der Name <code>x</code> deutet an, dass es sich um die x-Koordinate handelt. <code>size</code> wäre sinnvoll für die Größe einer Form, usw.		Achte darauf, dass du den Variablen sinnvolle Bezeichner gibst. Der Name <code>x</code> deutet an, dass es sich um die x-Koordinate handelt. <code>size</code> wäre sinnvoll für die Größe einer Form, usw.

Jneug am 16. Februar 2022 um 19:33 Uhr

2022-02-16T19:33:26Z

← Nächstältere Version		Version vom 16. Februar 2022, 21:33 Uhr
Zeile 1:		Zeile 1:
	{{NNavigation}}		{{NNameAnzeigen}}{{NNavigation}}

	{{Tldr:Start\|Was du in diesem Schritt lernst\|Icon=Icon Chalk board.png}}		{{Tldr:Start\|Was du in diesem Schritt lernst\|Icon=Icon Chalk board.png}}

Jneug am 28. Januar 2022 um 14:09 Uhr

2022-01-28T14:09:45Z

← Nächstältere Version		Version vom 28. Januar 2022, 16:09 Uhr
Zeile 14:		Zeile 14:
	</center>		</center>

	In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen ~~hat~~. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.		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 ~~klar zum machen~~ 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.}}		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.
	: ~~Zum Beispiel~~ das <code>x</code> im Programm oben, das bei jedem Frame (Aufruf von <code>draw()</code>) um <code>1</code> erhöht wird.		: 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 ~~vor allem~~ die zweite Anwendungsart eine Rolle. Aber die ~~erste~~ kann einem viel Arbeit sparen, wenn man sie richtig einsetzt.		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 ~~Zeichenflache~~, ~~dass~~ beginnend von der Kantenlänge 1 immer weiter wächst.		# 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 ~~brauchen~~ hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten ~~erstmal~~ auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].		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ötigen~~ 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()}}.		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:

Jneug: /* Übungsaufgaben */

2021-11-23T13:43:32Z

Übungsaufgaben

← Nächstältere Version		Version vom 23. November 2021, 15:43 Uhr
Zeile 200:		Zeile 200:
	Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].		Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].

	Du benötigen 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()}}.		Du benötigen 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}}

Jneug am 20. November 2021 um 06:15 Uhr

2021-11-20T06:15:06Z

← Nächstältere Version		Version vom 20. November 2021, 08:15 Uhr
Zeile 1:		Zeile 1:
	{{NNavigation}}		{{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 10:		Zeile 15:

	In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen hat. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.		In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen hat. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.

	~~{{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}}~~

	{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}		{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}

Jneug am 19. November 2021 um 22:37 Uhr

2021-11-19T22:37:22Z

← Nächstältere Version		Version vom 20. November 2021, 00:37 Uhr
Zeile 10:		Zeile 10:

	In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen hat. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.		In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen hat. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.

			{{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}}

	{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}		{{Aufgabe:Start\|Icon=Processing_2021_logo.svg}}
Zeile 100:		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}}

Jneug: /* Übungsaufgaben */

2021-11-19T10:08:59Z

Übungsaufgaben

← Nächstältere Version		Version vom 19. November 2021, 12:08 Uhr
Zeile 91:		Zeile 91:
	#: '''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 ~~a Aufngabe~~ 4 aus dem {{Pfad\|8\|letzten Schritt\|Anker=#Übungsaufgaben}}.		#: '''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.

Jneug: /* Übungsaufgaben */

2021-11-19T09:23:27Z

Übungsaufgaben

← Nächstältere Version		Version vom 19. November 2021, 11:23 Uhr
Zeile 191:		Zeile 191:
	Animiere einen Ball, der im Kreis fliegt.		Animiere einen Ball, der im Kreis fliegt.

	~~<p5js height="100">~~https://editor.p5js.org/Ngb/full/CZ31NSZHE~~</p5js>~~		{{P5js\|https://editor.p5js.org/Ngb/full/CZ31NSZHE\|height=100}}

	Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].		Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].

Jneug am 19. November 2021 um 09:22 Uhr

2021-11-19T09:22:18Z

← Nächstältere Version		Version vom 19. November 2021, 11:22 Uhr
Zeile 191:		Zeile 191:
	Animiere einen Ball, der im Kreis fliegt.		Animiere einen Ball, der im Kreis fliegt.

			<p5js height="100">https://editor.p5js.org/Ngb/full/CZ31NSZHE</p5js>

	Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].		Du brauchen hier die Befehle {{Processing Ref\|sin()}} und {{Processing Ref\|cos()}}. Zeichnen dir die Situation am besten erstmal auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].