Folien zur "Vorlesung" Computergrafik im Rahmen des Grundkurses Informatik Klasse 12 des sächsischen Gymnasiums

1. Computergrafik

2. 23.01.17 2 | 44
Gliederung
1. Pixelgrafik
●
Einführung
●
Farbräume, Farbtiefe
●
Unkomprimierte und komprimierte Bildformate
●
Bildbearbeitung
2. Vektorgrafik
●
Einführung
●
Vergleich Pixel- und Vektorgrafik
●
Dateiformate
●
Darstellung von Vektorgrafiken
3. Zusammenfassung

3. 23.01.17 3 | 44
(1)

4. 23.01.17 4 | 44
Pixelgrafik
(2)

5. 23.01.17 5 | 44
Grundlagen - Pixelgrafik
Pixel:
X = 117 Rot = 36%
Y = 457 Grün = 33%
Blau = 29%
(3)

6. 23.01.17 6 | 44
Auflösung von Pixelgrafiken
Mehrfachbedeutung:
● Die Auflösung einer Rastergrafik gibt die Anzahl der Bildpunkte
(Gesamtzahl oder in X- und Y-Richtung) wieder.
● Auflösung ist auch die Punktdichte je Längeneinheit (meist DPI -
„dots per inch“).
Beispiele:
● Digitalphoto 2560x1920 Bildpunkte (~5 MegaPixel [MP])
4256x2848 Bildpunkte (~12MP)
● Monitor 1280x1024 Bildpunkte (19“, 4:3, ~1,3MP)
1920x1080 Bildpunkte (24“, 19:9, ~2,1MP)
● Drucker 600DPI (=4962x7014 auf A4, ~34,8MP)

7. 23.01.17 7 | 44
Rechenbeispiele
zur Veranschaulichung
● Um ein Foto einer 12-MegaPixel-Kamera auf einem Monitor (19
Zoll, 1280x1024) im Verhältnis 1:1 darzustellen, müsste dieser 1,6m
breit sein.
● Auf ein A4-Blatt passen bei 1.200 DPI Druckauflösung 21 Bilder
(3x7) einer 5MP-Digitalkamera im Verhältnis 1:1.
ABER: Bilder können ohne merklichen Qualitätsverlust größer
gedruckt werden!
● Ein Computermonitor mit 24 Zoll – 1920x1080 hat eine
physikalische Auflösung (Punktdichte) von 96DPI.

8. 23.01.17 8 | 44
Auflösung – Anwendung bei
Pixelgrafiken
Bsp.: QR-Code:
1 0 1 0 0 1 1
„Sieben mal 1 oder 0“
→ Sieben mal zwei Werte
→ Sieben Bit
Wie viele Werte können farbige Pixelgrafiken annehmen?
Dazu nötig: Farbräume, Farbwerte
(4)

9. 23.01.17 9 | 44
Farbräume – Übersicht
● Informationen jedes Pixels: Koordinaten sowie Farbwert.
● Farbwerte sind „Koordinaten“ in einem Farbraum.
● Grundsätzliche Unterscheidung nach additiven und subtraktiven
Farbräumen:
Additive Farbmischung Subtraktive Farbmischung
(5) (6)

10. 23.01.17 10 | 44
Farbräume – Additive
Farbmischung
● Farbwerte „addieren“ sich,
● Farbe beruht auf Farbwahrnehmung,
● Überlagerung aller Farben ergibt Weiß,
● Anwendung bei selbst leuchtenden
Bildquellen wie Monitore, Fernseher,...
⟨Rot;Grün;Blau⟩
RGB-Farbmodell:
● Farbwert ist ein Vektor:
● Angabe der Werte als %, Dezimal (0..255) oder
Hexadezimal (00 .. FF)
● Bspw. HTML-Farbangabe #00A0FF:
0% Rot, 63% Grün, 100% Blau

11. 23.01.17 11 | 44
Farbräume –
Subtraktive Farbmischung
● Farbwerte „subtrahieren“ sich,
● Farbe beruht auf physikalischem Effekt
(Farbabsorbtion),
● Überlagerung aller Farben ergibt Schwarz
(fehlen aller Farben),
● Anwendung bei angeleuchteten Bildquellen wie
Papier (Drucker), Photos
〈Cyan;Magenta;#Gelb#;Schwarz〉
CMYK-Farbmodell:
● Farbwert ist ein Vektor:

12. 23.01.17 12 | 44
Farbräume – Pixelgrafiken
Rastergrafiken im RGB-Farbmodell im
Alltag:
● Pixelgrafiken, (Digitale) Photos
(Software)
● Computerbildschirme,
Digitalkameras (Hardware)
Rastergrafiken im CMYK-Farbmodell
im Alltag:
● Fotobearbeitung zum Druck
(Software)
● Farbdrucker (Hardware)
RGB
CMYK
(7)

13. 23.01.17 13 | 44
Farbtiefe
Die Farbtiefe ist ein Maß für die Anzahl der möglichen Farbwerte eines
Pixels.
Beispiele:
● QR-Code:
Schwarzweiß → 1 Bit
→ 2 Farben
● RGB:
3 Farben mit i.d.R. je 256 Werten → 24 Bit
→ ca. 16 Mio verschiedene Farben
● CMYK:
4 Farben mit i.d.R. Je 256 Werten → 32 Bit
→ ca. 4 Mrd. Verschiedene Farben

14. 23.01.17 14 | 44
„Unkomprimierte“ Bildformate1)
● Windows Bitmap – „Einfachstes“ Bildformat
● Speicherung der Farbwerte aller Pixel in einem Bild „nacheinander“
● Farbwerte: <R;G;B>, in der Regel im Bereich 0..255
→ 1 Byte je Farbe (1 Byte = 8 Bit ↔ 28
= 256 versch. Werte)
→ 24 Bit für ein Pixel,
● Weitere Farbtiefen: 1, 4, 8, 16, 32 Bit,
● Dateiendung: BMP
● Zusätzlich: TIFF (Auch CMYK-Farbraum möglich)
….. D2D7D3 B2B3AB 7C766A .....
1) Auch Bitmap-Dateien werden lauflängenkomprimiert, daher ist diese Aussage i.e.S. nicht ganz korrekt!

15. 23.01.17 15 | 44
Unkomprimierte Bildformate
● Rechenbeispiel bei einer Digitalkamera mit 12 MegaPixel: (4256 x
2848 Bildpunkte):
4256*2848 Ä 256 Ä 256 Ä 256 =
12,12 MegaPixel * 24 Bit = 34,68 MegaByte
(Je Bild!)
(Vergleich: Auf eine CD würden dann 20 Bilder passen)
● Wie kann die Speichergröße von Bildern reduziert werden?
Verlustbehaftet
(JPEG)
Verlustfrei
(PNG)

16. 23.01.17 16 | 44
Verlustbehaftete Kompression
● Verlustbehaftetes Bildformat?
NEIN!
Verlustbehaftete Kompression ist
„schlaues“ weglassen von Information
→ „Infrmtk“(8)

17. 23.01.17 17 | 44
Verlustbehaftete Kompression
– JPEG-Format
● Sehr komplexes, verlustbehaftetes Verfahren
● Dateiendung: JPG / JPEG (Joint Photographic Experts Group)
● Vorteile: Sehr gute Qualität trotz geringer Bildgröße
● Nachteile: Informationsverlust, „JPEG-Artefakte“
60% 25% 0%
Verschiedene JPEG-Qualitätsstufen
JPEG-Artefakte bei
abrupten
Farbübergängen

18. 23.01.17 18 | 44
Verlustfreie Kompression
● Änderung gegenüber verlustbehafteter Kompression:
Es stehen alle Informationen weiterhin zur Verfügung
● Einfaches Beispiel → Lauflängencodierung:
000001101000111010111101
5x0,2x1;1x0;1x1;3x0;3x1;1x0;1x1;1x0;4x1;1x0;1x1
50 21 0 1 30 31 0 1 0 41 0 1
● Vorteile: keine Artefakte, kein Qualitätsverlust
● Nachteile: Wie gut ist das Kompressionsverfahren?
24
17

19. 23.01.17 19 | 44
Verlustfreie Kompression
– PNG-Format
● Verlustfreies Kompressionsverfahren
● Dateiendung PNG (Portable Network Graphics)
● Zusätzlich: Wert für Transparenz der Pixel festlegen
● Vorteile: Verlustfreie Kompression
● Nachteile: Bei Fotos wird nicht dieselbe Kompressionsrate wie bei
JPEG erreicht; keine CMYK-Unterstützung
PNG-Bild (Würfel) mit Transparenz vor verschiedenen Hintergründen
(9)

20. 23.01.17 20 | 44
Dateiformate –
Zusammenfassung
● Dateiendung: GIF
● „Graphics Interchange Format“
● Analog PNG (schlechtere
Kompression)
● Animationen durch Bildfolgen
möglich
● Noch ein Format?
(10)

21. 23.01.17 21 | 44
Dateiformate –
Zusammenfassung
Dateiendung BMP JPEG PNG
Kompression Keine Verlustbehaftet Verlustfrei
Vorteil(e) Kein Informations-verlust Sehr gute Kompression
Kein Informations-
verlust, gute
Kompression
Nachteil(e) Sehr große Dateien
Qualitäts-
verschlechterung bei
Kompression
Bei Fotos etwas
schlechtere Kompression
als JPEG,
Kein CMYK
Besonder-heiten
Bildbeschreibung
einfügbar (Metadaten)
Transparenz möglich

22. 23.01.17 22 | 44
Bildbearbeitung –
AUSWAHL von Grundfunktionen
Transformationen
● Skalieren
● Zuschneiden
● Drehen / Spiegeln
● Perspektive
(11)

23. 23.01.17 23 | 44
Bildbearbeitung –
AUSWAHL von Grundfunktionen
Transformationen
● Skalieren
● Zuschneiden
● Drehen / Spiegeln
● Perspektive
Filter
● Weichzeichnen
● Verbessern
● Rauschen
● Belichten, Schattieren

24. 23.01.17 24 | 44
Bildbearbeitung –
AUSWAHL von Grundfunktionen
Transformationen
● Skalieren
● Zuschneiden
● Drehen / Spiegeln
● Perspektive
Filter
● Weichzeichnen
● Verbessern
● Rauschen
● Belichten, Schattieren
Farbfunktionen
● Farbton und Sättigung
● Helligkeit und Kontrast

25. 23.01.17 25 | 44
Erweiterung Pixelgrafik:
Ebenen / Layer
1 23 4
Problem: bei der Bilderstellung / -komposition:
● Häufig mehrere Bildquellen zur Erstellung eines Bildes,
● Überlagerung von Bildern / Bildausschnitten
● Problem der Nachbearbeitung, wenn Inhalte „verschmelzen“
Lösung: Einführen von Ebenen (Layern) in Bildern
● Eigenschaften: Position (Tiefe), Sichtbarkeit (Transparenz), Art der
Überlagerung (Blendenmodus)
Beispiel:

26. 23.01.17 26 | 44
Bildgenerierung durch
Überlagerung von Ebenen

27. 23.01.17 27 | 44(12)
Ergebnis der
Ebenenüberlagerung

28. 23.01.17 28 | 44
Pixelgrafik –
Projekt 'Blinkenlights'
(13)

29. 23.01.17 29 | 44
Zusammenfassung –
Eigenschaften von Pixelgrafiken
● Je Pixel eines Bildes wird ein Farbwert und ggf. ein
Transparentzwert abgelegt,
● in der Regel werden Pixelgrafiken komprimiert (verlustfrei oder
verlustbehaftet),
● gängige Bildformate sind JPEG und PNG, diese sollten verwendet
werden
● Erweiterung durch Animation möglich: GIF-Dateiformat
● Ebenen zur professionelleren Bildbearbeitung →
anwendungsspezifische Dateiformate (PS, XCF...)
Zur Selbstüberprüfung: Definieren / Erläutern Sie die grün dargestellten Begriffe /
Abkürzungen!

30. 23.01.17 31 | 44
Fazit –
Probleme bei Rastergrafiken
● Für jedes einzelne Pixel müssen Farbwerte und ggf.
Transparenzinformationen abgelegt werden
→ Hoher Speicherbedarf
● Vergrößerung ergibt immer Qualitätsverlust
→ Qualitätsverlust
● In der Regel können einmal vorgenommene Änderungen nur
schlecht Rückgängig gemacht werden
→ Bearbeitbarkeit
DAHER:

31. 23.01.17 32 | 44
Vektorgrafik
(14)

32. 23.01.17 33 | 44
Vergleich Pixel-
und Vektorgrafik
Pixelgrafik Vektorgrafik
3-fache
Vergrößerung
9-fache
Vergrößerung
Original

33. 23.01.17 34 | 44
Grundlegende Idee
x
y
100
50
● „Zeichne eine rote Linie von Punkt (0;0) zu Punkt (100;50).“
<LINE
x1="0" y1="0"
x2="100" y2="50"
stroke-width="1px"
stroke="red"
/>
● Gespeichert werden also Koordinaten eines Vektors (mit
zusätzlichen Angaben zu Farben etc.).

34. 23.01.17 35 | 44
Vergleich Pixel-
und Vektorgrafik
Pixelgrafik:
● Farbwerte einzelner Pixel werden gespeichert
Vektorgrafik:
● Es werden Koordinaten gespeichert,
● zusätzlich Linienstärken, Füllmuster, Farben/ Farbverläufe...
….. D2D7D3 B2B3AB 7C766A .....
<CIRCLE
cx="200" cy="200" r="100"
stroke-width="5px" stroke="blue"
fill="red"
/>

35. 23.01.17 36 | 44
Dateiformate –
SVG (Scaleable Vector Graphics)
Grundformen:
● Rechteck ....... <rect../>
● Kreis...............<circle../>
● Ellipse.............<ellipse../>
● Linie............... <line../>
● Polylinie..........<polyline../>
● Polygon.......... <polygon../>
● Pfad............... <path../>
PolyliniePolygon
Pfad

36. 23.01.17 37 | 44
Beispiel
(15)

37. 23.01.17 38 | 44
Darstellen von Vektorgrafiken
● Problem: Darstellen (Bildschirm, Drucker etc.) erfordert
Umrechnen der Vektorformat in Pixelformat
● Diese Berechnung muss bei jeder Veränderung (Zoom, Drehen,
Bewegung, ..) neu erfolgen (vgl. Computerspiele).
<POLYGON points="0,0 50,50 0,50" />
(0,0)
(0,50) (50,50)

38. 23.01.17 39 | 44
Beispiel: LibreOffice Draw

39. 23.01.17 40 | 44
Erweiterung –
3D-Vektorgrafiken
● Bisher: Koordinaten der Form (100,0)
● Erweiterung: Dreidimensionaler Raum → (100, 25, 50)
x
y
z

40. 23.01.17 41 | 44
Zusammenfassung –
Eigenschaften von Vektorgrafiken
Vorteile:
● Kein Qualitätsverlust beim Vergrößern
● Deutlich geringere Datenmengen
● Nachbearbeitbarkeit sichergestellt
Nachteile:
● Nicht geeignet für Bilder wie Photos
● Bei komplexen Grafiken oder Animationen: Enormer
Rechenaufwand zum Darstellen (=Umwandeln in
Pixeldarstellung)

41. 23.01.17 42 | 44
Fazit – Grafikanwendungen
für Vektorgrafiken
Inkscape
(Vektorbearbeitung für das SVG-Format)
LibreOffice
Draw (Zeichenprogramm), Impress
(Präsentationsprogramm)
LibreCAD
(2D- und 3D-CAD-Werkzeug)

42. 23.01.17 43 | 44
Begriffe
Vektorgrafik
Farbraum
Auflösung
Pixelgrafik
Ebene
Polygon
Klasse – Objekt – Attribut
Animation
Transparenz
Punktdichte
Additiv
Subtrativ
Verlustfrei
VerlustbehaftetJPEG-Artefakte
Bitmap
PNG
GIF
SVG

43. 23.01.17 44 | 44
Was muss ich können?
● Erläutern Sie den Unterschied zwischen additiven und subtraktiven Farbmischsystem. Geben Sie Beispiele für die
Einsatzgebiete der beiden Systeme an.
● Erläutern Sie die wesentlichen Unterschiede zwischen Vektor- und Pixelgrafiken. Nennen Sie Vor- und Nachteile
der Systeme.
● Nennen Sie wenigstens zwei verschiedene Farbmodelle und deren Einsatzgebiete.
● Ordnen Sie die folgenden Auflösungen der entsprechenden Hardware zu und geben Sie an, um welche Art der
Auflösung (Pixelanzahl oder Pixel je Längeneinheit) es sich handelt.
Drucker 1920x1080
Digitalkamera 600DPI
Monitor 5 MegaPixel
● Nennen sie wenigstens drei verschiedene Bildformate (bspw. Anhand der Dateiendungen) für Pixelgrafiken und
geben Sie jeweils die Besonderheiten an.
● Geben Sie drei Beispiele für Grundfunktionen der Bildbearbeitung bei Pixelgrafiken an.
● Erläutern Sie den Begriff „Ebenen“ bei der Bildbearbeitung.
● „Bei der Komprimierung von Pixelgrafiken verlieren diese stets an Qualität“. Beziehen Sie zu dieser Aussage
Stellung.
● Folgende Aufgaben sind zu erledigen:
(a) ein Diagramm für eine Präsentation ist zu entwerfen,
(b) das Bild eines Produktes ist für ein Werbetransparent abzuspeichern,
(c) Der Grundriss einer Wohnung ist auszudrucken.
Geben Sie für alle drei Aufgaben an, für welches Bildformat (Vektor/Pixelgrafik), welchen Dateityp und welches
Farbmischsystem (Zusatz: Welche Software) Sie Sich entscheiden würden. Begründen Sie Ihre Antwort.

44. 23.01.17 45 | 44
(1) http://voillusions.blogspot.de/2010/08/moving-eschers-waterfall-illusion.html
(2) http://www.flickr.com/photos/justin_case/2073294609/
(3) http://i.images.cdn.fotopedia.com/stuckincustoms-e5ae7130f5e132aa36b1016a66789562-
original/Countries_of_the_World/Asia/India/This_is_Secret.jpg
(4) http://upload.wikimedia.org/wikipedia/commons/9/9d/MicroQRCode.png
(5) http://upload.wikimedia.org/wikipedia/commons/e/e0/Synthese%2B.svg
(6) http://upload.wikimedia.org/wikipedia/commons/5/52/Synthese-.svg
(7) http://img.fotocommunity.com/Nature/Abstract-Nature/image-a21400791.jpg
(8) http://upload.wikimedia.org/wikipedia/commons/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg
(verändert)
(9) http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png
(10) http://mruttan.ca/norabeast.gif
(11) http://www.flickr.com/photos/nickgray/2434200018/lightbox/ (verändert)
(12) http://www.gimpusers.de/tutorials/fotos-verschwimmen-lassen (verändert)
(13) http://www.rhiz.eu/attachment-21858-en.html
(14) Inkscape – Beispieldateien (Nach der Installation im Inkscape-Ordner unter „examples“ zu finden) (verändert)
(15) Inkscape – Beispieldateien
Es wurden nur Quellen verwendet, deren Nutzung freigegeben ist. Da die Angabe bzgl. der Option der freien Nutzung der Bilder in der Regel
aus Internetquellen stammt, übernimmt der Autor keine Haftung für die Korrektheit dieser Information!
Bildnachweise (Stand 13.06.2016)