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.
====== Codierung von Farben ======
<WRAP center round tip 100%>
Menschen können mit ihren Augen [[https://www.srf.ch/sendungen/einstein/fuenfmalklug/wie-viele-farben-sieht-der-mensch|etwa 20 Millionen Farben]] voneinander unterscheiden. In der Informatik stellt sich die Frage, wie wir diese Farben darstellen können, um sie dann z.B. auf dem Monitor oder auf einem Drucker anzuzeigen. Es gibt dazu unterschiedliche [[https://en.wikipedia.org/wiki/Color_model|Farbmodelle]], z.B. das [[https://en.wikipedia.org/wiki/HSL_and_HSV|HSL/HSV-Farbmodell]] oder das in Druckereien gebräuchliche [[https://en.wikipedia.org/wiki/CMYK_color_model|CYMK-Farbmodell]]. Das gebräuchlichste Farbmodell ist das [[https://en.wikipedia.org/wiki/RGB_color_model|RGB-Farbmodell]], ihm wenden wir uns im folgenden zu.
\\ \\ 
**RGB-Farbmodell** \\
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. 
{{ :j11:codierung:farben:pasted:20230613-091840.png}}
 \\ \\ 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]].
 \\ \\ 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". \\ \\ 
**Darstellung als Zahlentripel**
Farben werden üblicherweise als Abfolge von drei Zahlen ("Zahlentripel") für den Rot-, Grün- und Blauwert dargestellt. Gebräuchlich sind z.B. folgende Schreibweisen:
  * CSS: rgb(10, 140, 30)
  * CSS: #0A8C1E
  * Java: 0x0A8C1E
Bei den Hexadezimalschreibweisen repräsentieren dabei je zwei Stellen eine Farbe, also im obigen Beispiel \\ 
Rotwert = 0a, Grünwert = 8c, Blauwert = 1e
 \\ \\ 
**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>

===== Farben in der Online-IDE =====
Die Online-IDE arbeitet mit RGB-Farbwerten bei denen jede Grundfarbe einen ganzen Wert zwischen 0 und 255 (hexadezimal: 00 bis ff) annehmen kann. Das folgende Programm zeigt die verschiedenen Arten, Farben anzugeben.

<HTML>

<div class="java-online" style="height: 450px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Farben1'}">

<script type="text/plain" title="Farben.java">
Circle c0 = new Circle(100, 100, 50);
c0.setFillColor("blue");               // Zeichenkette; ungünstig, weil keine Code-Vervollständigung

Circle c1 = new Circle(200, 100, 50);
c1.setFillColor(Color.chocolate);    // Farbkonstante

Circle c2 = new Circle(300, 100, 50);
c2.setFillColor(0x30ff30);           // Hexadezimal

Circle c3 = new Circle(400, 100, 50);
c3.setFillColor(new Color(200, 250, 50));           // R-, G- und B-Werte in Dezimalschreibweis

int red = 200;
int green = 250;
int blue = 50;

Circle c4 = new Circle(500, 100, 50);
c4.setFillColor(0x10000 * red + 0x100 * green + blue);           // Berechnen der Gesamtfarbe aus den Einzelfarben

</script>

</div>

</HTML>


===== Undurchsichtigkeit (Opacity/Alphavalue) =====
<WRAP center round info 80%>
Zusätzlich zu den drei Werten für Rot-, Grün- und Blauwert kann man beim Färben graphischer Objekten oft noch einen vierten, sogenannten "Alpha"-Wert oder "Opacity" angeben, der regelt, wie durchsichtig das Objekt ist. Dass "Opacity" wörtlich übersetzt "Undurchsichtigkeit" oder "Deckfähigkeit" bedeutet erklärt die Bedeutung des
  * Minimalwertes 0 ( = komplett durchsichtig) und
  * Maximalwertes 255 ( = komplett undurchsichtig).
</WRAP>



<HTML>

<div class="java-online" style="height: 250px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Farben2'}">

<script type="text/plain" title="Farben.java">
Circle c1 = new Circle(300, 300, 250);
c1.setFillColor(0xff8000, 0.5);

Circle c2 = new Circle(500, 300, 250);
c2.setFillColor(0x0080ff, 0.5);
</script>

</div>

</HTML>


===== Farbspielereien =====
TODO
<HTML>

<div class="java-online" style="height: 250px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Farbspielerei1'}">

<script type="text/plain" title="Main.java">
for (int zeile = 0; zeile < 16; zeile++) {
   for (int spalte = 0; spalte < 16; spalte++) {
      Circle c = new Circle(20 + spalte * 30, 20 + zeile * 30, 20);
      c.setFillColor(new Color(zeile*16, 0, spalte*16));
   }
}
</script>
</div>

</HTML>