The Central Idea

A graphics system repeatedly changes how spatial information is represented.

A simplified pipeline is

\[ \boxed{ \text{model coordinates} \longrightarrow \text{world coordinates} \longrightarrow \text{camera coordinates} \longrightarrow \text{screen coordinates} }. \]

Each stage applies geometric rules that preserve, modify, or project spatial relationships.

Points in Computer Graphics

A point in a two-dimensional scene can be represented as

\[ P=(x,y). \]

A point in three-dimensional space can be represented as

\[ P=(x,y,z). \]

Collections of points can define lines, curves, polygons, surfaces, and three-dimensional models.

Vectors

Vectors describe direction and magnitude.

In graphics they are used for:

A three-dimensional vector may be written

\[ \mathbf{v}=\langle v_x,v_y,v_z\rangle. \]

Model Coordinates

A digital object is often created in its own local coordinate system.

These are called model coordinates or object coordinates.

For example, a cube may be centered at the origin even though it will later appear somewhere else in the scene.

World Coordinates

World coordinates place individual objects into a common scene.

A local model point

\[ \mathbf{p}_{\text{model}} \]

is transformed into world coordinates:

\[ \boxed{ \mathbf{p}_{\text{world}} = T_{\text{model}} \mathbf{p}_{\text{model}} }. \]

The transformation can include scaling, rotation, translation, or a composition of several operations.

Translation

Translation moves every point by the same displacement.

In two dimensions,

\[ (x,y) \longrightarrow (x+a,\;y+b). \]

In vector form,

\[ \boxed{ \mathbf{p}' = \mathbf{p} + \mathbf{d} }. \]

Example: Translating a Point

Translate

\[ P=(3,-2) \]

by

\[ \mathbf{d}=\langle5,4\rangle. \]

Then

\[ P'=(3+5,-2+4). \]

Therefore,

\[ \boxed{P'=(8,2)}. \]

Scaling

Scaling changes size.

Uniform scaling by factor \(k\) sends

\[ (x,y) \]

to

\[ \boxed{(kx,ky)}. \]

In three dimensions,

\[ \boxed{(x,y,z)\longrightarrow(kx,ky,kz)}. \]

Nonuniform Scaling

Different axes can be scaled by different factors:

\[ \boxed{ (x,y,z) \longrightarrow (s_xx,\;s_yy,\;s_zz) }. \]

Nonuniform scaling changes proportions and can distort shape.

Rotation in Two Dimensions

A counterclockwise rotation by angle \(\theta\) about the origin is

\[ \boxed{ R(\theta) = \begin{bmatrix} \cos\theta & -\sin\theta\\ \sin\theta & \cos\theta \end{bmatrix} }. \]

For point vector

\[ \mathbf{p} = \begin{bmatrix} x\\ y \end{bmatrix}, \]

the rotated point is

\[ \boxed{\mathbf{p}'=R(\theta)\mathbf{p}}. \]

Example: Rotating a Point

Rotate

\[ (2,0) \]

by

\[ 90^\circ. \]

Since

\[ \cos90^\circ=0, \qquad \sin90^\circ=1, \]

the result is

\[ \boxed{(0,2)}. \]

Composition of Transformations

Graphics scenes often require several transformations.

For example:

\[ \boxed{ \text{scale} \longrightarrow \text{rotate} \longrightarrow \text{translate} }. \]

The order matters because matrix multiplication is generally not commutative.

Transformation Order Matters

Scaling an object and then translating it generally produces a different result from translating it and then scaling it.

Symbolically,

\[ ST\ne TS \]

in general.

Graphics systems therefore keep careful track of transformation order.

Homogeneous Coordinates

Graphics often embeds ordinary coordinates into a higher-dimensional form so that translation can be represented with matrices.

A two-dimensional point

\[ (x,y) \]

becomes

\[ \boxed{(x,y,1)}. \]

A three-dimensional point

\[ (x,y,z) \]

becomes

\[ \boxed{(x,y,z,1)}. \]

Why Homogeneous Coordinates Are Useful

Translation, rotation, scaling, and projection can be placed into a common matrix-based framework.

This allows many transformations to be composed into a single matrix:

\[ \boxed{ \mathbf{p}'=M\mathbf{p} }. \]

The resulting approach is efficient and structurally consistent.

Camera Coordinates

A camera defines a viewpoint and orientation.

World coordinates are transformed into a coordinate system centered on the camera:

\[ \boxed{ \mathbf{p}_{\text{camera}} = V \mathbf{p}_{\text{world}} }. \]

The matrix \(V\) is commonly called a view transformation.

The Virtual Camera

A virtual camera may be described by:

These parameters determine how the scene is observed.

Projection

A three-dimensional scene must ultimately be represented on a two-dimensional display.

A projection maps spatial points onto a viewing plane.

Two important families are:

Orthographic Projection

In a simple orthographic projection, depth does not affect apparent size.

A point

\[ (x,y,z) \]

may project to

\[ \boxed{(x,y)}. \]

Parallel lines remain parallel under ideal orthographic projection.

Perspective Projection

Perspective projection makes distant objects appear smaller.

In a simplified camera model, projected coordinates can have the form

\[ \boxed{ x'=\frac{fx}{z}, \qquad y'=\frac{fy}{z} }, \]

where \(f\) is related to focal length and \(z\) is depth from the camera.

As \(z\) increases, the projected image becomes smaller.

Example: Perspective Scaling with Depth

Suppose

\[ f=1. \]

A point

\[ (4,2,2) \]

projects to

\[ \left( \frac42,\frac22 \right) = (2,1). \]

A point with the same horizontal and vertical coordinates but twice the depth,

\[ (4,2,4), \]

projects to

\[ \boxed{(1,0.5)}. \]

Field of View

The field of view controls how wide an angular region the camera sees.

A wider field of view includes more of the scene but can produce stronger perspective effects near the edges.

A narrower field of view shows a smaller angular region and can make distant objects appear visually closer together.

Clipping

Not every object in a virtual scene must be drawn.

Clipping removes geometric portions outside the visible viewing region.

In three dimensions, the visible camera region is often represented by a viewing volume such as a box or frustum.

The Viewing Frustum

A perspective camera commonly uses a truncated pyramid-like viewing region called a frustum.

Geometry outside the frustum can be excluded from rendering.

This is a spatial classification problem:

\[ \boxed{ \text{inside visible region} \quad\text{or}\quad \text{outside visible region} }. \]

Screen Coordinates

After projection, points are converted into coordinates associated with the display.

A screen might use pixel coordinates

\[ (u,v), \]

where \(u\) represents horizontal pixel position and \(v\) vertical pixel position.

The origin and axis directions depend on the graphics system.

Rasterization

Rasterization converts geometric primitives such as triangles into pixel fragments for display.

A continuous geometric shape must therefore be sampled onto a discrete grid.

This connects geometry with numerical approximation and digital resolution.

Triangles as Fundamental Primitives

Three-dimensional surfaces are commonly approximated using triangles.

A triangle is determined by three noncollinear vertices:

\[ P_1,\qquad P_2,\qquad P_3. \]

Collections of connected triangles form a triangle mesh.

Why Triangles Are Useful

Triangles are especially useful because:

Mesh Resolution

A curved surface represented by a small number of large triangles may look visibly faceted.

Using more and smaller triangles can approximate the surface more closely.

Higher geometric resolution usually requires more computation and storage.

Surface Normals

A surface normal is a vector perpendicular to a surface.

If two edge vectors of a triangle are

\[ \mathbf{a} \]

and

\[ \mathbf{b}, \]

then a normal direction is given by the cross product

\[ \boxed{ \mathbf{n} = \mathbf{a}\times\mathbf{b} }. \]

Normalizing a Vector

Lighting calculations often use unit direction vectors.

If

\[ \mathbf{v}\ne\mathbf{0}, \]

its normalized form is

\[ \boxed{ \hat{\mathbf{v}} = \frac{\mathbf{v}}{\|\mathbf{v}\|} }. \]

Dot Products and Lighting

The dot product measures directional alignment.

For unit vectors \(\hat{\mathbf{n}}\) and \(\hat{\mathbf{l}}\),

\[ \boxed{ \hat{\mathbf{n}}\cdot\hat{\mathbf{l}} = \cos\theta }, \]

where \(\theta\) is the angle between the surface normal and light direction.

This geometric relationship appears in many simple lighting models.

Visibility

A rendered image must determine which surfaces are visible from the camera.

If one surface lies behind another along the same viewing direction, the nearer surface can hide the farther one.

This is an ordering problem involving depth.

Depth

Depth measures distance along the viewing direction.

A graphics system may compare depth values for competing fragments and keep the one closer to the camera.

The familiar depth buffer or z-buffer implements this idea computationally.

Hidden-Surface Removal

Hidden-surface removal prevents geometry behind visible surfaces from appearing through them.

This turns a three-dimensional ordering relation into a two-dimensional image that respects spatial occlusion.

Texture Coordinates

A texture can be mapped onto a surface using coordinates such as

\[ (u,v). \]

These coordinates identify where points on the model correspond to points in a two-dimensional image.

Texture mapping is therefore another coordinate correspondence problem.

Interpolation

Graphics frequently calculates values between known endpoint values.

Linear interpolation between values \(A\) and \(B\) is

\[ \boxed{ L(t) = (1-t)A+tB, \qquad 0\le t\le1 }. \]

This operation is often called lerp, from linear interpolation.

Example: Interpolating Position

An object moves from

\[ A=(2,3) \]

to

\[ B=(10,7). \]

At \(t=0.25\),

\[ P= 0.75(2,3) + 0.25(10,7). \]

Therefore,

\[ \boxed{P=(4,4)}. \]

Interpolating More Than Position

Interpolation can be applied to:

The mathematical structure is the same even when the interpreted quantity changes.

Barycentric Coordinates

A point inside a triangle can be represented as a weighted combination of the triangle's vertices:

\[ \boxed{ P= \lambda_1P_1 + \lambda_2P_2 + \lambda_3P_3 }. \]

For points in the triangle,

\[ \lambda_1+\lambda_2+\lambda_3=1 \]

with

\[ \lambda_i\ge0. \]

These coordinates support interpolation across triangular surfaces.

Curves in Graphics

Smooth shapes and motion paths often use parametric curves:

\[ \boxed{ \mathbf{r}(t) = \langle x(t),y(t),z(t)\rangle }. \]

Curves are useful for:

Bézier Curves

A quadratic Bézier curve with control points

\[ P_0,\quad P_1,\quad P_2 \]

is

\[ \boxed{ B(t) = (1-t)^2P_0 + 2(1-t)tP_1 + t^2P_2 }, \]

for

\[ 0\le t\le1. \]

Control Points

Control points guide the shape of a curve.

A Bézier curve usually does not pass through every interior control point. Instead, those points influence direction and curvature.

This gives designers a convenient geometric way to shape smooth paths.

Animation

Animation makes scene parameters depend on time.

An object's position may be

\[ \mathbf{p}(t), \]

its orientation may be

\[ \theta(t), \]

and its scale may be

\[ s(t). \]

A rendered frame samples these functions at a particular time.

Frames

An animation consists of a sequence of displayed images called frames.

If the frame rate is

\[ f \]

frames per second, then the time between frames is

\[ \boxed{ \Delta t=\frac{1}{f} }. \]

Example: Frame Timing

At

\[ 60 \]

frames per second,

\[ \Delta t=\frac{1}{60}\text{ s}. \]

Therefore,

\[ \boxed{ \Delta t\approx0.0167\text{ s} }. \]

Keyframes

A keyframe stores an important state of an animated object at a selected time.

Intermediate states can be generated by interpolation.

A simple animation may specify:

\[ P(t_0)=P_0 \]

and

\[ P(t_1)=P_1, \]

then interpolate values for

\[ t_0

Linear Keyframe Interpolation

Let

\[ \tau= \frac{t-t_0}{t_1-t_0}. \]

Then

\[ \boxed{ P(t) = (1-\tau)P_0+\tau P_1 }. \]

Here \(\tau\) runs from \(0\) to \(1\) over the keyframe interval.

Easing

Linear interpolation changes at a constant rate.

Animation often uses an easing function

\[ E(t) \]

to make motion start or stop more gradually.

Instead of using \(t\) directly,

\[ \boxed{ P(t) = (1-E(t))P_0+E(t)P_1 }. \]

Why Easing Matters

Real objects often do not instantly jump to full speed and then stop instantly.

Easing modifies timing so that motion can appear more natural or satisfy a desired stylistic effect.

Geometry determines the path; easing modifies how quickly the object moves along it.

Animating Rotation

In two dimensions, orientation can be interpolated with an angle

\[ \theta(t). \]

For a simple rotation from \(\theta_0\) to \(\theta_1\),

\[ \boxed{ \theta(t) = (1-t)\theta_0+t\theta_1 }. \]

Care is required when angles wrap around \(360^\circ\).

Shortest Angular Interpolation

Suppose an object rotates from

\[ 350^\circ \]

to

\[ 10^\circ. \]

A naive difference gives

\[ 10^\circ-350^\circ=-340^\circ. \]

But the shorter rotation is

\[ \boxed{20^\circ} \]

through the angle wraparound.

Three-Dimensional Rotation

Three-dimensional orientation is more complex because rotations can occur about multiple axes.

Graphics systems may represent orientation using:

  • rotation matrices;
  • Euler angles;
  • axis-angle descriptions;
  • quaternions.

Each representation has different advantages and limitations.

Hierarchical Animation

Many animated models are organized in parent-child relationships.

For example, a hand may be attached to a forearm, which is attached to an upper arm.

Moving a parent transformation also moves its descendants.

This forms a transformation hierarchy.

Transformation Hierarchies

If a child object has local transform \(T_c\) and its parent has transform \(T_p\), the child's world transform can be represented as

\[ \boxed{ T_{\text{world}} = T_pT_c }. \]

Longer chains multiply additional transformations in hierarchical order.

Skeletal Animation

Character animation often uses a virtual skeleton made of joints and bones.

Changing joint transformations moves associated parts of the surface model.

The same geometric ideas used in robot kinematics therefore appear in animated characters.

Forward Kinematics in Animation

Given joint rotations, forward kinematics determines the positions of child joints and attached geometry.

This can be summarized as

\[ \boxed{ \text{joint transformations} \longrightarrow \text{pose} }. \]

Inverse Kinematics in Animation

Inverse kinematics can be used when a character's hand, foot, or other endpoint should reach a desired location.

The target point is specified first, and joint variables are solved so the articulated chain reaches it.

Collision and Intersection

Graphics and animation systems often need to determine whether objects overlap or intersect.

This can support:

  • physical simulation;
  • game interactions;
  • visibility tests;
  • animation constraints;
  • spatial queries.

Bounding Volumes

Complex models can be enclosed in simpler geometric regions such as:

  • circles;
  • spheres;
  • axis-aligned boxes;
  • oriented boxes.

A quick intersection test between simple bounding volumes can reject many impossible collisions before more detailed geometry is examined.

Example: Circle Intersection Test

Two circular objects with centers

\[ C_1,\qquad C_2 \]

and radii

\[ r_1,\qquad r_2 \]

overlap when

\[ \boxed{ \|C_2-C_1\| \le r_1+r_2 }. \]

Simulation and Animation

Animation can be specified directly by an artist or generated from a simulation.

In simulation, motion may be determined by equations involving:

  • forces;
  • velocities;
  • constraints;
  • collisions;
  • time steps.

Geometry describes the spatial state while numerical methods update it over time.

Discrete Time Steps

A simulation often advances in small increments

\[ \Delta t. \]

A simple position update using velocity is

\[ \boxed{ \mathbf{p}_{n+1} = \mathbf{p}_n + \mathbf{v}_n\Delta t }. \]

Smaller time steps can improve approximation but require more computation.

Aliasing

Digital images sample continuous geometry onto discrete pixels.

When the sampling grid is too coarse relative to the represented detail, edges and patterns can appear jagged or distorted.

This is a form of aliasing.

Anti-Aliasing

Anti-aliasing techniques reduce visible sampling artifacts by estimating pixel values from more detailed spatial information.

Conceptually, the problem is one of representing continuous geometry more faithfully on a discrete grid.

Resolution

Screen resolution determines how many discrete sample locations are available.

A display of

\[ 1920\times1080 \]

contains

\[ 1920\cdot1080 = 2{,}073{,}600 \]

pixel positions.

Aspect Ratio

The aspect ratio compares display width with display height.

For a \(1920\times1080\) display,

\[ \frac{1920}{1080} = \frac{16}{9}. \]

Therefore, its aspect ratio is

\[ \boxed{16:9}. \]

Common Error: Applying Transformations in the Wrong Order

Rotation followed by translation generally differs from translation followed by rotation.

Always determine the intended transformation sequence before multiplying matrices.

Common Error: Confusing Local and World Coordinates

A point may have one coordinate in an object's local frame and a different coordinate in the global scene.

Coordinates are meaningful only relative to their frame.

Common Error: Ignoring Perspective Depth

Under perspective projection, two equally sized objects at different depths generally do not appear the same size on screen.

Greater depth usually produces a smaller projected image.

Common Error: Treating a Mesh as Perfectly Smooth

A triangle mesh approximates a surface.

If the triangles are too large relative to the curvature of the surface, geometric faceting can become visible.

Common Error: Interpolating Angles Without Wraparound

Interpolating from \(350^\circ\) to \(10^\circ\) as ordinary numbers can produce an unnecessary \(340^\circ\) rotation.

Angular periodicity must be considered when the shortest or intended rotation matters.

Common Error: Confusing Path with Timing

A curve specifies where an object moves.

Animation timing specifies when the object reaches each part of the curve.

Two animations can use the same path but very different timing.

Common Error: Ignoring Frame Rate

Motion sampled too sparsely in time can appear jerky or can miss important intermediate states.

Frame rate and simulation time step both affect how continuous motion is represented digitally.

A Reliable Procedure for Graphics Transformation Problems

  1. Identify the coordinate frame of the original point or object.
  2. List the required transformations in their intended order.
  3. Write the appropriate transformation equations or matrices.
  4. Apply the transformations in order.
  5. Track whether coordinates are local, world, camera, or screen coordinates.
  6. Check whether the result preserves or changes size, angle, orientation, or position as expected.

A Reliable Procedure for Projection Problems

  1. Identify whether the projection is orthographic or perspective.
  2. Identify the camera coordinate system.
  3. Determine the point's depth relative to the camera.
  4. Apply the projection relationship.
  5. Convert the projected result to the required screen coordinate system if needed.
  6. Check whether greater depth produces the expected visual effect.

A Reliable Procedure for Animation Problems

  1. Identify the animated quantity.
  2. Identify the start and end times.
  3. Identify the start and end values or keyframes.
  4. Normalize time to a parameter between \(0\) and \(1\) when useful.
  5. Choose the interpolation or easing rule.
  6. Evaluate the animated state at the required time.
  7. Check periodic quantities such as angles for wraparound.
  8. Check whether motion is spatially and temporally reasonable.

Example: Full Graphics Workflow

A model point begins at

\[ P=(1,0). \]

First rotate it by

\[ 90^\circ \]

about the origin:

\[ (1,0)\longrightarrow(0,1). \]

Then translate it by

\[ \langle4,2\rangle. \]

The final world-coordinate point is

\[ (0+4,\;1+2). \]

Therefore,

\[ \boxed{P_{\text{world}}=(4,3)}. \]

If translation had occurred before rotation, the final point would generally be different. The transformation order is part of the problem definition.

Practice 1: Translation

Translate

\[ (2,-1) \]

by

\[ \langle5,3\rangle. \]

Practice 2: Scaling

Uniformly scale

\[ (3,-4) \]

by factor

\[ 2. \]

Practice 3: Rotation

Rotate

\[ (0,5) \]

counterclockwise by

\[ 90^\circ. \]

Practice 4: Perspective Projection

Using

\[ x'=\frac{x}{z}, \qquad y'=\frac{y}{z}, \]

project the point

\[ (6,3,3). \]

Practice 5: Frame Time

Find the time between frames for an animation running at

\[ 30 \]

frames per second.

Practice 6: Linear Interpolation

Interpolate halfway between

\[ A=(2,6) \]

and

\[ B=(10,14). \]

Practice 7: Keyframe Timing

An animation moves from value \(20\) at \(t=2\) seconds to value \(80\) at \(t=8\) seconds.

Using linear interpolation, find the value at

\[ t=5\text{ s}. \]

Practice 8: Circle Intersection

Two circular objects have radii

\[ 2 \]

and

\[ 3. \]

Their centers are \(4\) units apart. Do the circles overlap or touch?

Practice 9: Aspect Ratio

Simplify the aspect ratio of a

\[ 2560\times1440 \]

display.

Practice 10: Identify the Error

A student rotates an object and then translates it, but claims the same result would always occur if the translation happened first.

Explain the error.

Practice Answers

Practice 1

\[ (2,-1)+(5,3)=(7,2). \]

Therefore,

\[ \boxed{(7,2)}. \]

Practice 2

\[ (3,-4)\longrightarrow(6,-8). \]

Therefore,

\[ \boxed{(6,-8)}. \]

Practice 3

A \(90^\circ\) counterclockwise rotation sends

\[ (x,y)\longrightarrow(-y,x). \]

Therefore,

\[ \boxed{(0,5)\longrightarrow(-5,0)}. \]

Practice 4

\[ x'=\frac63=2, \qquad y'=\frac33=1. \]

Therefore,

\[ \boxed{(2,1)}. \]

Practice 5

\[ \Delta t=\frac{1}{30}\text{ s}. \]

Therefore,

\[ \boxed{\Delta t\approx0.0333\text{ s}}. \]

Practice 6

\[ \frac12(2,6)+\frac12(10,14). \]

Therefore,

\[ \boxed{(6,10)}. \]

Practice 7

Normalize time:

\[ \tau= \frac{5-2}{8-2} = \frac36 = \frac12. \]

Therefore,

\[ L= (1-\tfrac12)(20) + \tfrac12(80) = 50. \]

Thus,

\[ \boxed{50}. \]

Practice 8

The sum of the radii is

\[ 2+3=5. \]

Since the center distance is

\[ 4<5, \]

the circles overlap.

Therefore,

\[ \boxed{\text{the circles overlap}}. \]

Practice 9

\[ \frac{2560}{1440} = \frac{16}{9}. \]

Therefore,

\[ \boxed{16:9}. \]

Practice 10

Transformation composition is generally order-dependent.

Rotation followed by translation gives

\[ TR\mathbf{p}, \]

while translation followed by rotation gives

\[ RT\mathbf{p}. \]

In general,

\[ \boxed{TR\ne RT}. \]

What to Remember

  • Computer graphics moves spatial information through several coordinate systems.
  • Translation, rotation, and scaling are fundamental transformations.
  • Transformation order matters.
  • Homogeneous coordinates place multiple transformations into a common matrix framework.
  • Camera transformations express the scene relative to the viewpoint.
  • Orthographic and perspective projections map three-dimensional geometry onto a two-dimensional display.
  • Perspective makes apparent size depend on depth.
  • Triangle meshes approximate complex surfaces.
  • Surface normals, dot products, and depth relationships support lighting and visibility calculations.
  • Interpolation estimates values between known endpoints or vertices.
  • Bézier curves provide smooth parametric paths controlled by geometric points.
  • Animation makes spatial quantities functions of time.
  • Keyframes and easing control how values change over an animation interval.
  • Hierarchical transformations connect articulated objects such as characters and mechanical assemblies.
  • Sampling, frame rate, rasterization, and resolution determine how continuous geometry and motion are represented digitally.

The central graphics pipeline is:

\[ \boxed{ \text{virtual geometry} + \text{transformations} + \text{projection} + \text{sampling} \longrightarrow \text{image and animation} }. \]

Where We Go Next

Computer graphics places virtual objects within coordinate systems and projects them into images. Many real-world positioning problems perform a related task on much larger scales by locating points on Earth or in space.

The next lesson, Geographic and Astronomical Positioning, develops spatial methods for latitude, longitude, spherical coordinates, elevation, celestial position, distance, and large-scale location.