Java lernen durch Ausprobieren!

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
api:documentation:processing:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
api:documentation:processing:start [2021/01/23 18:57] – [Hello World-Programm] Martin Pabstapi:documentation:processing:start [2023/06/11 15:26] (aktuell) – [Interaktion mit Maus und Tastatur] Martin Pabst
Zeile 22: Zeile 22:
 <HTML> <HTML>
  
-<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingHelloWorld'}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ProcessingHelloWorld'}">
  
 <script type="text/plain" title="HelloWorld.java"> <script type="text/plain" title="HelloWorld.java">
-new HelloWorld().main();+new HelloWorld().main();         // startet das Applet; main() ruft dann gleich setup() auf!
  
 public class HelloWorld extends PApplet {  public class HelloWorld extends PApplet { 
        
 +   /**
 +    * Die Methode setup wird nach dem Initialisieren des Grafiksystems von main aufgerufen.
 +    */
    public void setup() {     public void setup() { 
       createCanvas(800, 600);    // definiert das Koordinatensystem: 800 nach rechts, 600 nach unten       createCanvas(800, 600);    // definiert das Koordinatensystem: 800 nach rechts, 600 nach unten
       background(60);            // füllt den Hintergrund grau (60 von maximal 255)       background(60);            // füllt den Hintergrund grau (60 von maximal 255)
       fill(255);                 // Füllfarbe ab jetzt: weiß       fill(255);                 // Füllfarbe ab jetzt: weiß
-      textSize(50);              +      textSize(50); 
       text("Hallo Welt!", 50, 300);   // Text an der Position (50, 300)       text("Hallo Welt!", 50, 300);   // Text an der Position (50, 300)
    }    }
  
-}  +}
 </script> </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> </div>
api/documentation/processing/start.1611424668.txt.gz · Zuletzt geändert: 2021/12/29 11:29 (Externe Bearbeitung)
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki