Professional Documents
Culture Documents
𝒙′ = 𝒙 + 𝒕𝒙 & 𝒚 ′ = 𝒚 + 𝒕𝒚
Translation distance pair (𝒕𝒙, 𝒕𝒚 ) is
(x',y')
called a Translation Vector or Shift
Vector. ty
(x,y)
It is rigid body transformation so we
need to translate whole object. tx
Rotation
It is a transformation that used to reposition the object along
the circular path in the 𝑥𝑦 − 𝑝𝑙𝑎𝑛𝑒.
(x',y')
To generate a rotation we specify a,
Rotation angle 𝜽.
Rotation Point (Pivot Point) (𝒙𝒓, 𝒚𝒓 ). (x,y)
θ
∅
&
𝒙′ = 𝒓 𝐜𝐨𝐬 𝜽 + ∅ = 𝒓 𝐜𝐨𝐬 ∅ 𝐜𝐨𝐬 𝜽 − 𝒓 𝐬𝐢𝐧 ∅ 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒓 𝐬𝐢𝐧(∅ + 𝜽) = 𝒓 𝐜𝐨𝐬 ∅ 𝐬𝐢𝐧 𝜽 + 𝒓 𝐬𝐢𝐧 ∅ 𝐜𝐨𝐬 𝜽
Contd.
Now replace 𝒓 𝐜𝐨𝐬 ∅ with 𝒙 and 𝒓 𝐬𝐢𝐧 ∅ with 𝒚 in above
equation.
𝒙′ = 𝒙 𝐜𝐨𝐬 𝜽 − 𝒚 𝐬𝐢𝐧 𝜽 (x',y')
𝒚′ = 𝒙 𝐬𝐢𝐧 𝜽 + 𝒚 𝐜𝐨𝐬 𝜽
(x,y)
θ
∅
Rotation about arbitrary point
Transformation equation for rotation of a point about pivot
point (𝒙𝒓, 𝒚𝒓 ) is:
𝒙′ = 𝒙𝒓 + (𝒙 − 𝒙𝒓 ) 𝐜𝐨𝐬 𝜽 − (𝒚 − 𝒚𝒓 ) 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒚𝒓 + 𝒙 − 𝒙𝒓 𝐬𝐢𝐧 𝜽 + (𝒚 − 𝒚𝒓 ) 𝐜𝐨𝐬 𝜽
These equations are differing from rotation about origin and
its matrix representation is also different.
Rotation is also rigid body
transformation so we need to (x',y')
rotate each point of object.
(x,y)
θ
∅
(xr,yr)
How to apply
For an object we simply apply all the points that makes
ups surface
E.g., All vertices in a vertex list representation
Control points for spline surface
…..
In this way, we can change object orientation by applying
rotation on the surface points
Along with change in position with translation
Scaling
Transformation that used to alter the size of an object is
known as scaling.
This operation is carried out by multiplying coordinate value
(𝒙, 𝒚) with scale factors (𝒔𝒙 , 𝒔𝒚 ) respectively.
Equation for scaling is given by,
𝒙′ = 𝒙 ∙ 𝒔𝒙 & 𝒚′ = 𝒚 ∙ 𝒔𝒚
Contd.
Normal scaling will scale as well as reposition the object.
Scale factors less than 1 reduce the size and move object
closer to origin.
Scale factors greater than 1 enlarge the size of object and
move object away from origin
1 3
Contd.
Same values of 𝒔𝒙 and 𝒔𝒚 will produce Uniform Scaling.
Different values of 𝒔𝒙 and 𝒔𝒚 will produce Differential
(Non Uniform) Scaling.
Uniform Differential
Scaling Scaling
Fixed Point Scaling
We can control the position of object after scaling by keeping
one position fixed called Fix point (𝒙𝒇 , 𝒚𝒇 ).
Fixed Point
Fixed Point Scaling Equation
Equation for scaling with fixed point position as (𝒙𝒇 , 𝒚𝒇 ) is:
𝒙′ = 𝒙𝒇 + (𝒙 − 𝒙𝒇 )𝒔𝒙 𝒚′ = 𝒚𝒇 + (𝒚 − 𝒚𝒇 )𝒔𝒚
𝒙′ = 𝒙𝒇 + 𝒙𝒔𝒙 − 𝒙𝒇 𝒔𝒙 𝒚′ = 𝒚𝒇 + 𝒚𝒔𝒚 − 𝒚𝒇 𝒔𝒚
𝒙′ = 𝒙𝒔𝒙 + 𝒙𝒇 (𝟏 − 𝒔𝒙 ) 𝒚′ = 𝒚𝒔𝒚 + 𝒚𝒇 (𝟏 − 𝒔𝒚 )
Polygons are scaled by applying scaling at coordinates and
redrawing.
Other body like circle and ellipse will scale using its defining
parameters.
For example ellipse will scale using its semi major axis, semi
minor axis and center point scaling and redrawing at that
position.
Shearing
With Shearing transformation, we change shape of an
object
Shearing
General form of the transformation to determine the
new point (x’, y’) from the current point (x, y)
𝒙′ = 𝒙 + 𝒔𝒉𝒙 ∙ 𝒚
𝒚′ = 𝒚 + 𝒔𝒉𝒚 ∙ 𝒙
𝒔𝒉𝒙 and 𝒔𝒉𝒚 are shearing factors along X and Y
coordinates
Shearing may also reposition the objects like scaling
Note
The equations shown in for basic transformations are not
very handy and convenient to use to build graphics
libraries/packages
Note
The equations shown in for basic transformations are not
very handy and convenient to use to build graphics
libraries/packages
Alternate representations are there
Basic equations of transformations
Matrix Representation of transformations
Translation
We can represent it into single matrix equation in column
vector as;
Translation
We can represent it into single matrix equation in column
vector as;
𝑷′ = 𝑷 + 𝑻
𝒙′ 𝒙 𝒕𝒙
= 𝒚 + 𝒕
𝒚′ 𝒚
Translation
We can represent it into single matrix equation in column
vector as;
𝑷′ = 𝑷 + 𝑻
𝒙′ 𝒙 𝒕𝒙
= 𝒚 + 𝒕
𝒚′ 𝒚
We can also represent it in row vector form as:
𝑷′ = 𝑷 + 𝑻
𝒙′ 𝒚′ = 𝒙 𝒚 + ,𝒕𝒙 𝒕𝒚 -
Translation
We can represent it into single matrix equation in column
vector as;
𝑷′ = 𝑷 + 𝑻
𝒙′ 𝒙 𝒕𝒙
′ = 𝒚 + 𝒕
𝒚 𝒚
We can also represent it in row vector form as:
𝑷′ = 𝑷 + 𝑻
𝒙′ 𝒚′ = 𝒙 𝒚 + ,𝒕𝒙 𝒕𝒚 -
Since column vector representation is standard
mathematical notation and also many graphics package
like GKS and PHIGS uses column vector we will also
follow column vector representation.
Translation Example
Example: - Translate the triangle [A (10, 10), B (15, 15),
C(20, 10)] 2 unit in 𝑥 direction and 1 unit in 𝑦 direction.
𝑡𝑥
We know that 𝑃′ =𝑃+𝑇 = 𝑃 + 𝑡
𝑦
Translation Example
Example: - Translate the triangle [A (10, 10), B (15, 15),
C(20, 10)] 2 unit in 𝑥 direction and 1 unit in 𝑦 direction.
𝑡𝑥
We know that 𝑃′ =𝑃+𝑇 = 𝑃 + 𝑡
𝑦
10 2 12
For point (10, 10) 𝐴′ = + =
10 1 11
′ 15 2 17
For point (15, 15) 𝐵 = + =
15 1 16
20 2 22
For point (10, 10) 𝐶 ′ = + =
10 1 11
Translation Example
Example: - Translate the triangle [A (10, 10), B (15, 15),
C(20, 10)] 2 unit in 𝑥 direction and 1 unit in 𝑦 direction.
𝑡𝑥
We know that 𝑃′=𝑃+𝑇 = 𝑃 + 𝑡
𝑦
10 2 12
For point (10, 10) 𝐴′ = + =
10 1 11
′ 15 2 17
For point (15, 15) 𝐵 = + =
15 1 16
20 2 22
For point (10, 10) 𝐶 ′ = + =
10 1 11
Final coordinates after translation are:
[A’ (12, 11), B’ (17, 16), C’ (22, 11)]
Rotation: Matrix Representation
𝒙′ = 𝒙 𝐜𝐨𝐬 𝜽 − 𝒚 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒙 𝐬𝐢𝐧 𝜽 + 𝒚 𝐜𝐨𝐬 𝜽 (x',y')
(x,y)
θ
∅
Rotation: Matrix Representation
𝒙′ = 𝒙 𝐜𝐨𝐬 𝜽 − 𝒚 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒙 𝐬𝐢𝐧 𝜽 + 𝒚 𝐜𝐨𝐬 𝜽 (x',y')
∅
Rotation: Matrix Representation
𝒙′ = 𝒙 𝐜𝐨𝐬 𝜽 − 𝒚 𝐬𝐢𝐧 𝜽
𝒚′ = 𝒙 𝐬𝐢𝐧 𝜽 + 𝒚 𝐜𝐨𝐬 𝜽 (x',y')
1 3
Contd.
Example scale square with opposite corner coordinate
point are (1, 1) and (2, 2) by scale factor (3, 3)
𝑷′ = 𝑺 ∙ 𝑷
𝑥1 ′ 𝑥2 ′ 3 0 1 2 3 6
= =
𝑦1 ′ 𝑦2 ′ 0 3 1 2 3 6
1 3
Scaling Example
Example: - Consider square with left-bottom corner at
(2, 2) and right-top corner at (6, 6) apply the
transformation which makes its size half.
Scaling Example
Example: - Consider square with left-bottom corner at
(2, 2) and right-top corner at (6, 6) apply the
transformation which makes its size half.
As we want size half so value of scale factor are
𝑠𝑥 = 0.5, 𝑠𝑦 = 0.5 and Coordinates of square are [A (2,
2), B (6, 2), C (6, 6), D (2, 6)].
Scaling Example
Example: - Consider square with left-bottom corner at (2, 2)
and right-top corner at (6, 6) apply the transformation which
makes its size half.
As we want size half so value of scale factor are 𝑠𝑥 = 0.5, 𝑠𝑦 =
0.5 and Coordinates of square are [A (2, 2), B (6, 2), C (6, 6), D
(2, 6)].
𝑃′ = 𝑆 ∙ 𝑃
′ 𝑠𝑥 0 2 6 6 2 0.5 0 2 6 6 2
𝑃 = 0 𝑠 =
𝑦 2 2 6 6 0 0.5 2 2 6 6
Scaling Example
Example: - Consider square with left-bottom corner at (2, 2)
and right-top corner at (6, 6) apply the transformation which
makes its size half.
As we want size half so value of scale factor are 𝑠𝑥 = 0.5, 𝑠𝑦 =
0.5 and Coordinates of square are [A (2, 2), B (6, 2), C (6, 6), D
(2, 6)].
𝑃′ = 𝑆 ∙ 𝑃
′ 𝑠𝑥 0 2 6 6 2 0.5 0 2 6 6 2
𝑃 = 0 𝑠 =
𝑦 2 2 6 6 0 0.5 2 2 6 6
1 3 3 1
𝑃′ =
1 1 3 3
Final coordinate after scaling are:
[A’ (1, 1), B’ (3, 1), C’ (3, 3), D’ (1, 3)]
Problem
We can follow the approach of 2x2 Matrix representation
for transformations: rotation , scaling and shearing but
not translation
Problem
We can follow the approach of 2x2 Matrix representation
for transformations: rotation , scaling and shearing but
not translation
In order to avoid to these situation we go for another
type of transformation known as homogenous coordinate
system
Contd.
For efficient utilization we must calculate all sequence of
transformation in one step.
Contd.
For efficient utilization we must calculate all sequence of
transformation in one step.
For that reason we reformulate above equation to
eliminate the matrix addition associated with translation
terms in matrix 𝑴𝟐 .
Contd.
For efficient utilization we must calculate all sequence of
transformation in one step.
For that reason we reformulate above equation to
eliminate the matrix addition associated with translation
terms in matrix 𝑴𝟐 .
We can combine that thing by expanding 2X2 matrix
representation into 3X3 matrices.
Contd.
For efficient utilization we must calculate all sequence of
transformation in one step.
For that reason we reformulate above equation to
eliminate the matrix addition associated with translation
terms in matrix 𝑴𝟐 .
We can combine that thing by expanding 2X2 matrix
representation into 3X3 matrices.
It will allows us to convert all transformation into matrix
multiplication.
Homogeneous Coordinate System
We take recourse to one mathematical trick known as
the Homogeneous Coordinate System
Homogeneous Coordinate System
We take recourse to one mathematical trick known as
the Homogeneous Coordinate System
Homogeneous Coordinate System is an abstract
representation technique.
Homogeneous Coordinate System
We take recourse to one mathematical trick known as
the Homogeneous Coordinate System
Homogeneous Coordinate System is an abstract
representation technique.
In this technique, a 2D point (x, y) is represented with 3-
element vector 𝒙𝒉 , 𝒚𝒉 , 𝒉 .
𝒙𝒉 𝒚𝒉
Where 𝒙 = ,𝒚 = thus we can also write triple as
𝒉 𝒉
(𝒉 ∙ 𝒙, 𝒉 ∙ 𝒚, 𝒉).
Homogeneous Coordinate System
We take recourse to one mathematical trick known as
the Homogeneous Coordinate System
Homogeneous Coordinate System is an abstract
representation technique.
In this technique, a 2D point (x, y) is represented with 3-
element vector 𝒙𝒉 , 𝒚𝒉 , 𝒉 .
𝒙𝒉 𝒚𝒉
Where 𝒙 = ,𝒚 = thus we can also write triple as
𝒉 𝒉
(𝒉 ∙ 𝒙, 𝒉 ∙ 𝒚, 𝒉).
𝒉 is called homogeneous factor – can take any non-zero
value.
Contd.
Any point of the form 𝒙𝒉 , 𝒚𝒉 , 𝟎 is considered to be
infinity.
Contd.
Any point of the form 𝒙𝒉 , 𝒚𝒉 , 𝟎 is considered to be
infinity.
point (0, 0, 0) is not allowed
Homogeneous Matrix for Translation
Let’s see each representation with 𝒉 = 𝟏
𝑷′ = 𝑻(𝒕𝒙 ,𝒕𝒚 ) ∙ 𝑷
𝒙′ 𝟏 𝟎 𝒕𝒙 𝒙
𝒚 ′ = 𝟎 𝟏 𝒕𝒚 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Homogeneous Matrix for Translation
Let’s see each representation with 𝒉 = 𝟏
𝑷′ = 𝑻(𝒕𝒙 ,𝒕𝒚 ) ∙ 𝑷
𝒙′ 𝟏 𝟎 𝒕𝒙 𝒙
𝒚 ′ = 𝟎 𝟏 𝒕𝒚 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Inverse of translation matrix is obtain by putting
− 𝒕𝒙 & − 𝒕𝒚 instead of 𝒕𝒙 & 𝒕𝒚 .
Homogeneous Matrix for Rotation
𝑷′ = 𝑹(𝜽) ∙ 𝑷
𝒙′ 𝐜𝐨𝐬 𝜽 − 𝐬𝐢𝐧 𝜽 𝟎 𝒙
𝒚′ = 𝐬𝐢𝐧 𝜽 𝐜𝐨𝐬 𝜽 𝟎 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Homogeneous Matrix for Rotation
𝑷′ = 𝑹(𝜽) ∙ 𝑷
𝒙′ 𝐜𝐨𝐬 𝜽 − 𝐬𝐢𝐧 𝜽 𝟎 𝒙
𝒚′ = 𝐬𝐢𝐧 𝜽 𝐜𝐨𝐬 𝜽 𝟎 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Inverse of rotation matrix is obtained by replacing 𝜽
by −𝜽.
Homogeneous Matrix for Scaling
𝑷′ = 𝑺(𝒔𝒙 ,𝒔𝒚 ) ∙ 𝑷
𝒙′ 𝒔𝒙 𝟎 𝟎 𝒙
𝒚′ = 𝟎 𝒔𝒚 𝟎 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Homogeneous Matrix for Scaling
𝑷′ = 𝑺(𝒔𝒙 ,𝒔𝒚 ) ∙ 𝑷
𝒙′ 𝒔𝒙 𝟎 𝟎 𝒙
𝒚′ = 𝟎 𝒔𝒚 𝟎 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏
Inverse of scaling matrix is obtained by replacing 𝒔𝒙 & 𝒔𝒚
𝟏 𝟏
by & respectively.
𝒔𝒙 𝒔𝒚
Homogeneous Matrix for Shearing
𝑷′ = 𝑺(𝒔𝒉𝒙 ,𝒔𝒉𝒚 ) ∙ 𝑷
𝒙′ 𝟏 𝒔𝒉𝒙 𝟎 𝒙
𝒚′ = 𝒔𝒉𝒚 𝟏 𝟎 𝒚
𝟏 𝟎 𝟎 𝟏 𝟏