Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:processing:start [2021/01/23 19:51] – [Zustandsorientiertes Zeichnen von grafischen Objekten] Martin Pabst
+++ api:documentation:processing:start [2023/06/11 15:26] (aktuell) – [Interaktion mit Maus und Tastatur] Martin Pabst
@@ Zeile 55: / Zeile 55: @@
 ===== Zustandsorientiertes Zeichnen von grafischen Objekten =====
-<WRAP center round info 60%>
+<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!
@@ Zeile 71: / Zeile 71: @@
 </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>