Benutzer-Werkzeuge

Webseiten-Werkzeuge


klassen1:anwenden:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
klassen1:anwenden:start [2020/10/15 10:28] – [Beispiel 4: Farbige Rechtecke] Martin Pabstklassen1:anwenden:start [2023/05/26 12:58] (aktuell) – [Aufgabe 2: Farbkreise] Martin Pabst
Zeile 1: Zeile 1:
 +{{ :klassen1:anwenden:pasted:20200828-185832.png?400}} 
 ====== Objekte erzeugen und verändern ====== ====== Objekte erzeugen und verändern ======
 Bevor wir eigene Klassen programmieren lernen wir, wie wir Objekte zu bereits bestehenden Klassen erzeugen können. Wir beginnen mit Grafikklassen wie ''Rectangle'' oder ''Circle'', weil man die grafische Repräsentation dieser Objekte gleich am Bildschirm sieht.  Bevor wir eigene Klassen programmieren lernen wir, wie wir Objekte zu bereits bestehenden Klassen erzeugen können. Wir beginnen mit Grafikklassen wie ''Rectangle'' oder ''Circle'', weil man die grafische Repräsentation dieser Objekte gleich am Bildschirm sieht. 
  
-  
 ===== Objekte instanzieren ( = erzeugen) ===== ===== Objekte instanzieren ( = erzeugen) =====
 Im folgenden Programm erzeugen wir zwei Circle-Objekte und ein Rectangle-Objekt. In Java verwendet man dazu den Operator ''new'' gefolgt vom Bezeichner der Klasse und - in Klammern - zusätzlichen Angaben (**Parametern**), die zum Erzeugen des Objekts benötigt werden. Im folgenden Programm erzeugen wir zwei Circle-Objekte und ein Rectangle-Objekt. In Java verwendet man dazu den Operator ''new'' gefolgt vom Bezeichner der Klasse und - in Klammern - zusätzlichen Angaben (**Parametern**), die zum Erzeugen des Objekts benötigt werden.
 <HTML> <HTML>
 +<div style="clear: both; height: 0.5em;"></div>
 +</HTML>
  
-<div class="java-online" style="height: 200px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Objekte1'}">+ 
 + 
 +<HTML> 
 +<div class="java-online" style="height: 200px; width: 100%;" data-java-online="{'withBottomPanel': false, 'id': 'Objekte1'}">
  
 <script type="text/plain" title="Objekte1.java"> <script type="text/plain" title="Objekte1.java">
-new Circle(400, 200, 100);   // Kreis mit Mittelpunkt (300, 200) und Radius 100 +new Circle(400, 200, 100);   // Kreis mit Mittelpunkt (400, 200) und Radius 100 
-new Circle(400, 400, 50);    // Kreis mit Mittelpunkt (300, 400) und Radius 50+new Circle(400, 400, 50);    // Kreis mit Mittelpunkt (400, 400) und Radius 50
  
-new Rectangle(50, 20, 100, 160);    // Rechteck; linke obere Ecke bei (10, 20); +new Rectangle(50, 20, 100, 160);    // Rechteck; linke obere Ecke bei (50, 20); 
                                     // 100 breit, 160 hoch</script>                                     // 100 breit, 160 hoch</script>
 </div> </div>
Zeile 19: Zeile 24:
 </HTML> </HTML>
  
-{{ :klassen1:anwenden:pasted:20200828-185832.png?400 }} 
 <WRAP center round info 60%> <WRAP center round info 60%>
-Durch die Anweisung ''new Circle(400, 200, 100)'' wird ein neues Objekt der Klasse Circle (also ein Kreis-Objekt) **instanziert** ( = erzeugt ). Die Angaben in Klammern nennt man **Parameter**. Durch sie übermittlen wir dem Objekt die Informationen, die es zur Erzeugung braucht, im Falle eines ''Circle''-Objekts sind dies die Koordinaten des Mittelpunkts und der Radius. Beim Objekt der Klasse ''Rectangle'' sind die Parameter die Koordinaten der linken oberen Ecke, die Breite und die Höhe des Rechtecks. \\ \\ Zur Veranschaulichung siehst Du rechts eine Skizze des Zeichenbereichs. \\ \\ +Durch die Anweisung ''new Circle(400, 200, 100)'' wird ein neues Objekt der Klasse Circle (also ein Kreis-Objekt) **instanziert** ( = erzeugt ). Die Angaben in Klammern nennt man **Parameter**. Durch sie übermittlen wir dem Objekt die Informationen, die es zur Erzeugung braucht, im Falle eines ''Circle''-Objekts sind dies die Koordinaten des Mittelpunkts und der Radius. Beim Objekt der Klasse ''Rectangle'' sind die Parameter die Koordinaten der linken oberen Ecke, die Breite und die Höhe des Rechtecks. \\ \\ Zur Veranschaulichung siehst Du rechts oben eine Skizze des Zeichenbereichs. \\ \\ 
 **Beachte:** Der Ursprung des Koordinatensystems liegt im Zeichenbereich **links oben**, die y-Achse zeigt nach **unten**! (Hier die [[https://gamedev.stackexchange.com/questions/83570/why-is-the-origin-in-computer-graphics-coordinates-at-the-top-left|Erklärung dafür]].) Falls nichts anderes angegeben wird, liegt der rechte Rand des Zeichenbereichs bei x = 800, der untere bei y = 600. **Beachte:** Der Ursprung des Koordinatensystems liegt im Zeichenbereich **links oben**, die y-Achse zeigt nach **unten**! (Hier die [[https://gamedev.stackexchange.com/questions/83570/why-is-the-origin-in-computer-graphics-coordinates-at-the-top-left|Erklärung dafür]].) Falls nichts anderes angegeben wird, liegt der rechte Rand des Zeichenbereichs bei x = 800, der untere bei y = 600.
 </WRAP> </WRAP>
Zeile 169: Zeile 173:
 {{ :klassen1:anwenden:pasted:20200504-135125.png }}  {{ :klassen1:anwenden:pasted:20200504-135125.png }} 
  
-Falls Du vergisst, ein Welt-Objekt zu instanzieren, wird das vom System automatisch nachgeholt, sobald das erste graphische Objekt instanziert wird. In diesem Fall werden die Grenzen des Koordinatensystems automatisch (wie oben) bei x = 800 und y = 600 gesetzt.+Falls Du vergisst, ein Welt-Objekt zu instanzieren, wird das **vom System automatisch nachgeholt, sobald das erste graphische Objekt instanziert wird**. In diesem Fall werden die Grenzen des Koordinatensystems automatisch (wie oben) bei x = 800 und y = 600 gesetzt.
  
 ==== Beispiel 2: gedrehte Rechtecke ==== ==== Beispiel 2: gedrehte Rechtecke ====
Zeile 209: Zeile 213:
 ==== Beispiel 4: Farbige Rechtecke ==== ==== Beispiel 4: Farbige Rechtecke ====
 <HTML> <HTML>
-<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'id': 'Objekte9'}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'id': 'Objekte9', 'withBottomPanel': false}">
  
 <script type="text/plain" title="Main.java"> <script type="text/plain" title="Main.java">
 for(int zeile = 0; zeile < 10; zeile++) { for(int zeile = 0; zeile < 10; zeile++) {
    for(int spalte = 0; spalte < 10; spalte++) {    for(int spalte = 0; spalte < 10; spalte++) {
 +      
       Rectangle r = new Rectangle(spalte * 50 + 30, zeile * 50 + 30, 40, 40);       Rectangle r = new Rectangle(spalte * 50 + 30, zeile * 50 + 30, 40, 40);
-      double alpha = (zeile spalte) / 10.0;+       
 +      double alpha = Math.abs(zeile spalte) / 3.0;
       r.setFillColor(new Color(zeile * 25, 0, spalte * 25), alpha);       r.setFillColor(new Color(zeile * 25, 0, spalte * 25), alpha);
       r.rotate((zeile + spalte) * 10);       r.rotate((zeile + spalte) * 10);
 +
    }    }
 } }
Zeile 232: Zeile 239:
 </code> </code>
 **Wie kommen die Farben zustande?** \\  **Wie kommen die Farben zustande?** \\ 
-Computerdisplays bedienen sich eines Tricks zur Farbdarstellung: Da das menschliche Auge nur Sensoren für rotes, grünes und blaues Licht hat ("Zäpfchen" auf der Netzhaut), reicht es, nur diese drei Sensortypen einzeln in unterschiedlicher Intensität zu aktivieren, um alle für den Menschen sichtbaren Farbeindrücke hervorzurufen. +Computerdisplays bedienen sich eines Tricks zur Farbdarstellung: Da das menschliche Auge nur Farbsensoren für rotes, grünes und blaues Licht hat ("Zäpfchen" auf der Netzhaut), reicht es, nur diese drei Sensortypen einzeln in unterschiedlicher Intensität zu aktivieren, um alle für den Menschen sichtbaren Farbeindrücke hervorzurufen. 
 {{ :klassen1:anwenden:pasted:20201015-093719.png?200}} {{ :klassen1:anwenden:pasted:20201015-093719.png?200}}
  \\ \\ Displays bestehen daher aus vielen sehr kleinen roten, grünen und blauen Punkten, deren Helligkeit einzeln geregelt werden kann. Je drei davon werden zu einem Bildpunkt ("Pixel") zusammengefasst. Die Angabe der Rot- Grün- und Blauwerte oben regelt die Helligkeit der jeweiligen Teilpunkte des Pixels. Dabei steht der Wert ''0'' für "Bildpunkt schwarz" und 255 für "Bildpunkt hat maximale Helligkeit"  \\ \\ Displays bestehen daher aus vielen sehr kleinen roten, grünen und blauen Punkten, deren Helligkeit einzeln geregelt werden kann. Je drei davon werden zu einem Bildpunkt ("Pixel") zusammengefasst. Die Angabe der Rot- Grün- und Blauwerte oben regelt die Helligkeit der jeweiligen Teilpunkte des Pixels. Dabei steht der Wert ''0'' für "Bildpunkt schwarz" und 255 für "Bildpunkt hat maximale Helligkeit"
  \\ \\ Die vom Auge wahrgenommene Farbe des Pixels entspricht der **additiven** Mischfarbe der drei Teilpunkte. Diese Art der Farbmischung wird für dich ungewohnt sein, weil die Mischfarben von Farbstiften und Wasserfarben **subtraktiv** zustandekommen. Eine gute Erklärung der beiden Arten von Farbmischung findest Du in den Wikipedia-Artikeln zu [[https://de.wikipedia.org/wiki/Additive_Farbmischung|additiver]] und [[https://de.wikipedia.org/wiki/Subtraktive_Farbmischung|subtraktiver Farbmischung]].  \\ \\ Die vom Auge wahrgenommene Farbe des Pixels entspricht der **additiven** Mischfarbe der drei Teilpunkte. Diese Art der Farbmischung wird für dich ungewohnt sein, weil die Mischfarben von Farbstiften und Wasserfarben **subtraktiv** zustandekommen. Eine gute Erklärung der beiden Arten von Farbmischung findest Du in den Wikipedia-Artikeln zu [[https://de.wikipedia.org/wiki/Additive_Farbmischung|additiver]] und [[https://de.wikipedia.org/wiki/Subtraktive_Farbmischung|subtraktiver Farbmischung]].
 + \\ \\ 
 +**Kleines Experiment:** \\ 
 +Halte ein Fernglas **in umgedrehter Richtung** ganz nah an den Bildschirm, dann kannst Du die roten, grünen und blauen Punkte deutlich sehen. Schau' Dir so verschiedenfarbige Flächen am Bildschirm an und beobachte die Intensität der farbigen Teilpunkte. 
  
- 
- 
- 
-  
 </WRAP> </WRAP>
  
Zeile 250: Zeile 256:
 <div style="clear: both; height: 10px"></div> <div style="clear: both; height: 10px"></div>
 <div class="java-online" style="height: 400px; width: 100%" data-java-online="{'id':'ObjekteAufgabe1'}"> <div class="java-online" style="height: 400px; width: 100%" data-java-online="{'id':'ObjekteAufgabe1'}">
 +
 <script type="text/plain" title="Main.java"> <script type="text/plain" title="Main.java">
 // Auto-Aufgabe: Hier programmieren: // Auto-Aufgabe: Hier programmieren:
Zeile 273: Zeile 280:
 </div> </div>
 </HTML> </HTML>
 +[[.autoLoesung:start|Hier geht's zur Lösung!]]
  
 ==== Aufgabe 2: Farbkreise ==== ==== Aufgabe 2: Farbkreise ====
Zeile 309: Zeile 316:
 </div> </div>
 </HTML> </HTML>
 +
 +[[.farbkreiseLoesung:start|Hier geht's zur Lösung!]]
  
klassen1/anwenden/start.1602750536.txt.gz · Zuletzt geändert: 2021/12/29 11:29 (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki