Bab 4 Transformasi Geometri - Repository UNIKOM

  Grafika Komputer Grafika Komputer

  Chapter 4 Chapter 4 Geometric Transformations

Geometric Transformations John Adler John Adler Materi Kuliah : Minggu tanggal materi kuliah Keterangan ke-

  9 7-8-9 Mei 2013

  Bab IV : Transformasi Dua Dimensi 14-15-16 Mei

  10 Bab V : Teknik Clipping 2013 21-22-23 Mei

  28-29-30 Mei

  12 Bab VI : Transformasi Tiga Dimensi 2013

  13 Bab VII : Konsep Pewarnaan 4-5-6 Juni 2013 Bab VIII : Pengenalan Animasi 14 11-12-13 Juni Komputer

  2013

  18-19-20 Juni

  25-26-27 Juni Minggu 2013 Tenang

  2-3-4 Juli 2013 &

  2D Transformations

“Transformations are the operations applied

to geometrical description of an object to change its position, orientation, or size are called geometric transformations”.

Why Transformations ?

  “Transformations are needed to manipulate the initially created object and to display the

modified object without having to redraw

it.”

  Materi Definisi 

  Translasi 

  Rotasi 

  Skala 

  Refleksi 

  Shear Translasi 

  Translasi adalah suatu pergerakan/perpindahan semua titik dari objek pada suatu jalur lurus sehingga menempati posisi baru.

  

Jalur yang direpresentasikan oleh vektor disebut

Translasi atau Vektor Geser.

   Pergeseran tersebut dapat ditulis : x ' a b x

               y ' c d y

        Translasi 

Untuk merepresentasikan translasi dalam matriks 3x3 kita dapat menulisnya :

  1

  T T y x

  T y T x y x

  1 ' ' y x y x

  1

  1

  1

      

       

      

      

       

      

      

        

  1

  2D Translation

  2D Translation 

  Repositioning an object along a straight line path from one co-ordinate location to another

  (x,y) (x’,y’)

  To translate a 2D position, we add translation distances t _x and t _y to the original coordinates (x,y) to obtain the new coordinate position (x’,y’)

  

x’= x + t , y’= y + t

_{x y} y

  Matrix form Matrix form t x  x

    x        

      T t y y

   y

        x

  P P T  

  2D Translation

  2D Translation 

  Moving a polygon from position (a) to position (b) with the translation vector (-5, 10), i.e.

  5 

   

  T

    

  10  

  y y

  20

  20

  15

  15

  10

  10

  5

  5 x x

  5

  10

  15

  20

  5

  10

  15

  20

  (a) (b)

  t _x t _y P(2, 2) = 6

  =4 P

  '

  (8,6) t _y

   We can write the components: p' _x = p _x + t _x p' _y = p _y + t _y

   or in matrix form: P' = P + T

  

2D Translation

  

2D Translation Translating a Polygon

Translating a Polygon

  class Point2D { public: GLfloat x, y; }; void translatePoly(Point2D P[], GLint n, GLfloat tx, GLfloat ty) { GLint i; for (i=0; i<n; i++) { P[i].x = P[i].x + tx;

  P[i].y = P[i].y + ty; } glBegin (GL_POLYGON); for (i=0; i<n; i++) glVertex2f(P[i].x, P[i].y); glEnd();

  } Rotasi 

  Rotasi adalah mereposisi semua titik dari objek sepanjang jalur lingkaran dengan pusatnya pada titik pivot. x ' x cos( ) y sin( )

      y ' x sin( ) y cos( )

      Rotasi x r cos( )

    y r sin( )

    x ' r cos( )

     

  Identitas Geometri

  y ' r sin( )     x ' r cos( ) cos( ) r sin( ) sin( )

        y ' r sin( ) sin( ) r cos( ) cos( )

       

  Subtitusi

  x ' r cos( ) r sin( )     y ' r sin( ) r cos( )

      Rotasi 

  Untuk memudahkan perhitungan dapat digunakan matriks :

  Dimana : 

  sin(θ) dan cos(θ) adalah fungsi linier dari θ,

  

  x’kombinasi linier dari x dan y

  

  y’kombinasi linier dari x and y

     

       

     

     

    y x y x

  ) cos( ) sin( ) sin( ) cos( ' '

     

  2D Rotation

  2D Rotation 

  Repositioning an object along a circular path in the xy- plane cos( ) cos cos sin sin sin( ) cos sin sin cos

  x r r r y r r r            

     

     

  x y (x,y) (x’,y’)

  φ θ r r

  The original coordinates are: cos( ) sin( )

  x r y r





   

  2D Rotation

  2D Rotation 

  Substituting

  y (x’,y’) x x cos y sin

      r r y x sin y cos θ

      (x,y)

  φ x

  Matrix form Matrix form x cos sin x

     

             y sin cos y

    

       P R P

   

Rotation

   A rotation repositions all points in an object along a circular path in the plane centered at the pivot point.

  P 

  First, we’ll assume the   pivot is at the origin.

  P

  

2D Rotation about a Pivot position

  

2D Rotation about a Pivot position



  Rotating about pivot position (x r

  , y r

  ) ( ) cos ( )sin ( )sin ( ) cos

r r r

r r r x x x x y y y y x x y y

      

   

  

   

x y

  (x,y) (x’,y’)

φ

θ r r x _r y _r Translating a Polygon

Translating a Polygon

  class Point2D { public: GLfloat x, y; }; void rotatePoly(Point2D P[], GLint n, Point2D pivot, GLdouble theta) { Point2D *V; V = new Point2D[n]; GLint i; for (i=0; i<n; i++) {

V[i].x = pivot.x + (P[i].x – pivot.x) * cos(theta)

• - (P[i].y – pivot.y) * sin(theta);

  V[i].y = pivot.y + (P[i].x – pivot.x) * sin(theta)

• - (P[i].y – pivot.y) * cos(theta);

  } glBegin (GL_POLYGON); for (i=0; i<n; i++ glVertex2f(V[i].x, V[i].y); glEnd(); delete[] V; }

  Skala 

  Penskalaan koordinat dimaksudkan untuk

menggandakan setiap komponen yang ada pada

objek secara skalar.

   Keseragaman penskalaan berarti skalar yang

digunakan sama untuk semua komponen objek.

   Ketidakseragaman penskalaan berarti skalar yang digunakan pada objek adalah tidak sama.

  Scaling 

  Uniform Scaling 

  Un-uniform Scaling

  Scaling

• Scaling changes the size of an object and involves two scale factors, S _x

  and S _y for the x- and y- coordinates respectively.

• Scales are about the origin.
• We can write the components: p' _x

  = s _x • p _x

  p' _y

  = s _y • p _y or in matrix form: P' = S • P

  Scale matrix as:

     

     _y ^x s s

  S P

  P’ Scaling

• If the scale factors are in between 0 and 1:----

   the points will be moved closer to the origin  the object will be smaller.

  P(2, 5) P’

• Example :

  S _x = 0.5, S _y = 0.5

• P(2, 5),

  

Scaling

• If the scale factors are in between 0 and 1  the points will be moved closer to the origin  the object will be smaller.
• Example :
• P(2, 5), S _x

  P(2, 5) P’

  = 0.5, S _y = 0.5

  P’

• If the scale factors are larger than 1  the points will be moved away from the origin  the object will be larger.
>Example :

  S _x = 2, S _y = 2

• P(2, 5),

  

Scaling

P’
• If the scale factors are the _{x y} same, S = S  uniform scaling
• Only change in size (as previous example)

  x y

• If S  differential

   S

  P(1, 2) scaling.

• Change in size and shape
• Example : square  recta
• P(1, 3), S x = 2, S y = 5

  2D Scaling

  2D Scaling 

  Altering the size of an object. S _x and S _y are the scaling factors. If S _x

   = S _y then uniform scaling. x y x xS y yS

    Matrix form Matrix form x y

  S x x S y y

  P S P   

                   

    x y

  S _x = S _y = ½ S _x = S _y = ½ x’ x

  Reduced in size and moved closer to the origin

  2D Scaling relative to Fixed point

  2D Scaling relative to Fixed point  Scaling relative to fixed point

  (x f

  , y f

  ) ( ) ( ) f f x f f y x x x x S y y y y S

        x y

  S _x = ¼ , S _y = ½ P ₁ P ₂ P ₃ P ₁ ^’ P ₂ ^’ P ₃ ^’

  (x _f , y _f ) (1 ) (1 ) x f x y f y x xS x S y yS y S

       

  OR where the additive terms x _f (1-S _x ) and y _f (1-S _y ) are constants for all points in the object.

General fixed point scaling

  

  Translate object so that the fixed point coincides with the coordinate origin

  

  Scale the object with respect to the coordinate origin

  

  Use the inverse translation of step 1 to return the object to its original position _{(x ,y ) f f}

  (b) (a) (c) (d) Translation of

  Original Position object so that scaling was Translation of the object of Object and fixed point about origin so that the Fixed point

  Fixed point (x ,y )is at origin _{f f} is returned to position (x ,y ) _{f f}

  Translating a Polygon

Translating a Polygon

  class Point2D { public: GLfloat x, y; };

void scalePoly(Point2D P[], GLint n, Point2D fixedPt,

GLfloat Sx, GLfloat Sy) { Point2D *V; V = new Point2D[n]; GLfloat addx = fixedPt.x * (1 – Sx); GLfloat addy = fixedPt.y * (1 – Sy); GLint i; for (i=0; i<n; i++) { V[i].x = P[i].x * Sx + addx; V[i].y = P[i].y * Sy + addy; } glBegin (GL_POLYGON); for (i=0; i<n; i++ glVertex2f(V[i].x, V[i].y); glEnd(); delete[] V; }

  Matrix Representation Matrix Representation

  

 Use 3×3 matrices to combine transformations

x 1 0 t x

      x       

  y 0 1 t y   

  Translation y

            1 0 0 1

  1     

  x cos sin x

   

   

           

  y sin cos y   

    Rotation

           

  1

  1

  1     

  x S x

        _x     

  y S y 

   

  Scaling _y

           

  1

  1

  1      Inverse Transformations Inverse Transformations

   Translation

  1 R

     

  S ^

  0 0 0 1 ^{S x y S}

  1 ₁

          ₁

     

      ^

  cos sin sin cos

   Rotation

  1

         

      

  t

T t

^

  1 ^{x y}

  1 0 0 1 0 0

   Scaling ¹

        

  

Example

Example

   Consider the line with endpoints (10, 10) and (30, 25).

  Translate it by t _x = -20, t _y = -10 and then rotate it by θ = 90º.

  x y

(10, 10)

(30, 25)

  Right-to-left

  cos 90 sin 90 0 1 0

  20 sin 90 cos 90 0 0 1

  10

  1 1 0 0

  1

  1

  x x y y

      

             

                        

  Solution Solution x cos 90 sin 90 0 1 0

  20 x 

                 

  y sin 90 cos 90 0 0 1

  10 y     

             

  1 1 0 0

  1

  1       1 0 1 0

  20 x  

          1 0 0 1

  10 y  

          1 0 0

  1

  1     1 10 x

        

  1 20 y  

  y

    

  (30, 25)

    

  1

  1   

  (10, 10) x

Solution (continue)

  1

                           

  Point (30, 25)

  1 10

  30

  15 1 20 25

  10

  1

   

  1

  1

  x y

    

               

                          

  x y (10, 10) (30, 25) (0, -10) (-15, 10)

               

  Solution (continue)

  1 10

           

  1

  20

  1

  1

  1

  x x y y

   

                   

  1

  Point (10, 10)

  1 10

  10 1 20 10

  10

  1

  1

  1

  x y

  Result Result x

y

  (10, 10) (30, 25) (0, -10) (-15, 10) x y

  (10, 15) (-10, 0) x y

  (0, -10) (-15, 10) Step-by-step

  R(90º)

  

Exercises

Exercises

   Consider the following object:

  1. Apply a rotation by 145º then scale it by S _x =2 and S _y =1.5 and then translate it by t _x =20 and t _y =-30.

  2. Scale it by S _x =½ and S _y =2 and then rotate it by 30º.

  

3. Apply a rotation by 90º and then another rotation by 45º.

  4. Apply a rotation by 135º. x y

  10

  10

  25

  45 Exercises Exercises

  

Composite 2D Transformations

  2

  2 ( , ) ( , ) ( , ) x y x y x x y y

  1

  2

  1

  2

  2

  1

  1

        

  2 ( ) ( ) ( ) R R R

  1

  1

  

Composite 2D Transformations

  T t t T t t T t t t t    

  2 ( , ) ( , ) ( , ) x y x y x x y y

  1

  2

  1

  2

  2

  1

  1

  3. Scaling : Show that:

  Rotation : Show that:

  1. Translation : Show that: 2.

  S s s S s s S s s s s    

  

General 2D Pivot-Point Rotation

General 2D Pivot-Point Rotation

x y x y

  Original position and Pivot Point Translate Object so that Pivot Point is at origin

  Rotation about origin Translate object so that Pivot Point is return to position (x _r , y _r )

x

y

  (x _{r ,} y _r ) x y

  (x _{r ,} y _r )

General Pivot-point Rotation

  General Pivot-point Rotation

  

1 0 cos sin 0 1 0

0 1 sin cos 0 0 1

1 0 0 1 1 0 0

  1

  1 ( , ) ( ) ( , ) ^{r r r r} _{r r r r} x x x x y y y y T x y R T x y P

     

  

           

                  

                     

  Using Matrices Using Matrices

  Exercises Exercises

   Consider the following object: y

  25

  10 x

  10

  45

  

1. Apply a rotation by 60° on the Pivot Point (-10, 10) and

display it.

  

2. Apply a rotation by 30° on the Pivot Point (45, 10) and

display it.

  

3. Apply a rotation by 270° on the Pivot Point (10, 0) and

then translate it by t = -20 and t = 5. Display the final

_{x y}

result.

  

General 2D Fixed-Point Scaling

General 2D Fixed-Point Scaling

x y

  Original position and Fixed Point Translate Object so that Fixed Point is at origin

  Scale Object with respect to origin Translate Object so that Fixed Point is return to position (x _f , y _f )

x

y

  (x _{f ,} y _f ) x y

  (x _{f ,} y _f ) x y

General 2D Fixed-Point Scaling

  

General 2D Fixed-Point Scaling

  1 0 0 0 1 0 0 1 0 0 1 1 0 0 1 0 1 0 0

  1

  1 ( , ) ( , ) ( , ) ^{r x r r y r}

_{r r x y r r}

x x s x x y y s y y

  

T x y S s s T x y P



                  

                       

        Using Matrices

  Using Matrices

  

Exercises

Exercises

   Consider the following object: y

  125

  50 x

  60 220

  1. Scale it by s = 2 and s = ½ relative to the fixed point _{x y} (140, 125) and display it.

  

2. Apply a rotation by 90° on the Pivot Point (50, 60) and

then scale it by s = s = 2 relative to the Fixed Point

_{x y} (0, 200). Display the result.

  3. Scale it s = s = ½ relative to the Fixed Point (50, 60) _{x y} and then rotate it by 180° on the Pivot Point (50, 60).

  Display the final result. Order of Transformations Order of Transformations

  Object is first translated in the x direction and then rotated by 90º x y

  Object is first rotated by 90º and then translated in the x direction x y

  Reflection Reflection

  Reflection of an object about the x axis x y x y

  Reflection of an object about the y axis

  1 1 0

  1

  1

  1 x x y y

              

                 

  About the x axis 1 0 0 1 0

  1 0 1

  1 x x y y

             

                  

  About the y axis

  Reflection Reflection

  Same as a rotation with 180º x y

  1 0 1 0

  1

  1

  1 x x y y

             

                   

  Relative to the coordinate origin 0 1 0 1 0 0

  1 0 0 1

  1 x x y y

                             

  With respect to the line y = x x y y = x

  Reflection Reflection

  2D Shear

                              x y

  2

  1

  1

  1 x y sh _x = 2

  1

  Initial object

  1 x x sh x y y

  2D Shear  x-direction shear x x x sh y y y

  1

  1

  1

  1

  Matrix form Matrix form

     

  3

  2D Shear

              

  2

  1

  1

  1 y _ref = -1 x sh _x = ½, y _ref = -1

  1

                   y x y

  1 ^{x x ref} x sh sh y x y y

  2D Shear  x-direction relative to other reference line

  1

  1

  1

  1

      Matrix form Matrix form

  ( ) x ref x x sh y y y y

  3 y _ref = -1

  2D Shear

  2D Shear  y-direction shear y x x y y sh x

      Matrix form Matrix form

  1 0 0 1 0 1 0 1

  1 y x x y sh y

                              x y

  Initial object

  1

  1 x y sh _y = 2

  1

  1

  2

  3

  2D Shear

  2D Shear  y-direction relative to other reference line

  ( ) y ref x x y y sh x x

      Matrix form Matrix form

  1

  1

  1

  1

  1 ^{x y ref} x x y sh sh x y

              

                   x y

  1

  1 x _ref = -1 sh _y = ½, x _ref = -1 y x

  1

  1

  2 x _ref = -1

  2D Shear

  2D Shear Transformations between Transformations between

  2D Coordinate Systems

  2D Coordinate Systems 

  To translate object descriptions from xy coordinates to x’y’ coordinates, we set up a transformation that superimposes the x’y’ axes onto the xy axes. This is done in two steps:

  1. Translate so that the origin (x , y ) of the x’y’ system is moved to the origin (0, 0) of the xy system.

  2. Rotate the x’ axis onto the x axis. x y

x

x’ y’ y

   Transformations between 2D Transformations between 2D

  Coordinate Systems Coordinate Systems

   i.e.

  1) 2) Concatenating:

  

1 0

( , ) 0 1

0 0

  1 x T x y y

                 cos sin

  ( ) sin cos

  1 R

      

          

      ,

  ( ) ( , ) xy x y

  

M R T x y



       

  

Example

Example

  

  Find the x’y’-coordinates of the xy points (10, 20) and (35, 20), as shown in the figure below:

  , cos30 sin 30 0 1 0

  30 sin 30 cos30 0 0 1 10 1 0 0

  1 0.866 0.5 0 1 0 30 0.866

  0.5

  31 0.5 0.866 0 0 1 10 0.5 0.866 6.34 1 0 0

  1

  1 ^{xy x y} M _

          

           

   

    

    

 

    

    

    

    

x y

  

30

x’ y’

  10 30º (10, 20) (35, 20)

  (10,20) (35,20)

  1

  10 30º (10, 20) (35, 20) x’ y’

  30 x’ y’

  6) x y

                  

         

                 

           

  1 P P            

  1

  9.31 0.5 0.866 6.34 20 6.16 (9.31, 6.1

  0.866

  35

  31

  0.5

  1 0.866

  1

  1

  12.34 0.5 0.866 6.34 20 18.66 (-12.38, 18.66)

  10

  31

  0.5

  (-12.38, 18.66) (9.31, 6.16) Composite Transformations (A) Translations

  If two successive translation vectors (t ,t ) and (t ,t ) are applied to _{x1 y1 x2 y2} a coordinate position P, the final transformed location P’ is calculated as: -

  P’=T(t ,t ) . {T(t ,t ) .P} _{x2 y2 x1 y1} ={T(t ,t ) . T(t ,t )} .P _{x2 y2 x1 y1}

  Where P and P’ are represented as homogeneous-coordinate column vectors. We can verify this result by calculating the matrix product for the two associative groupings. Also, the composite transformation matrix for this sequence of transformations is: -

  1 0 t +t _{x1 x2} 1 0 t 1 0 t _{x2 x1} 0 1 t +t _{y1 y2} 0 1 t 0 1 t _{y2 y1} .

  = 0 0 1 0 0 1 0 0 1

  Or, T(t ,t ) . T(t ,t ) = T(t +t , t +t ) _{x2 y2 x1 y1 x1 x2 y1 y2} Which demonstrate that two successive translations are additive.

  (B) Rotations

  Two successive rotations applied to point P produce the transformed position: - P’= R(Ө ) . {R(Ө ) . P} _{2 1}

  = {R(Ө ) . R(Ө )} . P _{2 1} By multiplication the two rotation matrices, we can verify that two successive rotations are additive: R(Ө ) . R(Ө ) = R (Ө + Ө ) _{2 1 1 2} So that the final rotated coordinates can be calculated with the composite rotation matrix as: -

  P’ = R(Ө + Ө ) . P _{1 2}

  (C) Scaling

  Concatenating transformation matrices for two successive scaling operations produces the following composite scaling matrix: -

  S 0 0 S . S 0 0 S 0 0 _{x2 x1 x1 x2}

  0 S .S

  0 S _{y1 y1 y2 y2} .

  = 0 0 1 0 0 1 0 0 1

  Or, S(S ) . S(S ) = S (S ) _{x2 y2 x1 y1 x1 x2 y1 y2} , S , S . S , S .S The resulting matrix in this case indicates that successive scaling operations are multiplicative.

Other transformations

  

Reflection is a transformation that produces a mirror image of

  an object. It is obtained by rotating the object by 180 deg about the reflection axis

  1

  2

  3 3’ 2’ 1’

  Original position Reflected position Reflection about the line y=0, the

  X- axis , is accomplished with the transformation matrix 1 0 0 0 -1 0

  0 0 1

Reflection

  1’ 3’ 2’

  3

  2

  1 Original position Reflected position Reflection about the line x=0, the Y- axis , is accomplished with the transformation matrix

• 1 0 0 0 1 0 0 0 1

Reflection

  Reflection of an object relative to an axis perpendicular to the xy plane and passing through the coordinate origin

  Y-axis

• 1 0 0

  Reflected position 0 -1 0

  3’ 0 0 1

  2’ The above reflection matrix is 1’ the rotation matrix with

  X-axis Origin O angle=180 degree.

  1 (0,0) This can be generalized to any

  2 reflection point in the xy plane.

  This reflection is the same as a

  3 180 degree rotation in the xy plane using the reflection point

  Original position as the pivot point.

  

Reflection of an object w.r.t the

straight line y=x

  0 1 0 Y-axis Original position

  1 0 0

  3 0 0 1

  2

  1 1’ 3’ Reflected position

  2’ X-axis Origin O (0,0)

Reflection of an object w.r.t the

  Y-axis straight line y=-x

  0 -1 0

• 1 0 0 0 0 1

  X-axis

  

3

(0,0) Original position

  1 1’ Line Y = - X

  2’ 3’ Reflected position

Reflection of an arbitrary axis y=mx+b

  3

  2

  3

  3

  Rotate back

  

1

Original position Reflected position

  2

  3

  2’

  Reflected position 1’ 3’

  2

  1’ 3’ 2’

  2

  Rotate so that it coincides with x- axis and reflect also about x-axis

  1 Reflected position Original position

  2

  3

  2’

  1 Original position ^{Translation so that it passes through origin} 1’ 3’

  2

  3

  Rotate back Translate back

Shear Transformations

   Shear is a transformation that distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

   Two common shearing transformations are those that

shift coordinate x values and those that shift y values

Shears

  

Original Data y Shear x Shear

1 0 0 1 sh _x sh 1 0 0 1 0 _y 0 0 1 0 0 1

An X- direction Shear

  For example, Sh =2 _x (2,1) (3,1)

  (1,1) (0,1) (0,0) (1,0) (0,0) (1,0)

An Y- direction Shear

  (0,1) (1,1)

  (1,0) (0,0) (0,0)

  (0,1) (1,3)

  (1,2) For example, Sh _y =2

  X X Y Y

CONCLUSION

  To manipulate the initially created object and to display the modified object without having to redraw it, we use Transformations.