Section 2.

Pixels, Coordinates, and Colors

color model
A way of specifying colors numerically. Each color that can represented in a color model is
assigned one or more numerical component values. An example is the RGB color model, where
a color is specified by three numbers giving the red, green, and blue components of the color.

antialiasing
A technique used to reduce the jagged or "staircase" appearance of diagonal lines, text, and
other shapes that are drawn using pixels. When a pixel is only partly covered by a geometric
shape, then the color of the pixel is a blend of the color of the shape and the color of the
background, with the degree of blending depending on the fraction of the pixel that is covered by
the geometric shape.

aspect ratio
The ratio of the width, w, of a rectangle to the height, h, of the rectangle, expressed either as
a ratio w:h or as a fraction w/h.

RGB color
A color specified by three numbers giving the amount of red, green, and blue in the color.

color component
One of the numbers used in a color model to specify a color. For example, in the RGB color
model, a color is specified by three color components representing the amounts of red, green, and
blue in the color.

HSV color
A color specified by three numbers giving the hue, saturation, and value of the component.
The hue represents the basic color. The saturation is the purity of the color, with a saturation
value of zero producing a shade of gray, that is a color with no actual hue at all. The value
represents the brightness of the color, with a value of zero giving black. (Value is also called
brightness, and the name HSB is sometimes used instead of HSV.)
 HSL color
A color specified by three numbers giving the hue, saturation, and lightness of the
component. The HSL color model is similar to the HSV color model. The main difference is that
in HSL, pure spectral colors occur when L=0.5, while in HSV, they occur when V=1.

alpha color component

An extra component (that is, one of the numbers that are used to specify a color) in a color
model that is not part of the actual color specification. The alpha component is extra information.
It is most often used to specify the degree of transparency of a color.

alpha blending
Using the alpha component of a color to blend the color with a background color, when the
color is drawn over the background color. That is, the new color of a pixel is obtained by
blending the drawing color with the current color, with the degree of blending depending on the
alpha component of the drawing color. Alpha blending is most commonly used to simulate
transparency.

Section 2.2

Shapes
Bresenham's line algorithm
A specific algorithm for deciding which pixels to color to represent a geometric line
segment, using only integer arithmetic. The algorithm can be implemented very efficiently in
computer hardware

stroking a shape
Drawing the outline of a shape, as if a pen is dragged along the boundary of the shape. For a
shape with no interior, such as a line segment, stroking the shape simply means dragging the pen
along the shape.

filling a shape
 Drawing the interior of a shape, by coloring the pixels that lie inside the shape. Filling does
not apply to shapes, such as lines, that have no interior.

winding number
The winding number of a path about a point that does not lie on the path is the number of
times that the path winds around the point, counting each 360-degree rotation in the positive
direction about the point as one and each 360-degree turn in the negative direction as minus one.
To compute the winding number, draw a ray extending from the point to infinity. Each crossing
of the ray by the path counts as 1 if it crosses the ray going in the positive direction and as
negative 1 if it crosses in the negative direction.

pattern fill
Using copies of an image to fill the interior of a two-dimensional shape. The image can be
repeated horizontally and vertically as necessary to cover the shape.

gradient
A pattern of color produced by assigning colors to certain reference points and computing
color for other points by interpolating or extrapolating colors from the reference points. The
effect is a color progression along line segments between reference points. Different rules for
extending the colors beyond those lines produce different types of gradient, such as linear
gradients and radial gradients.

interpolation
Given values for some quantity at certain reference points, computing a value for that
quantity at other points by some kind of averaging applied to the values at the reference points.

linear gradient
A color gradient pattern in which there is a color variation along a certain line, with constant
color along lines perpendicular to that line.

radial gradient
A color gradient pattern in which there are concentric circles, or sometimes ellipses, of
constant color, with a color variation along the radius of the circles.

polygon
 A multi-sided shape lying in a plane and specified by a list of points, called its vertices, and
made up of the line segments from each point in the list to the next point in the list, plus a line
segment from the last point in the list to the first point. All the points are required to lie in the
same plane. Sometimes the term "polygon" includes the interior of the shape as well as its
boundary.

regular polygon
A polygon in which all the sides have the same length and all the angles between consecutive
sides are equal. Usually the term is restricted to simple polygons, which have sides that do not
intersect except at their endpoints.

convex
A convex geometric shape has the property that whenever two points are contained in the
shape, then the line segment between those two points is entirely contained in the shape.

Bezier curve
A smooth curve between two points defined by parametric polynomial equations. A cubic
Bezier curve segment is defined by its two endpoints P1 and P2 and by two control points C1
and C2. The tangent to the curve (its direction and speed) at P1 is given by the line from P1 to
C1. The tangent vector to the curve at P2 is given by the line from C2 to P2. A quadratic Bezier
curve is defined by its two endpoints and a single control point C. The tangent at each endpoint
is the line between that endpoint and C.

Section 2.3

Transforms
viewport
The rectangular area in which the image for 2D or 3D graphics is displayed. The coordinates
on the viewport are pixel coordinates, more properly called device coordinates since they are
actual physical coordinates on the device where the image is being displayed.
world coordinates
The coordinate system in which a scene is defined. The image that is produced of the scene
will show the contents of the world coordinate system that lie within some view volume (for 3D)
or view window (for 2D). Objects are defined in their own object coordinate system. Modeling
transformations are then applied to place objects into the scene; that is, they transform object
coordinates to world coordinates.

view window
As used in this book, the window, or view window, for 2D graphics is the rectangle in the
xy-plane that contains the portion of the plane that will be displayed in the image. (The
corresponding term in 3D graphics is "view volume.")

object coordinates
The coordinate system in which the coordinates for points in an object are originally
specified, before they are transformed by any modeling or other transform that will be applied to
the object.

modeling transformation
A transformation that is applied to an object to map that object into the world coordinate
system or into the object coordinate system for a more complex, hierarchical object.

affine transform
A transform that preserves parallel lines. That is, when the transform is applied to a pair of
lines that are parallel, then the resulting transformed lines are also parallel. An affine transform,
T, has the property that the transform of the line segment between a point (x1,y1) and a point
(x2,y2) is the line between the points T(x1,y1) and T(x2,y2). Effectively, the transform of a line
segment can be computed just by transforming its two endpoints. This makes affine transforms
very efficient for computer graphics. Any affine transform can be represented as a composition
of rotations, translations, and scalings.

SVG
Scalable Vector Graphics. An XML language for specifying 2D vector graphics. SVG is a
scene description language. It is designed to integrate into web pages.

uniform scaling
A scaling transformation in which the scaling factors in all directions are the same. Uniform
scaling changes the size of an object without distorting its shape.
 Euclidean transform
A transform that preserves distances and angles. A Euclidean transform represents a "rigid
motion." That is, the transform of an object is an exact copy of the object, with the same size and
shape. Any Euclidean transform can be represented as a composition of rotations and
translations.

shear transform
A shear transformation in 2D leaves some line, L, fixed, and lines perpendicular to L are
"tilted" relative to L by the same angle. Another description is that a line parallel to L is mapped
to itself, but is moved by an amount proportional to its distance from L. In 3D, a shear
transformation leaves some plane, P, fixed, and it maps a plane parallel to P to itself, but moved
by an amount proportional to its distance from P.

matrix
A rectangular array of numbers. A matrix can be represented as a two-dimensional array,
with numbers arranged in rows and columns. An N-by-N matrix represents a linear
transformation from N-dimensional space to itself.

vector
An element of a vector space. Elements of a vector space can be added and can be multiplied
by constants. For computer graphics, a vector is just a list or array containing two, three, or four
numbers. Vectors in that sense are often used to represent points in 2D, 3D, or 4D space.
Properly, however, a vector represents a quantity that has a length and a direction; a vector used
in this way can be visualized as an arrow.

linear algebra
The field of mathematics that studies vector spaces and linear transformations between them.
Linear algebra is part of the essential mathematical foundation of computer graphics.

linear transformation
A function from one vector space to another that preserves vector addition and multiplication
by constants. Linear transformations can be represented by matrices. In computer graphics, they
are used to implement geometric operations such as rotation and translation.
 Section 2.4

Hierarchical Modeling

hierarchical modeling
Creating complex geometric models in a hierarchical fashion, starting with geometric
primitives, combining them into components that can then be further combined into more
complex components, and so on.

identity transform
A transform that has no effect on its argument. For example, the identity transform in 2D is
given by the formula I(x,y) = (x,y). The identity transform I has the property that if T is any
transform, then I followed by T is the same as T, and T followed by I is the same as T.

JavaScript
A programming language for web pages. JavaScript code on a web page is executed by a
web browser that displays the page, and it can interact with the contents of the web page and
with the user. There are JavaScript APIs for 2D and for 3D graphics

HTML canvas
A canvas element on a web page. The canvas appears as a rectangular area on the page. The
JavaScript programming language can use a canvas element as a drawing surface. HTML is a
language for specifying the content of a web page. JavaScript is the programming language for
web pages. The canvas element supports a 2D graphics API. In many browsers, it also supports
the 3D graphics API, WebGL.

stack
A data structure with the operations push() and pop(). Pushing an item onto a stack just adds
that item to the stack. Popping from the stack will remove and return the item that was most
recently pushed onto the stack.
 Section 2.5

Java Graphics2D
abstract class
In object-oriented programming, a class that is meant to be used only as a basis for
subclasses. Objects can be created from the subclasses, but not from the abstract class itself. The
purpose of an abstract class is to define the properties and behaviors that all of its subclasses
have in common.

control point
A point that does not lie on the curve but that is used to help control the shape of the curve.
For example, a control point for a Bezier curve segment is used to specify the tangent vector
(direction and speed) of the curve at an endpoint.

pattern fill
Using copies of an image to fill the interior of a two-dimensional shape. The image can be
repeated horizontally and vertically as necessary to cover the shape.

RGBA color
An RGB color—specified by red, green, and blue component values—together with an alpha
component. The alpha component is most often take to specify the degree of transparency of the
color, with a maximal alpha value giving a fully opaque color.

affine transform
A transform that preserves parallel lines. That is, when the transform is applied to a pair of
lines that are parallel, then the resulting transformed lines are also parallel. An affine transform,
T, has the property that the transform of the line segment between a point (x1,y1) and a point
(x2,y2) is the line between the points T(x1,y1) and T(x2,y2). Effectively, the transform of a line
segment can be computed just by transforming its two endpoints. This makes affine transforms
very efficient for computer graphics. Any affine transform can be represented as a composition
of rotations, translations, and scalings.
 inverse transform
Given a transform T, the inverse transform of T is a transform that reverses the operation of
T. For example, for a 2D transform, for R to be the inverse of T means that R(T(x,y)) = (x,y).
Scaling by 0.5 is the inverse of scaling by 2. Translation by (-3,5) is the inverse of translation by
(3,-5). Not every transform has an inverse. For example, scaling by a factor of zero has no
inverse.

off-screen canvas
My term for a segment of the computer's memory that can be used as a drawing surface, for
drawing images that are not visible on the screen. Some method should exist for copying the
image from an off-screen canvas onto the screen. In Java, for example, an off-screen canvas can
be implemented as an object of type BufferedImage.

Section 2.6

HTML Canvas Graphics

HTML
HyperText Markup Language. A language that is used for specifying the content of web
pages. An HTML document is made up of text, along with "elements" for adding other content,
such as images, and for defining the structure of the document. Because of nesting of elements,
the document can be represented by a tree-like data structure.

control point
A point that does not lie on the curve but that is used to help control the shape of the curve.
For example, a control point for a Bezier curve segment is used to specify the tangent vector
(direction and speed) of the curve at an endpoint.

CSS
Cascading Style Sheets. A language that is used for specifying the style, or presentation, of
the content of web pages. CSS can control things like colors, backgrounds, fonts, shadows,
borders, and the size and position of elements of the page.
 scene graph
A data structure that represents the objects in a scene, together with attributes of the objects
and the modeling transformations that are applied to the objects. An image of the scene is created
by traversing the scene graph data structure. A scene graph might exist only conceptually, or it
might be an actual data structure in a program.

off-screen canvas
My term for a segment of the computer's memory that can be used as a drawing surface, for
drawing images that are not visible on the screen. Some method should exist for copying the
image from an off-screen canvas onto the screen. In Java, for example, an off-screen canvas can
be implemented as an object of type BufferedImage.

typed array
In JavaScript, an array type that is limited to holding numerical values of a single type. For
example, the type Float32Array represents arrays that can hold 32-bit floating point values, and
Uint8Array arrays can hold only 8-bit integer values. Such arrays are more efficient than general
JavaScript arrays for numerical calculations. The were introduced into JavaScript along with
HTML canvas graphics and WebGL.

Section 2.7

SVG: A Scene Description Language

scene description language

A language that can be used to specify graphics images by stating what's in the image. That
is, the scene is created "declaratively," by stating what it contains, as opposed to being created
"procedurally," by a program. A document written in a scene description language can be used to
generate a scene graph for the scene.
 XML
eXtensible Markup Language. Not a single language as such, but a class of languages that
follow certain syntax rules. For example, SVG is an XML language because it follows those
rules, but it also has further restrictions on its syntax that make it appropriate for specifying 2D
graphics. XML documents, like HTML documents, have a tree-like structure defined by
"elements." However, HTML is not an XML language since it does not follow all the syntax
rules. XHTML is an alternative language for web pages that is similar to HTML but follows
XML syntax rules.

keyframe animation
An animation technique in which the value of some quantity is given explicitly only at
certain times during the animation. The times when the quantity is specified are called
keyframes. Between keyframes, the value of the quantity is obtained by interpolating between
the values specified for the keyframes.