Benutzer-Werkzeuge

Webseiten-Werkzeuge


api:documentation:grafik:animation

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:grafik:animation [2021/01/06 22:12] – [Beispiel 2: Hin- und herbewegende Rechtecke] Martin Pabstapi:documentation:grafik:animation [2021/12/29 11:29] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 14: Zeile 14:
   * Die Bewegung des Rechtecks ist sehr weich (ohne Ruckeln), da die ''act''-Methode im Gleichtakt mit der Render-Methode (s.o.) aufgerufen wird.   * Die Bewegung des Rechtecks ist sehr weich (ohne Ruckeln), da die ''act''-Methode im Gleichtakt mit der Render-Methode (s.o.) aufgerufen wird.
 <HTML> <HTML>
-<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'rotatingRectangle'}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'rotatingRectangle', 'speed': 'max'}">
 <script type="text/plain" title="rotatingRectangle.java"> <script type="text/plain" title="rotatingRectangle.java">
 new World(1000, 1000); new World(1000, 1000);
Zeile 37: Zeile 37:
   * Das ''MovingRectangle''-Objekt muss jederzeit "wissen", ob es sich gerade unterwegs zum rechten oder linken Rand befindet. Es benötigt daher ein Attribut, das diesen Zustand speichert. Wir verwenden das Attribut ''int dx'', in dem wir speichern, um wie viel sich das Rechteck im nächsten Schritt in x-Richtung bewegt. Ist ''dx == -8'', so bewegt sich das Rechteck nach links, ist ''dx == 8'', so bewegt sich das Rechteck nach rechts.   * Das ''MovingRectangle''-Objekt muss jederzeit "wissen", ob es sich gerade unterwegs zum rechten oder linken Rand befindet. Es benötigt daher ein Attribut, das diesen Zustand speichert. Wir verwenden das Attribut ''int dx'', in dem wir speichern, um wie viel sich das Rechteck im nächsten Schritt in x-Richtung bewegt. Ist ''dx == -8'', so bewegt sich das Rechteck nach links, ist ''dx == 8'', so bewegt sich das Rechteck nach rechts.
 <HTML> <HTML>
-<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'movingRectangles'}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'movingRectangles', 'speed': 'max'}">
 <script type="text/plain" title="movingRectangle.java"> <script type="text/plain" title="movingRectangle.java">
 new World(1000, 1000); new World(1000, 1000);
Zeile 80: Zeile 80:
 Als Physiklehrer überfällt mich ein großes Unbehagen, wenn ich an die Einheiten der drei obigen Gleichungen denke. Stellt Euch daher rechts jeweils "$\cdot 1 s$ vor, damit Ihr wieder ruhig schlafen könnt ;-) Als Programmierer freue ich mich aber über die einfache und performante Umsetzung. Die zweite und dritte Gleichung zusammengenommen lassen sich jetzt nämlich mit einer einzigen Java-Anweisung erledigen: ''move(vx, vy)''. \\ \\  Als Physiklehrer überfällt mich ein großes Unbehagen, wenn ich an die Einheiten der drei obigen Gleichungen denke. Stellt Euch daher rechts jeweils "$\cdot 1 s$ vor, damit Ihr wieder ruhig schlafen könnt ;-) Als Programmierer freue ich mich aber über die einfache und performante Umsetzung. Die zweite und dritte Gleichung zusammengenommen lassen sich jetzt nämlich mit einer einzigen Java-Anweisung erledigen: ''move(vx, vy)''. \\ \\ 
 === Erzeuger-Objekt === === Erzeuger-Objekt ===
-Im [[#beispiel_2hin-_und_herbewegende_rechtecke|Beispiel mit den hin- und herbewegenden Rechtecken]] hast Du gesehen, dass es problematisch ist, ein Hauptprogramm am Laufen zu habenwenn gleichzeitig immer wieder Ereignishandler abgearbeitet werden müssendie Vorrang bekommen. Wir wollen es diesmal besser machen und erledigen die Erzeugung der Bälle ebenfalls in einem Ereignis-Handler. Dazu erstellen wir die Klasse ''Erzeuger'' als Unterklasse von ''Actor''. Letztere besitzt eine ''act''-Methode, die 30-mal pro Sekunde aufgerufen wird. Wir überschreiben sie mit einer eigenen Methode, die bei jedem fünften Aufruf einen neuen Ball erzeugt.+Im [[#beispiel_2hin-_und_herbewegende_rechtecke|Beispiel mit den hin- und herbewegenden Rechtecken]] haben wir die neuen Rechtecke im Hauptprogramm erzeugt. Das ist problematisch, da bei vielen Laufenden actor-Methoden nicht sichergestellt ist, mit welcher Geschwindigkeit das Hauptprogramm durchlaufen wird. Stell Dir vorin einem Spiel würde die Rate, mit der vom Rechner Gegner erzeugt werden, von der Geschwindigkeit Deines Rechners abhängen! \\ Wir wollen es diesmal besser machen und erledigen die Erzeugung der Bälle ebenfalls in einem Ereignis-Handler. Dazu erstellen wir die Klasse ''Erzeuger'' als Unterklasse von ''Actor''. Letztere besitzt eine ''act''-Methode, die 30-mal pro Sekunde aufgerufen wird. Wir überschreiben sie mit einer eigenen Methode, die bei jedem fünften Aufruf einen neuen Ball erzeugt.
  
 <HTML> <HTML>
-<div class="java-online" style="height: 600px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'flyingCircles'}">+<div class="java-online" style="height: 600px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'flyingCircles', 'speed': 'max'}">
 <script type="text/plain" title="flyingCircles.java"> <script type="text/plain" title="flyingCircles.java">
 new World(800, 1000); new World(800, 1000);
Zeile 122: Zeile 122:
 </HTML> </HTML>
  
 +===== Beispiel 4: Feuerwerk =====
 +Dieses Beispiel habe ich als Wiederholungsübung für meine zehnten Klassen im Schuljahr 2020/21 geschrieben. Damals war wegen er Corona-Epidemie das Sylvesterfeuerwerk ausgefallen.
 +{{ youtube>4OY-p4M4hpY?large }}
 +<HTML>
 +<div class="java-online" style="height: 600px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Feuerwerk', 'speed': 'max'}">
 +<script type="text/plain" title="Feuerwerk.java">
 +new Feuerwerk();
 +
 +class Feuerwerk extends Actor {
 +   
 +   public void act() {
 +      if(Math.random() < 0.03) {
 +         
 +         int funkenzahl = Math.floor(Math.random() * 50 + 30);
 +         int farbe = Color.randomColor(128);
 +
 +         double x = Math.random() * 400 + 200;
 +         double y = Math.random() * 600;
 +         double lebensdauer = 60 + Math.random() * 60;
 +         for(int i = 0; i < funkenzahl; i++) {
 +            new Funke(x, y, farbe, lebensdauer);
 +         }
 +         Sound.playSound(Sound.cannon_boom);
 +
 +      }
 +   }
 +
 +}
 +
 +class Funke extends Circle {
 +   double vx;
 +   double vy;
 +   double lebensdauer;           // lebensdauer in 1/30 s
 +
 +   Funke(double x, double y, int farbe, double lebensdauer) {
 +      super(x, y, 4);
 +      double winkel = Math.random() * 2 * Math.PI;
 +      double v = Math.random() * 15 + 5;
 +      vx = v * Math.cos(winkel);
 +      vy = v * Math.sin(winkel);
 +      setFillColor(farbe);
 +      this.lebensdauer = lebensdauer;
 +   }
 +
 +   public void act() {
 +      lebensdauer--;
 +      move(vx, vy);
 +      vy = vy + 0.2;
 +      if(lebensdauer < 30) {
 +         setAlpha(lebensdauer / 30);
 +      }
 +      if(isOutsideView() || lebensdauer < 0) {
 +         destroy();
 +      }
 +   }
 +
 +}
 +</script>
 +</div>
 +</HTML>
  
api/documentation/grafik/animation.1609967531.txt.gz · Zuletzt geändert: 2021/12/29 11:29 (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki