1. Dr. Jim Rowan ITEC 2110 Wednesday, September 12
Digital Media
Dr. Jim Rowan
ITEC 2110
Wednesday, September 12

2. Roll call Jones, Crystal L. Marsh, Kerreen A. Thompson, Daniel G.
Tran, Christopher V.

3. Vector Graphics Elegant way to construct digital images that
have a compact representation
are scalable
are easy to edit
Mandatory for 3-D modeling

4. Coordinate systems Bitmapped pixel coordinates (integer) x y 4,0 4,1
4,2
4,9
3,0
3,1
3,2
3,9
0,0
0,1
0,2
0,9 4 3 x 2 1 1 2 3 4 9 y

5. Coordinate systems bitmapped4 3 x 2 1 1 2 3 4 9 y
A= ( , ) B= ( , ) C= ( , ) D= ( , ) E= ( , )

6. Coordinate systems Vector graphics coordinates (real values)
A point is defined by its x and y coordinate y
(x,y)
Can be fractional
Can be negative 2
(1.41, 1.74) 1 1 2 3 x

7. Coordinate systems 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 y
point 1
displacement from
point 1 to point 2...
= [(x2 - x1), (y2 - y1)]
( , )
(1.71,-0.79) 2
(1.41, 1.74) 1
point 2
(3.12, 0.95) 1 2 3 x

8. AKA vector 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 y 2
(1.41, 1.74) 1
(3.12, 0.95) 1 2 3 x

9. Vector graphics? 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)

10. 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

11. 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

12. Window coordinates x (0,0) desktop screen window bounding box y
(100,103)
window 1
(410,290)
window 1
(150,200)
(760,570)

13. 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

14. Here’s our vector 2 1 1 2 3 x

15. Convert Vector to Bitmapped Visually
Convert Vector to Bitmapped Visually... “completely cover the vector with pixels” 2 1 1 2 3 x

16. Vector to Bitmapped 2 1 1 2 3 x

17. The artifact created: The “Jaggies” This can result in “aliasing”2 1 1 2 3 x

18. 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

19. anti aliasing Techniques to mitigate the affect of aliases
Smoothes the edges of jagged lines

20. combating aliases: anti-aliasing techniques
our pixellated line to be displayed (the external model) is in black 2 1 1 2 3 x

21. combating aliases: anti-aliasing techniques
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 2 1 1 2 3 x

22. combating aliases: anti-aliasing techniques2 1 1 2 3 x

23. combating aliases: anti-aliasing techniques “average the grayness”2 1 1 2 3 x

24. 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

25. vector graphics: rectangles and squares
rectangles can be described by two corners
squares are special cases of the rectangle

26. vector graphics: ellipses and circles
ellipses can be described by two points
circles are special cases of the ellipses

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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!

33. Structural hierarchy Car Wheels (4) Doors (2) Lights tire wheel hubcap
handles
inside
lever
outside
button
handle
window(s)
Lights
headlights (2)
tail lights (2+)
stop lights (2+)

34. 3-D: additional complexity
lighting
natural
artificial
surface texture
rendering is extremely computationally expensive (demanding)

35. Lines and curves
Examples of fills

36. Questions?