Affina avbildningar och vektorgrafik

Transkript

1 och vektorgrafik och vektorgrafik

2 Affin avbildning som matriser Definition En affin avbildning f är en sammansättning av en linjär avbildning x Bx och en translation x x + c och är alltid på formen för en vektor b och en matris A. f (x) = Ax + b och vektorgrafik

3 Exempel på affin avbildning som matriser Exempel Speciellt är en linjär avbildning f (x) = Ax en affin avbildning (med b = 0) och även en translation f (x) = x + b (med A = I). och vektorgrafik

4 Exempel på affin avbildning som matriser Exempel Rotation β moturs kring en punkt (a, b) i planet är en affin avbildning. Denna kan nämligen realiseras som sammansättningen f = f 3 f 2 f 1 mellan translationen f 1 (x) = x ( ) a, b och vektorgrafik

5 Exempel på affin avbildning som matriser den linjära avbildningen f 2 som är rotation β moturs kring origo samt translationen ( ) a f 3 (x) = x +. b Vi får att f (x) = A ( x ( )) a + b ( ) a = Ax + b (( ) a A b ( )) a. b och vektorgrafik

6 som matriser och vektorgrafik utgör en av grundpelarna inom vektorgrafik då de innefattar sådana grundläggande operationer som rotation projektion spegling translation och vektorgrafik

7 som matriser som linjära avbildningar Vi ska nu se hur man kan representera affina avbildningar i planet som linjära avbildningar med 3 3-matriser. Identifiera vektorn ( ) x y med x y 1 och vektorgrafik

8 som matriser som linjära avbildningar och den linjära avbildningen ( a b c d ) ( ) x = y ( ) ax + by cx + dy med a b 0 x ax + by ax + by c d 0 y = cx + dy = cx + dy och vektorgrafik

9 som matriser som linjära avbildningar Translation med ( ) s t kan nu representeras som matrismultiplikationen 1 0 s x x + s 0 1 t y = y + t Det betyder att en affin avbildning f (x) = Ax + b med ( ) ( ) a b s A = och b = c d t representeras med matrisen 1 0 s a b 0 a b s M = 0 1 t c d 0 = c d t och vektorgrafik

10 som matriser som linjära avbildningar Speciellt kommer sammansättning av affina avbildningar att svara mot matrismultiplikation mellan 3 3-matriser. Anmärkning I praktiken behöver man ju bara 6 av elementen i matrisen och två i vektorn så man lagrar bara dessa och har multikationer (a, b, c, d, s, t) (x, y) = (ax + by + s, cx + dy + t) och (a 1, b 1, c 1, d 1, s 1, t 1 ) (a 2, b 2, c 2, d 2, s 2, t 2 ) = (a 1 a 2 + b 1 c 2, a 1 b 2 + b 1 d 2, a 1 s 2 + b 1 t 2 + s 1,...) och vektorgrafik

11 som matriser som linjära avbildningar Motsvarande kan man göra för affina avbildningar i rummet som kan representeras som 4 4-matriser a 11 a 12 a 13 b 1 a 21 a 22 a 23 b 2 a 31 a 32 a 33 b för en affin avbildning f = Ax + b med a 11 a 12 a 13 b 1 A = a 21 a 22 a 23 och b = b 2. a 31 a 32 a 33 b 3 och vektorgrafik

12 Lagring av bilder Det finns två huvudsätt att lagra bilder: pixelbaserat (jpeg, png, tiff etc.) vektorbaserat (svg, vml, ai etc.) lagrar bilden som en sammansättning av enkla objekt såsom linjer, cirklar, polygoner och text. Dessa kan sedan enkelt och utan förlust i bildkvalité roteras, skalas och flyttas runt. och vektorgrafik

13 Scalable Vector Graphics Scalable Vector Graphics (SVG) är standarden för vektorgrafik som tagits fram av W3C, så en standard för (framförallt) webb-sidor. Den är xml-baserad och en enkel fil kan se ut så här: <?xml version= 1.0 encoding= UTF-8?> <svg> <ellipse cx= 60 cy= 26 rx= 22 ry= 7 stroke= black stroke-width= 1 fill= green /> <polygon stroke= black stroke-width= 1 fill= red points= 23.08, , , , ,83.26 /> </svg> och vektorgrafik