Projekt:2020/Processing Arrays - Versionsgeschichte

Jneug am 26. April 2021 um 21:19 Uhr

2021-04-26T21:19:44Z

← Nächstältere Version		Version vom 26. April 2021, 23:19 Uhr
Zeile 199:		Zeile 199:
	</syntaxhighlight>		</syntaxhighlight>
	{{Lösung:End}}		{{Lösung:End}}

			== Kreativ-Ecke ==
			{{Aufgabe:Start}}
			Ergänze das Projekt um eigene Ideen. Die Farbe der Ballons könnte zufällig sein. Du kannst die Bewegungen der Ballons um eine Verschiebung entlang der x-Achse ergänzen, damit die Ballons "aufsteigen". (Einen besonders realistischen Effekt kannst du erziehlen, wenn du die [https://processing.org/reference/sin_.html Sinusfunktion] benutzt.)

			Du hast bestimmt eigene gute Ideen.
			{{Aufgabe:End}}

Jneug am 26. April 2021 um 21:14 Uhr

2021-04-26T21:14:57Z

← Nächstältere Version		Version vom 26. April 2021, 23:14 Uhr
Zeile 171:		Zeile 171:
	{{Lösung:Start\|Hauptprogramm}}		{{Lösung:Start\|Hauptprogramm}}
	<syntaxhighlight lang="Java" line="1">		<syntaxhighlight lang="Java" line="1">
	Ballon~~[] ballons = new Ballon[10];~~		class Ballon {
	~~Spitze[] spitzen = new Spitze[60];~~

	~~void setup~~() {		private float x, y, speed, size;
	~~size~~(~~600~~, ~~600~~);
	~~// Spitzen erstellen~~		public Ballon() {
	~~for~~( ~~int i = 0~~; ~~i < spitzen.length; i++ ) {~~		x = random(10, width-10);
	~~spitzen[i]~~ = ~~new Spitze~~(~~i*10~~);		y = height-10;
			speed = random(20, 40)/10;
			size = random(20, 30);
	}		}

	~~// Ballons erstellen~~		public void draw() {
	~~for~~( ~~int i = 0~~; ~~i < ballons.length~~; ~~i++ ) {~~		noStroke();
	~~ballons[i] = new Ballon~~();		fill(color(23, 235, 98));
			ellipse(x, y, size*.7, size);
	}		}
	}

	void ~~draw~~() {		public void update() {
	~~background(34, 28, 196)~~;		y -= speed;
			}

	~~// Spitzen zeichnen~~		public float getY() {
	~~for~~( ~~int i = 0; i < spitzen.length; i++~~ ) {		return y;
	~~spitzen[i].draw()~~;
	}		}

	~~// Ballons zeichnen und aktualisieren~~
	~~for( int i = 0; i < ballons.length; i++ ) {~~
	~~ballons[i].draw();~~
	~~ballons[i].update();~~

	~~if( ballons[i].getY() < 20 ) {~~
	~~ballons[i] = new Ballon();~~
	}
	}
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	{{Lösung:End}}		{{Lösung:End}}

Jneug am 26. April 2021 um 21:13 Uhr

2021-04-26T21:13:47Z

← Nächstältere Version		Version vom 26. April 2021, 23:13 Uhr
Zeile 111:		Zeile 111:

	== Eine Zwischenlösung ==		== Eine Zwischenlösung ==
			Der aktuelle Stand des Projekt könnte so aussehen. Dank aber daran, dass es viele verschiedene funktionierende
			Lösungen gibt. Du kannst die Vorlagen als Orientierung nutzen.

	{{Lösung:Start\|Klasse Ballon}}		{{Lösung:Start\|Klasse Ballon}}
	<syntaxhighlight lang="Java" line="1">		<syntaxhighlight lang="Java" line="1">

Jneug am 26. April 2021 um 21:12 Uhr

2021-04-26T21:12:16Z

← Nächstältere Version		Version vom 26. April 2021, 23:12 Uhr
Zeile 111:		Zeile 111:

	== Eine Zwischenlösung ==		== Eine Zwischenlösung ==
	{{Lösung:Start}}		{{Lösung:Start\|Klasse Ballon}}
	~~Ballon~~
	<syntaxhighlight lang="Java" line="1">		<syntaxhighlight lang="Java" line="1">
	class Ballon {		class Ballon {
Zeile 145:		Zeile 144:

	</syntaxhighlight>		</syntaxhighlight>
			{{Lösung:End}}
	Spitze		{{Lösung:Start\|Klasse Spitze}}
	<syntaxhighlight lang="Java" line="1">		<syntaxhighlight lang="Java" line="1">
	class Spitze {		class Spitze {
Zeile 166:		Zeile 165:

	</syntaxhighlight>		</syntaxhighlight>
			{{Lösung:End}}
	Hauptprogramm		{{Lösung:Start\|Hauptprogramm}}
	<syntaxhighlight lang="Java" line="1">		<syntaxhighlight lang="Java" line="1">
	Ballon[] ballons = new Ballon[10];		Ballon[] ballons = new Ballon[10];

Jneug am 26. April 2021 um 21:11 Uhr

2021-04-26T21:11:10Z

@@ Zeile 29: / Zeile 29: @@
 {{Aufgabe:Start|Icon=Processing_icon.png}}
-Erstelle zwei Ballons und einige Spitzen und teste dein Programm.
+Erstelle zwei Ballons und einige Spitzen und teste dein Programm. (Rufe die <code>draw()</code> und <code>update()</code> Methoden der Objekte innerhalb der <code>draw()</code> Methode des Hauptprogramms auf.)
 {{Aufgabe:End}}
@@ Zeile 95: / Zeile 95: @@
 Baue die Spitzen in dein Projekt ein und ergänze eine weitere Zählschleife in der <code>draw()</code> Methode des Hauptprogramms, die wiederum die <code>draw()</code> Methode jeder Spitze im Array aufruft.
 {{Aufgabe:End}}

Jneug: /* Eine Reihe Spitzen */

2021-04-26T20:56:57Z

Eine Reihe Spitzen

← Nächstältere Version		Version vom 26. April 2021, 22:56 Uhr
Zeile 89:		Zeile 89:

	Und schon haben wir 60 Spitzen am oberen Bildrand erstellt.		Und schon haben wir 60 Spitzen am oberen Bildrand erstellt.

			{{Aufgabe:Start}}
			Studiere die Beispiele oben und vor allem die Zählschleife zum Durchlaufen eines Arrays. Diesen Aufbau wirst du beim programmieren häufiger verwenden.

			Baue die Spitzen in dein Projekt ein und ergänze eine weitere Zählschleife in der <code>draw()</code> Methode des Hauptprogramms, die wiederum die <code>draw()</code> Methode jeder Spitze im Array aufruft.
			{{Aufgabe:End}}

Jneug am 26. April 2021 um 20:52 Uhr

2021-04-26T20:52:49Z

← Nächstältere Version		Version vom 26. April 2021, 22:52 Uhr
Zeile 72:		Zeile 72:
	Spitze[] spitzen = new Spitze[60];		Spitze[] spitzen = new Spitze[60];

	spitzen[0] = new Spitze();		spitzen[0] = new Spitze(0);
	</syntaxhighlight>		</syntaxhighlight>

	Nun kannst du mit den Indizes <code>0</code> bis <code>59</code> den einzelnen Elementen des Arrays neue <code>Spitzen</code> zuweisen.		Nun kannst du mit den Indizes <code>0</code> bis <code>59</code> den einzelnen Elementen des Arrays neue <code>Spitzen</code> zuweisen.

			=== Arrays durchlaufen ===

			Arrays ersparen uns schonmal eine Menge Schreibarbeit, weil wir nichtmehr 60 Variablen anlegen müssen. Aber wir müssen immer noch 60 <code>Spitze</code>-Objekte mit <code>new Spitze()</code> erstellen. Aber auch dafür gibt es eine Lösung: Wie können auf bekannte Kontrollstrukturen zurückgreifen und eine ''Zählschleife'' benutzen:
			<syntaxhighlight lang="Java">
			// Deklaration eines Spitzen-Arrays mit 60 Elementen
			Spitze[] spitzen = new Spitze[60];
			for( int i = 0; i < spitzen.length; i++ ) {
			spitzen[i] = new Spitze(i*10);
			}
			</syntaxhighlight>

			Und schon haben wir 60 Spitzen am oberen Bildrand erstellt.

Jneug am 26. April 2021 um 20:47 Uhr

2021-04-26T20:47:39Z

@@ Zeile 22: / Zeile 22: @@
 [[Datei:UML Ballon.png|center]]
-Die Klassen <code>Ballon</code> und <code>Spitze</code> sollen nach dem UML-Diagramm oben implementiert werden. <code>Spitze</code>n befinden sich am oberen Rand des Fensters und bekommen ihre x-Position im Konstruktor übergeben. Die Größe (<code>size</code>) wird [https://processing.org/reference/random_.html zufällig] bestimmt. Ein <code>Ballon</code> beginnt am [https://processing.org/reference/height.html unteren Rand des Fensters]. Alle anderen Attribute werden [https://processing.org/reference/random_.html zufällig] bestimmt (wähle sinnvolle Werte für die unteren und oberen Grenzen).
+Die Klassen <code>Ballon</code> und <code>Spitze</code> sollen nach dem UML-Diagramm oben implementiert werden. <code>Spitze</code>n befinden sich am oberen Rand des Fensters und bekommen ihre x-Position im Konstruktor übergeben. Die Größe (<code>size</code>) wird [https://processing.org/reference/random_.html zufällig] bestimmt und legt die fest, wie lang die Spitze jeweils ist. Jede Spitze ist 10 Pixel breit.
 <code>draw()</code> zeichnet jeweils die <code>Spitze</code> bzw. den <code>Ballon</code> (benutze ein [https://processing.org/reference/triangle_.html Dreieck] bzw. eine [https://processing.org/reference/ellipse_.html Ellipse]). <code>update()</code> verändert abhängig von <code>speed</code> die y-Position des <code>Ballons</code>, so dass er langsam nach oben steigt.
@@ Zeile 29: / Zeile 31: @@
 Erstelle zwei Ballons und einige Spitzen und teste dein Programm.
 {{Aufgabe:End}}

Jneug am 26. April 2021 um 20:34 Uhr

2021-04-26T20:34:35Z

← Nächstältere Version		Version vom 26. April 2021, 22:34 Uhr
Zeile 26:		Zeile 26:
	<code>draw()</code> zeichnet jeweils die <code>Spitze</code> bzw. den <code>Ballon</code> (benutze ein [https://processing.org/reference/triangle_.html Dreieck] bzw. eine [https://processing.org/reference/ellipse_.html Ellipse]). <code>update()</code> verändert abhängig von <code>speed</code> die y-Position des <code>Ballons</code>, so dass er langsam nach oben steigt.		<code>draw()</code> zeichnet jeweils die <code>Spitze</code> bzw. den <code>Ballon</code> (benutze ein [https://processing.org/reference/triangle_.html Dreieck] bzw. eine [https://processing.org/reference/ellipse_.html Ellipse]). <code>update()</code> verändert abhängig von <code>speed</code> die y-Position des <code>Ballons</code>, so dass er langsam nach oben steigt.

	{{Aufgabe:Start\|Processing_icon.png}}		{{Aufgabe:Start\|Icon=Processing_icon.png}}
	Erstelle zwei Ballons und einige Spitzen und teste dein Programm.		Erstelle zwei Ballons und einige Spitzen und teste dein Programm.
	{{Aufgabe:End}}		{{Aufgabe:End}}

Jneug am 26. April 2021 um 20:33 Uhr

2021-04-26T20:33:38Z

← Nächstältere Version		Version vom 26. April 2021, 22:33 Uhr
Zeile 1:		Zeile 1:
	Seite zum Projekt "{{SUBPAGENAME}}" der Informatik EF im [[:Kategorie:Projekte:2020/21\|Schuljahr 2020/21]][[Kategorie:Projekte:2020/21]].		Seite zum Projekt "{{SUBPAGENAME}}" der Informatik EF im [[:Kategorie:Projekte:2020/21\|Schuljahr 2020/21]][[Kategorie:Projekte:2020/21]].

			== Projektziel ==

			Das Ziel dieses Mini-Projekts ist eine Ballonsimulation, ähnlich dieser Animation:
	[[Bild:20210426220415_Ballons.gif\|center]]		[[Bild:20210426220415_Ballons.gif\|center]]

			Du fängst dazu klein an (mit einem Ballon und einigen Spitzen) und kannst am Ende dein Projekt kreativ ausbauen.

			== Lerninhalt ==

			In diesem Projekt lernst du das Konzept der "Arrays" kennen. Eine Sammlung von mehreren Variablen desselben Datentyps. Arrays sind ein mächtiges Konzept in der Programmierung.

			== Grundgerüst ==

			Erstelle als Grundgerüst für das Programm zunächst drei Dateien:
			# Die Hauptdatei mit der <code>setup()</code> und <code>draw()</code> Methode.
			# Die Klasse <code>Spitze</code>.
			# Die Klasse <code>Ballon</code>.

			Die Hauptdatei soll [https://processing.org/reference/size_.html die Fenstergröße] auf 600x600 Pixel einstellen und bei jedem Zeichnen das Fenster [https://processing.org/reference/background_.html in einem Himmelblau einfärben].

			[[Datei:UML Ballon.png\|center]]
			Die Klassen <code>Ballon</code> und <code>Spitze</code> sollen nach dem UML-Diagramm oben implementiert werden. <code>Spitze</code>n befinden sich am oberen Rand des Fensters und bekommen ihre x-Position im Konstruktor übergeben. Die Größe (<code>size</code>) wird [https://processing.org/reference/random_.html zufällig] bestimmt. Ein <code>Ballon</code> beginnt am [https://processing.org/reference/height.html unteren Rand des Fensters]. Alle anderen Attribute werden [https://processing.org/reference/random_.html zufällig] bestimmt (wähle sinnvolle Werte für die unteren und oberen Grenzen).

			<code>draw()</code> zeichnet jeweils die <code>Spitze</code> bzw. den <code>Ballon</code> (benutze ein [https://processing.org/reference/triangle_.html Dreieck] bzw. eine [https://processing.org/reference/ellipse_.html Ellipse]). <code>update()</code> verändert abhängig von <code>speed</code> die y-Position des <code>Ballons</code>, so dass er langsam nach oben steigt.

			{{Aufgabe:Start\|Processing_icon.png}}
			Erstelle zwei Ballons und einige Spitzen und teste dein Programm.
			{{Aufgabe:End}}