Vector Graphics

1. Vector Graphics • Chapter 4 • Digital Multimedia, 2nd edition

2. 86 Vector Graphics • Compact • Scalable • Resolution-independent • Hence attractive for networked multimedia

3. Vector Graphics • Not widely used on WWW until the arrival of Flash • SVG is an open standard supported by many web browsers, but few people use this format. • SVG format: http://www.w3schools.com/svg/svg_intro.asp • Example: http://www.croczilla.com/svg/samples/butterfly/butterfly.svg • Flash is proprietary (well, for now…)

4. Proprietary vs. Open • What is the difference between standard open file formats and proprietary formats?

5. 87 Coordinates • Any point in the plane can be identified by its horizontal and vertical distance from the origin • P = (x, y)

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

7. 88–89 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

8. Rendering • In general, rendering will exhibit 'jaggies' • Pixels' coordinates are integers, equations use real numbers

9. 89–91 Aliasing • Rendering is sampling & reconstruction • Abstract continuous line must be approximated by discrete pixels of finite size • Jaggies are instance of phenomenon of aliasing

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

11. Anti-aliasing • http://en.wikipedia.org/wiki/Anti-aliased

12. 91–92 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

13. 92–94 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

14. 94–96 Paths • Bézier curves can be easily combined to make elaborate smooth paths • Closed path joins up on itself, open path doesn't

15. Paths • Good “Drawing” programs let you create smooth natural curves. • Let me show you an example

16. 96–99 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

17. 101–102 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)

18. 103–104 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

19. 3-D Vector Graphics • Practically complicated and difficult • Requires 3-D visualization skills • Complex tools are hard to master • Considerable processing power is needed

20. 105 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

21. 106 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

22. 106–108 Free Form Modelling • Use object's boundary surface to define it • 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

23. 108–111 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

24. 111–112 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

25. 113–114 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