Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- j11:codierung:farben:start [2023/06/13 07:35] – Martin Pabst
+++ j11:codierung:farben:start [2023/06/13 14:41] (aktuell) – [Farbspielereien] Martin Pabst
@@ Zeile 7: / Zeile 7: @@
 {{ :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".
+ \\ \\ 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:** \\
@@ Zeile 13: / Zeile 20: @@
 </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>