2d-vektorgraphik - mi.kriwi.demi.kriwi.de/mi/mi1-09-2d-vektorgraphik-jc-slides.pdf · grundlagen...
Post on 01-Jul-2018
226 Views
Preview:
TRANSCRIPT
Grundlagen
2D Pipeline
Kodierung
Animation
2D-Vektorgraphik
Jörg Cassens
Institut für Mathematik und Angewandte Informatik
MedieninformatikWS 2017/2018
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 1 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
PrüfungstermineZwei Prüfungstermine, jeweils zu Beginn und am Ende dervorlesungsfreien Zeit
Erster TerminMontag, 12.02.2018, 14:00 UhrRaum A 9 Spl.Konflikt LA bekannt – Andere?
Zweiter TerminMontag, 26.03.2018, 14:00 UhrRaum A 9 Spl.Konflikte?
Blocktermin Seminar MedieninformatikDienstag, 27.03. bis Donnerstag, 29.03.2018Raum A 102 Spl.Konflikte?
Dazu kommen die Termine zum Ende der VorlesungszeitAbgabe Abstracts: 13.12.2017
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 2 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
PrüfungstermineZwei Prüfungstermine, jeweils zu Beginn und am Ende dervorlesungsfreien Zeit
Erster TerminMontag, 12.02.2018, 14:00 UhrRaum A 9 Spl.Konflikt LA bekannt – Andere?
Zweiter TerminMontag, 26.03.2018, 14:00 UhrRaum A 9 Spl.Konflikte?
Blocktermin Seminar MedieninformatikDienstag, 27.03. bis Donnerstag, 29.03.2018Raum A 102 Spl.Konflikte?
Dazu kommen die Termine zum Ende der VorlesungszeitAbgabe Abstracts: 13.12.2017
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 2 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
PrüfungstermineZwei Prüfungstermine, jeweils zu Beginn und am Ende dervorlesungsfreien Zeit
Erster TerminMontag, 12.02.2018, 14:00 UhrRaum A 9 Spl.Konflikt LA bekannt – Andere?
Zweiter TerminMontag, 26.03.2018, 14:00 UhrRaum A 9 Spl.Konflikte?
Blocktermin Seminar MedieninformatikDienstag, 27.03. bis Donnerstag, 29.03.2018Raum A 102 Spl.Konflikte?
Dazu kommen die Termine zum Ende der VorlesungszeitAbgabe Abstracts: 13.12.2017
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 2 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Pingo
+ pingo.upb.de/174818
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 3 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
EinleitungZeichnen und Malerei uralte KulturtechnikenBisher Fokus auf RasterbildernAngemessen für Fotographien, also abgetastete Abbilderder WeltZeichnungen lassen sich auch grundsätzlich anderscodieren
Menge von Linien, Kurven, Flächen wie der Künstler sieangeordnet hatDarstellung quasi eine Wiederholung der Pinselstriche
Mathematisch als Vektoren und Polygone in einerzweidimensionale EbeneWährend ein abgetastetes Bild eine feste Auflösung besitztkönnen Vektorgraphiken ohne Qualitätsverlust skaliertwerden (modulo Rechengenauigkeit)Speicherbedarf von Rastergraphik steigt quadratisch zuseiner Kantenlänge; Vektorgraphik hat unabhängig vonAuflösung den gleichen Speicherbedarf
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 4 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Lernziele
Grundlegende Konzepte der 2D-VektorgraphikDarstellung einer VerarbeitungsketteSchritte zur Darstellung von Vektorgraphiken amBildschirmGrundlegende AnimationsverfahrenZwei o�enen und verbreitete Codierungen fürVektorgraphiken
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 5 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Outline
1 GrundlagenVektorraumSplinesTransformation
2 2D Pipeline
3 Kodierung
4 Animation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 6 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation Vektorraum
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 7 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Koordinatensystem, Punkte, Geraden
Mathematische Grundlage: zweidimensionaler VektorraumIn der Regel kartesisches, orthogonales Koordinatensystemmit linear aufgeteilten AchsenBezeichnung horizontal meist X, vertikal YPunkt durch Koordinaten (x,y) eindeutig beschreibbarGerade beschriebenmit Start- und EndpunktPolygon aus mehreren Geraden, Endpunkt der einenStartpunkt der nächsten
Wenn der letzte Endpunkt gleich dem Startpunkt ist, ist dasPolygon geschlossenSonst o�en
Bei SVG und denmeisten anderen Systemen liegt derUrsprung links obenPostScript hat den Ursprung links unten
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 8 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Vektorraum
Vektorraum oder linearer Raum ist eine algebraischeStrukturElemente eines Vektorraumes heißen VektorenDiese können addiert, subtrahiert werden oder mitSkalaren multipliziert bzw. durch diese dividiert werdenResultat einer solchen Operation ist immer Vektordesselben VektorraumesVektoren dienen zur Darstellung geometrischer Objekte(Koordinaten)In der Medieninformatik typischerweise zwei-, drei- odervierdimensional
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 9 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
2D-Vektoren
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 10 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Punkte, Gerade, Polygone
Punkt wird durch eine Koordinate P = (x1, y1) beschriebenGerade wird durch zwei Koordinaten L = {(x1, y1), (x2, y2)}beschrieben, dem Start- und EndpunktPolygone bestehen aus mehreren zusammenhängendenGeraden, also P = {(x1, y1), . . . , (xn, yn)}
Geschlossenen Polygone: Endpunkt ist gleich demStartpunkt, d.h. (x1, y1) = (xn, yn)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 11 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Konzepte
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 12 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Addition von Vektoren
Addition erfolgt komponentenweiseFür n-dimensionale Vektoren v,w gilt:
v + w =
v1...vn
+
w1...wn
=
v1 + w1...
vn + wn
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 13 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Addition von Vektoren
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 14 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Skalieren von Vektoren
Jeder Vektor v kannmit einer reellwertigen Zahl s skaliertwerden:
s ∗ v = s ∗
v1...vn
=
s ∗ v1...
s ∗ vn
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 15 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Skalieren von Vektoren
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 16 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Skalarprodukt
Skalarprodukt (dot product) ist eine reellwertige FunktionGegeben: Zwei Vektoren u und vDann ist das Skalarprodukt u · v definiert wie folgt:
u · v = u1 ∗ v1 + u2 ∗ v2 + . . .+ un ∗ vn
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 17 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen
Matrix (Plural: Matrizen) ist eine rechteckige Anordnungvon Elementen
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 18 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen
Einsatz: Beschreibung von TransformationenHauptsächlich quadratische Matrizen, 2× 2, 3× 3, 4× 4
a11 . . . a1n...
. . ....
an1 . . . ann
, n ∈ {2, 3, 4}
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 19 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation mit Skalaren
Elementweise Multiplikation
s ∗
a11 a12 a13a21 a22 a23a31 a32 a33
=
s ∗ a11 s ∗ a12 s ∗ a13s ∗ a21 s ∗ a22 s ∗ a23s ∗ a31 s ∗ a32 s ∗ a33
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 20 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Addition
Elementweise Addition
a11 a12 a13a21 a22 a23a31 a32 a33
+
b11 b12 b13b21 b22 b23b31 b32 b33
=
a11 + b11 a12 + b12 a13 + b13a21 + b21 a22 + b22 a23 + b23a31 + b31 a32 + b32 a33 + b33
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 21 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Multiplikation “Zeile mal Spalte”Gegeben: (m× n)-Matrix A und (n× p)-Matrix BErgebnis: (m× p)-Matrix C
Cij =n∑k=1
Aik × Bkj
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 22 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Zeilen-/Spaltenweise Multiplikation
a11 ∗ b11 + a12 ∗ b21 + a13 ∗ b31 = c11
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 23 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Zeilen-/Spaltenweise Multiplikation
a21 ∗ b11 + a22 ∗ b21 + a23 ∗ b31 = c21
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 23 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Zeilen-/Spaltenweise Multiplikation
a31 ∗ b11 + a32 ∗ b21 + a33 ∗ b31 = c31
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 23 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Zeilen-/Spaltenweise Multiplikation
a11 ∗ b12 + a12 ∗ b22 + a13 ∗ b32 = c12
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 23 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrizen: Multiplikation
Zeilen-/Spaltenweise Multiplikation
ai1 ∗ b1j + ai2 ∗ b2j + ai3 ∗ b3j = cij
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 23 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Matrix-Vektor-Multiplikation
Wichtiger SpezialfallMotivation: Matrix beschreibt eine Transformation, derVektor einen PunktD.h. Matrizen können benutzt werden, um graphischeObjekte zu manipulieren
a11 . . . a1n...
. . ....
an1 . . . ann
∗ v1
...vn
=
a11 ∗ v1 + . . .+ a1n ∗ vn...
an1 ∗ v1 + . . .+ ann ∗ vn
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 24 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Konzepte
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 25 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Kurven
Weitere Elemente neben Punkten, Geraden, PolygonenKreis durch Mittelpunkt und RadiusInterpolationskurven durch Kontroll- und Stützpunkte
Interpolationskurven:Darstellung wirklich beliebiger Kurven eher unüblich, in derPraxis AnnäherungIn der Praxis o�: SplinesBegri� aus dem Schi�bau: mit Hilfe von elastischen Latten,die an bestimmten Punkten fixiert harmonische (undteilweise optimale Formen) zu bilden
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 26 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation Splines
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 27 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Splines
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 28 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Splines
Ein Spline n-ten Grades ist stückweise aus Polynomenmaximal n-ten Grades zusammengesetztFalls die Polynome linear sind ist der Spline linear, d.h. einPolygonzug ist ein linearer SplineFür jedes Segment können Randbedingungen angegebenwerden:
SteigungKrümmungKrümmungsveränderungErste bis dritte Ableitung
jeweils an den beiden EndpunktenHäufig in Graphikprogrammen durch KontrollinienangegebenRichtung der Kontrollinien Steigung, Länge Steifigkeit
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 29 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Polynome
Summe von Vielfachen von Potenzenmit natürlichzahligenExponenten einer Variable
P(x) =n∑i=0
ai ∗ xi, n ≥ 0 (1)
= an ∗ xn + . . .+ a1 ∗ x1 + a0 ∗ x0 (2)= an ∗ xn + . . .+ a1 ∗ x + a0 (3)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 30 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Splines
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 31 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Grad der Polynome
Meist kubisch oder quadratischHöhergradige polynomiale Kurven erhöhenRechenaufwand und erschweren KontrolleMit Polynomen niedrigeren Grades kann die Form derKurve nicht flexibel genugmodelliert werden
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 32 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Bézier-SplinesBesondere Familie von Interpolationskurven:Bézier-KurvenKonstruiert aus BernsteinpolynomenAus Beziér-Kurven werden die Bézier-SplineszusammengesetztUnabhängig voneinander von Pierre Bézier bei Renault undPaul de Casteljau bei Citroën entwickeltNach Art der verwendeten Polynome Bézier-Kurven ersten,zweiten, dritten GradesBézier-Kurven n-ten Grades beschrieben durch n+ 1KontrollpunkteDiese bilden das Stützpolygon
Bézier-Kurve ersten Grades hat ein Stützpolygon aus zweiPunkten, ist also eine Linie
Kurvenverlauf durch den Algorithmus von Casteljaurekursiv berechenbar (siehe Graphik)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 33 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel Bézier-Kurven
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 34 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Bernsteinpolynome: Grundlagen
Das n+ 1 Bernstein-Basis-Polynom zur Basis n ist definiert als:
bν,n(x) =(nν
)xν (1− x)n−ν , ν = 0, . . . , n.
wobei (nν
)ein Binomial-Koe�izient ist.Die lineare Kombination von Bernstein-Basis-Polynomen
Bn(x) =n∑
ν=0
βνbν,n(x)
wird Bernstein-Polynom genannt, die Koe�izienten βνBernstein-Koe�izienten.
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 35 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Bernsteinpolynome
Darstellung der ersten Basis-Polynome
n = 0 : b0,0(x) = 1
n = 1 : b0,1(x) = 1− x, b1,1(x) = x
n = 2 : b0,2(x) = (1− x)2, b1,2(x) = 2x(1− x), b2,2(x) = x2
n = 3 : b0,3(x) = (1− x)3, b1,3(x) = 3x(1− x)2,b2,3(x) = 3x2(1− x), b3,3(x) = x3
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 36 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Bernsteinpolynome: Beispiel
+ demonstrations.wolfram.com/BernsteinPolynomials/
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 37 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Visualisierung Bernsteinpolynome
+Wikipedia-User James Pic
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 38 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel Bézier-Kurven
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 39 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
CasteljauUm die gezeigte Kurve mit den Kontrollpunkten P1 bis P4zu interpolieren werden zunächst Punkte auf den Liniendes Stützpolygons interpoliertDie lineare Interpolation B zwischen zwei Punkten A und Bist dabei für einen Interpolationswert i:0 ≤ i ≤ 1 : B = (1− i) ∗ A+ i ∗ CIm Beispiel: I1 zwischen P1 und P2, I2 zwischen P2 und P3,I3 zwischen P3 und P4Zwischen den Interpolierten Punkten wird weiterinterpoliertJ1 wandert von I1 nach I2, J2 von I2 nach I3Zwischen J1 und J2 wird dann der Kurvenpunkt KinterpoliertSo kann für jeden Wert von i zwischen 0 und 1 derKurvenwert K berechnet werdenBeispiel zeigt Interpolation für i = 0.66
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 40 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Casteljau: Beispiel
+ demonstrations.wolfram.com/BezierCurveByDeCasteljausAlgorithm/
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 41 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Harmonische Spline-Kurven
Aus den beschriebenen Segmenten lassen sich beliebiglange harmonisch gebogenen Spline-KurvenzusammenfügenAn den Grenzpunkten durch Manipulation derKontrollpunkte sicherstellen, daß Steigung und Krümmungbenachbarter Element gleich sindParallele Kontrollinien = Steigung der Kurvenstücke istidentischGleich lange Kontrollinien = Krümmung identischSolcherart gebildete Bézier-Splines ahmen das Verhaltender Holzleisten nach
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 42 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Splines
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 43 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation Transformation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 44 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Geometrische Transformationen
Innerhalb der Koordinatensysteme können Punktegeometrisch transformiert, z.B. verschoben werdenDurch Verschiebung der Koordinaten einzelner Punktekönnen alle Objekte, die durch Punkte beschriebenwerden, geometrisch transformiert werdenBei der Klasse linearer Transformationen ergeben sich dieneuen Koordinaten durch lineare Funktionen
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 45 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Geometrische Transformationen
Grundlegende lineare Transformationen sind:TranslationRotationSkalierungScherung
Nebenbemerkung: Die Repräsentation von Beziér-Splinesmacht diese invariant zu Rotation, Skalierung,Verschiebung
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 46 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Translation
Bei der Translation wird jeder betro�ene Punkt um den gleichenVektor (tx, ty) verschoben(
xneuyneu
)=
(xaltyalt
)+
(txty
)=
(xalt + txyalt + ty
)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 47 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel Translation
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 48 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
(Uniforme) Skalierung
Skalierung von (x1, y1) um sx und sySkalierung heißt uniform, wenn sx = sy:
(xneuyneu
)= s
(xaltyalt
)=
(s 00 s
)(xaltyalt
)=
(sxaltsyalt
)
Nicht-uniforme Skalierung:
(xneuyneu
)=
(sx 00 sy
)(xaltyalt
)=
(sxxaltsyyalt
)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 49 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Rotation
Mathematisch positive Rotation (gegen den Uhrzeigersinn) umdenWinkel α
(xneuyneu
)=
(cosα − sinαsinα cosα
)(xaltyalt
)=
(cosαxalt − sinαyaltsinαxalt + cosαyalt
)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 50 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel Rotation
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 51 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Scherung
Eine Scherung entlang der x-Achse verändert x-Koordinate inAbhängigkeit von der y-Koordinate(
xneuyneu
)=
(1 m0 1
)(xaltyalt
)=
(xalt +myalt
yalt
)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 52 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Zusammenfassendes Beispiel
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 53 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Weitere Transformationen
Mit Hilfe der definierten Transformationen sind weiterekonstruierbarSpiegelung: Skalierung um den Faktor -1Rotation um andere Punkte als den Mittelpunkt durchTranslation, danach Drehung, danach TranslationAlle Operationenmit Ausnahme der Translation alsMatrix-Multiplikation ausdrückbarMatrix-Multiplikation ist assoziativ
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 54 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel: Komposition
Komposition von Skalierung und Rotation
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 55 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel: Komposition
Komposition von Skalierung und Translation
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 56 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Homogene Koordinaten
Matrix-Multiplikation ist assoziativDaher wäre es hilfreich, falls Translation auch soausgedrückt werden könnteLösung: Hinzunahme einer 3. Dimension bei allenBerechnungen
Sogenannte homogene Koordinaten, da alleTransformationen als Matrix darstellbarIn homogenen Koordinaten wird jeder 2D-Punkt (x, y)repräsentiert durch (x, y, 1)(x, y, 1) und (x, y,W) repräsentieren den gleichen Punktgenau dann, wennW 6= 0Matrizen erhalten in der dritten Zeile/Spalte jeweils zweiNullen und eine 1 auf der Diagonale
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 57 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Homogene Koordinaten
(xy
)⇒
xy1
sowie( m1,1 m1,2
m2,1 m2,2
)⇒
m1,1 m1,2 0m2,1 m2,2 00 0 1
Und damit gilt für die Translation xneu
yneu1
=
1 0 tx0 1 ty0 0 1
xaltyalt1
=
xalt + txyalt + ty
1
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 58 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Beispiel: Komposition
Komposition von Skalierung und Translation
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 59 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Komposition
Rotation und Skalierung finden relativ zum Ursprung statt
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 60 / 124
GrundlagenVektorraum
Splines
Transformation
2D Pipeline
Kodierung
Animation
Komposition
UmObjekte an einem beliebigen Bezugspunkt zu rotierenoder zu skalieren, ist eine Folge von Transformationennotwendig
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 61 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Outline
1 Grundlagen
2 2D PipelineWeltkoordinatenClippingBildkoordinatenRasterisierung
3 Kodierung
4 Animation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 62 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
2D-Rendering
Ausgang: 2D-VektorraumZiel: 2D-Rasterbildschirm
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 63 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
2D-Vektorraum
Mathematisch exakte Beschreibung einer Menge vonPunkten
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 64 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
2D-RasterbildschirmDiskretes Raster von Pixeln, auf das Elemente des2D-Vektorraumes abgebildet werdenmüssen (Abtastung)
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 65 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
2D Rendering Pipeline
Bei Berechnung und Darstellung einer 2D-Vektorgraphikgibt es eine etablierte Abfolge von ArbeitsschrittenDiese wird im allgemeinen als Rendering-Pipelinebeschrieben
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 66 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation Weltkoordinaten
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 67 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Objekt- und Weltkoordinaten
2D-Primitive werden in Objektkoordinaten beschriebenund dann in Weltkoordinaten transformiert
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 68 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Szenegraph
Alle eingeführten geometrischen Primitive sind durchPunkte beschriebenTheoretisch könnten die Objekte alle an demOrt, an demsie später zu sehen sein sollen, beschrieben werdenPraktisch meist hierarchisch organisiert
Gemeinsam verschiebenGemeinsam aninmiertObjekteigenscha�en wie Strichbreite, Füllfarbe für Gruppenvon Objekten festgelegt werden können
Um diese e�izient anwenden zu können werden dieObjekte in einem Szenegraphen organisiert
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 69 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Szenegraph
An den Blättern geometrische ObjekteAn den inneren Knoten Transformationen oderGruppierungenIm einfachsten Fall ein BaumBei mehrfacher Verwendung eines Objektes/einer Gruppeein DAG (Gerichteter Azyklischer Graph)Mehrfachnutzung eines Objektes spartModellierungsaufwandEin Objekt kann dann durch mehrere Transformation andie jeweils richtige Stelle verschoben werdenGeometrische Eigenscha�en werden aufmultipliziertNichtgeometrische Eigenscha�en werden vererbtDie Definition, was ein Szenegraph ist, wird unterschiedlichgesehen
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 70 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel Szenegraph
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 71 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation Clipping
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 72 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Clipping
Zweidimensionaler Vektorraum, in dem unsere Objekteliegen, erst einmal unendlich großPraktisch vorkommende Ausgabegeräte endlichNur ein Unterraum darstellbarPrinzipiell: Sichtfenster festlegenLiegen alle Objekte darin, können sie ausgegeben werdenLiegen sie komplett außerhalb, können sie weggelassenwerden (durch Bounding Box schnell feststellbar)Liegen sie teilweise im, teilweise außerhalb desSichtfensters muß es beschnitten werden (clipping)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 73 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel: Clipping
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 74 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Clipping
Clipping von Punkten: Punkt liegt innerhalb desSichtfenstersClipping beliebiger Polygone auf Clipping von LinienzurückführenKlassisches Verfahren für das Clipping gerader Linien ameinem rechteckigen Ausschnitt ist das Line Clipping vonCohen und Sutherland
Gegeben Linie mit Start- und Endpunkten P und Q sowie einSichtfenster mit Koordinaten xmin, xmax , ymin und ymaxUnterteile den Vektorraum in 9 Teilbereiche aufgeteiltJeder Teilraum erhält einen 4 Bit langen Code
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 75 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel: Bitcode
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 76 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Bitmuster Cohen und Sutherland
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 77 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Cohen Sutherland (contd.)
Start- und Endpunkt der zu schneidenden Linie wird derCode des Teilraums zugewiesen, in dem er liegt
Codes von P und Qmit “or” verknüp� ergeben 0000: Objektliegt im Viewport (Beispiel A)Codes von P und Qmit “and” verknüp� ergeben nicht0000: P und Q liegen auf der gleichen Seite außerhalb desViewports, das Objekt kann weggelassen werden (B)
Falls der Code von P nicht 0000 ist, muß die Gerade –abhängig von seinem Code –mit den von dort erreichbarenRändern des Viewports geschnitten werden
Vom Feld 0010 ist z.B. nur der rechte Rand zu erreichen(Beispiele D und E)
Schneidet die Linie das Randsegment wird derSchnittpunkt S als neuer Wert von P bestimmtFalls auch der Code von Q nicht 0000 ist muß die Geradeanalog geschnitten werden
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 78 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Polygon-Clipping
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 79 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Kurven-Clipping
+ T. W. Sederberg, BYU, Computer Aided Geometric Design, Course Notes
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 80 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Kurven-Clipping
+ T. W. Sederberg, BYU, Computer Aided Geometric Design, Course Notes
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 81 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Reminder: Casteljau
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 82 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation Bildkoordinaten
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 83 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Bildkoordinaten
Auflösung und Größe des Bildschirms bzw. Fenstersbestimmt Koordinaten
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 84 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Welt- nach Bildkoordinaten
Die darzustellenden Primitive wurdenmit Hilfe desSzenegraphen an die richtige Stelle transformiertDie Darstellung wurde mittels Clipping auf ein definiertesSichtfenster begrenztJetzt muß in Weltkoordinaten umgerechnet werden
xbild = x0bild+(xwelt−x0welt)∗(x1bild−x0bild)/(x1welt−x0welt)ybild = y0bild+(ywelt−y0welt)∗(y1bild−y0bild)/(y1welt−y0welt)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 85 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Welt- nach Bildkoordinaten
xbild = x0bild+(xwelt−x0welt)∗(x1bild−x0bild)/(x1welt−x0welt)ybild = y0bild+(ywelt−y0welt)∗(y1bild−y0bild)/(y1welt−y0welt)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 86 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation Rasterisierung
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 87 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Rasterisierung
Objekte in Bildschirmkoordinaten müssen inPixel-Farbinformationen transformiert werden
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 88 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Rasterisierung
Einige Ausgabegeräte können Vektordaten direkt darstellen
Plotter, CNC, Laserprojektoren
Zumeist aber Umrechnung in PixelBegri�: RasterisierungNichts anderes als eine Abtastung, also gelten imbesonderen das zum Nyquist-Shannon-Theorem und daszum Alias gesagteAbtastrate entspricht der Ortsauflösung des PixelrastersAbtastgenauigkeit entspricht der Farbtiefe
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 89 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel: Rasterisierung eines Punktes
Farbe des Pixels, das den Punkt enthält, wird angepaßt
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 90 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Rasterisierung einer Geraden
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 91 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Naive Rasterisierung SW
Zeichnen einer Linie in SchwarzweißNaiv: Wir nehmen die Steigung der Liniem = (y1 − y2)/(x1 − x2))Schleife über alle x Werte zwischen x1 und x2. Derzugehörige y-Wert wird als round(m ∗ (x − x1)) genommenund das Pixel eingefärbt
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 92 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Rasterisierung SW
Nachteile des naiven Vorgehens:Sehr rechenaufwendig
Multiplikation und Rundung für jedes Pixel
Mehrere bessere Algorithmen wurden vorgeschlagen.Hier Bresenham: Ich gehe in Richtung der schnellerenÄnderung, merke mir die Fehler, undmache ab und zueinen Schritt zum Ausgleich der Fehler
Nur noch Addition und Vergleich auf IntegerDetails der Implementierung variieren
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 93 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel: Bresenham
Wechsel der Änderungen
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 94 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Bresenham
Explizite Funktion einer Geraden: y = f(x) = mx + cImplizite Funktion einer Geraden: F(x, y) = y −mx + cAnnahme:−1 < m < 0Unterscheidung von drei Fällen
F(x, y) = 0 =⇒ (x, y) auf der GeradenF(x, y) > 0 =⇒ (x, y) oberhalb der GeradenF(x, y) < 0 =⇒ (x, y) unterhalb der Geraden
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 95 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Bresenham
Sei Pixel (x, y) bereits als Linienfragment markiertWegen−1 < m < 0 ist das nächste Pixel entweder E(east)oder S(outh)E(east)
Quelle: Frank Steinicke
M := (x + 1, y − 12)
d := F(M) = F(x + 1, y − 12)
d < 0 =⇒ E, sonst SE
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 96 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel: Bresenham
Wechsel der Änderungen
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 97 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Antialiasing
Unter Zuhilfenahme von Graustufen oder Farbabstufungenläßt sich eine visuell bessere Darstellung erreichenDieses Antialiasing mindert den oben zu sehendenTreppencharakterGrundidee: zu jedem x-Wert nicht genau einen y-Wert zusetzen, sondern mehrere umliegende Pixel in Abhängigkeitihres Abstands zur idealen Linie heller oder dunklereinfärbenAlgorithmus vonWu: läu� über alle x-Werte und färbtimmer die beiden Pixel der nächstgelegenen y-Werte einJe näher das Pixel an der idealen Linie liegt, desto dunklerwird es eingefärbt
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 98 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel Algorithmus von Wu
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 99 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Line Drawing: Beispiel
+ demonstrations.wolfram.com/DrawingALineOnADigitalDisplay/
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 100 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Rasterisierung gefüllter Polygone
Wie lassen sich geschlossene Polygone als Fläche füllen?Verschiedene Algorithmen, mit unterschiedlichenAnnahmenVerbreitete Grundidee: Scanline AlgorithmenWennman von einem beliebigen Punkt einen Strahl zumRand des Zeichenbereichs schickt und zählt, wie vielePolygonkanten er schneidet, dann definieren wir dieAnzahl der Schnitte als ParitätPunkte mit gerader Parität liegen dabei außerhalb derPolygone
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 101 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel Scanline
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 102 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Scanline
Bestimme für jede Zeile von Pixeln (Scanline) dieSchnittpunkte mit den Kanten des Polygons und sortieresie aufsteigend nach der x-KoordinateErmittle für jedes Pixel die ParitätFärbe alle Pixel mit ungerader Parität mit der Füllfarbe
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 103 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Beispiel Scanline
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 104 / 124
Grundlagen
2D PipelineWeltkoordinaten
Clipping
Bildkoordinaten
Rasterisierung
Kodierung
Animation
Painter’s AlgorithmWie geht manmit mehreren, sich gegenseitig teilweiseverdeckenden, Polygonen um?Genauere Betrachtungen gehören eher in die GenerativeGraphische Datenverarbeitung (Computergraphik)Hier: Grundidee des Painter’s algorithm:Da alle vorkommenden geometrischen Formen in einerEbene liegen genügt es zur Behandlung von Verdeckungenin 2D-Graphik alle Primitive in der richtigen Reihenfolge zuzeichnen (von hinten nach vorne)
+Wikipedia: Painter’s algorithm
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 105 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Outline
1 Grundlagen
2 2D Pipeline
3 Kodierung
4 Animation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 106 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Kompression?
Keine medienspezifische, auf den Wahrnehmungsapparatzugeschnittene KompressionAber Daten insgesamt noch recht kleinEvtl. textbasiert undmit allgemeinen Verfahrenkomprimierbar
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 107 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
PostScript
Ursprünglich von Adobe 1984 alsSeitenbeschreibungssprache für die Ansteuerung vonDruckern entwickeltGeräteunabhängige Formatierung von Text sowie Raster-und VektorgraphikenTuring-mächtige ProgrammierspracheEPS (Encapsulated PostScript) als VektorgraphikformatAls Darstellungsformat inzwischen von PDF abgelöst (nichtTuring-mächtig)PDF hat deutlich bessere KompressionPostScript hat den Ursprung 0,0 in der unteren linken Eckeeiner SeiteLängeneinheit ist der (PostScript-) Punkt
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 108 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiel PostScript
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 109 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Scalable Vector Graphics (SVG)
Explizit für den Austausch skalierbarer Graphiken imWWWStandardisiert durch das W3CBasis XMLEnthält Elemente wie Geraden, Polygone, Kurve,Kreissegmente, SplinesUrsprung 0,0 in der oberen linken BildeckeHat ein User-Koordinatensystem das per default demPixel-Koordinatensystem des Ausgabegerätes entspricht,aber geändert werden kann
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 110 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiel SVG I
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 111 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiel SVG II
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 112 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Path-Syntax
Elemente für Rechtecke, Kreise, Ellipsen und Polylinien fastselbsterklärendDie Bedeutung der Syntax für Pfade verdient ein kurzeErläuterungz.B. <path stroke=“black” stroke-width=“3px” fill=“white”d=“M 80 100 L 220 100 Q 150 30 80 100 z”/>
Analog PostScript-Pfad, aber Befehl vor ParameterMove to 80, 100Line to 220, 100Quadratic Bézier curve, Kontrollpunkt 150,30; Endpunkt80,100z schließt den Pfad
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 113 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiel Font
Oben URW Classico (PostScript, kubische Bezier-Splines), untenSo�maker Opus (Truetype, quadratische Bezier-Splines)
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 114 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiel Font (Detail)
Detail PostScript: URW Classico
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 115 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Outline
1 Grundlagen
2 2D Pipeline
3 Kodierung
4 Animation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 116 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Animation
Bisher besprochen: statische ElementeBei Vektorgraphiken haben wir die Möglichkeit, nicht jedesBild neu zu übertragen, sondern anzugeben, wie sich derVektor über die Zeit verändertRasterbilder zur Darstellung können aus dieserBeschreibung und den Vektordaten dann jederzeitgeneriert werdenDas nennt sich ComputeranimationO�ensichtliche Animation: da alle geometrischen Formendurch ihre Eck- und Kontrollpunkte gegeben sind, genügtes, diese Kontrollpunkte zu animieren
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 117 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Keyframe-Animation
Einfachste Art, die Veränderung eines Parametersanzugeben, ist dessenWert zu zwei Zeitpunkten anzugebenZ.B. Zeitpunkt 0 (Start der Animation, Laden der Datei,Beginn der Darstellung) und dann nach z.B. 10 sekDazwischen wird (linear) interpoliertDieses Vorgehen heißt Schlüsselbildanimation oderKeyframe-AnimationDabei können wir mehr als 2 Zeitpunkte angebenJe nach So�ware können auch andere als lineareInterpolationen zwischen einzelnen Keyframes definiertwerden
Beschleunigen und Bremsen (ease-in, ease-out)Interpolation mittels Spline
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 118 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Animation von Farben
Animation von Farbe nicht unmittelbar klar (Farbverläufein welchem Farbraum?)
Quelle: Frank Steinicke
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 119 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Andere Formen der Animation und Interaktion
Partikelsysteme ermöglichenmittels einer physischenSimulation die Animation vieler einzelner Objekte
Einzelne Partikel bekommen bestimmte Eigenscha�en,dazu gerne eine Zufallskomponente
Particle-in-cell-Methoden (PIC)Grundidee: Neben einer Modellierung der einzelnenPartikel wird auch die Interaktion benachbarter PartikelmodelliertLetztlich basierend auf den Ideen der Finite ElementMethod
Programmcode kann das Verhalten von Objektenbeeinflussen (Scripting)Grafiken können interaktiv auf Anreize reagieren
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 120 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Animation in SVG
Neben statischer Darstellung unterstützt SVG einigegrundlegende AnimationselementeErlauben einerseits die Animation von Position undOrientierung zu animierenAndererseits können Transformationen zeitabhängigausgeführt werden um Parameter wie Farbe oderTransparenz in der Zeit zu ändernAnimationselemente werden innerhalb der graphischenElemente spezifiziertElemente können gruppiert werden, um sie gemeinsam zuanimierenObjekte könnenmit Hilfe von IDs benannt undwiederverwendet werden
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 121 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Animationselemente
animate: animiert einen einzelnen Parameter einesElements, wie x-Position oder Transparenzset: ein bestimmter Parameter wird für eine bestimmteDauer auf einen festen Wert gesetztanimateMotion: bewegt ein Objekt entlang einesBewegungspfades, wobei das Objekt wahlweise am Pfadausgerichtet werden kannDer Pfad wird durch Reihe von Stützpunkten beschriebenund kann ein Linienzug oder Spline seinanimateColor: animiert Farben von einem Start- zu einemEndwert. ggf. mit ZwischenwertanimateTransform: Erlaubt es, graphische Objekte zuverschieben, zu skalieren, zu rotieren oder zu drehen
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 122 / 124
Grundlagen
2D Pipeline
Kodierung
Animation
Beispiele
+ Demonstrationen: Animation
WS 2017/2018 Jörg Cassens – 2D-Vektorgraphik 123 / 124
top related