Java lernen durch Ausprobieren!

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
api:documentation:processing:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


—api:documentation:processing:start [2024/08/31 10:03] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Processing ======
 +<WRAP left round info 80%>
 +//"Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts."// (siehe [[https://processing.org/|processing.org]]). \\ \\ 
 +Processing ist keine eigene Programmiersprache, sondern eine Klassenbibliothek, die es in verschiedenen Varianten für unterschiedlichen Programmiersprachen gibt. Ein großer Teil der Processing-Bibliothek ist auch in unserer Online-Entwicklungsumgebung enthalten und in einer einzigen Klasse gebündelt: ''PApplet''. \\ \\ 
 +Wenn Du eine eigene Unterklasse von ''PApplet'' ableitest, kannst Du die Methoden 
 +  * ''setup'' (wird zu Beginn ausgeführt), 
 +  * ''draw'' (wird 60-mal je Sekunde ausgeführt), 
 +  * ''mousePressed'' (wird ausgeführt, wenn eine Maustaste gedrückt wurde),
 +  * ''mouseReleased'' (wird ausgeführt, wenn eine Maustaste losgelassen wurde),
 +  * ''mouseMoved'' (wird immer dann ausgeführt, wenn sich die Position des Mauszeigers geändert hat),
 +  * ''mouseEntered'' (wird ausgeführt, wenn der Mauszeiger in den Grafikbereich hineinfährt),
 +  * ''mouseExited'' (wird ausgeführt, wenn der Mauszeiger den Grafikbereich verlässt),
 +  * ''keyPressed'' (wird ausgeführt, wenn eine Taste heruntergedrückt wurde),
 +  * ''keyReleased'' (wird ausgeführt, wenn eine Taste losgelassen wurde)
 +überschreiben und mit Deinem Programmcode füllen. Innerhalb dieser Methoden kannst Du auf eine große Anzahl mächtiger Methoden von Processing zugreifen, die es Dir einfach machen, mit wenig Programmcode schöne interaktive Grafiken und Animationen zu erstellen. Ich zeige Dir am folgenden an einfachen Beispielen, wie das geht. Alle Details von Processing kann ich Dir aber hier nicht erklären, es gibt auch viel bessere Quellen dafür
 +  * [[https://p5js.org/examples/|Die Beispielseite von p5.js]], der Processing-Bibliothek für Javascript, die ich in die Online-Entwicklungsumgebung hier integriert habe.
 +  * [[https://p5js.org/reference/|Die Referenzseite von p5.js]], auf der jede einzelne Processing-Anweisung an vielen Beispielen erklärt wird, die sich direkt auf dieser Seite ausführen lassen. Nutze v.a. im oberen Bereich der Seite das sehr gut implementierte Suchfeld!
 +  * [[https://processing.org/tutorials/transform2d/|Erklärung der Transformationen]]: Früher oder später wirst Du Kombinationen der Transformationen ''translate'', ''scale'' und ''rotate'' anwenden wollen. Diese Quelle erklärt anhand schöner Grafiken, wie sie zusammenwirken.
 +</WRAP>
 +
 +===== Hello World-Programm =====
 +<HTML>
 +
 +<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingHelloWorld'}">
 +
 +<script type="text/plain" title="HelloWorld.java">
 +new HelloWorld().main();         // startet das Applet; main() ruft dann gleich setup() auf!
 +
 +public class HelloWorld extends PApplet { 
 +   
 +   /**
 +    * Die Methode setup wird nach dem Initialisieren des Grafiksystems von main aufgerufen.
 +    */
 +   public void setup() { 
 +      createCanvas(800, 600);    // definiert das Koordinatensystem: 800 nach rechts, 600 nach unten
 +      background(60);            // füllt den Hintergrund grau (60 von maximal 255)
 +      fill(255);                 // Füllfarbe ab jetzt: weiß
 +      textSize(50); 
 +      text("Hallo Welt!", 50, 300);   // Text an der Position (50, 300)
 +   }
 +
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 +
 +<WRAP left round tip 80%>
 +Die Programmierung mit Processing unterscheidet sich von der Grafikprogrammierung, die Du bisher kennengelernt hast, in drei wesentlichen Punkten:
 +  * Es gibt nur ein kurzes Hauptprogramm, das ein ''HelloWorld''-Objekt instanziert und dann die Methode ''main'' der Oberklasse ''PApplet'' aufruft. Danach übernimmt diese die Kontrolle und ruft immer bei bestimmten Ereignissen Methoden von ''PApplet'' auf, die Du überschreiben kannst. 
 +  * Es gibt keine grafischen Objekte (z.B. ''Rectangle''-Objekte oder ''Circle''-Objekte), deren grafische Darstellung man durch Methodenaufrufe verändern kann (z.B. .move(10, -20)). Stattdessen gibt es viele Methoden der Klasse ''PApplet'', die direkt auf den Grafikausgabebereich zeichnen, indem sie einfach die Farbe der einzelnen Bildpunkte ("Pixel") ändern. Eine einmal - z.B. mit recht(10, 20, 200, 300) - gezeichnete Figur lässt sich später nicht mehr verändern. Man kann nur mit der Methode ''background()'' den kompletten Grafikausgabebereich mit einer Farbe füllen und wieder von vorne zu zeichnen beginnen. 
 +  * Das ''PApplet''-Objekt "merkt" sich die aktuelle Füllfarbe, Linienfarbe, Transformation, Schriftgröße usw. Beim Zeichnen einer Figur wendet sie diese Einstellungen einfach an. Will man als nächstes eine Figur mit einer anderen Füllfarbe zeichnen, so ändert man zuerst durch Aufruf von ''fill()'' die Füllfarben-Eigenschaft des ''PApplet''-Objekts und zeichnet erst dann.  
 +</WRAP>
 +
 +===== Zustandsorientiertes Zeichnen von grafischen Objekten =====
 +<WRAP left round info 80%>
 +Diese Methoden kannst Du verwenden, um die Einstellungen für Füllfarbe, Rahmenfarbe usw. des ''PApplet''-Objekts zu ändern:
 +  * ''fill(30, 40, 120)'' legt die neue Füllfarbe fest auf rot == 30, grün = 40, blau = 120. Es gibt noch viele andere Varianten zur Festlegung einer Farbe, siehe unten!
 +  * ''stroke(120, 0, 20)'' ändert entsprechend die Linienfarbe
 +  * ''noFill()'' sorgt dafür, dass ab jetzt ohne Füllung gezeichnet wird,
 +  * ''noStroke()'' entsprechend ohne Linien,
 +  * ''textSize()'' legt die neue Schriftgröße fest.
 +
 +Hier eine Auswahl der Methoden zum Zeichnen:
 +  * ''rect(20, 20, 400, 300)'' zeichnet ein achsenparalleles Rechteck mit der linken oberen Ecke bei (20, 20), der Breite 400 und der Höhe 300,
 +  * ''rect(20, 20, 400, 300, 40)'' zeichnet dasselbe mit abgerundeten Ecken (Eckenradius 40),
 +  * ''circle(300, 200, 100)'' zeichnet einen Kreis mit Mittelpunkt bei (300, 200) und Radius 100,
 +  * ''ellipse(300, 200, 100, 150)'' zeichnet eine Ellipse, deren Boundingbox die linke obere Ecke bei (300, 200) hat. Die Ellipse ist 100 breit und 150 hoch.
 +  * ''line(20, 30, 400, 500)'' zeichnet eine Strecke von (20, 30) nach (400, 500).
 +</WRAP>
 +
 +
 +<HTML>
 +
 +<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingDrawinPrimitives'}">
 +
 +<script type="text/plain" title="DrawingPrimitives.java">
 +new HelloWorld().main();         // startet das Applet; main() ruft dann gleich setup() auf!
 +
 +public class HelloWorld extends PApplet { 
 +   
 +   /**
 +    * Die Methode setup wird nach dem Initialisieren des Grafiksystems von main aufgerufen.
 +    */
 +   public void setup() { 
 +      createCanvas(800, 600);    // definiert das Koordinatensystem: 800 nach rechts, 600 nach unten
 +      background(80, 80, 255);            // füllt den Hintergrund hellblau
 +
 +      strokeWeight(10);
 +      for(int i = 0; i < 10; i++) {
 +         stroke(50);
 +         fill(i * 25, 255 - i * 25, 0, 100);    // der viere Wert (100) ist der Alpha-Wert ( = Undurchsichtigkeit)
 +         circle(50 + i * 60, 200, 100);
 +         
 +         stroke(0, 100, 0);
 +         noFill();
 +         rect(i * 100, 300, 100, 200 + i * 10, 40);
 +      }
 +   }
 +
 +}</script>
 +
 +</div>
 +
 +</HTML>
 + \\ 
 +===== Animationen erstellen mit Processing =====
 +<WRAP center round info 60%>
 +Die ''draw''-Methode der Klasse ''PApplet'' wird 60-mal pro Sekunde aufgerufen. Wenn Du sie überschreibst, wird **deine** ''draw''-Methode 60-mal pro Sekunde aufgerufen. Damit lassen sich sehr einfach eindrucksvolle Animationen programmieren! 
 +</WRAP>
 +
 +
 +<HTML>
 +
 +<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingAnimation1'}">
 +
 +<script type="text/plain" title="Animation1.java">
 +new AnimationDemo().main();
 +
 +class AnimationDemo extends PApplet {
 +   
 +   float t = 0;
 +
 +   public void settings() {
 +      createCanvas(1000, 1000);
 +      fill(150, 150, 150, 120);
 +      strokeWeight(20);
 +   }
 +
 +   public void draw() { 
 +      background(20);
 +      
 +      t += 0.04;
 +      float r = 300;
 +
 +      for(int i = 0; i < 10; i++) {
 +      
 +         float t1 = t + i * 0.4;
 +         
 +         stroke(80, 80, 200);
 +         float mx = 500 + r * cos(t1);
 +         float my = 600 + r * sin(t1); 
 +         circle(mx, my, 150 * sin(t1 * 0.7));
 +         
 +         t1 += 3.1;
 +         stroke(200, 80, 80);
 +         mx = 500 + r * cos(-t1);
 +         my = 400 + r * sin(-t1); 
 +   
 +         circle(mx, my, 150 * sin(t1 * 0.7));
 +         
 +      }
 +   }
 +}</script>
 +
 +</div>
 +
 +</HTML>
 + \\ 
 +===== Interaktion mit Tastatur =====
 +<HTML>
 +
 +<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingKeyboard'}">
 +
 +<script type="text/plain" title="Pong.java">
 +new Pong().main();
 +
 +class Pong extends PApplet {
 +
 +   double schläger1y = 300;
 +   double ballX = 400;
 +   double ballY = 300;
 +
 +   double vxBall = 10;
 +   double vyBall = 10;
 +
 +   double vySchläger = 0;
 +
 +   public void setup() {
 +      createCanvas(800, 600);
 +   }
 +
 +   public void draw() {
 +      background(0);
 +      schläger1y += vySchläger;
 +      fill("white");
 +      rect(0, schläger1y - 50, 20, 100);
 +      
 +      ballX += vxBall;
 +      ballY += vyBall;
 +
 +      if(ballX > 790) vxBall *= -1;
 +      if(ballY < 10 || ballY > 590) vyBall *= -1;
 +
 +      if(ballX < 30 && Math.abs(ballY - schläger1y) < 100) {
 +         vxBall *= -1;
 +      }
 +
 +      if(ballX < 0) {
 +         println("Game over!");
 +         System.exit(0);
 +      }
 +      
 +      fill("red");
 +      circle(ballX, ballY, 20);
 +   }
 +
 +   public void keyPressed() {
 +      if(key == 'w') {
 +         vySchläger = -5;
 +      }
 +      if(key == 's') {
 +         vySchläger = 5;
 +      }
 +   }
 +
 +   public void keyReleased() {
 +      vySchläger = 0;
 +   }
 +
 +}</script>
 +
 +</div>
 +
 +</HTML>
  
api/documentation/processing/start.txt · Zuletzt geändert: 2024/08/31 10:03 von 127.0.0.1