Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

@@ Zeile 1: / Zeile 1: @@
+====== Beispiel 2: Fliegende Rechtecke ======
+Starte das Programm und regle die Geschwindigkeit langsam hoch!
+<HTML>
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false}">
+<script type="text/plain" title="FlyingRectangle.java">
+new World(800, 800);
+while(true) {
+   new FlyingRectangle();
+}
+class FlyingRectangle extends Rectangle {
+   double vx;
+   double vy;
+   public FlyingRectangle() {
+      super(360, 760 - 40, 80, 80);
+      setFillColor(Math.round(Math.random() *(256 *256 * 256 - 1)), Math.random()*0.8+0.2);  // zufällige Farbe setzen
+      vx = Math.random() * 10 - 5;
+      vy = Math.random() * (-20) - 6;
+   }
+   public void act() {
+      move(vx, vy);
+      vy = vy + 0.2;
+      if(getCenterY() > 900) {
+         destroy();
+      }
+   }
+}</script>
+</div>
+</HTML>
+==== 1. Grafikausgabe ====
+Die auf dieser Website verwendete Java-Entwicklungsumgebung beinhaltet eine Grafikbibliothek, mit der bspw. einfach Spiele programmiert werden können. Sie basiert auf dem Open Source Projekt {{https://www.pixijs.com/|PisiJS}}, ist aber deutlich einfacher zu handhaben. Für dieses Programmierbeispiel reicht es, zwei Dinge zu kennen:
+== a) Erzeugen des Grafikbereiches ("Welt") ==
+<code learnj>
+new World(800, 600);
+</code>
+erzeugt im Ausgabe-Bereich rechts ein kleines "Grafikfenster". Seine Größe orientiert sich immer an der Größe des Ausgabe-Bereichs. Die Grafik wird dabei immer so transformiert dass die linke obere Ecke die Koordinaten (0, 0) hat, die rechte untere Ecke - im Beispiel oben - die Koordinaten (800, 600). Dass die positive y-Achse nach unten zeigt, die y-Koordinaten also nach unten hin immer größer werden - ist bei Computersystemen üblich.
+== b) Zeichnen eines Rechtecks ==
+Die Anweisung
+<code learnj>
+new Rectangle(100, 50, 600, 400);
+</code>
+erzeugt ein Rechteck-Objekt und zeichnet es in den Grafikbereich. Das Rechteck ist initial achsenparallel ausgerichtet, wobei die Parameter des Konstruktors ''new Rectangle(left, top, width, height)'' folgende Bedeutung haben:
+  * (left, top): Koordinaten der linken oberen Ecke
+  * width, heigth: Breite und Höhe des Rechtecks
+== Beispiel ==
+Im folgenden zeichnen wir ein Rechteck auf den Bildschirm, färben es rot und drehen es um 70° gegen den Uhrzeigersinn:
+<HTML>
+<div class="java-online" style="height: 200px; width: 100%" data-java-online="{'withBottomPanel': false}">
+<script type="text/plain" title="RechteckBeispiel.java">
+new World(800, 800);
+Rectangle r = new Rectangle(50, 100, 600, 200);
+r.setFillColor(Color.red);
+r.rotate(70);
+</script>
+</div>
+</HTML>
+==== 2. Erweitern der Klasse Rectangle ====
+Wir definieren jetzt eine Unterklasse ''FlyingRectangle'' der Klasse ''Rectangle'' und setzen seine Größe und Position im Konstruktor. Zudem geben wir ihm eine zufällige Farbe:
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false}">
+<script type="text/plain" title="FlyingRectangle.java">
+new World(800, 800);
+new FlyingRectangle();
+class FlyingRectangle extends Rectangle {
+   public FlyingRectangle() {
+      // Rufe den Konstruktor der Oberklasse auf und setze Position und Größe: left: 360, top: 720, width: 80, height: 80
+      super(360, 720, 80, 80);
+      // setze eine zufällige Farbe und Durchsichtigkeit
+      setFillColor(Math.round(Math.random() *(256 *256 * 256 - 1)), Math.random()*0.8+0.2);
+   }
+}</script>
+</div>
+</HTML>
+==== 3. Animation ====
+In der Grafikbibliothek von LearnJ besitzt jedes graphische Objekt eine Methode ''act()'', die vom System 30-mal pro Sekunde aufgerufen wird. Die Idee dazu kommt aus {{https://www.greenfoot.org/files/javadoc/index-all.html|Greenfoot}}. Wenn wir diese Methode in der Klasse ''FlyingRectangle'' implementieren, überschreiben wir damit die gleichnamige Methode der Oberklasse ''Rectangle'', so dass ab jetzt **unsere** Methode 30-mal pro Sekunde aufgerufen wird. Wir können unser Rechteck so beispielsweise ganz einfach drehen lassen:
+<HTML>
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false}">
+<script type="text/plain" title="FlyingRectangle.java">
+new World(800, 800);
+new FlyingRectangle();
+class FlyingRectangle extends Rectangle {
+   public FlyingRectangle() {
+      // Rufe den Konstruktor der Oberklasse auf und setze Position und Größe: left: 360, top: 720, width: 80, height: 80
+      super(360, 720, 80, 80);
+      // setze eine zufällige Farbe und Durchsichtigkeit
+      setFillColor(Math.round(Math.random() *(256 *256 * 256 - 1)), Math.random()*0.8+0.2);
+   }
+   public void act(){
+      rotate(4);
+   }
+}</script>
+</div>
+</HTML>
+==== 4. Fliegen! ====
+Um das Rechteck "fliegen" zu lassen, muss es jederzeit seine eigene Geschwindigkeit kennen. Wir fügen der Klasse ''FlyingRectangle'' daher die Attribute ''vx'' und ''vy'' hinzu, die Geschwindigkeitskomponenten in x- und y-Richtung. Im Konstruktor initialisieren wir sie mit Zufallswerten. \\
+Jetzt müssen wir das Rechteck in der Methode ''act()'' nur noch um vx in x-Richtung und vy in y-Richtung vorwärtsbewegen. Zudem erzeugen wir noch eine Art Gravitation, indem wir zu ''vy'' alle 1/30 s den Wert 0.4 addieren.
+=== Bewegungsgleichungen ===
+Position und Geschwindigkeit werden also gemäß folgender Gleichungen 30-mal in der Sekunde neu berechnet:
+{{ :klassen2:inheritance:flyingrectangle:bewegungsgleichungen.png?400 |}}
+<HTML>
+<div class="java-online" style="height: 550px; width: 100%" data-java-online="{'withBottomPanel': false}">
+<script type="text/plain" title="FlyingRectangle.java">
+new World(800, 800);
+while(true) {
+   new FlyingRectangle();
+}
+class FlyingRectangle extends Rectangle {
+   double vx;
+   double vy;
+   public FlyingRectangle() {
+      super(360, 760 - 40, 80, 80);
+      setFillColor(Math.round(Math.random() *(256 *256 * 256 - 1)), Math.random()*0.8+0.2);  // zufällige Farbe setzen
+      vx = Math.random() * 10 - 5;       // Anfangsgeschwindigkeit in x-Richtung
+      vy = Math.random() * (-20) - 6;    // Anfangsgeschwindigkeit in y-Richtung
+   }
+   // Die folgende Methode act wird vom System 30-mal pro Sekunde aufgerufen:
+   public void act() {
+      move(vx, vy);                      // Vorwärtsbewegen des Rechtecks
+      vy = vy + 0.4;                     // Gravitation
+      if(getCenterY() > 900) {
+         destroy();
+      }
+   }
+}</script>
+</div>
+</HTML>