Lecture 4 - Vector Graphics

1. Lecture 4 - Vector Graphics • Digital Multimedia, 2nd edition • Nigel Chapman & Jenny Chapman • Chapter 4

2. Vector Graphics • Compact • Scalable • Resolution-independent • Hence attractive for networked multimedia, but nor widely used on WWW • SVG standard and Flash may lead to more vector Web graphics

3. Coordinates • Rectangular array of pixels, each pixel may be identified by row and column numbers (r,c) • Extend to Cartesian coordinates • Any point in the plane can be identified by its horizontal and vertical distance from the origin • P = (x, y)

4. Vectors • Specify a displacement by movements in x and y directions • Displacement is also a pair of numbers • P2 - P1 = (x2-x1, y2-y1), displacement (movement) from P1 to P2 • P2 - P1 ≠ P1 - P2

5. Rendering • Represent lines, curves, shapes,... by parameters of their defining equations • e.g. line y = mx + c, store m and c (or endpoints) • Compute pixels which must be set in order to draw the line etc • In general, result will exhibit 'jaggies' • Pixels' coordinates are integers, equations use real numbers

6. Anti-aliasing • Rendering is sampling & reconstruction • Abstract continuous line &c must be approximated by discrete pixels of finite size • Jaggies are instance of phenomenon of aliasing • Mitigate effect by colouring pixels in shades of grey (for a black line), brightness varies according to extent of intersection with an idealized 1 pixel wide line

7. Shapes • Drawing programs and vector graphics languages provide basic repertoire of shapes that can easily be represented mathematically • Rectangles and squares (may have rounded corners) • Ellipses and circles • Straight lines, polylines and polygons • Smooth (Bézier) curves

8. Bézier Curves • Smooth curves completely specified by four control points • 2 endpoints (P1, P4) • 2 direction points (P2, P3) • Sweep of the curve is determined by length and direction of lines from endpoints to direction points

9. Paths • Bézier curves can be easily combined to make elaborate smooth paths • Closed path joins up on itself, open path doesn't • If two curves join at a point in such a way that their direction lines through that point form a single line extending the same distance in both directions, the join will be smooth • Pen tool in drawing programs lets you build up curves in this way by dragging at successive anchor points

10. Stroke & Fill • Apply stroke to make path visible (like tracing with ink) • Specify width and colour etc • Apply fill to closed path or shape (like colouring it in) • Specify colour or a gradient or pattern • Gradients may be linear or radial; Illustrator also supports mesh gradients

11. Transformations • Manipulate vector objects in certain ways by changing stored values that describe them • Translation (linear movement) • Scaling • Reflection • Rotation • Shearing (skewing) • Perform transformations with direct manipulation (tools) or numerically (dialogue)

12. 3-D Vector Graphics • Conceptually simple extension of 2-D • Add z-axis at right angles to x- and y-axes • Point is defined by (x, y, z) coordinates, vector is triple of values, etc • Practically complicated and difficult • Requires 3-D visualization skills • Complex tools are hard to master • Considerable processing power is needed

13. 3-D Rendering • Start with mathematical model of objects in 3-D space, need a 2-D picture, usually in perspective • Need to define viewpoint (camera position) • Must consider lighting • Can have different light sources – spots, diffuse, ... • Surface characteristics of object (texture, shininess, etc) determine how it appears under different lighting conditions • Need a model based on physics of light

14. Constructive Solid Geometry • Build 3-D models out of a few primitive objects – cube, cylinder, sphere, pyramid,... • Apply distortions such as squashing or stretching • Combine objects using spatial equivalents of set operations • Union, intersection, difference

15. Free Form Modelling • Use object's boundary surface to define it • cf. use of outline to define 2-D shape • Construct surface as mesh of flat polygons • Use triangles for fast rendering (games) • Can generalize Bézier curves to 3-D surfaces • Generate objects by sweeping 2-D cross section along a path • Extrusion and lathing

16. Procedural Modelling • Define an object by giving algorithm for constructing it • Fractals • Exhibit same structure at all levels of detail • Model landscape features, clouds etc • Metaballs • Coalescing fields around spheres • Model soft objects • Particle systems

17. 3-D Rendering • Wire frame • Simple mathematical projection of 3-D model • Useful for previews • Hidden surface removal • Non-trivial, but well understood • Can colour surfaces arbitrarily, sufficient for removing visual ambiguity of wire frame

18. Shading Algorithms • Interpolate colour across each polygon to disguise discontinuities • Gouraud and Phong shading • Phong shading takes account of specular reflection • Take account of interaction between objects • Ray tracing and radiosity