gf1:analogdigitalbilder

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
gf1:analogdigitalbilder [2023/08/14 07:36] – marrocgf1:analogdigitalbilder [2024/08/19 09:36] (aktuell) – marroc
Zeile 2: Zeile 2:
  
 Zum Starten betrachten wir als Beispiel ein "gewöhnliches" Blumenfoto. Zu erkennen sind die Geranien in verschiedenen Farben, ein Fenster im Hintergrund und viele kleine Details. Damit das Foto jedoch digital abgespeichert werden kann, muss schon beim Fotografieren in der Digitalkamera das Bild in ganz kleine Quadrate eingeteilt, über das gesamte Bild wird somit ein Raster (oder auch Gitter) gelegt. \\  Zum Starten betrachten wir als Beispiel ein "gewöhnliches" Blumenfoto. Zu erkennen sind die Geranien in verschiedenen Farben, ein Fenster im Hintergrund und viele kleine Details. Damit das Foto jedoch digital abgespeichert werden kann, muss schon beim Fotografieren in der Digitalkamera das Bild in ganz kleine Quadrate eingeteilt, über das gesamte Bild wird somit ein Raster (oder auch Gitter) gelegt. \\ 
-Diese „Bildpunkte“ nennen wir die **Pixel** des Bildes. Pixel ist vermutlich die Abkürzung von **//«Picture Element»//** oder **Picture**. In der Realität (in der analogen Welt) besteht das Bild aus unendlich vielen solcher Punkte, die alle unendlich klein sind. Nennen wir diese Lichtpunkte. Da wir im Computer jedoch nicht unendlich viele Pixel darstellen oder speichern können, sind diese Pixel viel grösser als die unendlich kleinen Lichtpunkte und das Pixel-Gitter oder -Raster viel gröber als diese alanoge Lichtpunkteflut. \\  +Diese „Bildpunkte“ nennen wir die **Pixel** des Bildes. Pixel ist die Abkürzung von **//«Picture Element»//** oder **Picture**. In der Realität (in der analogen Welt) besteht das Bild aus unendlich vielen solcher Punkte, die alle unendlich klein sind. Nennen wir diese Lichtpunkte. Da wir im Computer jedoch nicht unendlich viele Pixel darstellen oder speichern können, sind diese Pixel viel grösser als die unendlich kleinen Lichtpunkte und das Pixel-Gitter oder -Raster viel gröber als diese analoge Lichtpunkteflut. \\  
-Die Konzequenz davon ist, dass wir das Foto also nicht auf ein beliebig grosses Plakat drucken, ohne dass diese Pixel sichtbar werden. Das Bild hat eine gewisse Auflösung - und diese wird daher auch ab einer bestimmten Grösse sichtbar. +Die Konsequenz davon ist, dass wir das Foto also nicht auf ein beliebig grosses Plakat drucken, ohne dass diese Pixel sichtbar werden. Das Bild hat eine gewisse Auflösung - und diese wird daher auch ab einer bestimmten Grösse sichtbar. 
  
 <grid><col> {{:gf1:blumen2.jpeg?nolink&400 |}}</col><col>{{:gf1:blumen3.png?nolink&400 |}}</col></grid> <grid><col> {{:gf1:blumen2.jpeg?nolink&400 |}}</col><col>{{:gf1:blumen3.png?nolink&400 |}}</col></grid>
  
 +<WRAP nicebox red>
 **Offene Fragen sind** **Offene Fragen sind**
-  * Wie können aber diese Pixel in 0 und 1 umgeseschrieben werden? +  * Wie können aber diese Pixel in 0 und 1 umgeschrieben werden? 
   * Was könnten die Herausforderungen und Schwierigkeiten sein?   * Was könnten die Herausforderungen und Schwierigkeiten sein?
   * Was genau bedeutet "Auflösung"?    * Was genau bedeutet "Auflösung"? 
   * Wieviel Speicherplatz braucht ein Bild?   * Wieviel Speicherplatz braucht ein Bild?
   * Und viele andere Fragen.   * Und viele andere Fragen.
 +</WRAP>
 +
 \\  \\ 
 Um den Antworten dieser Fragen auf die Spur zu kommen, lösen Sie die folgende Aufgaben. Um den Antworten dieser Fragen auf die Spur zu kommen, lösen Sie die folgende Aufgaben.
Zeile 19: Zeile 22:
   - Wie könnte das folgende Bild in Code übersetzt werden?{{ :gf1:pixelation1.png?nolink&200 |}} Tauschen Sie sich zu zweit kurz aus und notieren Sie einen möglichen Code zum Bild.   - Wie könnte das folgende Bild in Code übersetzt werden?{{ :gf1:pixelation1.png?nolink&200 |}} Tauschen Sie sich zu zweit kurz aus und notieren Sie einen möglichen Code zum Bild.
   - Öffnen Sie den [[https://studio.code.org/s/pixelation/lessons/2/levels/1 | Editor]]. \\ Das weisse Feld in der rechten Fenstermitte kann durch 0 und 1 beschrieben werden. Was passiert mit dem Bild? Können Sie das Bild von Aufgabe 1 herstellen? Falls Sie gar nicht weiter arbeiten können: Unten Links auf der Seite gibt es ein Hilfevideo – Versuchen Sie es aber zuerst unbedingt selbst.   - Öffnen Sie den [[https://studio.code.org/s/pixelation/lessons/2/levels/1 | Editor]]. \\ Das weisse Feld in der rechten Fenstermitte kann durch 0 und 1 beschrieben werden. Was passiert mit dem Bild? Können Sie das Bild von Aufgabe 1 herstellen? Falls Sie gar nicht weiter arbeiten können: Unten Links auf der Seite gibt es ein Hilfevideo – Versuchen Sie es aber zuerst unbedingt selbst.
-  - Löschen Sie Ihre Versuche und Ihr Testen in diesem Editor und erstellen Sie ein Pixel-Emoji. Belassen Sie die Bildgrösse bei 10 x 10 Pixel. Machen Sie ein Bildschirmfoto der fertigen Arbeit (Bild und "0-1-Code") und legen Sie diese auf OneNote ab.+  - Löschen Sie Ihre Versuche und Ihr Testen in diesem Editor und erstellen Sie ein Pixel-Emoji. Belassen Sie die Bildgrösse bei $ 10 \cdot  10 $ Pixel. Machen Sie ein Bildschirmfoto der fertigen Arbeit (Bild und "0-1-Code") und legen Sie diese auf OneNote ab.
   - Zusatz: Es gibt eine ganze Kunstszene, welche sich der Pixel-Art verschrieben hat. Suchen Sie kurz auf dem Netz nach Beispielbildern. Wenn Sie Zeit haben, können Sie dies [[https://www.pixilart.com/draw?ref=home-page   | hier]] selber ausprobieren!   - Zusatz: Es gibt eine ganze Kunstszene, welche sich der Pixel-Art verschrieben hat. Suchen Sie kurz auf dem Netz nach Beispielbildern. Wenn Sie Zeit haben, können Sie dies [[https://www.pixilart.com/draw?ref=home-page   | hier]] selber ausprobieren!
   - Welche der obigen Fragen können bereits beantwortet werden und welche nicht? Diskutieren Sie zu zweit!   - Welche der obigen Fragen können bereits beantwortet werden und welche nicht? Diskutieren Sie zu zweit!
Zeile 25: Zeile 28:
  
 === Pixel und der wahrnehmbare Farbraum === === Pixel und der wahrnehmbare Farbraum ===
- 
 Die Anzahl der Pixel, die wir mit einer Kamera aufnehmen und abspeichern können, hängt hierbei natürlich von der maximalen **Auflösung** der Kamera und vom **Speicherplatz** auf der SD-Karte (Speicherkarte) in der Kamera ab. Je mehr Pixel wir mit einer Kamera ablichten können, umso besser ist die Auflösung des Fotos. \\  Die Anzahl der Pixel, die wir mit einer Kamera aufnehmen und abspeichern können, hängt hierbei natürlich von der maximalen **Auflösung** der Kamera und vom **Speicherplatz** auf der SD-Karte (Speicherkarte) in der Kamera ab. Je mehr Pixel wir mit einer Kamera ablichten können, umso besser ist die Auflösung des Fotos. \\ 
 Natürlich ist bei diesem Beispiel nicht nur die Grösse der Pixel, sondern auch die Anzahl der Farben entscheidend. Auch mit den Farben in der analogen Natur stellt sich das gleiche Problem beim Digitalisieren. \\  Natürlich ist bei diesem Beispiel nicht nur die Grösse der Pixel, sondern auch die Anzahl der Farben entscheidend. Auch mit den Farben in der analogen Natur stellt sich das gleiche Problem beim Digitalisieren. \\ 
Zeile 40: Zeile 42:
   * Und von jeder Intensität kann der Mensch 200 verschiedene Helligkeitsstufen unterscheiden.    * Und von jeder Intensität kann der Mensch 200 verschiedene Helligkeitsstufen unterscheiden. 
 Das ergibt eine ungefähre Anzahl von 200 · 500· 200 = 20 Millionen Farbtönen, zwischen denen das Menschliche Auge unterscheiden kann.\\  Das ergibt eine ungefähre Anzahl von 200 · 500· 200 = 20 Millionen Farbtönen, zwischen denen das Menschliche Auge unterscheiden kann.\\ 
-Dies bedeutet für Bit und Bytes ungefähr 25 Bits (ein bisschen mehr als 4 Bytes), weil 2 <sup> 25</sup> über 33.5 Millionen gibt. Meist entscheidet man sich aber aus pratischen Gründen für 4 Byte, was 16'777'216 Farbtönen entspricht. Die fehlenden 3,22 Millionen Farben fallen auf und werden nicht als fehlend wahrgenommen. Die Farbtiefe von 4 Byte wird (in Datenblättern von Monitoren und in der Werbung) als True-Color bezeichnet.+Sehr oft wird für jeden Farbkanal der Rot-Grün-Blau-Codierung 8 Bit (ein Byte) an Farbinformation gespeichert. Dies ergibt dann eine Gesamtanzahl von $2^8 \cdot 2^8 \cdot 2^8 $ = $ (2^8)^3 $ = $2^{24} $. 
 +Dieses Ergebnis entspricht 16'777'216 Farbtönen. Die fehlenden rund 3,22 Millionen Farben fallen oft nicht auf und werden nicht als fast nie als fehlend wahrgenommen. Diese Farbtiefe wird (in Datenblättern von Monitoren und in der Werbung) als True-Color bezeichnet.
 \\  \\ 
 Hier ein kurzes interessantes Video, welches zeigen soll, wie subjektiv die Farbwahrnehmung ist. Somit ist die oben gemachte Abschätzung mit Vorsicht zu geniessen. Hier ein kurzes interessantes Video, welches zeigen soll, wie subjektiv die Farbwahrnehmung ist. Somit ist die oben gemachte Abschätzung mit Vorsicht zu geniessen.
Zeile 46: Zeile 49:
    
 === Farbtiefe === === Farbtiefe ===
-{{ :gf1:880px-punktdichte_farbtiefe.png?direct&200|https://upload.wikimedia.org/wikipedia/de/thumb/4/49/Punktdichte%2BFarbtiefe.svg/880px-Punktdichte%2BFarbtiefe.svg.png}}+{{ :gf1:880px-punktdichte_farbtiefe.png?direct&500|https://upload.wikimedia.org/wikipedia/de/thumb/4/49/Punktdichte%2BFarbtiefe.svg/880px-Punktdichte%2BFarbtiefe.svg.png}}
 Die Farbtiefe einer Grafik wird immer in Anzahl Bits angegeben und ist ein Mass für die Anzahl Farben, die eine Rastergrafik haben kann. Da wir bei unserem Beispiel oben in Auftrag 13 nur zwei Farben haben, reicht uns eine Farbtiefe von 1 Bit aus, um beide Farben zu codieren. Dies wären zum Beispiel die 0 für Weiss und die 1 für Schwarz. Die Farbtiefe einer Grafik wird immer in Anzahl Bits angegeben und ist ein Mass für die Anzahl Farben, die eine Rastergrafik haben kann. Da wir bei unserem Beispiel oben in Auftrag 13 nur zwei Farben haben, reicht uns eine Farbtiefe von 1 Bit aus, um beide Farben zu codieren. Dies wären zum Beispiel die 0 für Weiss und die 1 für Schwarz.
 Hätten wir eine Farbtiefe von 2 Bit gewählt, könnten wir schon 4 Farben codieren (00, 01, 10 und 11 für jeweils unterschiedliche Farben). Bei einer Farbtiefe von 3 Bit hätten wir schon 8 mögliche Farben zur Verfügung.  Hätten wir eine Farbtiefe von 2 Bit gewählt, könnten wir schon 4 Farben codieren (00, 01, 10 und 11 für jeweils unterschiedliche Farben). Bei einer Farbtiefe von 3 Bit hätten wir schon 8 mögliche Farben zur Verfügung. 
 Je mehr Bit für die "Beschreibung" einer Farbe zur Verfügung stehen, je differenzierter können die Farben des Bildes sein. Je mehr Bit für die "Beschreibung" einer Farbe zur Verfügung stehen, je differenzierter können die Farben des Bildes sein.
-Wie weiter oben erwähnt, wird ein Bild mit Farbtiefe 24 Bit als "farbecht" (True-Color) bezeichnet, was dann bedeuten würde, dass jedes Pixel mit 4 Byte (Beispielsweise 01001010 11100011 01011001 00111111) codiert wird. +Wie weiter oben erwähnt, wird ein Bild mit Farbtiefe 24 Bit ( als "farbecht" bzw. True-Color) bezeichnet, was dann bedeuten würde, dass jedes Pixel mit pro Farbkanal 8 Bit an Farbcodierung hat und somit ein Pixel beispielsweise 01001010 11100011 01011001 als digitalisierte Farbe inne hätte. Grundsätzlich könnten rund 281 Billionen Farbmöglichkeiten.  
-Die Konsequenz einer grossen Farbtiefe ist der teilweise enorme Speicherbedarf. Hier wird eine verlustlose Kompression nötig (siehe weiter unten). +Die Konsequenz einer grossen Farbtiefe ist der teilweise enorme Speicherbedarf. Hier wird eine verlustlose Kompression nötig (Komprimierung siehe weiter unten). 
- +=== Farbmischungen === 
-===RGB heisst RotGrünBlau=== +Es gibt zwei verschiedene Möglichkeiten Farben zu mischen, sind:  
-RGB oder das andere....+**Additive Farbmischung** werden Farbmischungen genannt, wenn Lichtstrahlen zusammenkommen und sich überlagern, die Primärfarben sind Rot, Grün, Blau. **Subtraktive Farbmischung** sind Farbmischungen, wo Farben miteinander gemischt werden und dabei bestimmte Lichtstrahlen absorbiert und andere reflektiert werden, hier sind die Primärfarben andere, nähmlich Cyan, Magenta, Gelb. 
 +^Additive Farbsynthese ^Subtraktive Farbsynthese^ 
 +|Lichtfarbe | Körperfarbe| 
 +|Computerbildschirme | Drucken| 
 +|Fernseher |Buchdruck| 
 +|Regenbogen | Wasserfarben | 
 +|...|...| 
 +=== Das Farbformat RGB (Rot-Grün-Blau)===
 Die Forschung zum „Farbsehen“ begann im 18. Jahrhundert und führte im  19. Jahrhundert zur quantitativen Theorie der Dreifarbentheorie. Diese besagt, dass Farbreize durch das Mischen dreier Primärfarben nachgebildet werden können. Um diesen Farbreiz nachzubilden, reicht es aus, ein Zahlentripel zu speichern, das die Menge an rotem, grünem und blauem Licht beschreibt. Digital verwenden häufig die Ganzzahlen zwischen 0 und einer Maximalzahl wie 255. Die Forschung zum „Farbsehen“ begann im 18. Jahrhundert und führte im  19. Jahrhundert zur quantitativen Theorie der Dreifarbentheorie. Diese besagt, dass Farbreize durch das Mischen dreier Primärfarben nachgebildet werden können. Um diesen Farbreiz nachzubilden, reicht es aus, ein Zahlentripel zu speichern, das die Menge an rotem, grünem und blauem Licht beschreibt. Digital verwenden häufig die Ganzzahlen zwischen 0 und einer Maximalzahl wie 255.
  
-Farben können beispielsweise in RGB-Code, was soviel heisst wie Rot, Grün, Blau, codiert werden. Um Ihnen eine Idee davon zu geben können Sie [[https://informatik.schule.de/rgb/RGB_farbmischer.html | hier]] den Farbmischer ausprobieren – Stellen Sie auf «binär» um! Beispielsweise kann die Farbe "Lila" {{:gf1:farbe_codieren.png?100|}} durch den RGB Code +{{ youtube>oQPYAyo74xE }} 
 +Farben können beispielsweise in RGB-Code, was soviel heisst wie Rot, Grün, Blau, codiert werden. Um Ihnen eine Idee davon zu geben können Sie [[https://informatik.schule.de/rgb/RGB_farbmischer.html | hier]] den Farbmischer ausprobieren – Stellen Sie auf «binär» um! Beispielsweise kann die Farbe "Lila" {{:gf1:farbe_codieren.png?20|}} durch den RGB Code 
 {{:gf1:farbe_codieren_rgb.png?100|}} als somit 100110110100110111011010<sub>2</sub> binär beschrieben werden. {{:gf1:farbe_codieren_rgb.png?100|}} als somit 100110110100110111011010<sub>2</sub> binär beschrieben werden.
  
 <WRAP nicebox green> <WRAP nicebox green>
-**Auftrag 14**\\ +**Auftrag 14** Fragen zum obigen Video\\ 
   - Informieren Sie sich, was der Unterschied zwischen "additiver" und "subtraktiver" Farbmischung ist und notieren Sie sich diese Erkenntnis in Ihr OneNote. Mit welcher Farbmischmethode wird in der Informatik gearbeitet?   - Informieren Sie sich, was der Unterschied zwischen "additiver" und "subtraktiver" Farbmischung ist und notieren Sie sich diese Erkenntnis in Ihr OneNote. Mit welcher Farbmischmethode wird in der Informatik gearbeitet?
-  - Erklären Sie in einfachen eigenen Worten einem Laien, was Farbtiefe und was+  - Welche verschiedenen Farbformate gibt es? Notieren Sie sich diese kurz und überprüfen Sie, in welchem Farbformat die gespeicherten digitalen Bilder die Farben gespeichert haben. 
 +  - Besuchen Sie den [[https://g.co/kgs/k4c3Z5 |Farbwähler]] und formulieren Sie drei Feststellungen zu den Farbformaten (Veränderung der einzelnen Parameter der Farbformate). 
 +  - Erklären Sie in einfachen eigenen Worten einem Laien, was der Begriff Farbtiefe bedeutet.
 \\ \\
-**Auftrag 18**+**Auftrag 15**
   - Arbeiten Sie die Aufgaben [[https://studio.code.org/s/pixelation/lessons/3/levels/1 |hier]] durch. Es geht darum erste Erfahrungen mit dem Codieren von Farben zu sammeln.    - Arbeiten Sie die Aufgaben [[https://studio.code.org/s/pixelation/lessons/3/levels/1 |hier]] durch. Es geht darum erste Erfahrungen mit dem Codieren von Farben zu sammeln. 
-  - Im folgenden ist ein Bild abgebildet. Dies wurde [[https://studio.code.org/s/pixelation/lessons/5/levels/1 | hier ]] erstellt. Bilden Sie dieses Bild möglichst genau nach.  +  - Im folgenden ist ein Bild abgebildet. Dies wurde [[https://studio.code.org/s/pixelation/lessons/5/levels/1 | hier ]] erstellt. Bilden Sie dieses Bild möglichst genau nach.  
-{{ :gf1:pixelation2.png?nolink&200 |}} Auf was muss geachtet werden? Notieren Sie kurz.+{{ :gf1:pixelation2.png?nolink&200 |}}  Bearbeiten Sie im Anschluss die folgenden Fragen:   
 +  * Was sind die zentralen Erkenntnisse in Bezug auf die Farbcodierung?  
 +  * Auf was muss geachtet werden beim Bedienen des Editors?  
 +  * Welche Überlegungen waren sehr hilfreich?  
 +  * Wie wurde getestet, um das geforderte Ergebnis zu erhalten?  
 +Notieren Sie dies in OneNote!
 </WRAP> </WRAP>
 +Somit sind die geläufigsten Farbformate:
 +  * Das RGB-Format, was drei Farbkanäle umfasst: Rot, Grün und Blau.
 +  * Das CMYK-Format, was vier Farbkanäle umfasst: Cyan, Magenta, Yellow und Black (Key). Dieses Format wird beispielsweise in Druckern verwendet.
 +  * Andere Farbformate, welche weniger verbreitet ist, beinhalten neben den Farben auch Parameter zur Leuchtdichte, Sättigung oder auch Farbton oder Farbigkeit.
  
 ==== Auflösung ==== ==== Auflösung ====
-  
 Die **absolute Auflösung** ist ein umgangssprachliches Mass für die Bildgröße einer Rastergrafik. Sie wird durch die Gesamtzahl der Pixel (Bildpunkte) oder durch die Anzahl der Spalten (Breite) und Zeilen (Höhe) einer Rastergrafik angegeben. Die **absolute Auflösung** ist ein umgangssprachliches Mass für die Bildgröße einer Rastergrafik. Sie wird durch die Gesamtzahl der Pixel (Bildpunkte) oder durch die Anzahl der Spalten (Breite) und Zeilen (Höhe) einer Rastergrafik angegeben.
 Beim Blumenbild zeigen die Informationen zum Foto 3456 × 2592 Pixel.  Beim Blumenbild zeigen die Informationen zum Foto 3456 × 2592 Pixel. 
  
-Die **relative Auflösung** eines Bildes wird in der Regel in „ppi“ (pixels per inch) angegeben und beschreibt, wie viele Pixel (digitale Bildpunkte) auf der Länge von einem inch oder auch Zoll gennant - was  2.54 cm entspricht - vorhanden sind. Diese relative Auflösung ist aber nicht zu verwechseln mit der absoluten Auflösung, welche die tatsächliche Pixel-Anzahl innerhalb des ganzen Bildes beschreibt.+Die **relative Auflösung** eines Bildes wird in der Regel in „ppi“ (Pixels per inch) angegeben und beschreibt, wie viele Pixel (digitale Bildpunkte) auf der Länge von einem Inch oder auch Zoll genannt - was  2.54 cm entspricht - vorhanden sind. 
  
 {{ :gf1:ppi_2.png?nolink&200|}} {{ :gf1:ppi_2.png?nolink&200|}}
  
-Diese relative Auflösung sagt erst etwas über die Bildqualität aus, wenn man sie in Bezug zur Darstellungsgrösse setzt. Ein Pixel als Einheit kann gross oder klein gewählt werden.+Diese relative Auflösung sagt erst etwas über die Bildqualität aus, wenn man sie in Bezug zur Darstellungsgrösse setzt. Ein Pixel als Einheit kann gross oder klein gewählt werden. Hier ein Beispiel:
  
 //Beispiel 1:// \\ //Beispiel 1:// \\
Zeile 88: Zeile 109:
  
 <WRAP nicebox blue> <WRAP nicebox blue>
-Pixel sind  +Ein kurzer Überblick über die bereits erarbeiteten Begriffe:\\  
-Die Farbtiefe bedeutet +  * Pixel: Das kleinste Element der digitalen Bilddarstellung. 
-Die menschliche Wahrnehmung umfasst +  * Die menschliche Wahrnehmung umfasst ungefähr 20 Millionen Farben. Eine Farbtiefe von $2^24$=$16,2$ Mio., wird als "vollwertig" angesehen und "True Color" genannt.  
-Die digitalen Farben könne in RGB oder in CYCn angegeben werden +  * Farbtiefe: Wie viele Bits pro Farbkanal sind für die Darstellung der Farbe reserviert? Die Anzahl Bits wird auf die Farbkanäle aufgeteilt und ist wird als Farbtiefe bezeichnet. Somit ist die Farbtiefe die eigentliche Menge der Farbabstufungen.  
-Die Auflösung bedeutet...+  * Farbformate: Die digitalen Farben könne in RGB oder in CMYK angegeben werden. 
 +  * Auflösung: Die Auflösung bedeutet, wie viele Pixel pro Masseinheit (meist inch) überhaupt gespeichert bzw. gedruckt werden. Dies hat einen Einfluss darauf, um wie viel das Bild vergrössert werden kann, ohne dass die Pixel zu gross werden und störend auf den Betrachter wirken (das Bild unscharf wird).
 </WRAP> </WRAP>
 +
 === Speicherbedarf === === Speicherbedarf ===
 Wie kann die Speichergrösse (der Speicherplatz) eines Bildes – ohne Kompressionen – bestimmt werden? Wie kann die Speichergrösse (der Speicherplatz) eines Bildes – ohne Kompressionen – bestimmt werden?
Zeile 100: Zeile 123:
 ^Farbtiefe ^Farbstufen ^Breite ^Länge ^Grösse in Bit ^Grösse in Byte ^Bemerkungen ^^ ^Farbtiefe ^Farbstufen ^Breite ^Länge ^Grösse in Bit ^Grösse in Byte ^Bemerkungen ^^
 |1 Bit| 2 Farbstufen |1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit : 8 = 0,36 Megabyte|| |1 Bit| 2 Farbstufen |1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit : 8 = 0,36 Megabyte||
-|8 Bit| 256 Graustufen|1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit · 8 : 8 = 2.88 Megabyte|Schwarzweissfotographie|| +|8 Bit| 256 Graustufen|1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit · 8 : 8 = 2.88 Megabyte | Schwarzweissfotographie|| 
-|24 Bit | 256 Abstufungen in Rot Grün Blau ergibt 16.7 Mio Farben |1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit · 24 : 8 = 8.4  Megabyte|Farbfotographie||+|24 Bit | 256 Abstufungen in Rot Grün Blau ergibt 16.7 Mio. Farben |1600 Pixel | 1800 Pixel| 2.8 Megapixel = 2.88. Megabit|  2,88 Megabit · 24 : 8 = 8.4  Megabyte | Farbfotographie||
  
  
-<WRAP center round todo 80%> +<WRAP nicebox green> 
-**Aufgabe 8**+**Auftrag 16**\\ 
 Gegeben ist die Rastergrafik (das Bild) mit einer absoluten Auflösung von 300 x 150 Pixeln. Beantworten Sie die folgenden Fragen schriftlich (Auf OneNote). Gegeben ist die Rastergrafik (das Bild) mit einer absoluten Auflösung von 300 x 150 Pixeln. Beantworten Sie die folgenden Fragen schriftlich (Auf OneNote).
 {{ :gf1:aufloesung_1.jpg?nolink&200 |}} {{ :gf1:aufloesung_1.jpg?nolink&200 |}}
-Wie gross ist der Speicherbedarf unter folgenden Annahmen: Es handelt sich um ein Schwarzweiss-Bild und  die Farbtiefe ist nur 1 Bit, das heisst 1 Bit Speicherplatz pro Pixel). Geben Sie Ihr Resultat in Bits (b), Bytes (B) und Kilobytes (KB) an! Bei diesem Beispiel ignorieren wir die Bytes für die Grössenangaben über das Bild. +Wie gross ist der Speicherbedarf unter folgenden Annahmen: Es handelt sich um ein Schwarzweiss-Bild und  die Farbtiefe ist nur 1 Bit (das heisst 1 Bit Speicherplatz pro Pixel). Geben Sie Ihr Resultat in Bits (b), Bytes (B) und Kilobytes (KB) an! Bei diesem Beispiel ignorieren wir die Bytes für die Grössenangaben über das Bild.\\ \\ \\  
-</WRAP> +**Auftrag 17**
-<WRAP center round todo 80%> +
-**Aufgabe 9**+
 Gegeben ist die folgende Rastergrafik (Bild) mit einer absoluten Auflösung von 1048 x 786 Pixeln.  Gegeben ist die folgende Rastergrafik (Bild) mit einer absoluten Auflösung von 1048 x 786 Pixeln. 
 Beantworten Sie die folgenden Fragen schriftlich (OneNote). Beantworten Sie die folgenden Fragen schriftlich (OneNote).
Zeile 125: Zeile 146:
  
 **Vektorgrafik** \\ **Vektorgrafik** \\
-Eine weitere Möglichkeit ist die Vektorgrafik. Dies sind Grafiken, die aus so genannten Vektoren (und dadurch aus Polygonen, Kreisen und anderen geometrischen Figuren) zusammenzusetzen und so abzuspeichern werden. Dieses Verfahren wird bei am Computer generierten Grafiken häufig eingesetzt. . //Dies sind die Bildateien mit der Endung  .eps, .svg und auch .ai.// \\  +Eine weitere Möglichkeit ist die Vektorgrafik. Dies sind Grafiken, die aus so genannten Vektoren (und dadurch aus Polygonen, Kreisen und anderen geometrischen Figuren) zusammenzusetzen und so abzuspeichern werden. Dieses Verfahren wird bei am Computer generierten Grafiken häufig eingesetzt. //Dies sind die Bilddateien mit der Endung  .eps, .svg und auch .ai.// \\  
  
 Hinter der Vektorgrafik steht eine ganz andere Idee und der Unterschied zwischen beiden Ideen versteht man am besten, wenn man einmal versucht ein Objekt zum einen nur aus Punkten/Pixeln (Rastergrafik) und zum anderen dasselbe Objekt nur aus //Vektoren// zu zeichnen.  Hinter der Vektorgrafik steht eine ganz andere Idee und der Unterschied zwischen beiden Ideen versteht man am besten, wenn man einmal versucht ein Objekt zum einen nur aus Punkten/Pixeln (Rastergrafik) und zum anderen dasselbe Objekt nur aus //Vektoren// zu zeichnen. 
 +
 +{{ youtube>4KPSGNarPjI }} * Video bis Minute 4:20 interessant\\
  
 Durch das Konzept der Vektorgrafik lassen sich die Bilder beliebig vergrössern, nicht jedes Pixel definiert ist, sondern die Figur an sich wird über Vektoren ( Pfeile oder "Linien" mit Richtung) beschrieben. Durch das Vergrössern und Verkleinern verändert sich das Verhältnis der Richtungen zwischen den Vektoren nicht. Dadurch wird auch durch starken Hineinzoomen keine Unschärfe entstehen, denn der Computer berechnet die Grafik nach jedem Zoom wieder neu berechnet und korrekt, und das Bild behält die Schärfe. Durch das Konzept der Vektorgrafik lassen sich die Bilder beliebig vergrössern, nicht jedes Pixel definiert ist, sondern die Figur an sich wird über Vektoren ( Pfeile oder "Linien" mit Richtung) beschrieben. Durch das Vergrössern und Verkleinern verändert sich das Verhältnis der Richtungen zwischen den Vektoren nicht. Dadurch wird auch durch starken Hineinzoomen keine Unschärfe entstehen, denn der Computer berechnet die Grafik nach jedem Zoom wieder neu berechnet und korrekt, und das Bild behält die Schärfe.
 Für ein Abspeichern eines Vektors genügt es zu wissen, bei welchen Koordinaten der Vektor anfängt und aufhört, welche Dicke und welche Farbe der Vektor hat.  Für ein Abspeichern eines Vektors genügt es zu wissen, bei welchen Koordinaten der Vektor anfängt und aufhört, welche Dicke und welche Farbe der Vektor hat. 
  
-<WRAP center round todo 80%> +<WRAP nicebox green> 
-**Aufgabe 10** \\+**Auftrag 18** \\
   * Vergleichen Sie die beiden Graphiken, indem Sie im Browser mit den Tasten ''Ctrl'' und ''+'' bzw. ''Ctrl'' und  ''-'' zoomen. (Für MAC: ''Command'' plus Umschalt plus ''+'' bzw. ''Command'' plus Umschalt plus  ''-''.) Sie können auch via Ansicht --> Zoom arbeiten.   * Vergleichen Sie die beiden Graphiken, indem Sie im Browser mit den Tasten ''Ctrl'' und ''+'' bzw. ''Ctrl'' und  ''-'' zoomen. (Für MAC: ''Command'' plus Umschalt plus ''+'' bzw. ''Command'' plus Umschalt plus  ''-''.) Sie können auch via Ansicht --> Zoom arbeiten.
  
Zeile 146: Zeile 169:
 </WRAP> </WRAP>
  
-:!: ein gutes Erklärvideo dazu finden Sie [[https://www.youtube.com/watch?v=p2thSkOa_Xg&ab_channel=BuddyMedia |hier]] 
  
 ====Datenkompression==== ====Datenkompression====
Zeile 157: Zeile 179:
 Hier ein [[https://youtu.be/Md_6rUgZMsc|Lernvideo]] dazu. Hier ein [[https://youtu.be/Md_6rUgZMsc|Lernvideo]] dazu.
 Eine verlustfreie Komprimierung ist das Erzeugen eines Datenpaketes, welches eine bitidentische Rekonstruktion des Datensatzes (Audiosignal, Bild, Text, anders) erlauben. Eine verlustfreie Komprimierung ist das Erzeugen eines Datenpaketes, welches eine bitidentische Rekonstruktion des Datensatzes (Audiosignal, Bild, Text, anders) erlauben.
-<WRAP center round todo 80%> +<WRAP nicebox green> 
-**Aufgabe 11**+**Auftrag 19**
 Versuchen Sie die folgenden Daten so zu schreiben, dass Sie mit möglichst wenig Zeichen auskommen, wir möchten dadurch eine verlustfreie Kompression der Zeichenkette durchführen? Versuchen Sie die folgenden Daten so zu schreiben, dass Sie mit möglichst wenig Zeichen auskommen, wir möchten dadurch eine verlustfreie Kompression der Zeichenkette durchführen?
   - 0 0 0 0 0 1 0 0 0 0 1 1 1 1 1 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 1 1 1 0 0 1    - 0 0 0 0 0 1 0 0 0 0 1 1 1 1 1 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 1 1 1 0 0 1 
Zeile 168: Zeile 190:
 </WRAP> </WRAP>
  
-Es gibt viele verschiedene Kompressionsalgorithmen, der in der Aufgabe verwendeter Algorithmus ist vermutlich die [[https://de.wikipedia.org/wiki/Laufl%C3%A4ngenkodierung|Lauflängencodierung]].  +Es gibt viele verschiedene **Kompressionsalgorithmen**, der in der Aufgabe verwendeter Algorithmus ist vermutlich die [[https://de.wikipedia.org/wiki/Laufl%C3%A4ngenkodierung|Lauflängencodierung]].  
-In den Zusatzaufgaben können Sie noch die Huffmancodierung erarbeiten.+In den Zusatzaufgaben können Sie noch die Huffman Codierung erarbeiten.
  
 <accordion> <accordion>
Zeile 175: Zeile 197:
 <WRAP center round todo 80%> <WRAP center round todo 80%>
 **Zusatzaufgabe** **Zusatzaufgabe**
-Schauen Sie das [[https://youtu.be/qE4mEwHL62c|Video]]und codieren Sie den Satz «Heute haben wir Schule» mit der Huffmancodierung. +Schauen Sie das [[https://youtu.be/qE4mEwHL62c|Video]]und codieren Sie den Satz «Heute haben wir Schule» mit der Huffman Codierung. 
  
 Lösung 110110011000111011111010010010110110110111001011000101 \\  Lösung 110110011000111011111010010010110110110111001011000101 \\ 
Zeile 185: Zeile 207:
 ===Verlustbehaftete Komprimierung=== ===Verlustbehaftete Komprimierung===
 Eine verlustbehaftete Komprimierung ist das Erzeugen eines Datenpaketes, welches eine Datenreduktion beinhaltet und so nur gezielt die relevanten Informationen und oft vermindert präzise abgespeichert werden. Weniger wichtige Informationen werden unwiderruflich verworfen. \\ Eine verlustbehaftete Komprimierung ist das Erzeugen eines Datenpaketes, welches eine Datenreduktion beinhaltet und so nur gezielt die relevanten Informationen und oft vermindert präzise abgespeichert werden. Weniger wichtige Informationen werden unwiderruflich verworfen. \\
-== Vom Bild zur Kompression ==+** Vom Bild zur Kompression **\\ 
 {{ :gf1:wahrnehmung.png?nolink&200|}} {{ :gf1:wahrnehmung.png?nolink&200|}}
 Ein «echtes» Bild entsteht, indem Licht auf die Netzhaut eines menschlichen Auges trifft. Die Zellen in der Netzhaut erzeugen elektrische Signale, welche durch Nervenbahnen in das Gehirn geleitet werden. Diese Signale werden ausgewertet und im Bewusstsein entsteht ein Bild (eine Wahrnehmung).  Ein «echtes» Bild entsteht, indem Licht auf die Netzhaut eines menschlichen Auges trifft. Die Zellen in der Netzhaut erzeugen elektrische Signale, welche durch Nervenbahnen in das Gehirn geleitet werden. Diese Signale werden ausgewertet und im Bewusstsein entsteht ein Bild (eine Wahrnehmung). 
-== Optische und akustische Täuschungen ==+** Optische und akustische Täuschungen **\\ 
 Es gibt eine riesige Flut von Informationen, welche durch das Auge als über die Netzhaut als Signale ins Gehirn geleitet werden. Damit der Übersetzungsprozess von Sinneseindrücken zu Bildern schnell funktioniert, gibt es Hilfsmechanismen. Beispielsweise kann vereinfacht gesagt werden: Es gibt eine riesige Flut von Informationen, welche durch das Auge als über die Netzhaut als Signale ins Gehirn geleitet werden. Damit der Übersetzungsprozess von Sinneseindrücken zu Bildern schnell funktioniert, gibt es Hilfsmechanismen. Beispielsweise kann vereinfacht gesagt werden:
 „//Es kommt gar nicht auf jede einzelne Information an – wenn der grobe Eindruck eine bekannte Information nahelegt, ergänzt das Gehirn den Rest//“. Optische und akustische Täuschungen nutzen genau diese Mechanismen, um falsche Interpretationen entstehen zu lassen.  „//Es kommt gar nicht auf jede einzelne Information an – wenn der grobe Eindruck eine bekannte Information nahelegt, ergänzt das Gehirn den Rest//“. Optische und akustische Täuschungen nutzen genau diese Mechanismen, um falsche Interpretationen entstehen zu lassen. 
Zeile 205: Zeile 227:
   * nebeneinander liegende Pixel, die sich wenig unterscheiden, durch gleiche Pixel gleicher Farbe ersetzen und gleiches für die Töne.   * nebeneinander liegende Pixel, die sich wenig unterscheiden, durch gleiche Pixel gleicher Farbe ersetzen und gleiches für die Töne.
  
-<WRAP center round todo 80%> +<WRAP nicebox green> 
-**Aufgabe 12**+**Auftrag 20**
   - Vereinfachen Sie den Code des folgenden Bildes, wenden Sie dabei die //Komprimierungsregeln// "weiße Pixel bleiben unverändert" und "schwarze Pixel bleiben schwarz, wenn ihr linker und rechter Nachbar auch schwarz war, sonst werden sie weiß" an. Wie viel kürzer wird der "Bit-Code".{{ :gf1:kompressiona1.png?nolink&400 |}} Für den Editor: 000010100000110000000001111111111110000000011000000001100001110110000101111000000111100000011110000101111000011101100000000110000000011111111111   - Vereinfachen Sie den Code des folgenden Bildes, wenden Sie dabei die //Komprimierungsregeln// "weiße Pixel bleiben unverändert" und "schwarze Pixel bleiben schwarz, wenn ihr linker und rechter Nachbar auch schwarz war, sonst werden sie weiß" an. Wie viel kürzer wird der "Bit-Code".{{ :gf1:kompressiona1.png?nolink&400 |}} Für den Editor: 000010100000110000000001111111111110000000011000000001100001110110000101111000000111100000011110000101111000011101100000000110000000011111111111
   - Vereinfachen Sie den Code des folgenden Bildes, verwenden Sie dabei die Regel "Es wird die Farbtiefe auf nur 3 Bit gesenkt und somit gibt es nur noch 1 Bit pro Farbkanal" an. {{ :gf1:kompressiona2.png?nolink&400 |}}   - Vereinfachen Sie den Code des folgenden Bildes, verwenden Sie dabei die Regel "Es wird die Farbtiefe auf nur 3 Bit gesenkt und somit gibt es nur noch 1 Bit pro Farbkanal" an. {{ :gf1:kompressiona2.png?nolink&400 |}}
-  - Wie viel kürzer wird der Bit-Code, wenn er nun auf die gleiche Weise wie bei Aufgabe 11 komprimiert wird? Was passiert, wenn er zweimal komprimiert wird? \\ +  - Wie viel kürzer wird der Bit-Code, wenn er nun auf die gleiche Weise wie bei Aufgabe 19 komprimiert wird? Was passiert, wenn er zweimal komprimiert wird? \\ 
 [[http://netmedia.zju.edu.cn/multimedia2013/books/data.compression.complete.reference.4th.pdf | Referenz die Seite 19-23 und 32, zum Nachlesen und weiter vertiefen]] [[http://netmedia.zju.edu.cn/multimedia2013/books/data.compression.complete.reference.4th.pdf | Referenz die Seite 19-23 und 32, zum Nachlesen und weiter vertiefen]]
 +
 +[[https://studio.code.org/s/pixelation/lessons/3/levels/1 |Editor]]
 </WRAP> </WRAP>
  
Zeile 219: Zeile 243:
 === Eine Frage der Qualität? === === Eine Frage der Qualität? ===
  
-Die beiden Beispiele aus der Fotografie und der Musik zeigen deutlich auf, dass es unmöglich ist, ein analoges Signal (ob nun Bild oder Ton) ganz genau digital abzuspeichern. Beim Digitalisieren von analogen Signalen entsteht also immer ein Verlust an Informationen. Dieser Infomrationsverlust fällt jedoch nicht immer gleich schwer ins Gewicht. In vielen Fällen bietet das digitale Speichern und Verarbeiten von analogen Signalen einfach so viele Vorteile, diese die Nachteile des Verlustes überwiegen. +Die beiden Beispiele aus der Fotografie und der Musik zeigen deutlich auf, dass es unmöglich ist, ein analoges Signal (ob nun Bild oder Ton) ganz genau digital abzuspeichern. Beim Digitalisieren von analogen Signalen entsteht also immer ein Verlust an Informationen. Dieser Informationsverlust fällt jedoch nicht immer gleich schwer ins Gewicht. In vielen Fällen bietet das digitale Speichern und Verarbeiten von analogen Signalen einfach so viele Vorteile, diese die Nachteile des Verlustes überwiegen. 
  
  
Zeile 227: Zeile 251:
 <panel title="Neues Wissen - Fragen zu Lernzielen"> <panel title="Neues Wissen - Fragen zu Lernzielen">
    
-  * **Rastergrafik:** Ich kann ein Verfahren, wie Bild in einer Rastergrafik digitalisiert werden kann und kann dies an einem Beispiel erkennen, das gegebene Beispiel deuten, verändern und auch erklären. Ich kann die Vorteile und Nachteile dieser Bilddigitalisierungsart nennen.  Ich kann kann erklären, was die Schwierigkeit beim Digitalisieren von Farben ist, kenne die drei Farbkanäle RGB und die damit verbundene Codierung in Binärzahlen.+  * Ich kann Begriffe wie Farbtiefe, Pixel, Auflösung, Kompression  oder Farbraum in eigenen Worten beschreiben. 
 +  * **Rastergrafik:** Ich kann ein Verfahren, wie Bild in einer Rastergrafik digitalisiert werden kann und kann dies an einem Beispiel erkennen, das gegebene Beispiel deuten, verändern und auch erklären.  
 +  * Ich kann die Vorteile und Nachteile dieser Bilddigitalisierungsart nennen.  Ich kann kann erklären, was die Schwierigkeit beim Digitalisieren von Farben ist, kenne die drei Farbkanäle RGB und die damit verbundene Codierung in Binärzahlen.
   * **Vektorgrafik:** Ich kann ein Verfahren zum erstellen einer Vektorgraphik nennen und kann dies an einem Beispiel erkennen, dieses Beispiel deuten, verändern und auch erklären. Ich kann die Vorteile und Nachteile dieser Bilddigitalisierungsart nennen.   * **Vektorgrafik:** Ich kann ein Verfahren zum erstellen einer Vektorgraphik nennen und kann dies an einem Beispiel erkennen, dieses Beispiel deuten, verändern und auch erklären. Ich kann die Vorteile und Nachteile dieser Bilddigitalisierungsart nennen.
   * **Kompression** Ich kann erklären, was 'Kompression' bedeutet, was der Grundgedanken des verlustfreien und des verlustbehafteten Komprimierens ist und wie dies in einem einfachen Beispiel umgesetzt werden kann.   * **Kompression** Ich kann erklären, was 'Kompression' bedeutet, was der Grundgedanken des verlustfreien und des verlustbehafteten Komprimierens ist und wie dies in einem einfachen Beispiel umgesetzt werden kann.
 +  * Ich kenne verschiedene Farbformate, verschiedene Bildformate (Rastergraphikformate und Vektorgraphikformate)
  
 </panel> </panel>
  • gf1/analogdigitalbilder.1691991370.txt.gz
  • Zuletzt geändert: 2023/08/14 07:36
  • von marroc