vector graphics digital multimedia chap.4 2006. 4. 4 이병희 icebyung@hufs.ac.kr

Vector GraphicsDigital Multimedia Chap.4

2006. 4. 4이병희

icebyung@hufs.ac.kr

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

2

Vector Graphics

Vector Graphics Compact Scaleable Resolution-independent Easy to edit

Attractive for networked multimedia

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

3

Coordinates and Vectors

Coordinates Image is stored as a rectangular array of pixels

Rectangular array of pixels, each pixel is identified by row and column numbers (r,c) coordinates

Coordinates of pixels in an image must be integer values between zero and the horizontal or vertical

Coordinate transformation Coordinates in one system are transformed into a different one

Vector 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

P1

P2

P2-P1

X2-X1

Y2-Y1

< Vector >

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

4

Rendering

Represent lines, curves, shapes,... by parameters of their defining equations e.g. : equation of straight line y = mx + c, store m and c (or endpoints)

Compute pixels which must be set in order to draw the object Pixel’s coordinates are always integers Can’t set the value of just part of a pixel The pixel image can only ever approximate the ideal mathematical object Result exhibit ‘jaggies’ or ‘staircasing’

Figure 4.4 Approximating a straight line

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

5

Anti-aliasing

Rendering is sampling and reconstruction Abstract continuous line &c must be approximated by discrete pixels of

finite size Jaggies are form of aliasing caused by undersampling

Anti-aliasing Anti-aliasing is used to reduce aliasing impact Mitigate effect by coloring pixels in shades of grey (for a black line),

brightness varies according to extent of intersection with an idealized 1 pixel wide line

Figure 4.6 Anti-aliased line

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

6

Shapes

Drawing programs and vector graphics languages provide basic repertoire of shapes that can easily be represented mathematically Rectangles and squares Ellipses and circles Straight lines, polylines and polygons Smooth (Bézier) curves Shapes built up out of these elements can be filled with color, patterns or

gradients

polyline

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

7

Carves

Bézier Curves A class of curve Bézier curves (smooth curves) completely specified by four points

2 endpoints (P1, P2)

2 direction points (P3, P4)

Sweep of the curve is determined by length and direction of lines from endpoints to direction points

Constructing a Bézier curves Figure 4.10

figure 4.8 Bézier Curves (p.92)

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

8

Paths

Bézier curves can be combined to make elaborate curves and irregular shapes Joining two Bézier curves

Path Collection of lines and curves Closed path joins up on itself, open path doesn’t

Closed path Open path

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

9

Stroke and Fill

Path is an abstract mathematical entity Path is infinitesimally thin Apply stroke to make path visible (like tracing with ink)

Specify width and color etc Line cap : subtle feature of stroke (shape of end)

Butt cap, round cap, projecting cap

Apply fill to closed path or shape (like coloring it in) Specify color or a gradient or pattern Gradients may be linear or radial

figure 4.20 Gradient fills

figure 4.22 pattern fills

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

10

Transformations

The objects that make up a vector image are stored in the form of a few values

Manipulate vector objects in certain ways by changing stored values that describe them Translation (liner movement) Scaling Reflection Rotation Shearing (skewing)

Original shape scaling reflection rotation shearing

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

11

3-D Graphics

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

3-D Rendering Start with mathematical model of objects in 3-D space, need a 2-D picture,

usually in perspective Need to consider viewpoint ( or camera position) Need to consider lighting (position of light source)

Surface’s appearance (texture, diffuse…) can be determine by position and lighting condition

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

12

3D-Models

Three general approaches to modeling 3-D object Constructive solid geometry Free form modeling Procedural modeling

Constructive solid geometry Simplest approach Build 3-D models out of a few primitive objects such as cube, cylinder,

sphere and pyramid Apply distortions such as squashing or stretching Combine objects using spatial equivalents of set operations

Union, intersection, difference

differenceunion intersection

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

13

3D-Models

Free form modeling Use representation of an object’s boundary surface to define it Build surfaces out of flat polygons or curved patches Construct surface as mesh of flat polygons Can generalize Bézier curves to 3-D surfaces Generate objects by sweeping 2-D cross section along a path

Extrusion and lathing

Procedural modeling Define an object by giving algorithm for constructing it Fractals

Exhibit same structure at all level of detail Model landscape features, clouds

Metaballs

Figure 4.38 constructing a well-known fractal curve

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

14

3D-Rendering

3D models only exist inside computer When working on a model in 3D application, a rendering

operation is needed Rendering high quality images is time consuming Necessary to compromise on quality

Wire frame Used as preview images in modeling program Absence of any surfaces

Hidden surface removal Necessary to determine which surfaces of objects are visible

Figure 4.45 wire frame

이병희이병희 <<icebyung@hufs.ac.kricebyung@hufs.ac.kr>>

15

3D-Rendering

Shading algorithms Interpolate color across each polygon to disguise discontinuities

gouraud shading and phong shading Paong shading takes account of specular reflection

Only deal with each object in isolation Ray tracing

Works by tracing the path of a ray of light Radiosity

Interactions between objects Attempts to model the complex reflections that occur between surfaces

Texture mapping Adding surface details to 3D models