CS 551 / 645:
Introductory Computer Graphics
David Luebke
cs551@cs.virginia.edu
http://www.cs.virginia.edu/~cs551
David Luebke
7/27/2016
Administrivia

Office hours:
– Luebke:


2:30 - 3:30 Monday, Wednesday
Olsson 219
– Dale / Jinze / Derek:






3 - 4 Tuesday
2 - 3 Thursday
2 - 3 Friday
Small Hall Unixlab for now
Might move to Olsson 227 later
Assignment 1 postponed till Wednesday
David Luebke
7/27/2016
UNIX Section: 4 PM, Olsson 228

Optional UNIX section led by Dale today
– Getting around
– Using make and makefiles
– Using gdb (if time)

We will use 2 libraries: OpenGL and Xforms
– OpenGL native on SGIs; on other platforms Mesa
– Xforms: available on all platforms of interest
David Luebke
7/27/2016
XForms Intro

Xforms: a toolkit for easily building Graphical
User Interfaces, or GUIs
– See http://bragg.phys.uwm.edu/xforms
– Lots of widgets: buttons, sliders, menus, etc.
– Plus, an OpenGL canvas widget that gives us a
viewport or context to draw into with GL or Mesa.


Quick tour now
You’ll learn the details yourself in
Assignment 1
David Luebke
7/27/2016
Mathematical Foundations


FvD appendix gives good review
I’ll give a brief, informal review of some of the
mathematical tools we’ll employ
– Geometry (2D, 3D)
– Trigonometry
– Vector and affine spaces

Points, vectors, and coordinates
– Dot and cross products
– Linear transforms and matrices
David Luebke
7/27/2016
2D Geometry

Know your high-school geometry:
– Total angle around a circle is 360° or 2π radians
– When two lines cross:


Opposite angles are equivalent
Angles along line sum to 180°
– Similar triangles:



David Luebke
All corresponding angles are equivalent
Corresponding pairs of sides have the same length ratio
and are separated by equivalent angles
Any corresponding pairs of sides have same length ratio
7/27/2016
Trigonometry




Sine: “opposite over hypotenuse”
Cosine: “adjacent over hypotenuse”
Tangent: “opposite over adjacent”
Unit circle definitions:
–
–
–
–
David Luebke
sin () = x
cos () = y
tan () = x/y
Etc…
(x, y)
7/27/2016
3D Geometry

To model, animate, and render 3D scenes,
we must specify:
– Location
– Displacement from arbitrary locations
– Orientation

We’ll look at two types of spaces:
– Vector spaces
– Affine spaces

We will often be sloppy about the distinction
David Luebke
7/27/2016
Vector Spaces

Two types of elements:
– Scalars (real numbers): a, b, g, d, …
– Vectors (n-tuples): u, v, w, …

Supports two operations:
– Addition operation u + v, with:
 Identity 0
v+0=v
 Inverse v + (-v) = 0
– Scalar multiplication:
 Distributive rule:
a(u + v) = a(u) + a(v)
(a + b)u = au + bu
David Luebke
7/27/2016
Vector Spaces

A linear combination of vectors results in a
new vector:
v = a1v1 + a2v2 + … + anvn



If the only set of scalars such that
a1v1 + a2v2 + … + anvn = 0
is
a1 = a2 = … = a3 = 0
then we say the vectors are linearly independent
The dimension of a space is the greatest number of
linearly independent vectors possible in a vector set
For a vector space of dimension n, any set of n
linearly independent vectors form a basis
David Luebke
7/27/2016
Vector Spaces:
A Familiar Example

Our common notion of vectors in a 2D plane
is (you guessed it) a vector space:
– Vectors are “arrows” rooted at the origin
– Scalar multiplication “streches” the arrow, changing
its length (magnitude) but not its direction
– Addition uses the “trapezoid rule”:
u+v
y
v
u
x
David Luebke
7/27/2016
Vector Spaces: Basis Vectors

Given a basis for a vector space:
– Each vector in the space is a unique linear
combination of the basis vectors
– The coordinates of a vector are the scalars from
this linear combination
– Best-known example: Cartesian coordinates

Draw example on the board
– Note that a given vector v will have different
coordinates for different bases
David Luebke
7/27/2016
Vectors And Point

We commonly use vectors to represent:
– Points in space (i.e., location)
– Displacements from point to point
– Direction (i.e., orientation)

But we want points and directions to behave
differently
– Ex: To translate something means to move it
without changing its orientation
– Translation of a point = different point
– Translation of a direction = same direction
David Luebke
7/27/2016
Affine Spaces



To be more rigorous, we need an explicit
notion of position
Affine spaces add a third element to vector
spaces: points (P, Q, R, …)
Points support these operations
– Point-point subtraction:

v
Result is a vector pointing from P to Q
– Vector-point addition:

Q-P=v
Q
Result is a new point
P+v=Q
P
– Note that the addition of two points is not defined
David Luebke
7/27/2016
Affine Spaces

Points, like vectors, can be expressed in
coordinates
– The definition uses an affine combination
– Net effect is same: expressing a point in terms of a
basis


Thus the common practice of representing
points as vectors with coordinates (see FvD)
Analogous to equating points and integers in C
– Be careful to avoid nonsensical operations
David Luebke
7/27/2016
Affine Lines: An Aside

Parametric representation of a line with a
direction vector d and a point P1 on the line:
P(a) = Porigin + ad


Restricting 0  a produces a ray
Setting d to P - Q and restricting 0  a  1
produces a line segment between P and Q
David Luebke
7/27/2016
Dot Product

The dot product or, more generally, inner
product of two vectors is a scalar:
v1 • v2 = x1x2 + y1y2 + z1z2 (in 3D)

Useful for many purposes
– Computing the length of a vector: length(v) = sqrt(v • v)
– Normalizing a vector, making it unit-length
– Computing the angle between two vectors:
u • v = |u| |v| cos(θ)
– Checking two vectors for orthogonality
– Projecting one vector onto another
v
θ
u
David Luebke
7/27/2016
Cross Product



The cross product or vector product of two
vectors is a vector:
 y1 z 2  y 2 z1 
v1  v 2   ( x1 z 2  x 2 z1)
 x1 y 2  x 2 y1 
The cross product of two vectors is
orthogonal to both
Right-hand rule dictates direction of cross
product
David Luebke
7/27/2016
Linear Transformations

A linear transformation:
– Maps one vector to another
– Preserves linear combinations


Thus behavior of linear transformation is
completely determined by what it does to a
basis
Turns out any linear transform can be
represented by a matrix
David Luebke
7/27/2016
Matrices

By convention, matrix element Mrc is located
at row r and column c:
 M11 M12
 M21 M22
M
 


Mm1 Mm2

 M1n 
 M2n 

 

 Mmn 
By (OpenGL) convention,
vectors are columns:
David Luebke
 v1 


v   v 2
 v 3 
7/27/2016
Matrices

Matrix-vector multiplication applies a linear
transformation to a vector:
 M11 M12 M13  vx 
M  v  M 21 M 22 M 23  vy 
M31 M32 M33  vz 

Recall how to do matrix multiplication
David Luebke
7/27/2016
Matrix Transformations

A sequence or composition of linear
transformations corresponds to the product
of the corresponding matrices
– Note: the matrices to the right affect vector first
– Note: order of matrices matters!


The identity matrix I has no effect in
multiplication
Some (not all) matrices have an inverse:
M 1 Mv   v
David Luebke
7/27/2016
David Luebke
7/27/2016
The End


Next: drawing lines on a raster display
Reading: FvD 3.2
David Luebke
7/27/2016