Benutzer-Werkzeuge

Webseiten-Werkzeuge


g9:uebungen:vererbung:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


g9:uebungen:vererbung:start [2024/08/31 10:03] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Vererbung ======
 +====== Beispiel 1: Advanced Robot ======
  
 +<WRAP center round todo 80%>
 +Die Klasse Robot hat alle Methoden, die Du von Robot Karol her kennst. Erweitere sie um weitere Methoden:
 +  * Die Methode ''umdrehen()'' soll bewirken, dass der Roboter sich um 180° dreht.
 +  * Die Methode ''gehe(int schrittzahl)'' soll bewirken, dass der Roboter mehrere Schritte geht.
 +  * Die Methode ''legeBahn(int länge)'' soll bewirken, dass der Roboter eine Bahn von Ziegeln der angegebenen Länge legt.
 +  * Die Methode ''legeQuadrat(int seitenlänge)'' soll bewirken, dass der Roboter ein nicht-ausgefülltes Quadrat der angegebenen Seitenlänge mit der Höhe 1 baut.
 +  * Die Methode ''baueTreppe(int höhe)'' soll bewirken, dass der Roboter eine Treppe der angegebenen Höhe baut.
 +
 +Lass Dir noch weitere Methoden einfallen und schreibe ein Hauptprogramm, das die Methoden nutzt, um eine große Burg zu bauen!
 +</WRAP>
 +
 +
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung0'}">
 +
 +<script type="text/plain" title="AdvancedRobot.java">
 +AdvancedRobot tom = new AdvancedRobot(1, 1, 10, 10);
 +tom.legeQuadrat(4);
 +tom.baueTreppe(3);
 +
 +class AdvancedRobot extends Robot {
 +   
 +   void umdrehen() {
 +      linksDrehen();
 +      linksDrehen();
 +   }
 +
 +   void gehe(int schrittzahl) {
 +      for (int i = 0; i < schrittzahl; i++) {
 +         schritt();
 +      }
 +   }
 +
 +   void legeBahn(int länge) {
 +      for (int i = 0; i < länge; i++) {
 +         hinlegen();
 +         schritt();
 +      }
 +   }
 +
 +   void legeQuadrat(int seitenlänge) {
 +      for (int s = 0; s < 4; s++) {
 +         legeBahn(seitenlänge);
 +         linksDrehen(); 
 +      }
 +   }
 +
 +   void baueTreppe(int höhe) {
 +      for (int i = 0; i < höhe; i++) {
 +         legeBahn(höhe - i);
 +         umdrehen();
 +         gehe(höhe - i - 1);
 +         umdrehen();
 +      }
 +   }
 +}
 +</script>
 +</HTML>
 +
 +====== 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, 'id': 'Vererbung3'}">
 +
 +<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>
 +
 +Damit die Seite nicht zu lange wird, findest Du die [[:klassen2:inheritance:flyingRectangle:start|ausführliche Erklärung dieses Programms auf einer extra Seite]].
 +
 +=== UML-Diagramm zu "Fliegende Rechtecke" ===
 +{{ :klassen2:inheritance:pasted:20200510-082627.png}}
 +Auf dem nebenstehenden Diagramm habe ich die (sehr zahlreichen!) Attribute und Methoden der Klassen ''Rectangle'', ''FilledShape'', ''Shape'' und ''Actor'' ausgeblendet, damit es übersichtlich bleibt. Die Vererbungshierarchie ist schön zu sehen: 
 +  * ''FlyingRectangle'' ist Unterklasse von ''Rectangle''
 +  * ''Rectangle'' ist Unterklasse von ''FilledShape'' (wie bspw. auch ''Circle'' und ''Polygon'')
 +  * ''FilledShape'' ist Unterklasse von ''Shape''
 +  * ''Shape'' ist Unterklasse von ''Actor''
 +
 +===== Aufgabe: Starfield =====
 +{{ youtube>Uo28xYGLOO0?medium}}
 +Programmiere ein Sternenfeld, so wie es rechts im Video zu sehen ist:
 +  * Jeder Stern ist ein Kreis.
 +  * Jeder Stern besitzt eine Geschwindigkeit, mit der er von der Mitte der Welt nach außen fliegt.
 +  * Ist ein Stern außerhab des sichtbaren Bereichs (testbar mit der Methode ''isOutsideView()'' der Klasse ''Circle''), dann wird er vernichtet (Methode ''destroy()'' der Klasse ''Circle'')
 +  * Sterne werden größer, je länger sie schon fliegen. Dadurch entsteht der Effekt, dass sie "näher" kommen.
 +<HTML><div style="clear: both;"></div></HTML>
 + \\ 
 +
 +<HTML>
 +<div class="java-online" style="height: 620px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'Vererbung4'}">
 +
 +<script type="text/plain" title="Starfield.java">
 +// Hier programmieren!
 +</script>
 +
 +<script type="text/plain" title="Tipp 1" data-type="hint">
 +## Tipp 1:
 +Ein Stern ist ein Kreis. Die Klasse ``Stern`` sollte also Unterklasse der Klasse ``Kreis`` sein. Zudem hat jeder Stern - wie die fliegenden Rechtecke im Bild oben - eine Geschwindigkeit.
 +</script>
 +
 +
 +<script type="text/plain" title="Tipp 2" data-type="hint">
 +## Tipp 2:
 +Hier ein "Gerüst" für das Programm:
 +```
 +new World(800, 800);
 +new Star(400, 400);
 +
 +
 +class Star extends Circle {
 +     double vx;
 +     double vy;
 +
 +   public Star(double x, double y) {
 +      super(x, y, 1);
 +   }
 +   
 +   public void act() {
 +     // Alle Anweisungen hier werden 30-mal pro Sekunde ausgeführt
 +   }
 +
 +}
 +```
 +</script>
 +<script type="text/plain" title="Tipp 3" data-type="hint">
 +## Tipp 3:
 +Die Geschwindigkeit der Sterne in x- und y-Richtung ist zufällig. Eine Zufallszahl zwischen bspw. 2 und 10 erzeugt man folgendermaßen:
 +```
 +vx = Math.random()*8 + 2;
 +vy = Math.random()*8 + 2;
 +```
 +# Erklärung:
 +``Math.random()`` erzeugt bei jedem Aufruf eine "frische" Zufallszahl im Intervall [0;1[. Multipliziert man diese mit 8, so erhält man eine Zufallszahl im Intervall [0;8[. Addiert man 2 hinzu, so erhält man eine Zufallszahl im Intervall [2;10[.
 +</script>
 +<script type="text/plain" title="Tipp 4" data-type="hint">
 +## Tipp 4:
 +Die Methode ``act()`` ist sehr ähnlich zur gleicnamigen Methode im Beispiel "Fliegende Rechtecke".
 +</script>
 +<script type="text/plain" title="Tipp 5" data-type="hint">
 +## Tipp 5:
 +Die Formel zur zufälligen Bestimmung der Geschwindigkeit in Tipp 3 hat einen Nachteil: Die Geschwindigkeiten haben nicht nur verschiedene Richtungen (gut!) sondern auch sehr unterschiedliche Beträge (schlecht!), d.h. die Sterne fliegen unterschiedlich schnell. Viel besser ist es, mit **Poloarkoordinaten** zu arbeiten, das heißt: Wir bestimmen zuerst den Betrag ``v`` der Geschwindigkeit zufällig, dann den Winkel ``w`` (also ihre Richtung). Danach berechnen wir aus ``v``und ``w`` die benötigten Komponenten ``vx``und ``vy``.
 +```
 +double v = Math.random()*8 + 2; // Betrag der Geschwindigkeit zwischen 2 und 10
 +double w = Math.random()*2*Math.PI; // Winkel zwischen 0 und 2*PI
 +vx = v * Math.cos(w);
 +vy = v * Math.sin(w);
 +```
 +
 +</script>
 +
 +</div>
 +
 +</HTML>
 +
 +[[:klassen2:inheritance:starfieldloesung:start|Lösung zur Aufgabe "Starfield"]]
 +
 +====== Beispiel 3: Klasse "Raute" ======
 +Die Programmiersprache stellt bisher nur Objekte zum Zeichnen von Rechtecken, Kreisen, Polygonen und Sprites zur Verfügung. Ich zeige Dir, wie man durch Erweiterung der Klasse Polygon leicht weitere Objektklassen erstellen kann. Im Folgenden entwickeln wir eine Klasse "Raute".
 +
 +==== Skizze: ====
 +{{ :klassen2:inheritance:pasted:20201213-214225.png?500 }}
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung7'}">
 +
 +<script type="text/plain" title="Raute.java">
 +new Raute(400, 300, 50, 100);
 +new Raute(200, 200, 100, 80);
 +
 +class Raute extends Polygon {
 +
 +   public Raute(double mitteX, double mitteY, 
 +                double diagonaleX, double diagonaleY) {
 +    
 +      super(true);
 +
 +      addPoint(mitteX + diagonaleX/2, mitteY);   // rechter Eckpunkt      
 +      addPoint(mitteX, mitteY - diagonaleY/2);   // oberer Eckpunkt
 +      addPoint(mitteX - diagonaleX/2, mitteY);   // linker Eckpunkt
 +      addPoint(mitteX, mitteY + diagonaleY/2);   // unterer Eckpunkt
 +
 +   }
 +
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 +
 +
 +
 +
 +====== Beispiel 4: Klasse "Stern" ======
 +Die Programmiersprache stellt bisher nur Objekte zum Zeichnen von Rechtecken, Kreisen, Polygonen und Sprites zur Verfügung. Ich zeige Dir, wie man durch Erweiterung der Klasse Polygon leicht weitere Objektklassen erstellen kann. Im Folgenden entwickeln wir eine Klasse "Stern".
 +
 +==== Mathematische Grundlagen ====
 +{{ :klassen2:inheritance:stern-erklaerung.png?600}}
 +
 +Wir wollen einen Stern mit $n$ Außenzacken zeichnen. Dazu brauchen wir die Koordinaten $(mitte_{x}, mitte_{y})$ seines Mittelpunkts, den Außenradius $r_{außen}$ (d.h. den Abstand der äußeren Zacken vom Mittelpunkt) und den Innenradius $r_{innen}$ (d.h. den Abstand der inneren Zacken des Sterns vom Mittelpunkt). \\
 +Im Beispiel oben hat der Stern 5 Außenzacken (d.h. $n = 5$). Denke Dir eine Halbgerade, die im Mittelpunkt des Sterns beginnt und nach rechts zeigt. Sie geht durch den ersten Außenzacken des Sterns. Drehen wir sie um den Mittelpunkt des Sterns nach links, so überstreicht sie nach $360°/10 = 36°$ den ersten Innenzacken, nach $2 \cdot 36° = 72°$ den zweiten Außenzacken usw. . \\ 
 +Der i-te Zacken erscheint also beim Winkel $i*36°$. Zur Berechnung seiner Koordinaten sieh' Dir oben das rechtwinklige Dreieck mit der roten und grünen Kathete an. Um die Koordinaten des zweiten Zackens zu berechnen muss die grüne Kathete zur x-Koordinate des Mittelpunkts addiert werden, die rote Kathete zur y-Koordinate:
 +$$ x = mitte_{x} + cos(i*36°)*radius $$
 +$$ y = mitte_{y} + sin(i*36°)*radius $$
 +Im Fall einer Außenzacke (gerades i, also ''i % 2 == 0'') setzen wir für $radius$ den Außenradius, im Fall einer Innenzacke den Innenradius. Die Zacken fügen wir dem Polygon mit der Methode ''addPoint'' hinzu.
 + \\ 
 +
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Vererbung5'}">
 +
 +<script type="text/plain" title="Stern.java">
 +new Stern(400, 300, 50, 150, 5);
 +
 +class Stern extends Polygon {
 +
 +   public Stern(double mitteX, double mitteY, 
 +   double rInnen, double rAußen, double zackenZahl) {
 +    
 +      super(true);
 +      
 +      for(int i = 0; i < 2 * zackenZahl; i++) {
 +         
 +         double r = rInnen;
 +         if(i % 2 == 0) r = rAußen;
 +         
 +         double winkel = Math.PI / zackenZahl * i;
 +         double x = mitteX + r * Math.cos(winkel);
 +         double y = mitteY + r * Math.sin(winkel);
 +
 +         addPoint(x, y);
 +
 +      }
 +
 +      setFillColor(Color.yellow);
 +      
 +   }
 +
 +
 +
 +
 +}</script>
 +
 +</div>
 +
 +</HTML>
 +
 +=== UML-Diagramm zu "Stern" ===
 +{{ :klassen2:inheritance:pasted:20200517-215226.png}}
 +Auf dem nebenstehenden Diagramm habe ich die (sehr zahlreichen!) Attribute und Methoden der Klassen ''Polygon'', ''FilledShape'', ''Shape'' und ''Actor'' ausgeblendet, damit es übersichtlich bleibt. Die Vererbungshierarchie ist schön zu sehen: 
 +  * ''Stern'' ist Unterklasse von ''Polygon''
 +  * ''Rectangle'' ist Unterklasse von ''FilledShape'' (wie bspw. auch ''Circle'' und ''Polygon'')
 +  * ''FilledShape'' ist Unterklasse von ''Shape''
 +  * ''Shape'' ist Unterklasse von ''Actor''
 +
 +
 +=== Viele Sterne ===
 +Jetzt wollen wir unsere neue Klasse natürlich "richtig" anwenden und viele Sterne zeichnen:
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 70%" data-java-online="{'withBottomPanel': true, 'id': 'Vererbung6'}">
 +
 +<script type="text/plain" title="Hauptprogramm.java">
 +for(int i = 0; i < 15; i++) {
 +
 +   double x = 100 + i * 50;
 +   double y = 600 - i *50;
 +   Stern s = new Stern(x, y, 10 + i, 30 + 3 * i, 5);
 +   s.rotate(i * 30, x, y);
 +   s.setAlpha(0.5);
 +
 +}
 +</script>
 +
 +<script type="text/plain" title="Stern.java">
 +class Stern extends Polygon {
 +
 +   public Stern(double mitteX, double mitteY, 
 +   double rInnen, double rAußen, double zackenZahl) {
 +    
 +      super(true);
 +      
 +      for(int i = 0; i < 2 * zackenZahl; i++) {
 +         
 +         double r = rInnen;
 +         if(i % 2 == 0) r = rAußen;
 +         
 +         double winkel = Math.PI / zackenZahl * i;
 +         double x = mitteX + r * Math.cos(winkel);
 +         double y = mitteY + r * Math.sin(winkel);
 +
 +         addPoint(x, y);
 +
 +      }
 +
 +      setFillColor(Color.yellow);
 +      
 +   }
 +
 +
 +
 +
 +}</script>
 +
 +</div>
 +
 +</HTML>
 +
 +===== Beispiel 5: Feuerwerk =====
 +Das Beispiel "Feuerwerk" [[:api:documentation:grafik:animation#beispiel_4feuerwerk|findest Du hier]].
 +
 +
 +====== Beispiel 6: Kochkurve ======
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Kochkurve'}">
 +
 +<script type="text/plain" title="Kochkurve.java">
 +new World(1000, 1000);
 +Kochkurve k = new Kochkurve(7);
 +
 +class Kochkurve extends Turtle {
 +   
 +   public Kochkurve(int tiefe) {
 +      super(50, 700);
 +      setBorderWidth(3); 
 +      int länge = 700;
 +      turn(60);
 +      zieheLinie(länge, tiefe);
 +      turn(-120);
 +      zieheLinie(länge, tiefe);
 +      turn(-120);
 +      zieheLinie(länge, tiefe);
 +   }
 +   
 +   public void zieheLinie(double länge, int tiefe) {
 +      if(tiefe == 0) {
 +         forward(länge);
 +         return;
 +      }
 +
 +      zieheLinie(länge / 3, tiefe - 1);
 +      turn(60);
 +      zieheLinie(länge / 3, tiefe - 1);
 +      turn(-120);
 +      zieheLinie(länge / 3, tiefe - 1);
 +      turn(60);
 +      zieheLinie(länge / 3, tiefe - 1);
 +
 +   }
 +
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 +
 +
 +====== Beispiel 7: Fraktaler Baum ======
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Baum'}">
 +
 +<script type="text/plain" title="Baum.java">
 +new FraktalerBaum(400, 600, 0.7, 9, 35);
 +
 +class FraktalerBaum extends Turtle {
 +   
 +   double faktor;
 +   double winkel;
 +   
 +   FraktalerBaum(double x, double y, double faktor, int tiefe, double winkel) {
 +      super(x, y);
 +      this.faktor = faktor;
 +      this.winkel = winkel;
 +      setBorderWidth(2);
 +      turn(90);
 +      zeichneAst(tiefe, 180);
 +   }
 +
 +   void zeichneAst(int n, double länge) {
 +      if(n == 0) return;
 +
 +      forward(länge);
 +      turn(winkel);
 +      zeichneAst(n - 1, länge * faktor);
 +      turn(-2*winkel);
 +      zeichneAst(n - 1, länge * faktor);
 +      turn(winkel);
 +      turn(180);
 +      penUp();
 +      forward(länge);
 +      turn(180);
 +      penDown();
 +   }
 +
 +}
 +
 +</script>
 +
 +</div>
 +
 +</HTML>