Informatik 10

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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>