Scribd
Upload
1 views24 pages

L7-2DTransformations

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views24 pages

L7-2DTransformations

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

1

2D
TRANSFORMATIONS
Lecture 7 ITSW4111 : COMPUTER GRAPHICS
Affine Transformations
2

 An affine transformation is a
transformation where:
 lines are preserved (lines remain lines after
transformation)
 parallelism is preserved
 proportional distances are preserved
 eg. if point P is at a distance F between
points A and B before, it will remain so
after the transform
 the change in area of any object
transformed is:
 (area after transform) / (area before
Objectives of the
3
Course
1. Basic Affine Transformations:
 Translation
 Scaling
 Rotation
 Shearing
Translation
4

 A translation is applied to an object by


repositioning it along a straight-line path
from one coordinate location to another.
 We translate a two-dimensional point by
adding translation distances, tx and ty ,
to the original coordinate position (x,y) to
move the point to a new position (x’,y’).

x’= x+ tx , y’ = y + ty
Translation
 The translation distance pair (tx, ty) is called a
translation vector or shift vector.
 This allows us to write the two-dimensional
translation equations in the matrix form:
P’ = P + T

where P = x , T = tx and P’ = x’
y ty y’
6
Rotation
7

 The two-dimensional rotation is applied to an


object by repositioning it along a circular path in
the xy plane.

 To generate a rotation, we specify a rotation


angle θ and the position (xr,yr) of the rotation
point (or pivot point) about which the object is
rotated.

 This transformation can also be described as a


rotation about a rotation axis that is
perpendicular to the xy plane and passes through
the pivot point.
Rotation of an object though angle
about the pivot point (x,y)
8
Rotation about the
9
Origin
 Rotating of a point from position (x,y) to
position(x',y') through angle relative to the
coordinate origin.
 The original angle of displacement of the point
from the x axis is x r cos(   ) r cos  cos   r sin  sin 
y ' r sin(   ) r cos  sin   r sin  cos 

 x'  cos   sin    x 


 y '  sin   cos    y 
    
Rotation about the Origin
(proof)
x = r cos (f)
y = r sin (f)
x’ = r cos (f + )
y’ = r sin (f + )
(x’, y’)
Trig Identity…
(x, y) x’ = r cos(f) cos() – r sin(f) sin()
y’ = r sin(f) sin() + r cos(f) cos()

f Substitute…
x’ = x cos() - y sin()
y’ = x sin() + y cos()
Rotation About a Pivot
11
Point
 Rotating of a point from position (x,y) to
position(x',y') through angle about rotation point
(xr,yr).

 Representation of this is in terms of composite


matrix will be discussed later.
Scaling about the Origin
12

 Scaling a coordinate means multiplying


each of its components by a scalar.
 A scaling transformation alters the size of
an object.
 This operation can be carried out for
polygons by multiplying the coordinate
 x '  by scaling
values (x,y) of each vertex s x
0   x
factors sx,sy to produce
 ythe  
transformed  
coordinates (x’,y’).
 '  0 s   y
y

x’ = x.sx, y’ = y.sy .
 Scaling factor sx,sy scales objects in the x
Scaling about a Fixed
13
Point
 We can control the location of a scaled
object by choosing a position, called the
fixed point, that is to remain unchanged
after the scaling transformation.
Coordinates for the fixed point (xf,yf)
can be chosen as one of the vertices, the
object centroid, or any other position.
Scaling about a Fixed
14
Point
 Transformation equations with the fixed
point (xf ,yf) are calculated as:

 We can rewrite these scaling


transformations to separate the
multiplicative and the additive terms as
follows:
Remarks about Scaling
15

 When sx and sy are assigned the same value, a


uniform scaling is produced that maintains relative
object proportions.

 Unequal values for sx and sy result in a differential


scaling that is often used in design applications,
where pictures are constructed from a few basic
shapes that can be adjusted by scaling and
positioning transformations.

 When the scaling factors sx and sy are assigned the


values less than 1, the objects move closer to the
coordinate origin.
Remarks about Scaling
16

 When the scaling factors sx and sy are


assigned the values less than 1, the
objects reduce in size. Similarly, the
values of sx and Sy greater than 1,
enlarge the object size.

 Warning: Negative values of sx and sy


are not permissible.
2

Uniform Scaling

Non-uniform Scaling

Scaling Factor Less than 1

17
2D Shear
18

 Shear is the translation along an axis (say, X


axis) by an amount that increases linearly
with another axis (Y). It produces shape
distortions as if objects were composed of
layers that are caused to slide over each
other.
Shear in the x axis
19

A shear along the x direction in 2D changes a


rectangle (with lower right corner at the origin) into a
parallelogram as follows:

The transformation has the properties:


a) The y coordinate of any point (x,y) is unchanged.
b) the x coordinate is stretched in a linear way, based
on the height of the point above the x axis - i.e. on y.
Thus the coordinate change has the form:
x' = x + y; y' = y;
where is a constant that measures the degree of
Shearing in the y direction
20

We can similarly introduce a shearing along the y


axis, which would have the form: x' = x; y' = y
+ x;
where is a constant that measures the degree of
shearing. If is negative then the shearing is in the
opposite direction.
2D Shear Matrix
21

The 2D Shear transforms the point (x,y) into


x '  xsuch
a point (x’,y’)  shx *that:
y
y ' sh y * x  y
Where is a shear in the x direction and is a
shear in the y direction.  1 shx 
Thus, the 2D shear matrix is:  shy 1 
 
and the coordinate of the new point can be
computed as follows:
 x '  1 shx   x 
 y '  sh 1  
   y   y
Transformations in WebGL
Ways to perform transformations:
A. Create your own “current transformation matrix” (ctm):
1. Compute transformation in advance.
2. Enter matrix into an array (in column major order).
OR
B. Use the transformation functions provided in MV.js
1. Multiply the ctm by each transformation matrix in reverse
order.

C. In both cases A and B, next:


1. Pass the ctm to the vertex shader.
2. Draw object.
3. In the vertex shader, multiply each vertex by the ctm.
Using MV.js functions for transformation
matrices

Create a matrix to translate by vector (dx, dy, dz):


translate(dx, dy, dz);
Create a matrix to rotate by angle about axis given by (vx, vy, vz):
rotate(angle, vx, vy, vz);
Create a matrix to scale by factors given by (sx, sy, sz):
scalem(sx, sy, sz);

Here's the tricky part:


You should call the functions and multiply them with the
ctm in the reverse order from the order in which you want
to perform the transformations!
References
24

 Computer Graphics with OpenGL, Hearn


and Baker, Pearson, Fourth Edition.

You might also like