Digital Media Dr. Jim Rowan ITEC 2110. Vector Graphics Elegant way to construct digital images that –have a compact representation –are scalable –are.

Digital Media

Dr. Jim Rowan

ITEC 2110

Vector Graphics

• Elegant way to construct digital images that – have a compact representation – are scalable– are easy to edit

• Mandatory for 3-D modeling

Coordinate systems

• Bitmapped pixel coordinates (integer)

4,0 4,1 4,2 4,9

3,0 3,1 3,2 3,9

0,0 0,1 0,2 0,9

x

y

0

1

2

3

4

0 1 2 3 4 9

Coordinate systemsbitmapped

A

E

C D

x

y

0

1

2

3

4

0 1 2 3 4 9

B

A= ( , ) B= ( , ) C= ( , ) D= ( , ) E= ( , )

Coordinate systems• Vector graphics coordinates (real values)• A point is defined by its x and y coordinate

0 1 2 3

1

2

x

y

(1.41, 1.74)

(x,y)

Can be fractionalCan be negative

• Vector graphics coordinates (real values)• A displacement (distance between points or movement from one point

to another) can be defined by a pair of points

Coordinate systems

0 1 2 3

1

2

x

y

(1.41, 1.74)

point 1

(3.12, 0.95)

displacement frompoint 1 to point 2...

= [(x2 - x1), (y2 - y1)](3.12 - 1.41, 0.95 - 1.74)(1.71,-0.79)

point 2

• Vectors have magnitude (length) and direction• This vector goes down 0.79 and to the right 1.71• It is a two dimensional (x&y) vector that goes down and to the right

AKA vector

0 1 2 3

1

2

x

y

(1.41, 1.74)

(3.12, 0.95)

• A Grandfathered term• From the time when displays were directly

“steered” by their programs• Give the display two points and it would move

the beam from one point to the other drawing a line...

• This movement could be described as a vector since it has magnitude (length) and direction (from one point to the other)

Vector graphics?

Absolute vs Window coordinates

(top paragraph of page 88)• rendering software renders images in a window• windows can be moved at will so...• the rendering program only knows where the

object is relative to the window it is in• rendering software does not know where the

window is on the screen• a coordinate transformation must be performed

Bounding Box

• what point is used to place an object?

• images can be contained inside a “bounding box” which is the smallest box that contains all the points found in an object

• bounding box is placed by its (0,0) position

Window coordinatesx

y

(0,0)

window 1

window 1

desktop screen

bounding box

(150,200)

window

(410,290)

(760,570)

(100,103)

Vector graphics

• Store shapes very economically in the form of formulas, equations

• A line is defined by y = mx + b (but that is for an infinitely long line)

• In computer graphics we want a line segment, i.e. it has endpoints

• Since a line segment can also be completely described by its endpoints

Here’s our vector

0 1 2 3

1

2

x

Convert Vector to BitmappedVisually... “completely cover

the vector with pixels”

0 1 2 3

1

2

x

Vector to Bitmapped

0 1 2 3

1

2

x

The artifact created:The “Jaggies”

This can result in “aliasing”

0 1 2 3

1

2

x

Aliasing

• When we view a digital photograph, the reconstruction (interpolation) is performed by a display or printer device, and by our eyes and our brain. If the reconstructed image differs from the original image, we are seeing an alias. i.e. Moire’ patterns

• http://en.wikipedia.org/wiki/Aliasing

anti aliasing

• Techniques to mitigate the affect of aliases

• Smoothes the edges of jagged lines

combating aliases:anti-aliasing techniques

0 1 2 3

1

2

x

our pixellated line to be displayed (the external model) is in black

combating aliases:anti-aliasing techniques

0 1 2 3

1

2

x

the original vector graphic line stored in the internal model is in red

our pixellated line to be displayed (the external model) is in black

combating aliases:anti-aliasing techniques

0 1 2 3

1

2

x

combating aliases:anti-aliasing techniques“average the grayness”

0 1 2 3

1

2

x

vector graphics:shapes

• shapes are inherently defined internally• makes it easy to move the shapes around• straight lines are created with a line tool

– internally the line is stored as its endpoints

• connected lines are stored as a polyline– internally the polyline is stored as a series of

points

• closed polylines form a shape

vector graphics:rectangles and squares

• rectangles can be described by two corners• squares are special cases of the rectangle

vector graphics:ellipses and circles

• ellipses can be described by two points• circles are special cases of the ellipses

http://en.wikipedia.org/wiki/Ellipse

vector graphics: curves

• Question: How would you draw a curve using a computer with a mouse?

• You can’t draw smooth lines very easily• Create a tool with handles based on the

Bezier curve that can be manipulated by those handles

Lines and curves

• Bezier curves can be smoothly joined together

• An anchor point is the point where one joins the other

• When a curve closes on itself it is considered a closed curve

• When it doesn’t it’s an open curve

Lines and curves

• Closed (and open for that matter) lines can be filled– This is how drawn shapes become objects like the

cowboy on Toy Story– solid color, pattern or gradient (linear or radial)– Patterns are built of tiles that match across x & y

• Lines have ends– ends can be messy when joined– mitre, rounded, square, bevel

Manipulating objects AKA closed curves

• Translation is a simple up/down side-to-side movement

• Scaling: make bigger or smaller

• Rotation about a point

• Reflection about a line

3-D

• Way more complex than 2-D• 3-D shapes (objects) are defined by their

surfaces• Made even more complicated by the fact that

a 3-D object inside the computer must be translated into 2-D to be rendered on a computer screen...– This results in the need to specify the viewpoint

Structural hierarchy

• Things in the real world are compositions of smaller things

• Things in the 3-D graphics world are also compositions of smaller things

• Hierarchical structure is an excellent way of coping with complexity

• Also seen in object-oriented programming like Java and Squeak!

Structural hierarchyCar

– Wheels (4)• tire• wheel• hubcap

– Doors (2)• handles

– inside» lever

– outside» button» handle

• window(s)

– Lights • headlights (2)• tail lights (2+)• stop lights (2+)

3-D: additional complexity

• lighting– natural– artificial

• surface texture

• rendering is extremely computationally expensive (demanding)

Lines and curves

• Examples of fills

Questions?