vektororientierte grafikbearbeitung stefan k. baur 4. semester medien und design prof. dr. burkhard...
TRANSCRIPT
![Page 1: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/1.jpg)
Vektororientierte Grafikbearbeitung
Stefan K. Baur4. Semester
Medien und DesignProf. Dr. Burkhard Freitag
Betreuer: Dipl.-Inf. Christian Süß
![Page 2: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/2.jpg)
Vektororientierte Grafikbearbeitung
• Was sind Vektorgrafiken und wofür?Was sind Vektorgrafiken und wofür?
Gliederung: Proseminar
• Grundlagen: Vektorrechnung Vektorrechnung
• Vektororientierte GrafikelementeVektororientierte Grafikelemente
• Vektororientierte GrafikformateVektororientierte Grafikformate
• Präsentation: Pseudo-Code -> FreeHand Pseudo-Code -> FreeHand
![Page 3: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/3.jpg)
Vektororientierte GrafikbearbeitungWas sind Vektorgrafiken?
SymbolSymbol-Charakter! Pfeile und Buttons im Web...
Vektorgrafiken entstehen immer aus Vorschriften
Aus konkreten Befehlen und Objekten
SchemaSchema-Charakter! Pläne für Häuser oder Anlagen! UML-Modellierung...
Vektororientierte Grafik = Objektorientierte GrafikVektororientierte Grafik = Objektorientierte Grafik
![Page 4: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/4.jpg)
Vektororientierte GrafikbearbeitungWofür eigentlich Vektorgrafik?
Vektorisierung: Rasterformat -> VektorformatRasterformat -> Vektorformat
• leichter automatischautomatisch erstellt werden
Vektor-Grafiken in Abhängigkeit der Uhrzeit oder Datum
Vektor-Grafiken können leichter korrigiert werden
• können leichter manuellmanuell bearbeitet werden
Skizzen können leichter nachbearbeitet werden
![Page 5: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/5.jpg)
Vektororientierte GrafikbearbeitungKomprimierungsmöglichkeit
RastergrafikenRastergrafikenspeichern für jedes ihrer Pixel einen
Farbwert ab.
VektorgrafikenVektorgrafikenspeichern ihre
Objektinformationen ab.
RastergrafikRastergrafik VektorgrafikVektorgrafikKonvertierung
Im Normalfall erlangt man eine kleinere Datei!
Lösung: Vektorisierung
![Page 6: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/6.jpg)
Vektororientierte GrafikbearbeitungVektorisierung
Pixelgrafik Vektorgrafik
![Page 7: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/7.jpg)
Vektororientierte GrafikbearbeitungGegenüberstellung
RasterformatRasterformat VektorformatVektorformat
Qualitätsverlust bei Skalierung(z.B. vergrößern)
Photoqualitätleicht realiserbar
Bildgröße hat keinen Einflußauf die Speichergröße
Beliebig skalierbarohne Verlußt der Qualität
Photoqualitätkaum realiserbar
DimensionsabhängigerSpeicherbedarf
Grundlage fürPräsentationsprogramme
![Page 8: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/8.jpg)
Vektororientierte GrafikbearbeitungGliederung: Vektorrechnung
• Multiplikation mit einer Matrix
• Vektoraddition
• Multiplikation mit einem Skalar
• Betrag eines Vektors
• Skalarmultiplikation
• Vektor-Abbildung (allg.)
• Das Kreuzprodukt (2D, 3D)
![Page 9: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/9.jpg)
Vektororientierte GrafikbearbeitungBetrag eines Vektors
• Abstandsberechnung zweier Bildpunkte oder Objekte
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
2 22
21
2
1 aaa
aa
a
a
1a2a
![Page 10: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/10.jpg)
Vektororientierte GrafikbearbeitungVektoraddition
• Translation eines Bildpunktes oder Objekts
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
22
11
2
1
2
1
ba
ba
b
b
a
aba
ba
b
a
A
B
![Page 11: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/11.jpg)
Vektororientierte GrafikbearbeitungMultiplikation mit einem Skalar
• Vergrößern oder Verkleinern eines Grafikobjekts
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
2
1
2
1
a
a
a
aa
a
a
![Page 12: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/12.jpg)
Vektororientierte GrafikbearbeitungSkalarmultiplikation
• Grundlage für die Multiplikation mit einer Matrix
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
• Bestimmung des Winkels zwischen zwei Vektoren
cos2211
2
1
2
1 bababab
b
a
aba
b
a
ba
ba
1cos
![Page 13: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/13.jpg)
Vektororientierte GrafikbearbeitungMultiplikation mit einer Matrix
• Grundlage für lineare Abbildungen in V²
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
222121
212111
2
1
22
21
2
1
12
11
2
1
2221
1211
xmxm
xmxm
x
x
m
mx
x
m
m
x
x
mm
mmxM
![Page 14: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/14.jpg)
Vektororientierte GrafikbearbeitungVektor-Abbildung (allg.)
txMy
Beispiele:Beispiele:
• Translation
10
01M
• Drehung
)cos()sin(
)sin()cos(MxMy
txy
• Spiegelung
)cos()sin(
)sin()cos(MxMy
• Streckungsabbildung txMky
![Page 15: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/15.jpg)
Vektororientierte GrafikbearbeitungDas Kreuzprodukt
• Grundlage für 3D-Grafik, die Normale zu Vektoren
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
• Hier Fläche eines Parallelogramms
2121
1313
3232
3
2
1
3
2
1
abba
abba
abba
b
b
b
a
a
a
ba
ba
![Page 16: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/16.jpg)
Vektororientierte GrafikbearbeitungGliederung: VO - Grafikelemente
• KurvenKurven
Strecken bzw. GeradenPolygonRechteckeEllipsen
• PrimitivePrimitive
BezierCasteljauBernstein
![Page 17: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/17.jpg)
Vektororientierte GrafikbearbeitungStrecke bzw. Gerade
Beschreibungsform:Beschreibungsform:
Eine Strecke definiert man am Besten mit zwei Vektoren
a
b ba
O
Eine Gerade definiert man am Besten als Abbildung
a
b
O
abkx
![Page 18: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/18.jpg)
Vektororientierte GrafikbearbeitungPolygon
Verkettung von n - Strecken
Beschreibungsform:Beschreibungsform:
O
Strecke n
Strecke 1
Strecke 2
...
Nachteil:Nachteil:
Speicherintensiv für große Polygone
![Page 19: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/19.jpg)
Vektororientierte GrafikbearbeitungRechteck
Beschreibungsform:Beschreibungsform:
1. Als Spezialform des Polygons
O
2. Eine Spezialform eines Paralellogrammsmit zwei Vektoren
![Page 20: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/20.jpg)
Vektororientierte GrafikbearbeitungEllipse
Beschreibungsform:Beschreibungsform:
2. Darstellung mit einer Funktion
1. Als Spezialform des Polygonsmit sehr kleinen Strecken,aber auch sehr vielen Strecken
O
122
21 b
x
a
x1x
2x
a
b
![Page 21: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/21.jpg)
Vektororientierte GrafikbearbeitungBezier
Wie kann man nun beliebige Formenbeliebige Formen beschreiben?
Mit Polygonen!Mit Polygonen!
Mit Funktionen!Mit Funktionen!
Nach Bezier funktioniert das sehr gut!Nach Bezier funktioniert das sehr gut!
![Page 22: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/22.jpg)
Vektororientierte GrafikbearbeitungBezier
Das Prinzip von Bezier:Das Prinzip von Bezier:
Verwende das Prinzip der PolygonePrinzip der Polygone
im Zusammenhang mit Funktionenmit Funktionen,
so dass die Kurve Gummiband-Charakter hat.
![Page 23: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/23.jpg)
Vektororientierte GrafikbearbeitungCasteljau
Realisierung von Bezier-Kurven:Realisierung von Bezier-Kurven:
Rekursive LösungRekursive Lösung
Casteljau hüllthüllt die resultierende Kurvemit einem PolygonPolygon ein.
![Page 24: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/24.jpg)
Vektororientierte GrafikbearbeitungBernstein
Realisierung von Bezier-Kurven:Realisierung von Bezier-Kurven:
Iterative LösungIterative Lösung
Die Punkte des Polygons sind die LeitpunkteLeitpunkte,mit denen man die Zugkraft auf den nächsten
Punkt der Kurve mittels GewichtsfunktionGewichtsfunktionberechnen kann.
![Page 25: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/25.jpg)
Vektororientierte GrafikbearbeitungPseudo-Code
![Page 26: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/26.jpg)
Vektororientierte GrafikbearbeitungGliederung: Grafikformate
• Das Format: epseps
• Das Format: pdfpdf
• Das Format: psps
• Das Format: svgsvg
![Page 27: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/27.jpg)
Vektororientierte GrafikbearbeitungDas Format: ps
PS = PPostSScript = Seitenbeschreibungssprache
Basissatz von PrimitivenBeschränkt skalierbare Fonts (10pt u. 12pt)
Ermöglicht modulare Programmierung
Erweiterung von Level-1-PostscriptBessere Speicherverwaltung für den InterpreterHöhere Anzahl von PrimitivenBeliebig skalierbare Fontskomplettes Farbkonzept (geräte- bzw. geräteunabhängig)
Level-1-PostscriptLevel-1-Postscript (80er Jahre)
Level-2-PostscriptLevel-2-Postscript (heute)
![Page 28: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/28.jpg)
Vektororientierte GrafikbearbeitungDas Format: eps
EPS = EEncapsulated PPostSScript
Restriktion von Postscript:Restriktion von Postscript:
Stellt nur ein Bild darBeginnen mit einem Kommentar
z.B. Autor und Version
Das EPS-Bild kann von AnwendungsprogrammenAnwendungsprogrammen gelesen werden,
die kein Postscript beherschen!
Vorteil:Vorteil:
![Page 29: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/29.jpg)
Vektororientierte GrafikbearbeitungDas Format: pdf
PDF = PPortable DDocument FFile
Sehr viel von Level-2-PostscriptLevel-2-Postscript übernommen
Zeichnet sich durch bessere Komprimierungbessere Komprimierung aus
Vorteil:Vorteil:
![Page 30: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/30.jpg)
Vektororientierte GrafikbearbeitungDas Format: svg
SVG = SScalable VVector GGraphics
SVG-Grafiken wurden für das Internet Internet konzepiert
Besonders für XML
![Page 31: Vektororientierte Grafikbearbeitung Stefan K. Baur 4. Semester Medien und Design Prof. Dr. Burkhard Freitag Betreuer: Dipl.-Inf. Christian Süß](https://reader035.vdokument.com/reader035/viewer/2022062404/55204d7e49795902118cff75/html5/thumbnails/31.jpg)
Vektororientierte GrafikbearbeitungPraxis
Praxis
FreeHandFreeHand
Pseudo-CodePseudo-Code+