CS404

Vector Graphics Particularly attractive for networked multimedia Compact Scalable Resolution independent Easy to edit However, without standards, adoption of vector graphics for the web has been delayed. Official SVG (Scalable Vector Graphics) De facto SWF (Flash file format) http://www.carto.net/papers/svg/comparison_flash_svg/

© 2004 Ray S. Babcock CS404

Coordinates

In vector graphics, images are built up using shapes that can be easily described mathematically. Coordinates In general, real values on x­y axes y 3 (2.35, 2.9) 2 1 xx 1 2 3

© 2004 Ray S. Babcock CS404

Coordinate Transformations

Often needed to change “user space” to “device space” Y often increases downward on display device application programming interfaces (APIs) Scale is often different between internal scene coordinates and the display device.

© 2004 Ray S. Babcock CS404

Vectors

Pairs of coordinates can define displacements P2

P2 ­ P1 Y2 ­ Y1

P1 X2 ­ X1 When two points are used to specify a displacement in this way, we call it a two dimensional vector. It has length and direction but not specific position.

© 2004 Ray S. Babcock CS404

Objects in Vector Graphics

Points Straight Lines Circles Ellipses Squares Rectangles Etc. We can use coordinate geometry to derive equations for arbitrary sized objects.

© 2004 Ray S. Babcock CS404

Storage

We only need to store the constants used by the formulas. When we need to “draw” an object, we retrieve the constants, and using the formula define the pixels that make up the object. For straight lines algorithms like Bresenham's allow you to calculate pixels using only integer arithmetic (faster).

© 2004 Ray S. Babcock CS404

Lines

If they are not vertical or horizontal, you get “jaggies” or “staircasing” . Anti­aliasing can mediate these. Change the color of surrounding pixels

© 2004 Ray S. Babcock CS404

Vector Graphics Objects polyline

filled rectangle square

circle

© 2004 Ray S. Babcock CS404

Curves

Bezier allows you to specify a curve with only four points. P2 P4

P1 P3

© 2004 Ray S. Babcock CS404

Bezier cont.

© 2004 Ray S. Babcock CS404

Bezier program examples

© 2004 Ray S. Babcock CS404 Stroke and Fill

Open Path

Closed Path

Dashed Effects

Joining Styles Mitre Rounded Bevel

© 2004 Ray S. Babcock CS404

Complex Path

© 2004 Ray S. Babcock CS404

Complex Path Filled

© 2004 Ray S. Babcock CS404

Pattern Fill

© 2004 Ray S. Babcock CS404

Transformations

Scale Rotate Translate Shear (squish) Reflection

© 2004 Ray S. Babcock