Lernpfad:Einführung in Processing/13 - Versionsgeschichte

Ngb am 13. Januar 2025 um 09:36 Uhr

2025-01-13T09:36:04Z

← Nächstältere Version		Version vom 13. Januar 2025, 11:36 Uhr
Zeile 62:		Zeile 62:
	while( i < 3 ) {		while( i < 3 ) {
	rect(10 + i*20, 40, 20, 20);		rect(10 + i*20, 40, 20, 20);
			i = i + 1;
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Jneug am 16. Februar 2022 um 19:42 Uhr

2022-02-16T19:42:38Z

← Nächstältere Version		Version vom 16. Februar 2022, 21:42 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 11. Februar 2022 um 21:30 Uhr

2022-02-11T21:30:41Z

← Nächstältere Version		Version vom 11. Februar 2022, 23:30 Uhr
Zeile 45:		Zeile 45:

	{{Aufgabe:Start}}		{{Aufgabe:Start}}
	Kopiere das Programm nach {{Processing}} und probiere es ~~mit Hilfe~~ des ''Debuggers'' aus.		Kopiere das Programm nach {{Processing}} und probiere es mithilfe des ''Debuggers'' aus.

	Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du ~~nun~~ das Programm startest, stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.		Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du jetzt das Programm startest, stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.

	Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.		Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.
Zeile 55:		Zeile 55:
	# Gib alle geraden Zahlen von 2 bis 100 auf der Konsole aus.		# Gib alle geraden Zahlen von 2 bis 100 auf der Konsole aus.
	# Zeichnen drei Quadrate nebeneinander. Das Erste liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.		# Zeichnen drei Quadrate nebeneinander. Das Erste liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.
	#: Verwende eine ~~While~~-Schleife, ~~so dass~~ mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.		#: Verwende eine <code>while</code>-Schleife, sodass mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.
	{{Aufgabe:End}}		{{Aufgabe:End}}
	{{Lösung:Start}}		{{Lösung:Start}}
Zeile 68:		Zeile 68:
	== Zählschleifen ==		== Zählschleifen ==

	Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren ~~sehr häufig~~ vorkommt, gibt es dafür ein eigenes Konstrukt: die ''Zählschleife''.		Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren regelmäßig vorkommt, gibt es dafür ein eigenes Konstrukt: die ''Zählschleife''.

	Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:		Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:

Jneug: /* Verschachtelte Schleifen */

2022-02-04T09:22:11Z

Verschachtelte Schleifen

← Nächstältere Version		Version vom 4. Februar 2022, 11:22 Uhr
Zeile 205:		Zeile 205:
	size(200, 200);		size(200, 200);

	for( int i = 0; i < 10; i += 1 ) {		for( int i = 0; i < 5; i += 1 ) {
	for( int j = 0; j < 10; j += 1 ) {		for( int j = 0; j < 5; j += 1 ) {
	if( (i+j)%2 == 0 ) {		if( (i+j)%2 == 0 ) {
	fill(0);		fill(0);

Jneug: /* Verschachtelte Schleifen */

2022-02-03T21:37:05Z

Verschachtelte Schleifen

← Nächstältere Version		Version vom 3. Februar 2022, 23:37 Uhr
Zeile 309:		Zeile 309:
	Für den nullten Kreis und den Winkel 135 Grad könntest du die Koordinaten berechnen durch:		Für den nullten Kreis und den Winkel 135 Grad könntest du die Koordinaten berechnen durch:

	- x: <code>i60sin(radians(135))</code>		* x: <code>i60sin(radians(135))</code>
	- y: <code>i60cos(radians(135))</code>		* y: <code>i60cos(radians(135))</code>

	<code>60</code> ist der Abstand zwischen zwei Ringen. Der Winkel beginnt bei 0 und zählt bis 360 hoch. Die Schrittweite wird anhand der Anzahl Kreise pro Ring bestimmt. Bei Acht Kreisen: <code>360 / 8 = 45</code>.		<code>60</code> ist der Abstand zwischen zwei Ringen. Der Winkel beginnt bei 0 und zählt bis 360 hoch. Die Schrittweite wird anhand der Anzahl Kreise pro Ring bestimmt. Bei Acht Kreisen: <code>360 / 8 = 45</code>.
	{{Tipp:End}}		{{Tipp:End}}{{Lösung:Start\|Lösung Zusatzaufgabe}}
	{{Lösung:Start\|Lösung Zusatzaufgabe}}
	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">
	void setup() {		void setup() {

Jneug: /* Verschachtelte Schleifen */

2022-02-03T21:36:25Z

Verschachtelte Schleifen

@@ Zeile 298: / Zeile 298: @@
 </syntaxhighlight>
 {{Lösung:End}}
 {{Zusatzaufgabe:Start}}
 Erstelle ein ''radiales'' Muster dieser Art:
@@ Zeile 305: / Zeile 306: @@
 Verwende auch hier verschachtelte Schleifen. Die erste bestimmt den Abstand zum Mittelpunkt, die zweite den Winkel. Nutze dann <code>sin()</code> zur Berechnung der <code>x</code>- und <code>cos()</code> für die <code>y</code>-Koordinate.
 {{Zusatzaufgabe:End}}

Jneug: /* Verschachtelte Schleifen */

2022-02-03T21:28:34Z

Verschachtelte Schleifen

← Nächstältere Version		Version vom 3. Februar 2022, 23:28 Uhr
Zeile 288:		Zeile 288:
	for ( int j = 0; j < 10; j += 1 ) {		for ( int j = 0; j < 10; j += 1 ) {
	if ( i%2 == 1 ) {		if ( i%2 == 1 ) {
	fill(0, ~~236~~, 48);		fill(0, 198, 48);
	} else {		} else {
	fill(236, 48, 0);		fill(236, 48, 0);

Jneug: /* Verschachtelte Schleifen */

2022-02-03T21:27:53Z

Verschachtelte Schleifen

@@ Zeile 247: / Zeile 247: @@
 #: <code>1*1=1, 1*2=2, 1*3=3, ..., 1*10=10, 2*1=2, 2*2=4, 2*3=6, ..., 10*10=100</code>
+#
-## Fülle die Zeichenfläche reihen- und spaltenweise mit roten Kreisen.
+## Fülle eine <code>400x400</code>-Pixel Große Zeichenfläche reihen- und spaltenweise mit roten Kreisen.
 ##: [[Bild:Processing_Kreismuster.jpg|200px]]
 ## Modifiziere das Programm so, dass jede zweite Spalte grüne Kreise enthält.
 ##: [[Bild:Processing_Kreismuster_2.jpg|200px]]
 {{Aufgabe:End}}
 {{Zusatzaufgabe:Start}}
 Erstelle ein ''radiales'' Muster dieser Art:

Jneug am 28. Januar 2022 um 09:10 Uhr

2022-01-28T09:10:01Z

← Nächstältere Version		Version vom 28. Januar 2022, 11:10 Uhr
Zeile 42:		Zeile 42:
	</pre>		</pre>

	Wichtig ist hier Zeile 6: Die Schleife läuft ~~solange~~, bis <code>x</code> größer oder gleich <code>100</code> ist. Wenn Zeile 6 nicht wäre, würde sich <code>x</code> nicht verändern und immer <code>1</code> bleiben. In dem Fall würde das Programm ''unendlich lange'' laufen und niemals enden.		Wichtig ist hier Zeile 6: Die Schleife läuft so lange, bis <code>x</code> größer oder gleich <code>100</code> ist. Wenn Zeile 6 nicht wäre, würde sich <code>x</code> nicht verändern und immer <code>1</code> bleiben. In dem Fall würde das Programm ''unendlich lange'' laufen und niemals enden.

	{{Aufgabe:Start}}		{{Aufgabe:Start}}
	Kopiere das Programm nach {{Processing}} und probiere es mit Hilfe des ''Debuggers'' aus.		Kopiere das Programm nach {{Processing}} und probiere es mit Hilfe des ''Debuggers'' aus.

	Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du nun das Programm startest stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.		Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du nun das Programm startest, stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.

	Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.		Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.
Zeile 54:		Zeile 54:
	{{Aufgabe:Start}}		{{Aufgabe:Start}}
	# Gib alle geraden Zahlen von 2 bis 100 auf der Konsole aus.		# Gib alle geraden Zahlen von 2 bis 100 auf der Konsole aus.
	# Zeichnen drei Quadrate nebeneinander. Das ~~erste~~ liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.		# Zeichnen drei Quadrate nebeneinander. Das Erste liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.
	#: Verwende eine While-Schleife, so dass mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.		#: Verwende eine While-Schleife, so dass mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.
	{{Aufgabe:End}}		{{Aufgabe:End}}
Zeile 68:		Zeile 68:
	== Zählschleifen ==		== Zählschleifen ==

	Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren sehr häufig vorkommt, gibt es dafür ein eigenes Konstrukt: ~~Die~~ ''Zählschleife''.		Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren sehr häufig vorkommt, gibt es dafür ein eigenes Konstrukt: die ''Zählschleife''.

	Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:		Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:
Zeile 100:		Zeile 100:

	{{Aufgabe:Start}}		{{Aufgabe:Start}}
	# Probiere ~~diese~~ Programm aus und erkläre seine Funktion. Was sind ''Startwert'', ''Zielwert'' und ''Schrittweite''?		# Probiere dieses Programm aus und erkläre seine Funktion. Was sind ''Startwert'', ''Zielwert'' und ''Schrittweite''?
	#: <syntaxhighlight lang="java" line="1">		#: <syntaxhighlight lang="java" line="1">
	for (int x = 0; x < 100; x = x + 10) {		for (int x = 0; x < 100; x = x + 10) {
Zeile 257:		Zeile 257:
	[[Bild:Processing_Kreise_radial.jpg\|200px]]		[[Bild:Processing_Kreise_radial.jpg\|200px]]

	Verwende auch hier verschachtelte Schleifen. Die erste bestimmt den Abstand zum Mittelpunkt, die zweite den Winkel. Nutze dann <code>sin()</code> zur ~~Berechnungen~~ der <code>x</code>- und <code>cos()</code> für die <code>y</code>-Koordinate.		Verwende auch hier verschachtelte Schleifen. Die erste bestimmt den Abstand zum Mittelpunkt, die zweite den Winkel. Nutze dann <code>sin()</code> zur Berechnung der <code>x</code>- und <code>cos()</code> für die <code>y</code>-Koordinate.
	{{Zusatzaufgabe:End}}		{{Zusatzaufgabe:End}}

Jneug: /* Verschachtelte Schleifen */

2022-01-28T07:17:43Z

Verschachtelte Schleifen

← Nächstältere Version		Version vom 28. Januar 2022, 09:17 Uhr
Zeile 254:		Zeile 254:
	{{Zusatzaufgabe:Start}}		{{Zusatzaufgabe:Start}}
	Erstelle ein ''radiales'' Muster dieser Art:		Erstelle ein ''radiales'' Muster dieser Art:

	[[Bild:Processing_Kreise_radial.jpg\|200px]]		[[Bild:Processing_Kreise_radial.jpg\|200px]]

			Verwende auch hier verschachtelte Schleifen. Die erste bestimmt den Abstand zum Mittelpunkt, die zweite den Winkel. Nutze dann <code>sin()</code> zur Berechnungen der <code>x</code>- und <code>cos()</code> für die <code>y</code>-Koordinate.
	{{Zusatzaufgabe:End}}		{{Zusatzaufgabe:End}}