Lernpfad:Einführung in Processing/16: Unterschied zwischen den Versionen

Aus Informatik-Box
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Zeile 143: Zeile 143:


{{P5js|https://editor.p5js.org/Ngb/full/7qPEXrAEr|height=400}}
{{P5js|https://editor.p5js.org/Ngb/full/7qPEXrAEr|height=400}}
== Hunter and Prey ==
Programmiere ein Spiel, bei dem die Spieler:in einen grünen Punkt steuert, der sich die ganze Zeit bewegt. Auf dem Feld erscheint zufällig "Beute" (ein gelber Punkt), der eingesammelt werden muss. Wurde die "Beute" erlegt, erscheint eine neue, und so weiter. Nach einer Zeit erscheinen auch noch "Feinde" (rote Punkte), die von der Spielfigur nicht berührt werden dürfen.


== Klassische Spiele ==
== Klassische Spiele ==


Genau wie [[#Breakout|Breakout]] lassen sich [[wikipedia:Arcade-Spiel|Arcade-Videospiele]], die in der Anfangszeit des Computers in Spielhallen in speziellen [[wikipedia:Arcade-Automat|Arcade-Automat]]en liefen, relativ einfach in {{Processing}} umsetzen. Bei Wikipedia findest Du eine [[wikipedia:Arcade-Spiel|Liste von Spielen]]. Vielleicht ist etwas dabei?
Genau wie [[#Breakout|Breakout]] lassen sich [[wikipedia:Arcade-Spiel|Arcade-Videospiele]], die in der Anfangszeit des Computers in Spielhallen in speziellen [[wikipedia:Arcade-Automat|Arcade-Automat]]en liefen, relativ einfach in {{Processing}} umsetzen. Bei Wikipedia findest du eine [[wikipedia:Arcade-Spiel|Liste von Spielen]]. Vielleicht ist etwas dabei?
 
== Verschiedene Projektideen ==
 
* Schreibe ein Programm für eine einfache Animation, die zeigt, wie die Erde um die Sonne kreist. In der Mitte befindet sich die Sonne (ein gelber Kreis), und darum kreist die Erde (z. B. erstmal als blauer Kreis). Erweitere die Simulation dann schrittweise um weitere Planeten oder andere Himmelskörper, wie Kometen. Du kannst für die Erde auch ein Bild benutzen und die Sonne mit einer eigenen Animation "strahlen" lassen.
* Zeichne einen Pac-Man. Animiere den Pac-Man so, dass er sein Maul öffnet und schließt. Programmiere dann eine Tastensteuerung für Pac-Man und lass ihn eine Reihe Perlen futtern. Vielleicht können die Perlen zufällig auf dem Bildschirm erscheinen?

Version vom 9. Februar 2022, 12:51 Uhr

Du kennst nun die wichtigsten Konzepte der Programmierung mit Java. Als Abschluss des Lernpfades kannst du alles Gelernte in einem selbst gewählten Abschlussprojekt anwenden. Falls du Ideen für ein kreatives Projekt hast, dann formuliere eine kurze Beschreibung deiner Idee. Bespreche zunächst mit deiner Lehrkraft, ob die Idee in der verfügbaren Zeit umsetzbar ist.

Die folgenden Projekte sind Anregungen und Beispiele, die dir als Vorlage und Inspiration dienen können.

tixy

Im Tauschordner findest du ein Processing-Projekt mit dem Namen tixy. Öffne das Projekt und sieh es dir an.

Klicken, um das Programm zu starten.

Du siehst eine Funktion dot und zwei Reiter: tixy und canvas. canvas soll nicht verändert werden, sondern nur die dot Funktion.

Starte das Programm und schau dir das Ergebnis an. Lösche dann die Zeile return x%4 - y%4 und entferne die Zeichen // aus der Zeile darüber. Studiere erneut das Ergebnis.

Icon Info.png

Die Zeichen // markieren eine Zeile als Kommentar. Kommentarzeilen werden bei der Ausführung ignoriert.

Das Programm arbeitet nach einem einfachen Prinzip:

  1. Die dot-Methode gibt eine Zahl zwischen -1 und 1 zurück (return).
  2. Der Betrag der Zahl bestimmt die Größe des Punktes (0.5 und -0.5 bedeuten beide halbe Größe, -.25 und .25 bedeuten beide ein Viertel der Größe, usw.).
  3. Negative Zahlen färben den Punkt rot, positive weiß.

Die Funktion erhält vier Parameter:

  1. t ist die Zeit, die das Programm läuft in Sekunden.
  2. i ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer 0, der Kreis links daneben 1, und so weiter bis Nummer 255 unten rechts.
  3. x ist die Spaltennummer des Kreises (von 0 bis 15).
  4. y ist die Zeilennummer des Kreises (von 0 bis 15).
Icon Heft.png
Arbeitsauftrag

Experimentiere mit der dot-Methode und versuche spannende Muster und Animationen zu erzeugen.

Icon Info.png

Du kannst Funktionen wie sin(), cos(), tan(), usw. verwenden.

Beispiele für interessante Animationen

Füge die Programmzeilen jeweils in die dot-Methode ein.

return sin(t);
return y - t*2.0;
return sin(y/8 + t);
return random(1.0) * 2 - 1;
return cos(t + i + x * y);
return sin(x/2) - sin(x-t) - y+6;
return (x-8)*(y-8) - sin(t)*64;
return sin(t-sqrt(x*x+y*y));
return sin(t-sqrt(x*x+y*y));
return y-t*3+9+3*cos(x*3-t)-5*sin(x*7);
return 1.0/32.0*tan(t/64.0*x*tan(i-x));
return sin(2*atan((y-7.5)/(x-7.5))+5*t);
float d = PI/3.8;
return sin(pow(x,d)) - tan(pow(y,d));


Das Muster

float size = 50;
float x = 0;
float y = 0;

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  
  float s = size+(size*sin(millis()/1000.0)*0.5);
  
  for ( float i = 0; i < width/s; i+=1.0 ) {
    for ( float j = 0; j < height/s; j+=1.0 ) {
      fill(255);
      stroke(0);
      strokeWeight(2);
      rect(x + i*s, x+j*s, s, s);
    }
  }
}

Das obige Programm erstellt ein Karo-Muster und animiert es.

Klicken, um das Programm zu starten.
Icon Heft.png
Arbeitsauftrag
  1. Analysiere das Programm und erkläre seine Funktion. Nutze die Fachbegriffe, die du in diesem Lernpfad gelernt hast.
  2. Animiere das Muster. Du kannst das Programm beliebig modifizieren, aber du musst immer vom ursprünglichen Karo-Muster ausgehen. Sei kreativ!
    • Schau dir für weitere Ideen die Processing Referenz an.
    • Processing kann auch 3D-Szenen zeichnen. Dazu muss die Zeichenfläche beim Erstellen als 3D gekennzeichnet werden. size(400, 400, P3D);. Nun kannst du auch dreidimensionale Formen zeichnen. Zum Beispiel mit box(). Lies für weitere Informationen in der Referenz und bei Michael Kipp nach.
Klicken, um das Programm zu starten.

Breakout

Screenshot-LBreakout2.jpg

Breakout (auch bekannt unter dem Namen Little Brick Out) ist ein Spielhallenspiel, das zunächst 1976 von Atari als Arcade-Spiel produziert wurde. Damals war es noch schwarzweiß mit mehrfarbiger Overlayfolie und wurde als eines der letzten Spiele seiner Art komplett in Hardware realisiert.[1] Später wurde dieses Spiel auch für Computer programmiert und existiert seither auch als Software.

Es entspricht in etwa einem Solo-Pong, bei dem man mit dem Schläger den Ball so lenken soll, dass der Ball „Mauersteine“ trifft, die sich am oberen Bildschirmrand befinden, und diese zum Verschwinden bringt. Wenn der Schläger, wie bei Pong, den Ball verliert, bekommt man einen neuen Ball, verliert aber nach dem Verlust einer bestimmten Anzahl von Bällen das Spiel. Erst wenn alle „Mauersteine“ abgeräumt wurden, gilt ein Level als gewonnen und das nächste Level kann beginnen.

- Wikipedia: Breakout (Computerspiel)

Klicken, um das Programm zu starten.

Hunter and Prey

Programmiere ein Spiel, bei dem die Spieler:in einen grünen Punkt steuert, der sich die ganze Zeit bewegt. Auf dem Feld erscheint zufällig "Beute" (ein gelber Punkt), der eingesammelt werden muss. Wurde die "Beute" erlegt, erscheint eine neue, und so weiter. Nach einer Zeit erscheinen auch noch "Feinde" (rote Punkte), die von der Spielfigur nicht berührt werden dürfen.

Klassische Spiele

Genau wie Breakout lassen sich Arcade-Videospiele, die in der Anfangszeit des Computers in Spielhallen in speziellen Arcade-Automaten liefen, relativ einfach in Processing umsetzen. Bei Wikipedia findest du eine Liste von Spielen. Vielleicht ist etwas dabei?

Verschiedene Projektideen

  • Schreibe ein Programm für eine einfache Animation, die zeigt, wie die Erde um die Sonne kreist. In der Mitte befindet sich die Sonne (ein gelber Kreis), und darum kreist die Erde (z. B. erstmal als blauer Kreis). Erweitere die Simulation dann schrittweise um weitere Planeten oder andere Himmelskörper, wie Kometen. Du kannst für die Erde auch ein Bild benutzen und die Sonne mit einer eigenen Animation "strahlen" lassen.
  • Zeichne einen Pac-Man. Animiere den Pac-Man so, dass er sein Maul öffnet und schließt. Programmiere dann eine Tastensteuerung für Pac-Man und lass ihn eine Reihe Perlen futtern. Vielleicht können die Perlen zufällig auf dem Bildschirm erscheinen?