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

2. COMP135/COMP535 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 Vector Graphics

3. COMP135/COMP535 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) Coordinates

4. COMP135/COMP535 Specify a displacement by movements in x and y directions –Displacement is also a pair of numbers –P 2 - P 1 = (x 2 -x 1, y 2 -y 1 ), displacement (movement) from P 1 to P 2 –P 2 - P 1 ≠ P 1 - P 2 Vectors

5. COMP135/COMP535 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 Rendering

6. COMP135/COMP535 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 Anti-aliasing

7. COMP135/COMP535 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 Shapes

8. COMP135/COMP535 Smooth curves completely specified by four control points –2 endpoints (P 1, P 4 ) –2 direction points (P 2, P 3 ) Sweep of the curve is determined by length and direction of lines from endpoints to direction points Bézier Curves

9. COMP135/COMP535 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 Paths

10. COMP135/COMP535 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 Stroke & Fill

11. COMP135/COMP535 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) Transformations

12. COMP135/COMP535 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 3-D Vector Graphics

13. COMP135/COMP535 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 3-D Rendering

14. COMP135/COMP535 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 Constructive Solid Geometry

15. COMP135/COMP535 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 Free Form Modelling

16. COMP135/COMP535 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 Procedural Modelling

17. COMP135/COMP535 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 3-D Rendering

18. COMP135/COMP535 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 Shading Algorithms