CS 3360 – Spring 2013jsk061000/CS_3360_Spring_2013_2d_graphics...attributes Rendering SVG ... the...

CS 3360 – Spring 2013

Instructor: Dr. J. Steven Kirtzic, PhD

Graphics Algorithms for Drawing 2D Primitives– Part 3

Graphics Algorithms for drawing 2D primitives

Raster graphics ◦ Introduction In computer graphics, a “raster graphics” image, or

“bitmap”, is a dot matrix data structure representing a generally rectangular grid of pixels, viewable via a monitor, paper, or other display medium

Raster images are stored in image files with varying

formats A bitmap corresponds bit-for-bit with an image

displayed on a screen, generally in the same format used for storage in the display's video memory, or possibly as a device-independent bitmap


Raster graphics A bitmap is technically characterized by the width and height of the image in pixels and by the number of bits per pixel (a “color depth”, which determines the number of colors it can represent)

The printing and prepress industries know raster graphics as “contones” (from "continuous tones")

The opposite to contones is "line work", usually implemented as vector graphics in digital systems


Raster graphics The smiley face in

the top left corner is a bitmap image

When enlarged,

individual pixels appear as squares Zooming in further, they can

be analyzed, with their colors constructed by adding the values for red, green and blue


Raster graphics ◦ Resolution Raster graphics are resolution dependent They cannot scale up to an arbitrary resolution without

loss of apparent quality This property contrasts with the capabilities of vector

graphics, which easily scale up to the quality of the device rendering them

Raster graphics deal more practically than vector

graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design


Raster graphics ◦ Resolution Modern computer-monitors typically display about 72 to 130 pixels per inch (PPI), and some modern consumer printers can resolve 2400 dots per inch (DPI) or more; determining the most appropriate image resolution for a given printer-resolution can pose difficulties, since printed output may have a greater level of detail than a viewer can discern on a monitor

Typically, a resolution of 150 to 300 pixel per inch works well for 4-color process (CMYK) printing


Raster graphics ◦ Resolution However, for printing technologies that perform color

mixing through “dithering” rather than through “overprinting” (virtually all home and office, inkjet and laser printers included), printer DPI and image PPI have a very different meaning, and this can be misleading

This is because through the dithering process, the printer

builds a single image pixel out of several printer dots to increase color depth, the printer's DPI setting must be set far higher than the desired PPI to ensure sufficient color depth without sacrificing image resolution

Thus, for instance, printing an image at 250 PPI may

actually require a printer setting of 1200 DPI


Raster graphics ◦ Raster-based image editors Raster-based image editors, such as Painter,

Photoshop, MS Paint, and GIMP, revolve around editing pixels, unlike vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, which revolve around editing lines and shapes (vectors)

When an image is rendered in a raster-based image editor, the image is composed of millions of pixels

At its core, a raster image editor works by manipulating each individual pixel

Most pixel-based image editors work using the RGB color model, but some also allow the use of other color models such as the CMYK color model


Vector graphics ◦ Introduction Vector graphics is the use of geometrical primitives

such as points, lines, curves, and shapes (polygons), which are all based on mathematical expressions, to represent images in computer graphics

"Vector", in this context, implies more than a straight

line Vector graphics are based on vectors (also called

“paths”, or “strokes”) which lead through locations called “control points”

Each of these points has a definite position on the x

and y axes of the rendering surface


Vector graphics ◦ Introduction Each point, as well, is a type of small database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track)

Each track can be assigned a color, a shape, a thickness and also a fill

This does not affect the size of the files in a substantial way because all information resides in the structure; it describes how to draw the vector


Vector graphics Example: Showing the effect of

vector graphics versus raster graphics The original vector-based illustration

is at the left The upper-right image illustrates

magnification of 7x as a vector graphic The lower-right illustrates the same

magnification as a raster (bitmap) graphic Raster images are based on pixels and so when scaled there is a loss of clarity, while vector-based graphics can be scaled by any amount without degrading quality


Vector graphics ◦ Overview As we know, computer displays are made up from

pixels The smaller and closer the pixels are together, the

better the quality (resolution) of the image, but a larger file is required to store the increased pixel count

However, modern storage devices and working memory

have gigabyte, even terabyte capacities, so there is less need for particularly compact forms of data

Modern displays and printers are raster devices; vector

formats have to be converted to raster format before they can be displayed or printed


Vector graphics ◦ Overview The size of the bitmap/raster-format file generated by

the conversion will depend on the resolution required, but the size of the vector file generating the bitmap/raster file will always remain the same

Thus, it is easy to convert from a vector file to a range

of bitmap/raster file formats but it is much more difficult to go in the opposite direction, especially if subsequent editing of the vector image is required

It is often an advantage to save an image created from

a vector source file as a bitmap/raster format, because different systems have different (and incompatible) vector formats, and some might not support vector graphics at all


Vector graphics ◦ Overview However, once a file is converted from the vector format, it is likely to be bigger, and it loses the advantage of scalability without loss of resolution

It will also no longer be possible to edit individual parts of the image as discrete objects

The file size of a vector graphic image depends on the number of graphic elements it contains, not pixels; it is a list of descriptions


Vector graphics ◦ Overview In computer typography, modern outline fonts describe

printable characters (glyphs) by cubic or quadratic mathematical curves with control points (Bezier curves)

Nevertheless, bitmap fonts are still in use Converting outlines requires filling them in; converting to

bitmaps is not trivial, because bitmaps often don't have sufficient resolution to avoid aliasing (stair-stepping), especially with smaller visible character sizes

Processing outline character data in a sophisticated

fashion to create satisfactory bitmaps for rendering is called "hinting”


Vector graphics ◦ Overview Vector formats are not always appropriate in graphics work

For example, devices such as cameras and scanners produce essentially continuous-tone raster graphics that are impractical to convert into vectors, and so for this type of work, an image editor will operate on the pixels rather than on drawing objects defined by mathematical expressions


Vector graphics ◦ Overview Comprehensive graphics tools will combine images from vector and raster sources, and may provide editing tools for both, since some parts of an image could come from a camera source, and others could have been drawn using vector tools


Vector graphics ◦ Example: A vector-based image of round four-color swirl


Vector graphics ◦ Standards The World Wide Web Consortium (W3C) standard for

vector graphics is Scalable Vector Graphics (SVG)

The standard is complex and has been relatively slow to be established at least in part owing to commercial interests

Many web browsers now have some support for rendering SVG data but full implementations of the standard are still comparatively rare

In recent years, SVG has become a significant format that is completely independent of the resolution of the rendering device, typically a printer or display monitor


Vector graphics ◦ Standards SVG files are essentially printable text that describes

both straight and curved paths, as well as other attributes

Rendering SVG requires conversion to raster format at

a resolution appropriate for the current task

SVG is also a format for animated graphics

There is also a version of SVG for mobile phones, SVGT (SVG Tiny version)


Vector graphics ◦ Applications The earliest 2D computer graphics were all vector

graphics

One of the first uses of vector graphic displays was the US SAGE air defense system

Vector graphics systems were only retired from the U.S. en route air traffic control in 1999, and are likely still in use in military and specialized systems

Vector graphics were also used on the TX-2 at the MIT Lincoln Laboratory by computer graphics pioneer Ivan Sutherland to run his program Sketchpad in 1963


Vector graphics ◦ Applications Subsequent vector graphics systems, most of which

iterated through dynamically modifiable stored lists of drawing instructions, include the IBM 2250, Imlac PDS-1, and DEC GT40

There was a home gaming system that used vector graphics called Vectrex as well as various arcade games like Asteroids and Space Wars

Storage scope displays, such as the Tektronix 4014, could display vector images but not modify them without first erasing the display


Vector graphics ◦ Applications Modern vector graphics displays can sometimes be found at laser light shows, where two fast-moving X-Y mirrors position the laser beam to rapidly draw shapes and text as straight and curved strokes on a screen


Vector graphics ◦ Example: An original reference photograph before

vectorization (a) and the resulting image (b)

◦ Detail can be added or removed from vector art ◦ Vector illustrations can have their own color, allowing artists to achieve desired results

(a)

(b)


Vector graphics ◦ Information Consider a circle of radius r The main pieces of information a program needs in order to draw this circle are: ◦ an indication that what is to be drawn is a circle ◦ the radius r ◦ the location of the center point of the circle ◦ stroke line style and color (possibly transparent) ◦ fill style and color (possibly transparent)


Vector graphics ◦ Information Advantages to this style of drawing over raster graphics: ◦ This minimal amount of information translates to a

much smaller file size compared to large raster images (the size of representation does not depend on the dimensions of the object), though a vector graphic with a small file size is often said to lack detail compared with a real world photo


Vector graphics ◦ Information Correspondingly, one can infinitely zoom in on e.g. a circle

arc, and it remains smooth

On the other hand, a polygon representing a curve will reveal being not really curved

On zooming in, lines and curves need not get wider proportionally

Often the width is either not increased or less than proportional

On the other hand, irregular curves represented by simple geometric shapes may be made proportionally wider when zooming in, to keep them looking smooth and not like these geometric shapes


Vector graphics ◦ Information The parameters of objects are stored and can be later

modified

This means that moving, scaling, rotating, filling etc., doesn't degrade the quality of a drawing

Moreover, it is usual to specify the dimensions in device-independent units, which results in the best possible rasterization on raster devices

From a 3-D perspective, rendering shadows is also much more realistic with vector graphics, as shadows can be abstracted into the rays of light from which they are formed

This allows for photo realistic images and renderings


Vector graphics ◦ Typical primitive objects Different vector file format support different kinds of primitive objects Nearly all vector file formats support simple and fast-rendering primitive objects: ◦ Lines, polylines and polygons ◦ Bézier curves and Bézier regions ◦ Circles and ellipses


Vector graphics ◦ Typical primitive objects Most vector file formats support:

◦ Text (in computer font formats such as TrueType where each letter is created from Bézier curves) or quadratics

◦ Color gradient


Vector graphics ◦ Typical primitive objects Often, a bitmap image is considered as a primitive object From a conceptual view, it behaves as a rectangle A few vector file formats support more complex objects as primitives


Vector graphics ◦ Typical primitive objects Many computer-aided design applications support

splines and other curves, such as: ◦ Catmull–Rom splines ◦ NURBS ◦ Iterated function systems ◦ Superellipses and superellipsoids ◦ Metaballs ◦ etc.

If an image stored in one vector file format is converted to another file format that supports all the primitive objects used in that particular image, then the conversion can be lossless


Vector graphics ◦ Vector operations Vector graphics editors typically allow rotation, movement (without rotation), mirroring, stretching, skewing, affine transformations, changing of z-order (what's in front of what) and a combination of primitives into more complex objects (composition)

More sophisticated transformations include set operations on closed shapes (union, difference, intersection, etc.)


Vector graphics ◦ Vector operations Vector graphics are ideal for simple or composite drawings that need to be device-independent, or do not need to achieve photo-realism

For example, the PostScript and PDF page description languages use a vector graphics model


Vector graphics ◦ Printing Vector art is ideal for printing Since the art is made from a series of mathematical

curves it will print very crisply even when resized

For instance, one can print a vector logo on a small sheet of copy paper, and then enlarge the same vector logo to billboard size and keep the same crisp quality

A low-resolution raster graphic would blur or pixelate excessively if it were enlarged from business card size to billboard size


Vector graphics ◦ Printing The precise resolution of a raster graphic necessary for

high-quality results depends on the viewing distance; e.g., a billboard may still appear to be of high quality even at low resolution if the viewing distance is large enough

If we regard typographic characters as images, then the same considerations that we have made for graphics apply to compositions of written text for printing (typesetting)

Older character sets were stored as bitmaps, therefore to achieve maximum print quality they had to be used at a given resolution only; these font formats are said to be non-scalable


Vector graphics ◦ Printing High quality typography is nowadays based on character drawings (fonts) which are typically stored as vector graphics, and as such are scalable to any size Examples of these vector formats for characters are Postscript fonts and TrueType fonts


Vector graphics ◦ Vector illustration Vector illustration is a popular technique of many digital illustrators worldwide

Some of the most well known artists in the field are Catalina Estrada, Petra Stefankova, Nathan Jurevicius, J. Otto Seibold, Matthew Inman, Leo Blanchette and others


Vector graphics ◦ 3D modeling In 3D computer graphics, vectorized surface

representations are most common (bitmaps can be used for special purposes such as surface texturing, height-field data and bump mapping)

At the low-end, simple meshes of polygons are used to

represent geometric detail in applications where interactive frame rates or simplicity are important

At the high-end, where one is willing to trade-off higher rendering times for increased image quality and precision, smooth surface representations such as Bézier patches, NURBS or Subdivision surfaces are used


Vector graphics ◦ 3D modeling One can, however, achieve a smooth surface rendering from a polygonal mesh through the use of shading algorithms such as Phong and Gouraud


Major graphic file formats ◦ Raster formats JPEG/JFIF JPEG 2000 Exif TIFF RAW GIF BMP PNG PPM, PGM, PBM, PNM and PFM PAM WEBP

◦ HDR Raster formats RGBE (Radiance HDR) IFF-RGFX


Major graphic file formats ◦ Vector formats CGM Gerber Format (RS-274X) SVG Other 2D vector formats 3D vector formats

◦ Compound formats ◦ Stereo formats MPO PNS JPS


Bezier curves ◦ A Bézier curve is a parametric curve frequently

used in computer graphics and related fields ◦ In vector graphics, Bézier curves are used to model

smooth curves that can be scaled indefinitely ◦ "Paths," as they are commonly referred to in image

manipulation programs, are combinations of linked Bézier curves

◦ Paths are not bound by the limits of rasterized

images and are intuitive to modify


Bezier curves ◦ Bézier curves are also used in animation as a tool

to control motion ◦ In addition, Bézier curves are used in the time

domain, particularly in animation and interface design, e.g., a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step

◦ When animators or interface designers talk about

the "physics" or "feel" of an operation, they may be referring to the particular Bézier curve used to control the velocity over time of the move in question


Bezier curves ◦ The mathematical basis for Bézier curves —

Bernstein basis polynomials, was known since 1912, but its applicability to graphics was understood half a century later

◦ Bézier curves were widely publicized in 1962 by the

French engineer Pierre Bézier, who used them to design automobile bodies at Renault

◦ The study of these curves was however first

developed in 1959 by mathematician Paul de Casteljau using de Casteljau's algorithm, a numerically stable method to evaluate Bézier curves, at Citroën, another French automaker


Bezier curves ◦ Example: Cubic Bézier curve


Bezier curves ◦ Computer graphics Bézier curves are widely used in computer graphics to

model smooth curves As the curve is completely contained in the convex hull

of its control points, the points can be graphically displayed and used to manipulate the curve intuitively

Affine transformations such as translation, and rotation

can be applied on the curve by applying the respective transform on the control points of the curve

Quadratic and cubic Bézier curves are the most

common types


Bezier curves ◦ Computer graphics Higher degree curves are more computationally

expensive to evaluate When more complex shapes are needed, low order

Bézier curves are patched together, producing a Bézier “spline”

A Bézier spline is commonly referred to as a "path" in

vector graphics standards (like SVG) and vector graphics programs (like Adobe Illustrator, CorelDraw and Inkscape)

To guarantee smoothness, the control point at which

two curves meet must be on the line between the two control points on either side


Bezier curves ◦ Computer graphics The simplest method for scan converting (rasterizing) a

Bézier curve is to evaluate it at many closely spaced points and scan convert the approximating sequence of line segments

However, this does not guarantee that the rasterized

output looks sufficiently smooth, because the points may be spaced too far apart

Conversely it may generate too many points in areas

where the curve is close to linear A common adaptive method is recursive subdivision, in

which a curve's control points are checked to see if the curve approximates a line segment to within a small tolerance


Bezier curves ◦ Computer graphics If not, the curve is subdivided parametrically into two segments, 0 ≤ t ≤ 0.5 and 0.5 ≤ t ≤ 1, and the same procedure is applied recursively to each half

Analytical methods where a spline is intersected with each scan line involve finding roots of cubic polynomials (for cubic splines) and dealing with multiple roots, so they are not often used in practice


Bezier curves ◦ Example: A Bézier path in Adobe Illustrator


Bezier curves ◦ Animation In animation applications, such as Adobe Flash and Synfig, Bézier curves are used to outline, for example, movement

Users outline the wanted path in Bézier curves, and the application creates the needed frames for the object to move along the path

For 3D animation Bézier curves are often used to define 3D paths as well as 2D curves for keyframe interpolation


Bezier curves ◦ Fonts TrueType fonts use Bézier splines composed of quadratic Bézier curves

Modern imaging systems like PostScript, Asymptote, Metafont, and SVG use Bézier splines composed of cubic Bézier curves for drawing curved shapes

OpenType fonts can use either types, depending on the style of the font


Bezier curves ◦ Fonts The internal rendering of all Bézier curves in font or vector graphics renderers will split them recursively up to the point where the curve is flat enough to be drawn as a series of linear or circular segments

The "smooth curve" feature of charts in Microsoft Excel also uses this algorithm


Bezier curves ◦ Fonts Because arcs of circles and ellipses cannot be exactly

represented by Bézier curves, they are first approximated by Bézier curves, which are in turn approximated by arcs of circles

This is inefficient as there exists also approximations of

all Bézier curves using arcs of circles or ellipses, which can be rendered incrementally with arbitrary precision

Another approach, used by modern hardware graphics

adapters with accelerated geometry, can convert exactly all Bézier and conic curves (or surfaces) into “NURBS”, that can be rendered incrementally without first splitting the curve recursively to reach the necessary flatness condition


Bezier curves ◦ Fonts This approach also allows preserving the curve definition under all linear or perspective 2D and 3D transforms and projections

Font engines, like FreeType, draw the font's curves (and lines) on a pixelated surface, in a process called Font rasterization


Questions/comments/what-what? what? what?...what-what? what? what?

CS 3360 – Spring 2013jsk061000/CS_3360_Spring_2013_2d_graphics...attributes Rendering SVG ... the...

Documents

Transcript of CS 3360 – Spring 2013jsk061000/CS_3360_Spring_2013_2d_graphics...attributes Rendering SVG ... the...