2D-Vektorgraphik - mi.kriwi.demi.kriwi.de/mi/MI1-09-2D-Vektorgraphik-JC-slides.pdf · Grundlagen...

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


Grundlagen

2D Pipeline

Kodierung

Animation

Pingo

+ pingo.upb.de/174818


http://pingo.upb.de/174818

http://pingo.upb.de/174818

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


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


GrundlagenVektorraum

Splines

Transformation

2D Pipeline

Kodierung

Animation

Outline

1 GrundlagenVektorraumSplinesTransformation

2 2D Pipeline

3 Kodierung

4 Animation



Splines

Transformation

2D Pipeline

Kodierung

Animation Vektorraum



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



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

2D-Vektoren

Quelle: Frank Steinicke



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)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Konzepte



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Addition von Vektoren




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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Skalieren von Vektoren




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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Matrizen

Matrix (Plural: Matrizen) ist eine rechteckige Anordnungvon Elementen




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}



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



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



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



Splines

Transformation

2D Pipeline

Kodierung

Animation


Zeilen-/Spaltenweise Multiplikation

a11 ∗ b11 + a12 ∗ b21 + a13 ∗ b31 = c11



Splines

Transformation

2D Pipeline

Kodierung

Animation



a21 ∗ b11 + a22 ∗ b21 + a23 ∗ b31 = c21



Splines

Transformation

2D Pipeline

Kodierung

Animation



a31 ∗ b11 + a32 ∗ b21 + a33 ∗ b31 = c31



Splines

Transformation

2D Pipeline

Kodierung

Animation



a11 ∗ b12 + a12 ∗ b22 + a13 ∗ b32 = c12



Splines

Transformation

2D Pipeline

Kodierung

Animation



ai1 ∗ b1j + ai2 ∗ b2j + ai3 ∗ b3j = cij



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Konzepte



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



Splines

Transformation

2D Pipeline

Kodierung

Animation Splines



Splines

Transformation

2D Pipeline

Kodierung

Animation

Splines




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



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)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Splines



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



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)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Beispiel Bézier-Kurven



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.



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Bernsteinpolynome: Beispiel

+ demonstrations.wolfram.com/BernsteinPolynomials/


http://demonstrations.wolfram.com/BernsteinPolynomials/


Splines

Transformation

2D Pipeline

Kodierung

Animation

Visualisierung Bernsteinpolynome

+Wikipedia-User James Pic


https://en.wikipedia.org/wiki/File:Bernstein_Approximation.gif


Splines

Transformation

2D Pipeline

Kodierung

Animation

Beispiel Bézier-Kurven



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Casteljau: Beispiel

+ demonstrations.wolfram.com/BezierCurveByDeCasteljausAlgorithm/


http://demonstrations.wolfram.com/BezierCurveByDeCasteljausAlgorithm/


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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Splines



Splines

Transformation

2D Pipeline

Kodierung

Animation Transformation



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



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



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

)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Beispiel Translation




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

)



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

)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Beispiel Rotation




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

)



Splines

Transformation

2D Pipeline

Kodierung

Animation

Zusammenfassendes Beispiel



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



Splines

Transformation

2D Pipeline

Kodierung

Animation

Beispiel: Komposition

Komposition von Skalierung und Rotation




Splines

Transformation

2D Pipeline

Kodierung

Animation


Komposition von Skalierung und Translation




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



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



Splines

Transformation

2D Pipeline

Kodierung

Animation


Komposition von Skalierung und Translation




Splines

Transformation

2D Pipeline

Kodierung

Animation

Komposition

Rotation und Skalierung finden relativ zum Ursprung statt




Splines

Transformation

2D Pipeline

Kodierung

Animation

Komposition

UmObjekte an einem beliebigen Bezugspunkt zu rotierenoder zu skalieren, ist eine Folge von Transformationennotwendig



Grundlagen

2D PipelineWeltkoordinaten

Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Outline

1 Grundlagen

2 2D PipelineWeltkoordinatenClippingBildkoordinatenRasterisierung

3 Kodierung

4 Animation


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

2D-Rendering

Ausgang: 2D-VektorraumZiel: 2D-Rasterbildschirm



Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

2D-Vektorraum

Mathematisch exakte Beschreibung einer Menge vonPunkten


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

2D-RasterbildschirmDiskretes Raster von Pixeln, auf das Elemente des2D-Vektorraumes abgebildet werdenmüssen (Abtastung)



Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation Weltkoordinaten


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Objekt- und Weltkoordinaten

2D-Primitive werden in Objektkoordinaten beschriebenund dann in Weltkoordinaten transformiert



Grundlagen


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


Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel Szenegraph


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation Clipping


Grundlagen


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)


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel: Clipping



Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel: Bitcode



Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Bitmuster Cohen und Sutherland


Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Polygon-Clipping



Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Kurven-Clipping

+ T. W. Sederberg, BYU, Computer Aided Geometric Design, Course Notes


http://www.tsplines.com/technology/edu/CurveIntersection.pdf

Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Reminder: Casteljau


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation Bildkoordinaten


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Bildkoordinaten

Auflösung und Größe des Bildschirms bzw. Fenstersbestimmt Koordinaten



Grundlagen


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)


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Welt- nach Bildkoordinaten

xbild = x0bild+(xwelt−x0welt)∗(x1bild−x0bild)/(x1welt−x0welt)ybild = y0bild+(ywelt−y0welt)∗(y1bild−y0bild)/(y1welt−y0welt)


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation Rasterisierung


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Rasterisierung

Objekte in Bildschirmkoordinaten müssen inPixel-Farbinformationen transformiert werden



Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel: Rasterisierung eines Punktes

Farbe des Pixels, das den Punkt enthält, wird angepaßt



Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Rasterisierung einer Geraden



Grundlagen


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


Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel: Bresenham

Wechsel der Änderungen



Grundlagen


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


Grundlagen


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)


M := (x + 1, y − 12)

d := F(M) = F(x + 1, y − 12)

d < 0 =⇒ E, sonst SE


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel: Bresenham

Wechsel der Änderungen



Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel Algorithmus von Wu


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Line Drawing: Beispiel

+ demonstrations.wolfram.com/DrawingALineOnADigitalDisplay/


http://demonstrations.wolfram.com/DrawingALineOnADigitalDisplay/

Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel Scanline


Grundlagen


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


Grundlagen


Clipping

Bildkoordinaten

Rasterisierung

Kodierung

Animation

Beispiel Scanline


Grundlagen


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


http://en.wikipedia.org/wiki/File:Painter%27s_algorithm.svg

Grundlagen

2D Pipeline

Kodierung

Animation

Outline

1 Grundlagen

2 2D Pipeline

3 Kodierung

4 Animation


Grundlagen

2D Pipeline

Kodierung

Animation

Kompression?

Keine medienspezifische, auf den Wahrnehmungsapparatzugeschnittene KompressionAber Daten insgesamt noch recht kleinEvtl. textbasiert undmit allgemeinen Verfahrenkomprimierbar


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


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiel PostScript


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


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiel SVG I


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiel SVG II


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


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiel Font

Oben URW Classico (PostScript, kubische Bezier-Splines), untenSo�maker Opus (Truetype, quadratische Bezier-Splines)


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiel Font (Detail)

Detail PostScript: URW Classico


Grundlagen

2D Pipeline

Kodierung

Animation

Outline

1 Grundlagen

2 2D Pipeline

3 Kodierung

4 Animation


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


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


Grundlagen

2D Pipeline

Kodierung

Animation

Animation von Farben

Animation von Farbe nicht unmittelbar klar (Farbverläufein welchem Farbraum?)



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


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


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


Grundlagen

2D Pipeline

Kodierung

Animation

Beispiele

+ Demonstrationen: Animation


http://mi.kriwi.de/mi/demo_animation/

Grundlagen

2D Pipeline

Kodierung

Animation

2D-Vektorgraphik

Jörg Cassens

Institut für Mathematik und Angewandte Informatik

MedieninformatikWS 2017/2018


2D-Vektorgraphik - mi.kriwi.demi.kriwi.de/mi/MI1-09-2D-Vektorgraphik-JC-slides.pdf · Grundlagen...

Documents

Transcript of 2D-Vektorgraphik - mi.kriwi.demi.kriwi.de/mi/MI1-09-2D-Vektorgraphik-JC-slides.pdf · Grundlagen...