cs 3360 – spring 2013jsk061000/cs_3360_spring_2013_2d_graphics...attributes rendering svg ... the...
TRANSCRIPT
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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”
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
Vector graphics ◦ Example: A vector-based image of round four-color swirl
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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)
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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)
Graphics Algorithms for drawing 2D primitives
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)
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D 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
Graphics Algorithms for drawing 2D primitives
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.)
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
Bezier curves ◦ Example: Cubic Bézier curve
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
Bezier curves ◦ Example: A Bézier path in Adobe Illustrator
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
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
Graphics Algorithms for drawing 2D primitives
Questions/comments/what-what? what? what?...what-what? what? what?