Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:processing:start [2021/01/23 20:00] – [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 105: / Zeile 105: @@
 </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>