Chapter 4

Two Dimensional
Viewing
 Model
 Model: a pattern, plan,
representation, or description
designed to show the structure
or working of an object,
system, or concept.
 Modeling
 Modeling is the process of
creating, storing and
manipulating a model of
an object or a system.
 Modeling
 In Modeling, we often use a geometric
model
 i.e.. A description of an object that provides a
numerical description of its shape, size and
various other properties.
 Modeling
 The shape of the object is often
described in terms of sub-parts, such as
circles, lines, polygons, or cubes.
 Example: Model of a house units are in
meters
y

6 x
 Instances of Objects
 Instances of this object may then be
placed in various positions in a scene, or
world, scaled to different sizes, rotated,
or deformed.
 Each house is created with instances of
the same model, but with different
y
parameters.
9

x
2D Viewing
 2D Viewing
Viewing is the process of
drawing a view of a
model on a
2-dimensional display.
 Viewing and Transformation
 Once a model has been constructed, the
programmer can specify a view.

A 2-Dimensional view consists of two

rectangles:
 A Window, given in real-world co-ordinates,
which defines the portion of the model that is to
be drawn

 A Viewport given in screen co-ordinates,

which defines the portion of the screen on which
the contents of the window will be displayed
 Basic Interactive Programming
 Window: What is to be viewed
 Viewport: Where is to be displayed

Viewport

Scene Image
2D Geometric
Transformations
 2D Geometric Transformations
 Operations that are applied to the
geometric description of an object to
change its position, orientation or size.
Basic transformation:
 Translation

 Rotation

 Scaling
 2D Translation
 2D Translation: Move a point along a
straight-line path to its new location.
x  x  t x , y  y  t y
y

 x   x   t 
 
P’ x
T
 y  y  t 
P       y

x
P  P  T
 2D Tranlation
 Rigid-body translation: moves objects
without deformation (every point of the object is
translated by the same amount)
Y 6

5  4
 4
 
4

tx = 2 3

ty = 3 2
 2
1 1 
 
0
1 2 3 4 5 6 7 8 9 10
X
Note: House shifts position relative to origin
Matrix Representations
And
Homogeneous Coordinates
 Matrix Representations
 In Modeling, we perform sequences of
geometric transformation: translation,
rotation, and scaling to model components
into their proper positions.

 How the matrix representations can be

reformulated so that transformation
sequences can be efficiently processed?
Homogeneous Coordinates

 Since the points matrix has three columns for the

x, y, and z values, and a transformation matrix is
always 4x4 matrix, these two matrices are
incompatible for multiplication.
 A matrix multiplication is compatible only if the
number of columns in the first matrix equals the
number of row in the second matrix. For this
reason, a points matrix is written as,
.

 Here, we have converted the Cartesian coordinates into

homogeneous coordinates by adding a 4th column, with unit
value in all rows.
 When a fourth column, with values of 1 in each row, is
added in the points matrix, the matrix multiplication
between the [P]and [T ]becomes compatible.
 In homogeneous coordinates, the points (2,3,1), (4,6,2),
(6,9,3), (8,12,4), represent the same point (2,3,1), along the
plane z = 1, z = 2, z = 3, and z = 4,respectively.
Cont….
Example1 : translation

 Translate the rectangle (2,2), (2,8), (10,8),

(10,2) 2 units along x-axis and 3 units
along y-axis.
Solution: Using the matrix equation for
translation, we have
 [P*] = [P] [Tt], substituting the numbers, we
get
Cont…

 Result
 2D Scaling
 2D Scaling: Alters the size of an object.

 This operation can be carried out for polygons

by multiplying the coordinate values ( x , y )of
each vertex by scaling factors sxand s y to
produce the transformed coordinates
y sx  2 y
sy  1

x x
 2D Scaling
x  x  s x , y  y  s y

 x   s x 0   x
 y   0   
   s y   y
P  S  P

y sx  2 y
sy  1

x x
 2D Scaling
 Any positive numeric values can be assigned to the
scaling factors.
 Values less than 1 reduce the size of objects, and
greater than 1 produce an enlargement.

 Uniform Scaling: s s
x y

 Differential Scaling: s x  s y , used in modeling

applications.

s s
x y s s
x y

original Uniform scaling Differential scaling

 2D Scaling
 Scale an object moving its origin (upper right)
Example 2 scaling:

 If the triangle A(1,1), B(2,1), C(1,3) is

scaled by a factor 2, find the new
coordinates of the triangle.
 Solution: Writing the points matrix in
homogeneous coordinates, we have
Cont…
 and the scaling transformation matrix is

 The new points matrix can be evaluated by the

equation
 [P*]= [P][T],and by substitution of the P and T
values, we get
Cont…

 Result
 2D Rotation
 2D Rotation: Rotate the points a specified
rotation angle about the rotation axis.

 Axis is perpendicular to xy plane; specify only

rotation point (pivot point ( xr , y r ))


yr

xr
 2D Rotation
 Simplify: rotate around origin: x  0, y  0
r r

cosθ  sin θ
( x' , y ' )
R 
 sin θ cosθ 
P  R  P
 2D Rotation
 Rigid-body translation: Rotates objects
without deformation (every point of the object
is rotated through the same angle.

Y 6


5 
6
4

1 

0
1 2 3 4 5 6 7 8 9 10
X
Example 3-Rotation

 If the triangle A(1,1), B(2,1), C(1,3) is rotated by

30 degree, what will be the new coordinates of the
triangle.
Solution: Writing the points matrix in homogeneous
coordinates, we have
 P= T= * =

P’= * =
 Matrix Representations
and
Homogeneous Coordinate
 Basic 2D transformations as 3x3 matrices:
 x  1 0 t x   x   x  cos   sin  0   x 
 y    0 1 t   y   y  sin  cos   y
   y  
   0  
1  0 0 1  1  1  0 0 1  1 
Translation Rotation

 x   s x 0 0   x 
 y    0 s 0   y 
   y  
1  0 0 1  1 

Scaling
Assignment 1:

Use matrix multiplication to find the

new coordinates for the following
1. Scale the following points by a factor of 2 and
rotate by 90 degree
 (1,1),(3,1),(3,3),(1,3)
 (2,-1),(3,-2),(2,-3),(1,-2)
2. Scale by 2 along the x-axis , by 3 a long y and by 4
a long z axis and rotate 45 degree
 (-2,3),(-1,1),(-3,1)
 (-3,-2),(-1,-2),(-2,-4)
Reflection
 Reflection
 Reflection: Produces a mirror image of an
object.
X Axis Y Axis Origin
1 0 0   1 0 0   1 0 0
0  1 0   0 1 0  0  1 0
     
0 0 1  0 0 1  0 0 1

y y y
1 1 1’ 1’

2 3 2 3 3’ 2’ 3’ 2’

x x x
2’ 3’ 1 3

1’
2

X Axis Y Axis Origin

Shear
 Shear
 Shear: A transformation that distorts the
shape of an object such that transformed
shape appears as if the object were
composed of internal layers that had been
caused to slide over each other is called a
shear.
 Shear
 x-direction: x '  x  h x  y , y '  y
y y
(0,1) (1,1) hx= 2 (2,1) (3,1)
1 hx 0
0 1 0 (0,0) (1,0) x (0,0) (1,0) x

0 0 1

 y-direction: x '  x , y '  y  h y  x

(1,3)
1 0 0
h 1 0
y y (1,2)
(0,1) (1,1) hy= 2
 y (0,1)
 0 0 1 (0,0) (1,0) x (0,0) x
Assignment2

 Write OpenGL program that create

line_loop,line_tripe,triangle_fun and
polygon.
 all these shapes must be displayed on the
same window
 Write OpenGL program that create a
rectangle
 The rectangle must move left,right,up and
down by using navigation keys