1

2M050: Computer Graphics

Jack van Wijk
vanwijk@win.tue.nl
HG6.71
2
Aims
• Introduce basic graphics concepts and
terminology

• Base for development of 2D interactive
computer graphics programmes (OGO 2.3)
3
Literature
Computer Graphics - Principles and Practice
Foley - van Dam - Feiner - Hughes
2nd edition in C - Addison and Wesley

Computer Graphics - C Version
Donald Hearn - M. Pauline Baker
2nd edition - international edition
Prentice Hall
4
Overview
Introduction
Geometry
Interaction
Raster graphics
5
Introduction
What is Computer Graphics?
Applications
Computer Graphics in Eindhoven
Raster/vector graphics
Hardware
6
Computer Graphics
Computer Graphics is ubiquitous:
• Visual system is most important sense:
– High bandwidth
– Natural communication
• Fast developments in
– Hardware
– Software
7
Computer Graphics
Image
Mathematical
Model
Image Analysis
(pattern recognition)
Image Synthesis
(Rendering)
Modeling Image processing
8
Supporting Disciplines
• Computer science (algorithms, data
structures, software engineering, …)
• Mathematics (geometry, numerical, …)
• Physics (Optics, mechanics, …)
• Psychology (Colour, perception)
• Art and design
9
Applications
• Computer Aided Design (CAD)
• Computer Aided Geometric Design (CAGD)
• Entertainment (animation, games, …)
• Geographic Information Systems (GIS)
• Visualization (Scientific Vis., Inform. Vis.)
• Medical Visualization
• …

10
Computer Graphics Eindhoven
Current:
•Information visualisation
•Interactive 3D design
•Virtual reality

Past: Rasterization, Animation
Jack van Wijk
Kees Huizing
Arjan Kok
Robert van Liere
Wim Nuij
Alex Telea
Huub van de Wetering
11
Interactive Computer Graphics
User
Application
Screen
input
image
12
Graphics pipeline
User
Screen
Model
Geometry, colour
Map
Display
Edit
13
Representations in graphics
Vector Graphics
• Image is represented by continuous
geometric objects: lines, curves, etc.

Raster Graphics
• Image is represented as an rectangular grid
of coloured squares

14
Vector graphics
• Graphics objects: geometry + colour
• Complexity ~ O(number of objects)
• Geometric transformation possible without
loss of information (zoom, rotate, …)
• Diagrams, schemes, ...
• Examples: PowerPoint, CorelDraw, ...
15
Raster graphics
• Generic
• Image processing techniques
• Geometric Transformation: loss of information
• Complexity ~ O(number of pixels)
• Jagged edges, anti-aliasing
• Realistic images, textures, ...
• Examples: Paint, PhotoShop, ...
16
Conversion
Vector graphics

Rasterization, Pattern recognition
Scan conversion

Raster graphics
17
Hardware
• Vector graphics
• Raster graphics
• Colour lookup table
• 3D rendering hardware
18
Vector Graphics Hardware
V E C T O R
Display Controller
move 10 20
line 20 40
...
char O
char R
Display list
continuous & smooth
lines
no filled objects
random scan
refresh speed depends
on complexity of the
scene
19
Raster Graphics Hardware
Video Controller
jaggies (stair casing)
filled objects
(anti)aliasing
R A S T E R
refresh speed independent of
scene complexity
pixel
scan conversion
resolution
bit planes
0 0 0 0 0 0
0 7 7 7 6
0 7 7 7
0 0 0
0 0
0
Frame buffer
20
Colour Lookup Table
0 0 0 0 0 0
0 7 7 7 6
0 7 7 7
0 0 0
0 0
0
Frame buffer
0 0 0
102 255 53
255 255 204
255 102 153
102 0 51
R G B
0
1
2
4
7
...
colour
index
CLUT:
pixel = code

True colour:
pixel = R,G,B
21
3D rendering hardware
Geometric representation: Triangles
Viewing: Transformation
Hidden surface removal: z-buffer
Lighting and illumination: Gouraud shading
Realism: texture mapping
Special effects: transparency, antialiasing
22
2D geometric modelling
• Coordinates
• Transformations
• Parametric and implicit representations
• Algorithms
23
Coordinates
• Point: position on plane
p = (p
x
, p
y
)
x = (x, y)
x = (x
1
, x
2
)
x = x
1
e
1
+

x
2
e
2
, e
1
= (1, 0), e
2
= (0, 1)
• Vector: direction and magnitude
v = (v
x
, v
y
), etc.
x
y
p
v
24
Vector arithmetic
• Addition of two vectors:


v

+

w

= (v
x
+

w
x
, v
y
+

w
y
)


• Multiplication vector-scalar:
ov

= (ov
x
, ov
y
)

x
y
w
v
v+w
x
y
v
2v
25
Coordinate systems
image
wheel
train
world
26
Why transformations?
• Model of objects
world coordinates: km, mm, etc.
hierarchical models:
human = torso + arm + arm + head + leg + leg
arm = upperarm + lowerarm + hand …
• Viewing
zoom in, move drawing, etc.
27
Transformation types
• Translate according to vector v:
t = p + v
• Scale with factor s:
s = sp
• Rotate over angle o:
r
x
= cos(o)p
x
- sin(o)p
y

r
y
= sin(o)p
x
+ cos(o)p
y

x
y
p
t
s
r
v
o
28
Homogeneous coordinates
• Unified representation of rotation, scaling,
translation
• Unified representation of points and vectors
• Compact representation for sequences of
transformations
• Here: convenient notation, much more to it
29
Homogeneous coordinates
• Extra coordinate added:
p = (p
x
, p
y
, p
w
) or
x = (x, y, w)
• Cartesian coordinates: divide by w
x = (x/w, y/w)
• Here: for a point w = 1, for a vector w = 0

30
Matrices for transformation
w m y m x m w
w m y m x m y
w m y m x m x
w
y
x
m
m
m
m
m
m
m
m
m
w
y
x
33 32 31
23 22 21
13 12 11
33
23
13
32
22
12
31
21
11
'
'
'
or ,
'
'
'
or , M '
+ + =
+ + =
+ + =
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
= x x
31
Direct interpretation
( )
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
=
=
1 1 0 0 1
'
'
or , '
or , M '
y
x
t b a
t b a
y
x
y y y
x x x
x t b a x
x x
x’
y’
a
b
t
(x’,y’)
32
Translation matrix
|
|
|
.
|

\
|
=
=
1 0 0
1 0
0 1
) , ( T
with , ) , ( T '
: n Translatio
y
x
y x
y x
t
t
t t
t t x x
33
Scaling matrix
|
|
|
.
|

\
|
=
=
1 0 0
0 0
0 0
) , ( S
with , ) , ( S '
: Scaling
y
x
y x
y x
s
s
s s
s s x x
34
Rotation matrix
|
|
|
.
|

\
|
÷
=
=
1 0 0
0 cos sin
0 sin cos
) R(
with , ) R( '
: Rotation
o o
o o
o
o x x
35
Sequences of transformations
) 2 / 2)R( T(5,4)S(1/ M
with , M ' ' '
or
' ' T(5,4) ' ' '
' S(1/2) ' '
) 2 / ( R '
t
t
=
=
=
=
=
x x
x x
x x
x x
x
y
x’
y’
x’’
y’’
y’’’
x’’’
Sequences of transformations can be described with a single
transformation matrix, which is the result of concatenation of
all transformations.
36
Order of transformations
x
y
x
y
x’
y’
x x ) T(2,3)R(30 ' ' =
x x ) R(30)T(2,3 ' ' =
Matrix multiplication is not commutative. Different
orders of multiplication give different results.
37
Order of transformations
• Pre-multiplication:
x’ = M
n
M
n-1
…M
2
M
1
x
Transformation M
n
in global coordinates
• Post-multiplication:
x’ = M
1
M
2
…M
n-1
M
n
x
Transformation M
n
in local coordinates, i.e., the
coordinate system that results from application of
M
1
M
2
…M
n-1
38
Window and viewport
Viewport:
Area on screen to be used for drawing.
Unit: pixels (screen coordinates)
Note: y-axis often points down

Window:
Virtual area to be used by application
Unit: km, mm,… (world coordinates)
(0,0)
(800,600)
(200,200)
(600,400)
(-2,-1)
(2,1)
39
Window/viewport transform
• Determine a matrix M, such that the
window (w
x1
, w
x2
, w
y1
, w
y2
) is mapped on
the viewport (v
x1
, v
x2
, v
y1
, v
y2
):
• A = T(-w
x1
, -w
y1
)
• B = S(1/(w
x2
-w
x1
), 1/(w
y2
-w
y1
)) A
• C = S(v
x2
-v
x1
,v
y2
-v
y1
)B
• M = T(v
x1
, v
y1
) C
40
Forward and backward
Drawing: (meters to pixels)
Use x’ = Mx

Picking:(pixels to meters)
Use x = M
-1
x’
(w
x1
, w
y1
)
(w
x2
, w
y2
)
Window:
x: user coordinates
(v
x1
, v
y1
)
(v
x2
, v
y2
)
Viewport
x’:screen coordinates
Drawing Picking
41
Implementation example
Suppose, basic library supports two
functions:
– MoveTo(x, y: integer);
– LineTo(x, y: integer);
– x and y in pixels.

How to make life easier?
42
State variables
• Define state variables:
Viewport: array[1..2, 1..2] of integer;
Window: array:[1..2, 1..2] of real;
Mwv, Mobject: array[1..3, 1..3] of real;

Mwv: transformation from world to view
Mobject: extra object transformation
43
Procedures
• Define coordinate system:
SetViewPort(x1, x2, y1, y2):
Update Viewport and Mwv
SetWindow(x1, x2, y1, y2):
Update Window and Mwv
44
Procedures (continued)
• Define object transformation:
ResetTrans:
Mobject := IdentityMatrix
Translate(tx, ty):
Mobject := T(tx,ty)* Mobject
Rotate(alpha):
Mobject := R(tx,ty)* Mobject
Scale(sx, sy):
Mobject := S(sx, sy)* Mobject
45
Procedures (continued)
• Handling hierarchical models:
– PushMatrix();
Push an object transformation on a stack;
– PopMatrix()
Pop an object transformation from the stack.
Or:
– GetMatrix(M);
– SetMatrix(M);
46
Procedures (continued)
• Drawing procedures:
MyMoveTo(x, y):
(x’, y’) = Mwv*Mobject*(x,y);
MoveTo(x’, y’)
MyLineTo(x,y):
(x’, y’) = Mwv*Mobject*(x,y);
LineTo(x’, y’)

47
Application
DrawUnitSquare:
MyMoveTo(0, 0);
MyLineTo(1, 0);
MyLineTo(1, 1);
MyLineTo(0, 1);
MyLineTo(0, 0);

Initialize:
SetViewPort(0, 100, 0, 100);
SetWindow(0, 1, 0, 1);
Main program:
Initialize;
Translate(-0.5, -0.5);
for i := 1 to 10 do
begin
Rotate(pi/20);
Scale(0.9, 0.9);
DrawUnitSquare;
end;
48
Puzzles
• Modify the window/viewport transform for a
display y-axis pointing downwards.
• How to maintain aspect-ratio world->view?
Which state variables?
• Define a transformation that transforms a unit
square into a “wybertje”, centred around the origin
with width w and height h.
49
Geometry
• Dot product, determinant
• Representations
• Line
• Ellipse
• Polygon

50
Good and bad
• Good: symmetric in x and y
• Good: matrices, vectors
• Bad: y = f(x)

• Good: dot product, determinant
• Bad: arcsin, arccos
51
Dot product
v v
w v
w v w v
w v
w v


) s s = ·
+ = ·
·
vector of length the is | | and
, and between angle with
0 ( cos | | | |
: Also

: Definition
w)) (v, (sometimes : Notation
u
t u u
y y x x
w v w v
v
w
u
|w| cos u
52
Dot product properties
lar perpendicu are and iff 0
| |
) (
) (

2
w v w v
v v v
w v w v
u w u v u w v
v w w v
= ·
= ·
· = ·
· + · = · +
· = ·
ì ì
53
Determinant
0 ) , ( : 2
0 ) , ( : 0
to from angle is
sin | | | |
) , (
< < <
> < <
=
÷ =
w v
w v
w v
w v
w v
Det
Det
w v w v Det
x y y x
t u t
t u
u
u
v
w
u
Det(v, w): signed area of parallellogram
Det(v, w) = 0 iff v and w are parallel
v
w
u
54
Curve representations
• Parametric: x(t) = (x(t), y(t))

• Implicit: f(x) = 0
55
Parametric line representation
Given point p and vector v:
x(t) = p + vt

Given two points p and q:
x(t) = p + (q-p)t , or
= pt + q(1-t)
x
y
p
v
t
q
56
Parametric representation
• x(t) = (x(t), y(t))
• Trace out curve:
MoveTo(x(0));
for i := 1 to N do LineTo(x(i*At));
• Define segment: t
min
s t s t
max

57
Implicit line representation
• (x-p).n = 0
with n.v = 0
n is normal vector:
n = [-v
y
, v
x
]
• Also:
ax+by+c=0
x
y
p
v
n
58
Implicit representation
curve to of
distance of measure : | ) ( |
0 and 0 : areas two
in plane divides 0
contours : ) (
curve : 0 ) (
x
x
x
x
f
f f
f
C f
f
< >
=
=
=
f >0
f <0
f = 0
f =-1
f = 1
f =-2
59
Circle
0
: Implicit
) sin , cos ( ) , (
: Parametric
2 2 2
= ÷ +
=
r y x
r r y x o o
x
y
r
60
Ellipse
0 1
: Implicit
) sin , cos ( ) , (
: Parametric
2 2
= ÷
|
.
|

\
|
+
|
.
|

\
|
=
b
y
a
x
b a y x o o
x
y
a
b
61
Generic ellipse
( )
1
with , 1 | |
: Implicit
sin cos ) (
: Parametric
÷
= =
+ + =
c b a x
b a c x
M M
o o o
x
y
62
Some standard puzzles
• Conversion of line representation
• Projection of point on line
• Line/Line intersection
• Position points/line
• Line/Circle intersection

63
Conversion line representations
a n
a
n
u n
n
x n
u a p
· ÷ =
÷ =
±
= + ·
+ =
c
u u
c
s s
x y

: hence line, on the be must
) , (
: set we hence , on be must
. normal determine First,
. 0
: tion representa implicit Find
; ) (
: line Given
a
u
s
64
Projection point on line
u
u u
u a q
a q
u
u u
u a q
a q
u a q u a q
u
u
a q a q
u a p q
·
· ÷
+ =
· ÷
+ =
÷ = · ÷
÷ + =
+ =
) (
'
or ,
| | | |
) (
'
: cos | | | | ) ( Use
| |
| | cos '
: ) ( line on point Project
u
u
s s
a
u
s
q
q-a
q’
u
u
u
u
a q
along r unit vecto :
| |
length |: | cos w ÷ u
w
65
Intersection of line segments
a
u
b
v
t
s
). ( is on intersecti so, If
1; 0 and 1 0 if Check
sheet); (next and for Solve
) ( ) (
: on intersecti At
. 1 0 , ) (
and 1 s 0 , ) (
: segments line of on intersecti Find
s
t s
t s
t s
t t t
s s
p
q p
v b q
u a p
s s s s
=
s s + =
s s + =
66
Solving for s and t
a
u
b
v
t
s
( )
( )
|
|
.
|

\
|
÷
÷
|
|
.
|

\
|
÷
÷
÷
=
|
|
.
|

\
|
÷ =
|
|
.
|

\
|
÷ =
|
|
.
|

\
|
+ = +
=
÷
y y
x x
x y
x y
x y y x
a b
a b
u u
v v
v u v u t
s
t
s
t
s
t s
t s
1
or , ) (
or ,
or ,
or ), ( ) (
1
a b v u
a b v u
v b u a
q p
67
Position points/line
sign. same the
have ) , ( and ) , (
if side same on the are Points
: sin | | | | ) , ( Use
) ( line of side same
on the are and points if Check
c b u c a u
v u v u
u c p
b a
÷ ÷
=
+ =
Det Det
Det
s s
u
c
u
b
s a
68
Line/circle intersection
solutions. 2 or 1, 0,
: for equation quadratic Solve
. 0
or , ) ( ) (
or , ) ( ) (
: on intersecti At
. : circle
and 1 t 0 , ) ( : line
: of ons intersecti Find
2 2
2
2
2
t
r t t
r t t
r t t
r
t t
= ÷ · + · + ·
= + · +
= ·
= ·
s s + =
a a u a u u
u a u a
p p
x x
u a p
a
u
t
x
y
r
69
Polygons
• Sequence of points p
i
, i = 1,…, N,
connected by straight lines
• Index arithmetic:

modulo N
p
0
= p
N
, p
N+1
= p
1
, etc.
p
1

p
2

p
N

p
i

70
Regular N-gon
2 / / ) 2 / 1 ( 2
) sin , cos (
t t o
o o
÷ + =
=
N i
r r
i
i i i
p
triangle square pentagon hexagon octagon
71
Convex and concave
• Convex:
– each line between two
arbitrary points inside
the polygon does not
cross its boundary

• Concave:
– not convex
72
Convexity test
i all for 0 ) , Det(
if concave, is Polygon
ckwise. counterclo oriented is polygon Assume
i 1 i 1 - i i
> ÷ ÷
+
p p p p
p
i-1

p
i

p
i+1

p
i-1

p
i

p
i+1

Convex Concave
73
Polygon area and orientation
p
i

p
i+1

c
n orientatio clockwise : 0
n orientatio ckwise counterclo : 0
| |
point is , 2 / ) , (
i
1 i i
<
>
=
÷ ÷ =
¿ +
a
a
a area
arbitrary Det a
N
c c p c p
74
Point/polygon test
outside. is it else inside,
is point : odd is If polygon. with the
L of crossings of number the be Let
0). (1, f.i. y, arbitraril chosen be can
. 0 , L line a Define
: Solution
outside. or inside is point a if Test polygon. a Given
n
n
t t
v
v c
c
> + =
2
3
1
75
Point/polygon test (cntd.)
• Beware of special cases:
– Point at boundary
– v parallel to edge
– c + vt through vertex

76
Puzzles
• Define a procedure to clip a line segment against a
rectangle.
• Define a procedure to calculate the intersection of
two polygons.

• Define a procedure to draw a star.
• Same, with the constraint that the edges p
i-1
p
i
and
p
i+2
p
i+3
are parallel.

Aims
• Introduce basic graphics concepts and terminology • Base for development of 2D interactive computer graphics programmes (OGO 2.3)

2

Literature
Computer Graphics - Principles and Practice Foley - van Dam - Feiner - Hughes 2nd edition in C - Addison and Wesley Computer Graphics - C Version Donald Hearn - M. Pauline Baker 2nd edition - international edition Prentice Hall
3

Overview Introduction Geometry Interaction Raster graphics 4 .

Introduction What is Computer Graphics? Applications Computer Graphics in Eindhoven Raster/vector graphics Hardware 5 .

Computer Graphics Computer Graphics is ubiquitous: • Visual system is most important sense: – High bandwidth – Natural communication • Fast developments in – Hardware – Software 6 .

Computer Graphics Image Analysis (pattern recognition) Mathematical Model Image Synthesis (Rendering) Image Modeling Image processing7 .

mechanics. numerical. …) • Mathematics (geometry. …) • Physics (Optics. data structures. software engineering. perception) • Art and design 8 .Supporting Disciplines • Computer science (algorithms. …) • Psychology (Colour.

…) Geographic Information Systems (GIS) Visualization (Scientific Vis. games.. Vis.) Medical Visualization … 9 .Applications • • • • • • • Computer Aided Design (CAD) Computer Aided Geometric Design (CAGD) Entertainment (animation. Inform.

Computer Graphics Eindhoven Current: •Information visualisation Jack van Wijk Kees Huizing Arjan Kok •Interactive 3D design •Virtual reality Past: Rasterization. Animation Robert van Liere Wim Nuij Alex Telea Huub van de Wetering 10 .

Interactive Computer Graphics User input Application Screen image 11 .

Graphics pipeline User Edit Model Map Geometry. colour Screen Display 12 .

etc. Raster Graphics • Image is represented as an rectangular grid of coloured squares 13 .Representations in graphics Vector Graphics • Image is represented by continuous geometric objects: lines. curves.

schemes. rotate. . CorelDraw.. .. …) • Diagrams. 14 .Vector graphics • Graphics objects: geometry + colour • Complexity ~ O(number of objects) • Geometric transformation possible without loss of information (zoom. • Examples: PowerPoint...

. .. PhotoShop. textures.. Examples: Paint. .Raster graphics • • • • • • • Generic Image processing techniques Geometric Transformation: loss of information Complexity ~ O(number of pixels) Jagged edges. 15 .. anti-aliasing Realistic images.

Scan conversion Pattern recognition Raster graphics 16 .Conversion Vector graphics Rasterization.

Hardware • • • • Vector graphics Raster graphics Colour lookup table 3D rendering hardware 17 .

..Vector Graphics Hardware Display list continuous & smooth lines no filled objects random scan refresh speed depends on complexity of the scene move 10 20 line 20 40 . char O VECTOR char R Display Controller 18 .

Raster Graphics Hardware Frame buffer 0 0 0 0 0 0 0 7 7 7 6 0 7 7 7 0 0 0 0 0 0 jaggies (stair casing) filled objects (anti)aliasing Video Controller RASTER refresh speed independent of scene complexity pixel scan conversion resolution bit planes 19 .

.Colour Lookup Table Frame buffer colour index 0 1 2 4 R G B 0 0 0 102 255 53 255 255 204 255 102 153 True colour: pixel = R.B 102 0 51 20 0 0 0 0 0 0 0 7 7 7 6 0 7 7 7 0 0 0 0 0 0 CLUT: pixel = code .G. 7 ..

3D rendering hardware Geometric representation: Triangles Viewing: Transformation Hidden surface removal: z-buffer Lighting and illumination: Gouraud shading Realism: texture mapping Special effects: transparency. antialiasing 21 .

2D geometric modelling • • • • Coordinates Transformations Parametric and implicit representations Algorithms 22 .

1) • Vector: direction and magnitude v = (vx . etc. 0). 23 .Coordinates • Point: position on plane y p p = (px . e1 = (1. y) x x = (x1 . vy). e2 = (0. py) v x = (x. x2) x = x1 e1 + x2 e2.

Vector arithmetic • Addition of two vectors: v + w = (vx + wx . avy) y 2v v x 24 . vy + wy) y w v x v+w • Multiplication vector-scalar: av = (avx .

Coordinate systems world train wheel image 25 .

mm. move drawing. hierarchical models: human = torso + arm + arm + head + leg + leg arm = upperarm + lowerarm + hand … • Viewing zoom in. 26 . etc. etc.Why transformations? • Model of objects world coordinates: km.

sin(a)py ry = sin(a)px + cos(a)py v x 27 .Transformation types • Translate according to vector v: t=p+v • Scale with factor s: s = sp y r a p s t • Rotate over angle a: rx = cos(a)px .

much more to it 28 . translation • Unified representation of points and vectors • Compact representation for sequences of transformations • Here: convenient notation. scaling.Homogeneous coordinates • Unified representation of rotation.

y. py . w) • Cartesian coordinates: divide by w x = (x/w. pw) or x = (x. for a vector w = 0 29 .Homogeneous coordinates • Extra coordinate added: p = (px . y/w) • Here: for a point w = 1.

Matrices for transformation x'  Mx . or  x'   m11 m12 m13   x        y '    m21 m22 m23   y  . or  w'   m m m   w     31 32 33    x'  m11x  m12 y  m13w y '  m21x  m22 y  m23w w'  m31 x  m32 y  m33w 30 .

or  x'   a x bx t x   x        y '    a y by t y   y  1   0 0 1  1       a 31 .y’) b t x’ x'  a b t  x.Direct interpretation x'  M x. or y’ (x’.

Translation matrix Translatio n : x'  T(t x . with  1 0 tx    T(t x . t y )x . t y )   0 1 t y  0 0 1    32 .

s y )   0 0  0 sy 0 0  0 1  33 . with  sx  S( s x . s y )x .Scaling matrix Scaling : x'  S( s x .

with  cos a  sin a 0    R(a )   sin a cos a 0   0 0 1   34 .Rotation matrix Rotation : x'  R(a ) x .

which is the result of concatenation of all transformations.4)S(1/ 2)R( / 2) x Sequences of transformations can be described with a single transformation matrix.Sequences of transformations y’’’ y y’ y’’ x’ x’’’ x’’ x'  R ( / 2)x x' '  S(1/2) x' x' ' '  T(5.4) x' ' or x' ' '  Mx. with M  T(5. 35 .

Different orders of multiplication give different results.Order of transformations y’ y y x’ x x x' '  T(2.3)R(30 )x x' '  R(30)T(2. 36 .3 )x Matrix multiplication is not commutative.

Order of transformations
• Pre-multiplication:
x’ = M n M n-1…M 2 M 1 x Transformation M n in global coordinates

• Post-multiplication:
x’ = M 1 M 2…M n-1 M n x Transformation M n in local coordinates, i.e., the coordinate system that results from application of M 1 M 2…M n-1
37

Window and viewport
Viewport: Area on screen to be used for drawing. Unit: pixels (screen coordinates) Note: y-axis often points down
(200,200) (0,0) (2,1) (800,600) (600,400)

Window: Virtual area to be used by application Unit: km, mm,… (world coordinates)
(-2,-1)

38

Window/viewport transform
• Determine a matrix M, such that the window (wx1, wx2, wy1, wy2) is mapped on the viewport (vx1, vx2, vy1, vy2): • A = T(-wx1, -wy1) • B = S(1/(wx2-wx1), 1/(wy2-wy1)) A • C = S(vx2-vx1 ,vy2-vy1)B • M = T(vx1, vy1) C
39

vy2) Drawing: (meters to pixels) Use x’ = Mx x’:screen coordinates Drawing Picking Picking:(pixels to meters) Window: (wx2.Forward and backward Viewport (vx1. wy2) x: user coordinates (wx1. vy1) (vx2. wy1) Use x = M-1x’ 40 .

How to make life easier? 41 . – LineTo(x. y: integer).Implementation example Suppose. – x and y in pixels. basic library supports two functions: – MoveTo(x. y: integer).

2.. 1. Mwv. Mwv: transformation from world to view Mobject: extra object transformation 42 .3] of real....2] of integer..State variables • Define state variables: Viewport: array[1. Window: array:[1.2. 1.2] of real.3. 1.. Mobject: array[1.

x2. y1. y1. y2): Update Viewport and Mwv SetWindow(x1.Procedures • Define coordinate system: SetViewPort(x1. x2. y2): Update Window and Mwv 43 .

Procedures (continued) • Define object transformation: ResetTrans: Mobject := IdentityMatrix Translate(tx. sy)* Mobject 44 .ty)* Mobject Scale(sx. sy): Mobject := S(sx. ty): Mobject := T(tx.ty)* Mobject Rotate(alpha): Mobject := R(tx.

Or: – GetMatrix(M). Push an object transformation on a stack. – PopMatrix() Pop an object transformation from the stack. – SetMatrix(M).Procedures (continued) • Handling hierarchical models: – PushMatrix(). 45 .

y’) = Mwv*Mobject*(x. y): (x’. MoveTo(x’.Procedures (continued) • Drawing procedures: MyMoveTo(x.y): (x’. LineTo(x’. y’) = Mwv*Mobject*(x.y). y’) MyLineTo(x.y). y’) 46 .

1). -0. 1). Translate(-0. 47 . DrawUnitSquare. 0. 0).5. Initialize: SetViewPort(0. MyLineTo(1. 100. MyLineTo(1. 0. for i := 1 to 10 do begin Rotate(pi/20). 1). 0. 100). Main program: Initialize. SetWindow(0. 0). Scale(0. 0).9.5).9). 1.Application DrawUnitSquare: MyMoveTo(0. MyLineTo(0. MyLineTo(0. end.

• How to maintain aspect-ratio world->view? Which state variables? • Define a transformation that transforms a unit square into a “wybertje”. 48 . centred around the origin with width w and height h.Puzzles • Modify the window/viewport transform for a display y-axis pointing downwards.

determinant Representations Line Ellipse Polygon 49 .Geometry • • • • • Dot product.

arccos 50 .Good and bad • Good: symmetric in x and y • Good: matrices. determinant • Bad: arcsin. vectors • Bad: y = f(x) • Good: dot product.

Dot product Notation : v  w (sometimes (v. w)) Definition : v  w  v x wx  v y wy Also : v  w  | v | | w | cos  (0      with  angle between v and w. and | v | is the length of vector v 51 w  v |w| cos  .

Dot product properties vw  w v ( v  w)  u  v  u  w  u ( v )  w   v  w v  v  | v |2 v  w  0 iff v and w are perpendicu lar 52 .

w )  0     2 : Det ( v. w )  0 Det(v. w) = 0 iff v and w are parallel 53 . w): signed area of parallellogram v Det(v.Determinant Det ( v. w )  v x wy  v y wx  | v | | w | sin  w  v  w  is angle from v to w 0     : Det ( v.

y(t)) • Implicit: f(x) = 0 54 .Curve representations • Parametric: x(t) = (x(t).

or = pt + q(1-t) 55 .Parametric line representation Given point p and vector v: x(t) = p + vt y t q p v x Given two points p and q: x(t) = p + (q-p)t .

y(t)) • Trace out curve: MoveTo(x(0)). • Define segment: tmin  t  tmax 56 .Parametric representation • x(t) = (x(t). for i := 1 to N do LineTo(x(i*Dt)).

vx] • Also: ax+by+c=0 y n v p x 57 .Implicit line representation • (x-p).n = 0 with n.v = 0 n is normal vector: n = [-vy .

Implicit representation f (x)  0 : curve f (x)  C : contours f  0 divides plane in two areas : f  0 and f  0 | f (x) | : measure of distance of x to curve f=1 f=0 f >0 f =-1 f =-2 f <0 58 .

Circle Parametric : ( x. r sin a ) Implicit : x2  y2  r 2  0 59 y r x . y )  (r cos a .

b sin a ) y Implicit :  x  y      1  0 a b 2 2 b a x 60 .Ellipse Parametric : ( x. y )  (a cos a .

with M  a b c  y x 1 61 .Generic ellipse Parametric : x(a )  c  a cos a  b sin a Implicit : | Mx |  1.

Some standard puzzles • • • • • Conversion of line representation Projection of point on line Line/Line intersection Position points/line Line/Circle intersection 62 .

hence : c  n  a 63 s a u . First. n must be  on u.Conversion line representations Given line : p ( s )  a  u s. Find implicit representa tion : n  x  c  0. hence we set : n  (u y . u x ) a must be on the line. determine normal n.

Projection point on line Project point q on line p( s )  a  us : u q'  a  cos  | q  a | |u| Use (q  a)  u | q  a | | u | cos  : (q  a)  u q'  a  u. or | u || u | (q  a)  u q'  a  u u u q-a  a w q u q’ s cos | q  a |: length w u : unit vecto r along u |u| 64 .

0  t  1. 65 s a u v t b . intersecti on is p( s ). At intersecti on : p( s )  q(t ) Solve for s and t (next sheet). 0  s  1 and q(t )  b  vt .Intersection of line segments Find intersecti on of line segments : p( s )  a  us. Check if 0  s  1 and 0  t  1. If so.

or a  us  b  vt . or t    s 1   t  u v u v   x y y x  vy  u  y  v x   bx  a x    u x   by  a y    66 s a u v t b . or s u v    b  a.Solving for s and t p( s )  q(t ). or t    s 1    u v  (b  a).

a  c) and Det (u. b  c) have the same sign. 67 c b . v ) | u | | v | sin  : Points are on the same side if Det (u.Position points/line Check if points a and b are on the same side of line p( s )  c  us a u s Use Det (u.

or 2 solutions. Solve quadratic equation for t : 0. or u  ut 2  a  ut  a  a  r 2  0. 0  t  1 and circle : x  x  r 2 . At intersecti on : p(t )  p(t )  r . .Line/circle intersection Find intersecti ons of : line : p(t )  a  ut . or 2 y u r t a 68 x (a  ut )  (a  ut )  r 2 . 1.

etc.Polygons • Sequence of points pi. pi p2 p1 69 pN . pN+1 = p1 . connected by straight lines • Index arithmetic: modulo N p0 = pN . i = 1. N.….

Regular N-gon p i  (r cos a i . r sin a i ) a i  2 (i  1 / 2) / N   / 2 triangle square pentagon hexagon octagon 70 .

Convex and concave • Convex: – each line between two arbitrary points inside the polygon does not cross its boundary • Concave: – not convex 71 .

Convexity test Assume polygon is oriented counterclo ckwise. Polygon is concave. p i 1  p i )  0 for all i pi+1 pi pi-1 Convex Concave pi pi-1 72 pi+1 . if Det( p i  p i-1 .

Polygon area and orientation a   Det (p i  c. c is arbitrary point i N area  | a | a  0 : counterclo ckwise orientatio n a  0 : clockwise orientatio n c pi+1 pi 73 . p i 1  c) / 2.

If n is odd : point is inside. f. else it is outside. 74 2 1 3 . (1. Solution : Define a line L  c  vt . 0). Let n be the number of crossings of L with the polygon.i. Test if a point c is inside or outside. t  0. v can be chosen arbitraril y.Point/polygon test Given a polygon.

Point/polygon test (cntd.) • Beware of special cases: – Point at boundary – v parallel to edge – c + vt through vertex 75 .

with the constraint that the edges pi-1 pi and pi+2 pi+3 are parallel. • Define a procedure to calculate the intersection of two polygons. • Define a procedure to draw a star. 76 .Puzzles • Define a procedure to clip a line segment against a rectangle. • Same.

Sign up to vote on this title
UsefulNot useful