Lernpfad:Einführung in Processing/17 - Versionsgeschichte

Ngb: /* Übungen */

2025-01-26T23:06:18Z

Übungen

← Nächstältere Version		Version vom 27. Januar 2025, 01:06 Uhr
Zeile 551:		Zeile 551:
	sin(millis() / 350.0);		sin(millis() / 350.0);
	</syntaxhighlight>		</syntaxhighlight>
	{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}		{{Tipp:End}}
			<!--
			{{Lösung:Start\|Eine mögliche Lösung}}
	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">
	float[] xcoords = new float[10];		float[] xcoords = new float[10];
Zeile 591:		Zeile 593:
	</syntaxhighlight>		</syntaxhighlight>
	{{Lösung:End}}		{{Lösung:End}}
			-->

Ngb: /* Übungen */

2025-01-26T23:04:54Z

Übungen

@@ Zeile 477: / Zeile 477: @@
 {{P5js|https://editor.p5js.org/Ngb/full/MFsgYHL8X|height=500}}
 {{Aufgabe:End}}
 {{Tipp:Start}}
 Du kannst die nötigen Arrays in dieser Art erstellen:

Ngb: /* Übungen */

2025-01-26T23:03:10Z

Übungen

← Nächstältere Version		Version vom 27. Januar 2025, 01:03 Uhr
Zeile 497:		Zeile 497:
	// zeichne hier den Ballon		// zeichne hier den Ballon
	}		}
			</syntaxhighlight>
			{{Tipp:End}}{{Tipp:Start\|Tipps zu Erweiterungen}}
			Hübschere Zufallsfarben lassen sich einfacher in einem anderen Farbraum als RGB erstellen. Schaut euch den HLS Farbraum und den [https://processing.org/reference/colorMode_.html colorMode()]-Befehl an.

			Damit sich die Ballons leicht hin-und-her bewegen, könnt ihr die Sinus- oder Cosinus-Funktion benutzen. Als Eingabe nutzt ihr den [https://processing.org/reference/millis_.html millis()]-Befehl, der die Laufzeit des Programms in Miilisekunden angibt.
			<syntaxhighlight lang="java">
			sin(millis() / 350.0);
	</syntaxhighlight>		</syntaxhighlight>
	{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}		{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}

Ngb am 23. Januar 2025 um 10:16 Uhr

2025-01-23T10:16:26Z

← Nächstältere Version		Version vom 23. Januar 2025, 12:16 Uhr
Zeile 470:		Zeile 470:

	{{Aufgabe:Start}}		{{Aufgabe:Start}}
	Simuliere Ballons (bunte Ellipsen), die vom unteren Bildschirmrand nach oben steigen. Die Koordinaten der ~~Regentropen~~ werden (als <code>float</code>) in zwei Arrays gespeichert (<code>xcoords</code> und <code>ycoords</code>). Zeige zunächst 10 Ballons an. Sobald die Ballons den oberen Rand erreichen, "platzen" sie und tauchen unten wieder auf.		Simuliere Ballons (bunte Ellipsen), die vom unteren Bildschirmrand nach oben steigen. Die Koordinaten der Regentropfen werden (als <code>float</code>) in zwei Arrays gespeichert (<code>xcoords</code> und <code>ycoords</code>). Zeige zunächst 10 Ballons an. Sobald die Ballons den oberen Rand erreichen, "platzen" sie (werden nicht mehr angezeigt) und tauchen unten wieder auf (die x-Koordinate wird zufällig und die y-Koordinate wird auf den unteren Bildschirmrand gesetzt).

	Du kannst das Ballon-Programm auch ~~selber~~ kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).		Du kannst das Ballon-Programm auch selbst kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).

	Ein Beispiel mit einigen Erweiterungen könnte so aussehen:		Ein Beispiel mit einigen Erweiterungen könnte so aussehen:
Zeile 482:		Zeile 482:
	float[] xcoords = new float[10];		float[] xcoords = new float[10];
	</syntaxhighlight>		</syntaxhighlight>


	Nutze in <code>void setup()</code> eine <code>for</code>-Schleife, um eine Variable <code>i</code> von <code>0</code> bis <code>xcoords.length</code> laufen zu lassen. Setze im Schleifenrumpf in den beiden Arrays die initialen Koordinaten (z.B. Zufallswerte).		Nutze in <code>void setup()</code> eine <code>for</code>-Schleife, um eine Variable <code>i</code> von <code>0</code> bis <code>xcoords.length</code> laufen zu lassen. Setze im Schleifenrumpf in den beiden Arrays die initialen Koordinaten (z.B. Zufallswerte).
Zeile 493:		Zeile 492:


	Verfahre in <code>void draw()</code> ähnlich und nutze eine Zählschleife, um die Ballons zu zeichnen.		Verfahre in <code>void draw()</code> ähnlich und nutze eine Zählschleife, um die Ballons zu zeichnen und die y-Koordinaten so zu verändern, dass die Ballons langsam nach oben steigen. Es ist hilfreich für das Zeichnen zunächst einen neuen Befehl zu erstellen und diesen in der Schleife mit den passenden Koordinaten aufzurufen.
			<syntaxhighlight lang="java">
			void ballon(int x, int y, int size) {
			// zeichne hier den Ballon
			}
			</syntaxhighlight>
	{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}		{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}
	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">

Ngb am 23. Januar 2025 um 10:08 Uhr

2025-01-23T10:08:37Z

← Nächstältere Version		Version vom 23. Januar 2025, 12:08 Uhr
Zeile 23:		Zeile 23:
	</syntaxhighlight>		</syntaxhighlight>

			<!--
	Soll das Array nicht in einer Variablen gespeichert werden, sondern zum Beispiel nur als Parameter in einem Methodenaufruf genutzt werden, dann kann diese Form genutzt werden:		Soll das Array nicht in einer Variablen gespeichert werden, sondern zum Beispiel nur als Parameter in einem Methodenaufruf genutzt werden, dann kann diese Form genutzt werden:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	taschenrechner.addiere(new int[]{5, 6, 7, 8});		taschenrechner.addiere(new int[]{5, 6, 7, 8});
	</syntaxhighlight>		</syntaxhighlight>
			-->

	Die Größe eines Arrays kann jederzeit über das <code>length</code> Attribut abgefragt werden.		Die Größe eines Arrays kann jederzeit über das <code>length</code> Attribut abgefragt werden.

Ngb: /* Übungen */

2025-01-20T09:04:11Z

Übungen

← Nächstältere Version		Version vom 20. Januar 2025, 11:04 Uhr
Zeile 493:		Zeile 493:
	Verfahre in <code>void draw()</code> ähnlich und nutze eine Zählschleife, um die Ballons zu zeichnen.		Verfahre in <code>void draw()</code> ähnlich und nutze eine Zählschleife, um die Ballons zu zeichnen.
	{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}		{{Tipp:End}}{{Lösung:Start\|Eine mögliche Lösung}}
			<syntaxhighlight lang="java" line="1">
	float[] xcoords = new float[10];		float[] xcoords = new float[10];
	float[] ycoords = new float[10];		float[] ycoords = new float[10];
Zeile 529:		Zeile 530:
	}		}
	}		}
			</syntaxhighlight>
	{{Lösung:End}}		{{Lösung:End}}

Jneug: /* Deklaration */

2022-03-17T21:13:53Z

Deklaration

← Nächstältere Version		Version vom 17. März 2022, 23:13 Uhr
Zeile 17:		Zeile 17:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	// Deklaration eines Integer-Arrays der Größe 4 mit den Werten 5,6,7 und 8		// Deklaration eines Integer-Arrays der Größe 4 mit den Werten 5,6,7 und 8
	int[] zahlen = {5, 6, 7, 8};		int[] zahlen = new int[]{5, 6, 7, 8};

	// String-Array der Größe 5		// String-Array der Größe 5
	String[] worte = {"a", "b", "c", "d", "e"};		String[] worte = new String[]{"a", "b", "c", "d", "e"};
	</syntaxhighlight>		</syntaxhighlight>

Jneug: /* Übungen */

2022-02-25T07:57:54Z

Übungen

← Nächstältere Version		Version vom 25. Februar 2022, 09:57 Uhr
Zeile 419:		Zeile 419:
	# Verändere das Programm aus 2 so, dass die Zahlen nicht ausgegeben werden, sondern als <code>x</code>-Koordinate für Kreise verwendet werden. Die <code>y</code>-Koordinate bleibt fest auf <code>50</code> gesetzt. Stelle die Zeichenfläche auf <code>400x400</code> Pixel ein.		# Verändere das Programm aus 2 so, dass die Zahlen nicht ausgegeben werden, sondern als <code>x</code>-Koordinate für Kreise verwendet werden. Die <code>y</code>-Koordinate bleibt fest auf <code>50</code> gesetzt. Stelle die Zeichenfläche auf <code>400x400</code> Pixel ein.
	# Erweitere das Programm aus 3 so, dass nur jedes zweite Element im Array als <code>x</code>-Koordinate verwendet wird und das nachfolgende Element als <code>y</code>-Koordinate. (Der erste Kreis wird also bei <code>(50, 80)</code> gezeichnet.)		# Erweitere das Programm aus 3 so, dass nur jedes zweite Element im Array als <code>x</code>-Koordinate verwendet wird und das nachfolgende Element als <code>y</code>-Koordinate. (Der erste Kreis wird also bei <code>(50, 80)</code> gezeichnet.)

			{{P5js\|https://editor.p5js.org/Ngb/full/rH70PEMDz\|height=400}}
	{{Aufgabe:End}}		{{Aufgabe:End}}
	{{Lösung:Start\|Aufgabe 1}}		{{Lösung:Start\|Aufgabe 1}}

Jneug: /* Übungen */

2022-02-25T07:51:35Z

Übungen

← Nächstältere Version		Version vom 25. Februar 2022, 09:51 Uhr
Zeile 470:		Zeile 470:
	Du kannst das Ballon-Programm auch selber kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).		Du kannst das Ballon-Programm auch selber kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).

			Ein Beispiel mit einigen Erweiterungen könnte so aussehen:
	{{P5js\|https://editor.p5js.org/Ngb/full/MFsgYHL8X\|height=500}}		{{P5js\|https://editor.p5js.org/Ngb/full/MFsgYHL8X\|height=500}}
	{{Aufgabe:End}}		{{Aufgabe:End}}

Jneug: /* Übungen */

2022-02-24T21:25:41Z

Übungen

← Nächstältere Version		Version vom 24. Februar 2022, 23:25 Uhr
Zeile 468:		Zeile 468:
	Simuliere Ballons (bunte Ellipsen), die vom unteren Bildschirmrand nach oben steigen. Die Koordinaten der Regentropen werden (als <code>float</code>) in zwei Arrays gespeichert (<code>xcoords</code> und <code>ycoords</code>). Zeige zunächst 10 Ballons an. Sobald die Ballons den oberen Rand erreichen, "platzen" sie und tauchen unten wieder auf.		Simuliere Ballons (bunte Ellipsen), die vom unteren Bildschirmrand nach oben steigen. Die Koordinaten der Regentropen werden (als <code>float</code>) in zwei Arrays gespeichert (<code>xcoords</code> und <code>ycoords</code>). Zeige zunächst 10 Ballons an. Sobald die Ballons den oberen Rand erreichen, "platzen" sie und tauchen unten wieder auf.

	Du kannst das Ballon-Programm auch selber kreativ erweitern.		Du kannst das Ballon-Programm auch selber kreativ erweitern (zufällige Farben; unterschiedliche Geschwindigkeiten; ...).

	{{P5js\|https://editor.p5js.org/Ngb/full/MFsgYHL8X\|height=500}}		{{P5js\|https://editor.p5js.org/Ngb/full/MFsgYHL8X\|height=500}}