Post on 31-Dec-2015
description
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
• 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