Lernpfad:Einführung in Processing/12 - Versionsgeschichte

Ngb: /* Tipps und Hinweise */

2025-01-09T14:06:38Z

Tipps und Hinweise

← Nächstältere Version		Version vom 9. Januar 2025, 16:06 Uhr
Zeile 188:		Zeile 188:

	void update() {		void update() {
	// Aktualisiere hier die Positionen der Tropfen und		// Aktualisiere hier die Positionen der Tropfen und prüfe,
	// ob die Tropfen den Eimer oder den Boden		// ob die Tropfen den Eimer oder den Boden
	// erreicht haben		// erreicht haben

Ngb: /* Tipps und Hinweise */

2025-01-09T14:05:36Z

Tipps und Hinweise

← Nächstältere Version		Version vom 9. Januar 2025, 16:05 Uhr
Zeile 153:		Zeile 153:
	eimer = loadImage("");		eimer = loadImage("");

	tropfen.resize(21~~.35~~, 30);		tropfen.resize(21, 30);
	eimer.resize(50, 50);		eimer.resize(50, 50);

Jneug am 16. Februar 2022 um 19:41 Uhr

2022-02-16T19:41:48Z

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

	Wir haben schon eine Menge der grundlegenden Programmierkonzepte erarbeitet. Nun sollen alles in einem kleinen Miniprojekt zusammengebracht werden: <colorize size="0">Raindrops</colorize> (Regentropfen).		Wir haben schon eine Menge der grundlegenden Programmierkonzepte erarbeitet. Nun sollen alles in einem kleinen Miniprojekt zusammengebracht werden: <colorize size="0">Raindrops</colorize> (Regentropfen).

Jneug am 11. Februar 2022 um 21:33 Uhr

2022-02-11T21:33:27Z

← Nächstältere Version		Version vom 11. Februar 2022, 23:33 Uhr
Zeile 84:		Zeile 84:
	if( tropfenY >= eimerY ) {		if( tropfenY >= eimerY ) {
	if( tropfenY <= eimerY+eimerHeight ) {		if( tropfenY <= eimerY+eimerHeight ) {
	// Die obere Linke Ecke des ~~Toropfen~~ (tropfenX\|tropfenY)		// Die obere Linke Ecke des Tropfen (tropfenX\|tropfenY)
	// liegt im Rechteck des Eimers!		// liegt im Rechteck des Eimers!
	}		}
Zeile 112:		Zeile 112:
	}}		}}

	Da du diese Prüfung immer wieder für alle Tropfen machen musst, bietet es sich an, dafür eine {{Pfad\|10\|''Methode mit ~~Rückabe~~''\|Anker=#Befehle mit Rückgabe programmieren}} zu implementieren, die die <code>x</code>- und <code>y</code>-Koordinate eines Tropfen als ''Parameter'' übergeben bekommt und einen ''Wahrheitswert'' (<code>boolean</code>) ''zurückgibt'', ob der Tropfen mit dem Eimer kollidiert:		Da du diese Prüfung immer wieder für alle Tropfen machen musst, bietet es sich an, dafür eine {{Pfad\|10\|''Methode mit Rückgabe''\|Anker=#Befehle mit Rückgabe programmieren}} zu implementieren, die die <code>x</code>- und <code>y</code>-Koordinate eines Tropfen als ''Parameter'' übergeben bekommt und einen ''Wahrheitswert'' (<code>boolean</code>) ''zurückgibt'', ob der Tropfen mit dem Eimer kollidiert:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	boolean trifftEimer( float x, float y ) {		boolean trifftEimer( float x, float y ) {

Jneug am 29. Januar 2022 um 20:58 Uhr

2022-01-29T20:58:03Z

← Nächstältere Version		Version vom 29. Januar 2022, 22:58 Uhr
Zeile 1:		Zeile 1:
	{{NNavigation}}		{{NNavigation}}

	Wir haben schon eine Menge der grundlegenden Programmierkonzepte erarbeitet. Nun ~~wollen wir~~ alles in einem kleinen Miniprojekt ~~zusammenbringen~~: <colorize size="0">Raindrops</colorize> (Regentropfen).		Wir haben schon eine Menge der grundlegenden Programmierkonzepte erarbeitet. Nun sollen alles in einem kleinen Miniprojekt zusammengebracht werden: <colorize size="0">Raindrops</colorize> (Regentropfen).

	{{P5js\|https://editor.p5js.org/Ngb/full/_8PPVEHNW\|width=400\|height=600}}		{{P5js\|https://editor.p5js.org/Ngb/full/_8PPVEHNW\|width=400\|height=600}}

	{{Kasten\|		{{Kasten\|
	Bei Raindrops fallen aus dem "Himmel" einzelne "Regentropfen" in Richtung "Erde". Auf der Erde versucht der Spieler die Tropfen mit seinem "Eimer" zu fangen. Für jeden Tropfen gibt es Punkte, bis zu viele Tropfen auf den Boden gefallen sind.}}		Bei ''Raindrops'' fallen aus dem "Himmel" einzelne "Regentropfen" in Richtung "Erde". Auf der Erde versucht der Spieler die Tropfen mit seinem "Eimer" zu fangen. Für jeden Tropfen gibt es Punkte, bis zu viele Tropfen auf den Boden gefallen sind.}}

	{{Hinweis\|		{{Hinweis\|

Jneug am 28. Januar 2022 um 09:22 Uhr

2022-01-28T09:22:05Z

← Nächstältere Version		Version vom 28. Januar 2022, 11:22 Uhr
Zeile 70:		Zeile 70:
	Die Namen der Bilddateien (z.B. <code>Droplet.png</code>) müssen exakt so lauten, wie sie im Programmcode stehen (Zeile 8). Außerdem müssen die Dateien im Ordner eures Processing-Projektes liegen:		Die Namen der Bilddateien (z.B. <code>Droplet.png</code>) müssen exakt so lauten, wie sie im Programmcode stehen (Zeile 8). Außerdem müssen die Dateien im Ordner eures Processing-Projektes liegen:

	[[Bild:Processing_Regentropfen_Projektstruktur.png\|400px]]}}		[[Bild:Processing_Regentropfen_Projektstruktur.png\|400px\|center]]}}

	== Kollisionen erkennen ==		== Kollisionen erkennen ==

Jneug: /* Bilder benutzen */

2022-01-28T09:20:45Z

Bilder benutzen

← Nächstältere Version		Version vom 28. Januar 2022, 11:20 Uhr
Zeile 70:		Zeile 70:
	Die Namen der Bilddateien (z.B. <code>Droplet.png</code>) müssen exakt so lauten, wie sie im Programmcode stehen (Zeile 8). Außerdem müssen die Dateien im Ordner eures Processing-Projektes liegen:		Die Namen der Bilddateien (z.B. <code>Droplet.png</code>) müssen exakt so lauten, wie sie im Programmcode stehen (Zeile 8). Außerdem müssen die Dateien im Ordner eures Processing-Projektes liegen:

	[[Bild:Processing_Regentropfen_Projektstruktur.png\|400px}}		[[Bild:Processing_Regentropfen_Projektstruktur.png\|400px]]}}

	== Kollisionen erkennen ==		== Kollisionen erkennen ==

Jneug: /* Bilder benutzen */

2022-01-28T09:20:28Z

Bilder benutzen

← Nächstältere Version		Version vom 28. Januar 2022, 11:20 Uhr
Zeile 34:		Zeile 34:
	== Bilder benutzen ==		== Bilder benutzen ==

	Du kannst in Processing leicht Bilder einfügen und in deinen Programmen benutzen. Dazu benötigst du die Befehle {{Processing Ref\|loadImage()}}, um die Bilddatei zu laden und {{Processing Ref\|image()}, um das Bild auf die Zeichenfläche zu zeichnen. Um ein Bild in einer ''Variablen'' zu speichern, wird der ''Datentyp'' <code>PImage</code> verwendet.		Du kannst in Processing leicht Bilder einfügen und in deinen Programmen benutzen. Dazu benötigst du die Befehle {{Processing Ref\|loadImage()}}, um die Bilddatei zu laden und {{Processing Ref\|image()}}, um das Bild auf die Zeichenfläche zu zeichnen. Um ein Bild in einer ''Variablen'' zu speichern, wird der ''Datentyp'' <code>PImage</code> verwendet.

	Für unser Spiel benötigen wir zwei Bilder: Einen Regentropfen und einen Eimer.		Für unser Spiel benötigen wir zwei Bilder: Einen Regentropfen und einen Eimer.
Zeile 51:		Zeile 51:
	size(400, 600);		size(400, 600);

	eimer = loadImage("~~bucket_02~~.png");		eimer = loadImage("Bucket_02.png");
	tropfen = loadImage("~~droplet~~.png");		tropfen = loadImage("Droplet.png");
	}		}

Zeile 66:		Zeile 66:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

			{{Warnung\|
			Die Namen der Bilddateien (z.B. <code>Droplet.png</code>) müssen exakt so lauten, wie sie im Programmcode stehen (Zeile 8). Außerdem müssen die Dateien im Ordner eures Processing-Projektes liegen:

			[[Bild:Processing_Regentropfen_Projektstruktur.png\|400px}}

	== Kollisionen erkennen ==		== Kollisionen erkennen ==

Jneug: /* Kollisionen erkennen */

2022-01-28T09:17:12Z

Kollisionen erkennen

← Nächstältere Version		Version vom 28. Januar 2022, 11:17 Uhr
Zeile 88:		Zeile 88:

	{{Warnung\|		{{Warnung\|
	<code>tropfenX</code>/<code>tropfenY</code> und <code>eimerX</code>/<code>eimerY</code> sind Variablen in denen die Koordinaten ''eines'' Tropfens und des Eimers gespeichert sind. Du kannst sie durch die entsprechenden Variablenbezeichner in deinem Projekt ersetzen.}}		<code>tropfenX</code>/<code>tropfenY</code> und <code>eimerX</code>/<code>eimerY</code> sind Variablen in denen die Koordinaten ''eines'' Tropfens und des Eimers gespeichert sind. Du kannst sie durch die entsprechenden Variablenbezeichner in deinem Projekt ersetzen.

			Denk auch daran, dass die <code>x</code>-Koordinate des Eimers durch <code>mouseX</code> festgelegt ist. Die <code>y</code>-Koordinate des Eimers ist fest.}}

	{{Hinweis\|		{{Hinweis\|
Zeile 117:		Zeile 119:
	</syntaxhighlight>		</syntaxhighlight>

	~~{{Hinweis\|~~
	~~Denk daran, dass die <code>x</code>-Koordinate des Eimers durch <code>mouseX</code> festgelegt ist. Die <code>y</code>-Koordinate des Eimers ist fest.}}~~
	{{Hinweis\|		{{Hinweis\|
	Das Beispiel oben vergleicht immer die obere linke Ecke des Tropfens mit dem Rechteck des Eimers. Um einen anderen Punkt des Tropfens zu nutzen, musst du vor dem Vergleich die Koordinaten entsprechend anpassen (z.B. <code>x {{=}} x + 10;</code>).}}		Das Beispiel oben vergleicht immer die obere linke Ecke des Tropfens mit dem Rechteck des Eimers. Um einen anderen Punkt des Tropfens zu nutzen, musst du vor dem Vergleich die Koordinaten entsprechend anpassen (z.B. <code>x {{=}} x + 10;</code>).}}

Jneug am 28. Januar 2022 um 09:15 Uhr

2022-01-28T09:15:42Z

← Nächstältere Version		Version vom 28. Januar 2022, 11:15 Uhr
Zeile 34:		Zeile 34:
	== Bilder benutzen ==		== Bilder benutzen ==

	Du kannst in Processing leicht Bilder einfügen und in deinen Programmen benutzen. Dazu benötigst du die Befehle {{Processing Ref\|loadImage()}}, um die Bilddatei zu laden und {{Processing Ref\|image()}, um das Bild auf die Zeichenfläche zu zeichnen. Um ein Bild in einer ''Variablen'' zu speichern wird der ''Datentyp'' <code>PImage</code> verwendet.		Du kannst in Processing leicht Bilder einfügen und in deinen Programmen benutzen. Dazu benötigst du die Befehle {{Processing Ref\|loadImage()}}, um die Bilddatei zu laden und {{Processing Ref\|image()}, um das Bild auf die Zeichenfläche zu zeichnen. Um ein Bild in einer ''Variablen'' zu speichern, wird der ''Datentyp'' <code>PImage</code> verwendet.

	Für unser Spiel benötigen wir zwei Bilder: Einen Regentropfen und einen Eimer.		Für unser Spiel benötigen wir zwei Bilder: Einen Regentropfen und einen Eimer.
Zeile 42:		Zeile 42:
	</gallery>		</gallery>

	Lade die beiden Bilder runter (Rechtsklick -> Speicher unter..) und kopiere sie in deinen ~~Projektordern~~ (erstelle zunächst ein leeres Projekt und speichere es einmal ab). ~~probiere~~ dann folgenden Code aus:		Lade die beiden Bilder runter (Rechtsklick -> Speicher unter..) und kopiere sie in deinen Projektordner (erstelle zunächst ein leeres Projekt und speichere es einmal ab). Probiere dann folgenden Code aus:

	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">
Zeile 73:		Zeile 73:
	Ist zum Beispiel ein Tropfen an den Koordinaten <code>(x\|y)</code>, dann sind die Eckpunkte des Tropfens durch <code>(x\|y)</code>, <code>(x+width\|y)</code>, <code>(x+width\|y+height)</code> und <code>(x\|y+height)</code> beschrieben.		Ist zum Beispiel ein Tropfen an den Koordinaten <code>(x\|y)</code>, dann sind die Eckpunkte des Tropfens durch <code>(x\|y)</code>, <code>(x+width\|y)</code>, <code>(x+width\|y+height)</code> und <code>(x\|y+height)</code> beschrieben.

	Nun kannst du mit ~~Bedingten~~ Anweisungen prüfen, ob sich ~~diese~~ Rechteck mit dem eines anderen Objektes überschneidet:		Nun kannst du mit bedingten Anweisungen prüfen, ob sich dieses Rechteck mit dem eines anderen Objektes überschneidet:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	if( tropfenX >= eimerX ) {		if( tropfenX >= eimerX ) {
Zeile 86:		Zeile 86:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

			{{Warnung\|
			<code>tropfenX</code>/<code>tropfenY</code> und <code>eimerX</code>/<code>eimerY</code> sind Variablen in denen die Koordinaten ''eines'' Tropfens und des Eimers gespeichert sind. Du kannst sie durch die entsprechenden Variablenbezeichner in deinem Projekt ersetzen.}}

	{{Hinweis\|		{{Hinweis\|
	Das Verschachteln von ~~Bedingten~~ Anweisungen in dieser Art wird schnell unübersichtlich.		Das Verschachteln von bedingten Anweisungen in dieser Art wird schnell unübersichtlich.
	Oft ist es besser, mehrere zusammenhängende Bedingungen zu ''verknüpfen''. Dazu gibt es die ''logischen Operatoren''.		Oft ist es besser, mehrere zusammenhängende Bedingungen zu ''verknüpfen''. Dazu gibt es die ''logischen Operatoren'', die du noch in {{Pfad\|14}} kennenlernst.

	Das Beispiel oben kann man auch schreiben als:		Das Beispiel oben kann man auch schreiben als:
Zeile 102:		Zeile 105:
	}}		}}

	Da du diese Prüfung immer wieder für alle Tropfen machen musst, bietet es sich an, dafür eine ''Methode mit Rückabe'' zu implementieren, die die <code>x</code>- und <code>y</code>-Koordinate eines Tropfen als ''Parameter'' übergeben bekommt und einen ''Wahrheitswert'' (<code>boolean</code>) ''zurückgibt'', ob der Tropfen mit dem Eimer kollidiert:		Da du diese Prüfung immer wieder für alle Tropfen machen musst, bietet es sich an, dafür eine {{Pfad\|10\|''Methode mit Rückabe''\|Anker=#Befehle mit Rückgabe programmieren}} zu implementieren, die die <code>x</code>- und <code>y</code>-Koordinate eines Tropfen als ''Parameter'' übergeben bekommt und einen ''Wahrheitswert'' (<code>boolean</code>) ''zurückgibt'', ob der Tropfen mit dem Eimer kollidiert:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	boolean trifftEimer( float x, float y ) {		boolean trifftEimer( float x, float y ) {
Zeile 123:		Zeile 126:
	== Tipps und Hinweise ==		== Tipps und Hinweise ==
	{{Tipp:Start\|Grundgerüst des Programms}}		{{Tipp:Start\|Grundgerüst des Programms}}
	Wenn du einen Startpunkt für das Projekt brauchst, dann übernimm diese Vorlage in {{Processing}}. Du musst nicht alle Methoden benutzen. Konzentriere dich ~~erstmal~~ auf das grundlegende Spielprinzip.		Wenn du einen Startpunkt für das Projekt brauchst, dann übernimm diese Vorlage in {{Processing}}. Du musst nicht alle Methoden benutzen. Konzentriere dich zunächst auf das grundlegende Spielprinzip.
	<syntaxhighlight lang="java" line="1">		<syntaxhighlight lang="java" line="1">
	// Deklaration von Konfigurationsvariablen		// Deklaration von Konfigurationsvariablen