Chapter 4Digital Multimedia, 2nd edition

Vector Graphics

4

• Compact

• Scalable

• Resolution-independent

• Hence attractive for networked multimedia

Vector Graphics

86

4

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?

4

• Any point in the plane can be identified by its horizontal and vertical distance from the origin

• P = (x, y)

Coordinates

87

4

• 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

Vectors

88

4

• 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

Rendering

88–89

4

Rendering

• In general, rendering will exhibit 'jaggies'

• Pixels' coordinates are integers, equations use real numbers

4

• Rendering is sampling & reconstruction

• Abstract continuous line must be approximated by discrete pixels of finite size

• Jaggies are instance of phenomenon of aliasing

Aliasing

89–91

4

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

4

Anti-aliasing

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

4

• 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

91–92

4

• 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

Bézier Curves

92–94

4

• Bézier curves can be easily combined to make elaborate smooth paths

• Closed path joins up on itself, open path doesn't

Paths

94–96

4

Paths

• Good “Drawing” programs let you create smooth natural curves.

• Let me show you an example

4

• 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

96–99

4

• 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

101–102

4

• 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

3-D Vector Graphics

103–104

4

3-D Vector Graphics

• Practically complicated and difficult

• Requires 3-D visualization skills

• Complex tools are hard to master

• Considerable processing power is needed

4

• 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

105

4

• 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

106

4

• 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

Free Form Modelling

106–108

4

• 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

108–111

4

• 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

111–112

4

• 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

113–114