Vektororientierte Grafikbearbeitung

Stefan K. Baur4. Semester

Medien und DesignProf. Dr. Burkhard Freitag

Betreuer: Dipl.-Inf. Christian Süß

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

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

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

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

Vektororientierte GrafikbearbeitungVektorisierung

Pixelgrafik Vektorgrafik

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

Vektororientierte GrafikbearbeitungGliederung: Vektorrechnung

• Multiplikation mit einer Matrix

• Vektoraddition

• Multiplikation mit einem Skalar

• Betrag eines Vektors

• Skalarmultiplikation

• Vektor-Abbildung (allg.)

• Das Kreuzprodukt (2D, 3D)

Vektororientierte GrafikbearbeitungBetrag eines Vektors

• Abstandsberechnung zweier Bildpunkte oder Objekte

Verwendungszweck:Verwendungszweck:

Realisierung:Realisierung:

2 22

21

2

1 aaa

aa

a

a

1a2a

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

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

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

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

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

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

Vektororientierte GrafikbearbeitungGliederung: VO - Grafikelemente

• KurvenKurven

Strecken bzw. GeradenPolygonRechteckeEllipsen

• PrimitivePrimitive

BezierCasteljauBernstein

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

Vektororientierte GrafikbearbeitungPolygon

Verkettung von n - Strecken

Beschreibungsform:Beschreibungsform:

O

Strecke n

Strecke 1

Strecke 2

...

Nachteil:Nachteil:

Speicherintensiv für große Polygone

Vektororientierte GrafikbearbeitungRechteck

Beschreibungsform:Beschreibungsform:

1. Als Spezialform des Polygons

O

2. Eine Spezialform eines Paralellogrammsmit zwei Vektoren

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

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!

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.

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.

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.

Vektororientierte GrafikbearbeitungPseudo-Code

Vektororientierte GrafikbearbeitungGliederung: Grafikformate

• Das Format: epseps

• Das Format: pdfpdf

• Das Format: psps

• Das Format: svgsvg

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)

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:

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:

Vektororientierte GrafikbearbeitungDas Format: svg

SVG = SScalable VVector GGraphics

SVG-Grafiken wurden für das Internet Internet konzepiert

Besonders für XML

Vektororientierte GrafikbearbeitungPraxis

Praxis

FreeHandFreeHand

Pseudo-CodePseudo-Code+