Informatik-Box

Projekt:2020/Processing: Unterschied zwischen den Versionen

Projekt:2020/Processing (Quelltext anzeigen)

Version vom 20. April 2021, 09:04 Uhr

12.827 Bytes hinzugefügt ,  09:04, 20. Apr. 2021
→‎Billard
Keine Bearbeitungszusammenfassung
 
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 11: Zeile 11:
Sinnvolle Anlaufpunkte sind zum Beispiel:
Sinnvolle Anlaufpunkte sind zum Beispiel:


- [https://processing.org/reference/ Die Befehlsreferenz von Processing]
* [https://processing.org/reference/ Die Befehlsreferenz von Processing]
- Der [[Lernpfad:Objektorientierte Programmierung mit Processing|Objektorientierte Programmierung mit Processing]] und das Projekt der letzten Stunde.
* Der [[Lernpfad:Objektorientierte Programmierung mit Processing|Objektorientierte Programmierung mit Processing]] und das Projekt der letzten Stunde.
* Das [https://helmholtz.padlet.org/ngb/i8ovjtmx3cn7rmi8 Padlet zur Wiederholung der OOP].


Für die Aufgaben gibt es Versionen mit verschiedenen Schwierigkeitsniveaus. Sucht euch als Gruppe jeweils ein Niveau aus und versucht es zu lösen. Ist das Niveau zu schwer oder zu leicht, könnt ihr auch auf ein anderes Niveau wechseln. Ihr könnt die Aufgaben auch kreativ erweitern, wenn ihr gute Ideen habt.
Für die Aufgaben gibt es Versionen mit verschiedenen Schwierigkeitsniveaus. Sucht euch als Gruppe jeweils ein Niveau aus und versucht es zu lösen. Ist das Niveau zu schwer oder zu leicht, könnt ihr auch auf ein anderes Niveau wechseln. Ihr könnt die Aufgaben auch kreativ erweitern, wenn ihr gute Ideen habt.


== Schachbrett ==
== Schachbrett ==
[[Datei:20210413082443_Schachbrett.png|center|400px]]


=== Niveau 1 ===
=== Niveau 1 ===
Zeile 28: Zeile 31:
{{Collapse:End}}
{{Collapse:End}}


{{Lösung:Start|Tipp}}
{{Lösung:Start|Tipps}}
* Quadrate könnt ihr mit [https://processing.org/reference/square_.html <code>square</code>] zeichnen.
* Quadrate könnt ihr mit [https://processing.org/reference/square_.html <code>square</code>] zeichnen.
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
Zeile 41: Zeile 44:
{{Collapse:End}}
{{Collapse:End}}


{{Lösung:Start|Tipp}}
{{Lösung:Start|Tipps}}
* Rechtecke könnt ihr mit [https://processing.org/reference/rect_.html <code>rect</code>] zeichnen.
* Rechtecke könnt ihr mit [https://processing.org/reference/rect_.html <code>rect</code>] zeichnen.
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
Zeile 48: Zeile 51:
{{Lösung:End}}
{{Lösung:End}}


=== Niveau 3 ===
{{Collapse:Start}}
{{Aufgabe:Start}}
Stellt die Größe des Processing-Fensters auf <code>800x600</code> Pixel ein. Erstellt dann eine Klasse <code>Schachbrettmuster</code>, die in einer <code>draw()</code>-Methode das gesamte Fenster wie ein Schachbrett im Wechsel mit schwarzen und
weißen Quadraten füllt. Dabei soll die Größe der Quadrate, sowie die Farbe für "schwarze" und "weiße" Felder
als Parameter der Methode frei gewählt werden können.
{{Aufgabe:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
* Eine einfache Prüfung, ob ein Feld schwarz oder weiß sein muss, kann durch <code>if( (i+j)%2 == 0 )</code> vorgenommen werden. Dabei ist <code>i</code> die Zeilennummer und <code>j</code> die Spalte. <code>%</code> ist der "Modulo"-Operator.
* lest bei der [https://processing.org/reference/fill_.html <code>fill</code>-Methode] über Farben nach.
{{Lösung:End}}
=== Niveau 4 ===
{{Collapse:Start}}
{{Aufgabe:Start}}
Erstellt eine Klasse <code>Schachbrettmuster</code>, die in einer <code>draw()</code>-Methode das gesamte Fenster wie ein Schachbrett im Wechsel mit schwarzen und weißen Rechtecken füllt. Dabei soll die Farbe für "schwarze" und "weiße" Felder
als Parameter der Methode frei gewählt werden können.
Die Rechtecke sollen das Fenster exakt ausfüllen und zunächst in genau 15 Zeilen und 20 Spalten aufgeteilt sein. Egal, auf welche Größe man das Processing-Fenster einstellt.
Animiert dann das Muster, indem ihr die Anzahl an Zeilen und Spalten jeweils um 1 erhöht, bis sie insgesamt um 10 erhöht wurden, dann verringert sie wieder bis sie 10 unter dem Startwert liegen (also bei 5 Zeilen, 10 Spalten). Dann wieder erhöhen, und so weiter.
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit Zählschleifen (<code>for</code>-Schleifen) könnt ihr die Zeilen und Spalten des Musters durchlaufen. (Ihr müsst zwei Schleifen ineinander verschachteln.
* Eine einfache Prüfung, ob ein Feld schwarz oder weiß sein muss, kann durch <code>if( (i+j)%2 == 0 )</code> vorgenommen werden. Dabei ist <code>i</code> die Zeilennummer und <code>j</code> die Spalte. <code>%</code> ist der "Modulo"-Operator.
* Lest bei der [https://processing.org/reference/fill_.html <code>fill</code>-Methode] über Farben nach.
* Erstellt eine Objektvariable, die zu den Startwerten (15 und 20) hinzugerechnet wird und in einer <code>update</code>-Methode hoch bzw. runter gezählt wird.
{{Lösung:End}}
== Billard ==
[[Datei:20210413082703_Billard.png|center|400px]]
=== Niveau 1 ===
{{Collapse:Start}}
{{Aufgabe:Start}}
Erstellt eine Klasse <code>Billardkugel</code>, die eine Billardkugel an eine zufällige Position am oberen Rand des Fensters zeichnet und sie dann langsam in Richtung unteren Rand bewegt, bis sie aus dem Bild verschwunden ist (ggf. auch in einer zufälligen Richtung).
{{Aufgabe:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Kreise könnt ihr mit [https://processing.org/reference/circle_.html <code>circle</code>] zeichnen.
* Mit [https://processing.org/reference/PVector.html Vektoren] kann die Bewegung von Objekten leichter berechnet werden.
** Erstellt einen Vektor z.B. mit <code>PVector v1 = new PVector(4.0, 3.0);</code>.
** Addiert einen anderen Vektor auf den ersten mit <code>v1.add(v2);</code>.
** Greift auf die Koordinaten des Vektors mit <code>v1.x</code> / <code>v1.y</code> zu.
{{Lösung:End}}
=== Niveau 2 ===
{{Collapse:Start}}
{{Aufgabe:Start}}
Erstellt eine Klasse <code>Billardkugel</code>, die eine Billardkugel an eine zufällige Position am oberen Rand des Fensters zeichnet und sie dann langsam in Richtung unteren Rand bewegt (ggf. auch in einer zufälligen Richtung).
Sobald die Kugel einen Rand berührt, soll sie in die entgegengesetzte Richtung abprallen und weiterlaufen.
{{Aufgabe:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Kreise könnt ihr mit [https://processing.org/reference/circle_.html <code>circle</code>] zeichnen.
* Mit [https://processing.org/reference/PVector.html Vektoren] kann die Bewegung von Objekten leichter berechnet werden.
** Erstellt einen Vektor z.B. mit <code>PVector v1 = new PVector(4.0, 3.0);</code>.
** Addiert einen anderen Vektor auf den ersten mit <code>v1.add(v2);</code>.
** Greift auf die Koordinaten des Vektors mit <code>v1.x</code> / <code>v1.y</code> zu.
** Ändert die Richtung des Vektors mit <code>v1.mult(-1);</code>.
* Die Variable [https://processing.org/reference/width.html <code>width</code>] enthält die Breite des Processing-Fensters. Die Variable [https://processing.org/reference/height.html <code>height</code>] die Höhe.
{{Lösung:End}}


=== Niveau 3 ===
=== Niveau 3 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Erstellt eine Klasse <code>Billardkugel</code>, die eine Billardkugel an eine zufällige Position am oberen Rand des Fensters zeichnet und sie dann langsam in Richtung unteren Rand bewegt (ggf. auch in einer zufälligen Richtung).


Sobald die Kugel einen Rand berührt, soll sie in einem möglichst realistischen Winkel vom Rand abprallen.
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit [https://processing.org/reference/PVector.html Vektoren] kann die Bewegung von Objekten leichter berechnet werden.
** Erstellt einen Vektor z.B. mit <code>PVector v1 = new PVector(4.0, 3.0);</code>.
** Addiert einen anderen Vektor auf den ersten mit <code>v1.add(v2);</code>.
** Greift auf die Koordinaten des Vektors mit <code>v1.x</code> / <code>v1.y</code> zu.
** Ändert die Richtung des Vektors mit <code>v1.mult(-1);</code>.
** Dreht einen Vektor um einen Winkel mit <code>v1.rotate(HALF_PI);</code>. (Der Winkel wird als [https://nohemiportfiolio2012-2013.weebly.com/uploads/1/9/2/5/19257411/299841037_orig.png?251 Vielfaches von Pi] angegeben. Nutzt dazu die Variablen <code>PI</code>, <code>HALF_PI</code> und <code>QUARTER_PI</code>.)
* Die Variable [https://processing.org/reference/width.html <code>width</code>] enthält die Breite des Processing-Fensters. Die Variable [https://processing.org/reference/height.html <code>height</code>] die Höhe.
* Es gilt die Formel Ausfallswinkel = Einfallswinkel.
{{Lösung:End}}


=== Niveau 4 ===
=== Niveau 4 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Erstellt eine Klasse <code>Billardtisch</code>, die einen Billardtisch in das Fenster zeichnet.
Erstellt dann eine Klasse <code>Billardkugel</code>, die eine Billardkugel an eine zufällige Position auf den Tisch zeichnet und sie dann langsam in eine zufällige Richtung in Bewegung setzt.


Sobald die Kugel einen Rand de Tisches berührt, soll sie in einem möglichst realistischen Winkel von ihm abprallen.
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}


== Billard ==
{{Lösung:Start|Tipps}}
* Mit [https://processing.org/reference/PVector.html Vektoren] kann die Bewegung von Objekten leichter berechnet werden.
** Erstellt einen Vektor z.B. mit <code>PVector v1 = new PVector(4.0, 3.0);</code>.
** Addiert einen anderen Vektor auf den ersten mit <code>v1.add(v2);</code>.
** Greift auf die Koordinaten des Vektors mit <code>v1.x</code> / <code>v1.y</code> zu.
** Ändert die Richtung des Vektors mit <code>v1.mult(-1);</code>.
** Dreht einen Vektor um einen Winkel mit <code>v1.rotate(HALF_PI);</code>. (Der Winkel wird als [https://nohemiportfiolio2012-2013.weebly.com/uploads/1/9/2/5/19257411/299841037_orig.png?251 Vielfaches von Pi] angegeben. Nutzt dazu die Variablen <code>PI</code>, <code>HALF_PI</code> und <code>QUARTER_PI</code>.)
* Es gilt die Formel Ausfallswinkel = Einfallswinkel.
{{Lösung:End}}
 
== Hau den Lukas ==
 
[[Datei:20210419223540_HauDenLukas.gif|center|400px]]


=== Niveau 1 ===
=== Niveau 1 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Programmiert ein "Hau den Lukas" Spiel. Dabei sollen Kreise an zufälligen Positionen im Fenster erscheinen. Wenn der Kreis mit der Maus angeklickt wird, verschwindet er und ein neuer erscheint.
Nutze dafür die Processing-Methoden
* [https://processing.org/reference/mouseClicked_.html void mouseClicked()]
* [https://processing.org/reference/random_.html float random()]


und die Variablen
* [https://processing.org/reference/mouseX.html mouseX]
* [https://processing.org/reference/mouseY.html mouseY]
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit <code>random(0, 100)</code> generiert ihr eine Zufallszahl zwischen 0 und 100.
* Die Methode <code>void mouseClicked()</code> wird ähnlich wie <code>void draw()</code> einfach in das Hauptprogramm geschrieben. Sie wird automatisch aufgerufen, wenn mit der Maus in das Fenster geklickt wird.
Ihr könnt diese Vorlage für das Programm nutzen:
<syntaxhighlight lang="Java">
// Globale Variable
Lukas lukas; // Klasse Lukas muss erstellt werden
void setup() {
  // Fenster aufbauen und konfigurieren
}
void draw() {
  // Zeichne den "Lukas"
}
void mousePressed() {
  // Reagiere auf Mausklick
}
</syntaxhighlight>
{{Lösung:End}}


=== Niveau 2 ===
=== Niveau 2 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Programmiert ein "Hau den Lukas" Spiel. Dabei sollen Kreise mit zufälliger Größe, in zufälligen Zeitabständen an zufälligen Positionen im Fenster erscheinen. Wenn der Kreis mit der Maus angeklickt wird, verschwindet er und ein neuer erscheint.


Nutze dafür die Processing-Methoden
* [https://processing.org/reference/mouseClicked_.html void mouseClicked()]
* [https://processing.org/reference/random_.html float random()]
und die Variablen
* [https://processing.org/reference/mouseX.html mouseX]
* [https://processing.org/reference/mouseY.html mouseY]
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit <code>random(0, 100)</code> generiert ihr eine Zufallszahl zwischen 0 und 100.
* Die Methode <code>void mouseClicked()</code> wird ähnlich wie <code>void draw()</code> einfach in das Hauptprogramm geschrieben. Sie wird automatisch aufgerufen, wenn mit der Maus in das Fenster geklickt wird.
Ihr könnt diese Vorlage für das Programm nutzen:
<syntaxhighlight lang="Java">
// Globale Variable
Lukas lukas; // Klasse Lukas muss erstellt werden
void setup() {
  // Fenster aufbauen und konfigurieren
}
void draw() {
  // Zeichne den "Lukas"
}
void mousePressed() {
  // Reagiere auf Mausklick
}
</syntaxhighlight>
{{Lösung:End}}


=== Niveau 3 ===
=== Niveau 3 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Programmiert ein "Hau den Lukas" Spiel. Dabei sollen Kreise mit zufälliger Größe, in zufälligen Zeitabständen an zufälligen Positionen im Fenster erscheinen. Wenn der Kreis mit der Maus angeklickt wird, dann wird er grün und verschwindet nicht. Schafft der Spieler es nicht, den Kreis schnell anzuklicken, dann verschwindet der Kreis von alleine wieder.
Nutze dafür die Processing-Methoden
* [https://processing.org/reference/mouseClicked_.html void mouseClicked()]
* [https://processing.org/reference/random_.html float random()]


und die Variablen
* [https://processing.org/reference/mouseX.html mouseX]
* [https://processing.org/reference/mouseY.html mouseY]
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit <code>random(0, 100)</code> generiert ihr eine Zufallszahl zwischen 0 und 100.
* Die Methode <code>void mouseClicked()</code> wird ähnlich wie <code>void draw()</code> einfach in das Hauptprogramm geschrieben. Sie wird automatisch aufgerufen, wenn mit der Maus in das Fenster geklickt wird.
Ihr könnt diese Vorlage für das Programm nutzen:
<syntaxhighlight lang="Java">
// Globale Variable
Lukas lukas; // Klasse Lukas muss erstellt werden
void setup() {
  // Fenster aufbauen und konfigurieren
}
void draw() {
  // Zeichne den "Lukas"
}
void mousePressed() {
  // Reagiere auf Mausklick
}
</syntaxhighlight>
{{Lösung:End}}


=== Niveau 4 ===
=== Niveau 4 ===
{{Collapse:Start}}
{{Collapse:Start}}
{{Aufgabe:Start}}
{{Aufgabe:Start}}
Programmiert ein "Hau den Lukas" Spiel. Dabei sollen Kreise mit zufälliger Größe, in zufälligen Zeitabständen an zufälligen Positionen im Fenster erscheinen. Schafft der Spieler es nicht, den Kreis schnell anzuklicken, dann verschwindet er von alleine wieder. Schafft der Spieler es, den Kreis in einer vorgegebenen Zeit zu "hauen", dann bekommt er Punkte (ggf. abhängig von der Größe des Kreises).


Die Punkte werden im Fenster angezeigt.
Nutze dafür die Processing-Methoden
* [https://processing.org/reference/mouseClicked_.html void mouseClicked()]
* [https://processing.org/reference/random_.html float random()]
* [https://processing.org/reference/text_.html void text()]
und die Variablen
* [https://processing.org/reference/mouseX.html mouseX]
* [https://processing.org/reference/mouseY.html mouseY]
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Collapse:End}}
{{Collapse:End}}
{{Lösung:Start|Tipps}}
* Mit <code>random(0, 100)</code> generiert ihr eine Zufallszahl zwischen 0 und 100.
* Die Methode <code>void mouseClicked()</code> wird ähnlich wie <code>void draw()</code> einfach in das Hauptprogramm geschrieben. Sie wird automatisch aufgerufen, wenn mit der Maus in das Fenster geklickt wird.
Ihr könnt diese Vorlage für das Programm nutzen:
<syntaxhighlight lang="Java">
// Globale Variable
Lukas lukas; // Klasse Lukas muss erstellt werden
void setup() {
  // Fenster aufbauen und konfigurieren
}
void draw() {
  // Zeichne den "Lukas"
}
void mousePressed() {
  // Reagiere auf Mausklick
}
</syntaxhighlight>
{{Lösung:End}}
Jneug
8.581

Bearbeitungen

Abgerufen von „http://ngb.schule/wiki/Spezial:Mobiler_Unterschied/7713...7728“