1. Transformasi 2D (endang_pg)
Reff: “Fundamentals of interactive computer Graphics” james d. folley and andreas Van Dam”
Komputer Grafik
Departemen Ilmu Komputer FMIPA-IPB
2011

2. Agenda kali ini! Kenapa transformasi? Jenis Transformasi
Translasi
Scaling
Rotasi
Sistem Koordinat Homogen dan representasi matrix transformasi
Transformasi Komposit

3. Kenapa Transformasi?
Transformasi ditujukan untuk menggambarkan operasi perubahan posisi, ukuran, ataupun view sebuah objek grafik

4. Translasi x’ = x + dx y‘= y + dy
Transformasi bagi fenomena pergeseran suatu objek dari satu posisi ke posisi lain
x’ = x + dx y‘= y + dy
Translasi relatif terhadap sumbu koordinat y x 1 2 3 4 5 6 7 8 9 10

5. Contoh Translasi y x 1 2 3 4 5 6 7 8 9 10
(2, 3)
(1, 1)
(3, 1)

6. Scaling x’ = Sx × x y ‘= Sy × y
Transformasi terkait perubahan ukuran objek grafis, dengan mengalikan setiap titik terhadap suatu skalar
Perhatikan: tidak hanya berubah tetapi juga bergerak!
x’ = Sx × x y ‘= Sy × y
Relatif terhadap origin y x 1 2 3 4 5 6 7 8 9 10

7. Contoh Scaling y x 1 2 3 4 5 6 7 8 9 10
(2, 3)
(1, 1)
(3, 1) 7

8. Rotasi x ‘= x × cosθ – yold × sinθ y ‘= x × sinθ + yold × cosθ
Rotasi dasar memutar objek terhadap titik origin dengan suatu sudut putaran tertentu (θ)
x ‘= x × cosθ – yold × sinθ
y ‘= x × sinθ + yold × cosθ
formulasi di papan tulis y 6 5 4 3 2 1 x

9. Contoh Rotasi y x 1 2 3 4 5 6 7 8 9 10
(2, 3)
(1, 1)
(3, 1) 9

10. Sistem Koordinat Homogen
Andaikan P adalah pasangan titik (xi,yi)
Translasi P’=P+T
Scaling P’=P.S
Rotasi P’=P.R
Perhatikan mana yang Operasinya sangat Berbeda?
Jelaskan terlebih dahulu setiap matriks ketika menjelasakan modus transformasi

11. Sistem Koordinat Homogen(ii)
Seringkali transformasi merupakan proses berturutan dari dua atau lebih kombinasi jenis transformasi berbeda
Bagaimana agar operasi ketiga transformasi dapat dengan mudah dikombinasikan?
PASTINYA OPERASINYA HARUS HOMOGEN

12. Homogeneous coordinatesw
(x, y, w)
w = 1
(x/w, y/w, 1) x y y
Kita bisa memandang bahwa sisi 2 D adalah dimensi terbatas dari ruang 3D. Objek 3D adalah sehimpunan sisi paralel tidak terbatas dari ruang 3D x
w = 0

13. Homogeneous Coordinates
Sebuah titik (x, y) dapat dituliskan pada homogeneous coordinates sebagai (xh, yh, h)
Dengan homogeneous parameter h sebuah nilai tidak Nol sehingga:
Selanjutnya setiap titik (x, y) dapat ditulis sebagai (hx, hy, h)
Dengan mudah untuk h = 1 maka (x, y) menjadi (x, y, 1)

14. Why Homogeneous Coordinates?
Matematikawan biasanya menggunakan koordinat homogen untuk dapat memberikan faktor skala yang dikemudian waktu dapat dihapus dari persamaan
Kita akan lihat bahwa semua transformasi dapat direpresentasikan sebagai matriks 3 * 3
Koordinat homogen dapat kita gunakan untuk mewujudkannya, sehingga operasi transformasi menjadi lebih efisien

15. Remember Matrix Multiplication
Recall how matrix multiplication takes place:

16. Homogeneous Translation
Translasi titik oleh (dx, dy) dapat ditulis dalam bentuk matriks sebagai
Mewakili titik sebagai vektor kolom homogen kita melakukan aksi ini sebagai perhitungan:

17. Homogenous Coordinates
To make operations easier, 2-D points are written as homogenous coordinate column vectors
Translation:
Scaling:

18. Homogenous Coordinates (cont…)
Rotation:

19. Inverse Transformations
Secara mudah matriks transformasinya dapat dituliskan sebagai

20. Combining Transformations
Untuk memudahkan beberapa kombinasi transformasi dapat direpresentasikan sebagai sebuah matrik transformasi
Contoh sebuah objek bentuk yang berputar pada poros titik beratnya (Z):
Transformasikan Z ke origin
Rotasikan dengan poros origin
Transformasikan kembali origin pada Z

21. Combining Transformations (cont…)1 2 3 4

22. Combining Transformations (cont…)
The three transformation matrices are combined as follows
REMEMBER: Matrix multiplication is not commutative so order matters

23. Transformasi 2D in Open GL (endang_pg)
Komputer Grafik
Departemen Ilmu Komputer FMIPA-IPB
2011 23

24. In OpenGL, all the model transformations are accumulated in the current transformation matrix (CTM). All vertices of an object will be transformed via this matrix before the object is drawn.
A system stack is provided for storing the backup copies of the CTM during execution.
We usually save the CTM in the stack before the drawing of a transformed object. And restore the original CTM afterwards.
CTM
Vertices
Stack

25. . . To save a copy of the CTM in the stack Vertices CTM Stack
(before)
To save a copy of the CTM in the stack
glPushMatrix();
CTM
Vertices
Stack .
(after)

26. . . . . . . To overwrite the CTM with the top matrix in the stack
Vertices
Stack
(before)
To overwrite the CTM with the top matrix in the stack
glPopMatrix();
Vertices
Vertices
CTM
(after)
Stack

27. To specify a translation
glTranslatef( double Tx, double Ty, 0.0)
The system first generates the matrix representing the translation. Then post multiplies this matrix with the CTM. Finally overwrites the CTM with the result.
CTM
Vertices 
Before
After
CTM
Vertices

28. Progressive Translation
Example
//draw a white head at (0,0)
glColor3f( 1.0, 1.0, 1.0);
draw_head();
//draw a green head at (-2,-1)
glColor3f( 0.0, 1.0, 0.0);
glPushMatrix();
glTranslatef( -2.0, -1.0, 0.0);
glPopMatrix();
glColor3f( 1.0, 1.0, 1.0); //draw a title
hkgluBitMapString( -1.9, 1.8, "Translation of (-2, -1)” );
Progressive Translation

29. Generate a matrix for the scaling. Post multiply it with the CTM
To specify a scaling
glScalef( double Sx, double Sy, 1.0)
Generate a matrix for the
scaling. Post multiply it with
the CTM
//Scale by Sx = 1.5, Sy = 2
glPushMatrix();
glScalef( 1.5, 2.0, 1.0);
draw_head();
glPopMatrix();
In general, an object moves away from the origin when scaled up, moves towards when scaled down
Progressive Scaling

30. To specify a rotation glRotatef( double degree, 0.0, 0.0, 1.0)
glPushMatrix();
glRotatef( 45.0, 0.0, 0.0, 1.0);
draw_head();
glPopMatrix();
(Note that the angles provided
to gl functions are expressed in
degrees instead of radians.)
Progressive Rotation

31. First to scale( Sx =1.5, Sy =2) and then translate the picture to (-2, -1).
Note that the transformations are specified in reverse order: first call glTranslatef(...), and then glScalef(…)
CTM
Vertices 

32. Progressive (Scaling + Translation)
The program
glPushMatrix();
glTranslatef( -2.0, -1.0, 0.0);
glScalef( 1.5, 2.0, 1.0);
draw_head();
glPopMatrix();
Progressive (Scaling + Translation)

33. Scaling relative to a fix point
//Scaling relative to the
//apex of the nose at (xf, yf)
glPushMatrix();
glTranslatef( xf, yf, 0.0);
glScalef( sx, sy, 1);
glTranslatef( -xf, -yf, 0);
draw_head();
glPopMatrix();
(xf, yf)
Scaling relative to a fix point

34. Rotation about a pivot point
//Rotate 90 degree about
//the apex of the nose
glPushMatrix();
glTranslatef( xf, yf, 0.0);
glRotatef( 90., 0.0, 0.0, 1.0);
glTranslatef( -xf, -yf, 0);
draw_head();
glPopMatrix();
(xf, yf)
Rotation about a pivot point

35. Reflection about the x axis
The transformation matrix is the same as scaling matrix with Sx = 1 and Sy = 1. Thus, the reflection about the x axis can be achieved by calling
glScalef( 1.0, -1.0, 1.0)
Similarly, the reflection about the y axis is achieved by calling
glScalef( -1.0, 1.0, 1.0)
(x,y)
(x,-y)

36. Reflection about x-axis
Example
glPushMatrix();
glScalef( 1, -1, 1);
draw_head();
glPopMatrix();
Reflection about x-axis

37. Reflection along a line
y =mx+b
Reflection along a line
Translate (0, -b) so that the line
passes through the origin
Rotate the line onto the x axis by -o
Reflect about the x axis
Backward rotate
backward translate
(Be reminded that these operations must be specified in reverse order.) b 

38. Reflection against an arbitrary line
// To draw the reflection of the head about y = 2x + 0.5
// (we need to convert theta from radians to degrees)
double m = 2.0, b = .5, theta = atan(m)*180.0/3.1416;
glPushMatrix();
glTranslatef( 0, b, 0.);
glRotatef( theta, 0.0, 0.0, 1.0);
glScalef( 1, -1, 1); //Reflect
glRotatef( -theta, 0.0, 0.0, 1.0);
glTranslatef( 0, -b, 0.);
draw_head();
glPopMatrix();
Reflection against an arbitrary line

39. Summary In this lecture we have taken a look at:
2D Transformations
Translation
Scaling
Rotation
Homogeneous coordinates
Matrix multiplications
Combining transformations
Next time we’ll start to look at how we take these abstract shapes etc and get them on-screen

40. Equations xnew = xold + dx ynew = yold + dy Translation: Scaling:
xnew = Sx × xold ynew = Sy × yold
Rotation
xnew = xold × cosθ – yold × sinθ
ynew = xold × sinθ + yold × cosθ

41. Komputer Grafik Departemen Ilmu Komputer FMIPA-IPB 2011
Terima Kasih
Komputer Grafik
Departemen Ilmu Komputer FMIPA-IPB
2011 41

42. Exercises 1 Translate the shape below by (7, 2) y (2, 3) (1, 2) (3, 2)1 2 3 4 5 6 7 8 9 10
(2, 3)
(1, 2)
(3, 2)
(2, 1) x

43. Exercises 2 Scale the shape below by 3 in x and 2 in y y (2, 3) (1, 2)1 2 3 4 5 6 7 8 9 10
(2, 3)
(1, 2)
(3, 2)
(2, 1) x

44. Exercises 3 Rotate the shape below by 30° about the origin y (7, 3)1 2 3 4 5 6 7 8 9 10
(7, 3)
(6, 2)
(8, 2)
(7, 1) x

45. Exercise 4
Write out the homogeneous matrices for the previous three transformations
Translation
Scaling
Rotation

46. Exercises 5
Using matrix multiplication calculate the rotation of the shape below by 45° about its centre (5, 3) x y 1 2 3 4 5 6 7 8 9 10
(5, 4)
(6, 3)
(4, 3)
(5, 2)