Die Helligkeit der drei Subpixel eines Pixels bestimmt die für uns wahrnehmbare Farbe des Pixels.
Die Farbe eines Pixels kann mit Hilfe von drei Helligkeitsangaben zwischen 0 und 255 festgelegt werden.
11.1.3 Farb-Codierung
Manchen Farben wird ein Farbname zugeordnet, mit welchem man beim Webdesign festlegen kann, welche Farbe ein Element auf der Webseite haben soll.
Quelle: Selfhtml.org
Um eine Farbe festzulegen, notiert man die Helligkeitsstufen als einen RGB-Code:
- "R" steht für "rot",
- "G" steht für "Grün" und
- "B" steht für "blau":
rgb(Helligkeit von R, Helligkeit von G, Helligkeit von B)
Beispiel: "Forestgreen" = rgb(34, 139, 34)
Verändern Sie die Helligkeit der Subpixel und beobachten Sie, wie die Veränderung der Helligkeit eines Subpixels, die vom Beobachter wahrgenommene Farbe ändert.
In einem neuen Fenster starten: Codierung eines RGB-Pixels
Ein Computer kennt nur die beiden Zustände "0" und "1", weswegen man ein Zahlensystem benötigt, in dem man mit nur zwei Ziffern jede beliebige Zahl beschreiben kann.
Im Dezimalsystem kann man mit den zehn verschiedene Ziffern 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 zählen. Sobald man die Zahl 9 erreicht hat, braucht man eine zweite Stelle und schreibt die nächste Zahl mit zwei Ziffern.
Im Binärsystem kann man nur mit zwei verschiedenen Ziffern 0 und 1 zählen. Daher gibt es bereits nach der Ziffer 1 eine neue Stelle.
Eine Zahl im Binärsystem nennt man eine Dualzahl.
- Mit einem Klick auf die Schaltfläche "nächster Schritt" kann die Zählzahl um eins erhöht werden.
- Mit einem Klick auf "Zahlen zurücksetzen" kann die Zählzahl auf den Wert "0" zurückgesetzt werden.
- Mit Hilfe der unteren Steuerelemente kann der Zählvorgang automatisiert werden.
In einem neuen Fenster starten: Zählen im Binärsystem
In einem neuen Fenster starten: Zählen im Dezimalsystem
Damit der Computer eine Farbe darstellen kann, müssen die Dezimalzahlen des RGB-Codes in Binärzahlen umgerechnet werden. Dazu geht man wie folgt vor:
- Man teilt eine Dezimalzahl solange durch 2, bis die Zahl 0 erreicht wurde.
- In jedem Schritt notiert man den Rest der Division und schreibt daraus die Binärzahl von hinten nach vorne auf.
In einem neuen Fenster starten: Umrechnung: Dezimalzahl zu Binärzahl
Pink = rgb(255, 192, 203) = 111111111100000011001011
Crimson = rgb(220,20,60) = 110111000001010000111100
SteelBlue = rgb(70, 130, 180) = 010001101000001010110100
ForestGreen = rgb(34, 139, 34) = 001000101000101100100010
Mit 4 Bits kann man 16 Binärzahlen angeben.
Im Dezimalsystem benötigt man zwei Stellen um diese darzustellen.
Fügt man den Ziffern
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
die Ziffern
a, b, c, d, e, f
hinzu, genügt eine Stelle, um alle 4-Bit-Binärzahlen anzugeben.
Das Hexadezimalsystem besteht aus 16 verschiedenen Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Dabei gilt:
\[ \begin{align} & \text{a}_{16} \quad \hat{=} \quad 10_{10} \\ & \text{b}_{16} \quad \hat{=} \quad 11_{10} \\ & \text{c}_{16} \quad \hat{=} \quad 12_{10} \\ & \text{d}_{16} \quad \hat{=} \quad 13_{10} \\ & \text{e}_{16} \quad \hat{=} \quad 14_{10} \\ & \text{f}_{16} \quad \hat{=} \quad 15_{10} \end{align}\]
In der folgenden App können Sie nachvollziehen, wie man im Hexadezimalsystem zählt:
In einem neuen Fenster starten: Zählen im Hexadezimalsystem
Neben dem RGB-Code im Dezimalsystem ist es möglich, eine Farbe im Hexadezimalsystem anzugeben. Dazu wird eine Dezimalzahl aus dem RGB-Code in eine Hexadezimalzahl umgerechnet.
In einem neuen Fenster starten: Umrechnung: Dezimalzahl zu Hexadezimalzahl
Mit den drei Zahlsystemen: Dezimalsystem, Binärsystem und Hexadezimalsystem gibt es drei verschiedene Möglichkeiten, wie die Farbe eines Pixels codiert werden kann:
In einem neuen Fenster starten: Pixel-Codierung
Pink = rgb(255, 192, 203) = #ffc0cb
Crimson = rgb(220,20,60) = #dc143c
SteelBlue = rgb(70, 130, 180) = #4682b4
ForestGreen = rgb(34, 139, 34) = #228b22
Klicke die richtigen Anworten an. Eine Frage kann mehr als eine richtige Antwort haben.
Für was stehen die Buchstaben R, G und B im Begriff "RGB-Code"? |Rot, Grün und Blau||!Rot, Grau und Beleuchtung||!Real, Grundlegend, Basis|
Was geben die drei Zahlenwerte in einem RGB-Code an? Beispiel: rgb(182, 75, 210) |!Die Menge an Farbpigmenten in Milligramm||!Die Helligkeit der drei Subpixel zwischen 0 und 1000||Die Helligkeit der drei Subpixel zwischen 0 und 255|
Welches ist der RGB-Code für die Farbe "Rot"? |rgb(255, 0, 0)||!rgb(100, 200, 0)||!rgb(0, 255, 0)|
Bei welcher der folgenden RGB-Codes wird eine graue Farbe angezeigt? |!rgb(1, 11, 111)||!rgb(150, 50, 250)||rgb(210, 210, 210)||rgb(80, 80, 80)||rgb(50, 50, 50)|
Was ist das Binärsystem? |!Ein Computer mit zwei CPUs||Ein Zahlensystem, in dem es nur die beiden Ziffern 0 und 1 gibt||!Ein astronomisches System mit 2 Sonnen|
Welche Zahl folgt auf die Zahl 1010 im Binärsystem? |1011||!1100||!1001|
Welche Zahl folgt auf die Zahl 1011 im Binärsystem? |1100||!1012||!1101|
Welcher Binärcode gehört zur Dezimalzahl 13? |1101||!1011||!10001|
Warum wurde der Hexadezimalcode eingeführt?? |Im Hexadezimalcode kann eine 4-Bit-Binärzahl mit nur einer Ziffer geschrieben werden||!Ein Computer rechnet intern im Hexadezimalsystem||!Man wollte Abwechslung in die Schreibweise von Zahlen bringen|
Welche Zahl folgt auf die Zahl 9 im Hexadezimalsystem? |a||!10||!1a|
Welche Zahl ist der Vorgänger von 20 im Hexadezimalsystem? |1f||!1a||!19|
Welche Hexadezimalzahl gehört zur Farbe "Rot"? |#ff0000||!#00ff00||!#a1b1c1|
Q14: Bei welcher der folgenden HEX-Codes wird eine graue Farbe angezeigt? |#353535||#bbbbbb||!#abcdef||#1d1d1d||!#123456||!#aabbcc|
Berechnen Sie die Anzahl von Bits, die notwendig ist, um folgendes Bild zu speichern.
Das Bild aus Übung 1 wurde künstlerisch verändert, indem mit einem Bildbearbeitungsprogramm eine Unschärfe in das Bild eingefügt wurde.
Das Bild enthält jetzt nicht mehr nur die Farben "Schwarz" und "Weiß". Die Unschärfe wird mit der Farbe "Grau" in 256 Abstufungen erzeugt. Ein graues Pixel entsteht, wenn alle drei Subpixel die gleiche Helligkeit haben, weswegen "Weiß" (Graustufe mit Helligkeit 255) und "Schwarz" (Graustufe mit Helligkeit 0) jeweils auch als eine Graustufe angesehen werden kann.
Um die Unschärfe darzustellen, wird das Bild in 384 x 384 Pixel unterteilt.
Berechnen Sie die Anzahl von Bits, die notwendig ist, um das Bild zu speichern.
Das Bild aus Übung 2 wurde künstlerisch weiter verändert, indem mit einem Bildbearbeitungsprogramm ein Voronoi-Filter über das Bild gelegt wurde.
Das Bild mit 384 x 384 Pixeln muss jetzt mit dem vollen RGB-Code codiert werden.
Berechnen Sie die Anzahl von Bits, die notwendig ist, um das Bild zu speichern.
Nehmen Sie ein Foto mit Ihrem Handy auf.
- Finden Sie heraus, wie viele Pixel dieses Bild hat.
- Berechnen Sie den Speicherplatz, den dieses Bild in Bits benötigt.
- Auf ihrem Handy benötigt das von Ihnen aufgenommene Bild deutlich weniger Speicherplatz, als der von Ihnen berechnete. Finden Sie heraus, warum das so ist.
- Gestalten Sie auf der Basis Ihrer Daten und Erkenntnisse ein Plakat mit dem Werkzeug ExcaliDraw.
Lassen Sie Ihrer Lehrkraft in der vereinbarten Weise ihr Dokument zukommen. Dafür gibt es die vereinbarte Menge an XPs.