Lernpfad:Einführung in Processing/16: Unterschied zwischen den Versionen
Jneug (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
{{NNavigation}} | {{NNameAnzeigen}}{{NNavigation}} | ||
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. | 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. |
Aktuelle Version vom 16. Februar 2022, 21:45 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.
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.
Die Zeichen //
markieren eine Zeile als Kommentar. Kommentarzeilen werden bei der Ausführung ignoriert.
Das Programm arbeitet nach einem einfachen Prinzip:
- Die
dot
-Methode gibt eine Zahl zwischen-1
und1
zurück (return
). - 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.). - Negative Zahlen färben den Punkt rot, positive weiß.
Die Funktion erhält vier Parameter:
t
ist die Zeit, die das Programm läuft in Sekunden.i
ist die Nummer des Kreises. Es gibt 16 Reichen und 16 Spalten. Der Kreis oben links hat die Nummer0
, der Kreis links daneben1
, und so weiter bis Nummer255
unten rechts.x
ist die Spaltennummer des Kreises (von0
bis15
).y
ist die Zeilennummer des Kreises (von0
bis15
).
Experimentiere mit der dot
-Methode und versuche spannende Muster und Animationen zu erzeugen.
Beispiele für interessante Animationen
Das Projekt ist ein Nachbau der Javascript-Version tixy.land von Martin Kleppe. Die folgenden Beispiele sind teilweise von dort übernommen und für Processing angepasst.
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.
- Analysiere das Programm und erkläre seine Funktion. Nutze die Fachbegriffe, die du in diesem Lernpfad gelernt hast.
- 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.
Breakout
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.
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. 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?