Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and...
-
Upload
makayla-bird -
Category
Documents
-
view
222 -
download
2
Transcript of Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and...
![Page 1: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/1.jpg)
Transformasi 2D(endang_pg)
Reff: “Fundamentals of interactive computer Graphics” james d. folley and andreas Van Dam”
Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB
2011
![Page 2: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/2.jpg)
Agenda kali ini!
• Kenapa transformasi?• Jenis Transformasi
– Translasi– Scaling– Rotasi
• Sistem Koordinat Homogen dan representasi matrix transformasi
• Transformasi Komposit
![Page 3: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/3.jpg)
Kenapa Transformasi?
• Transformasi ditujukan untuk menggambarkan operasi perubahan posisi, ukuran, ataupun view sebuah objek grafik
![Page 4: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/4.jpg)
Translasi
• 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 0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
![Page 5: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/5.jpg)
Contoh Translasiy
x0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)
![Page 6: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/6.jpg)
Scaling
• 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 0
1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
1
2
1
3
3
6
3
9
![Page 7: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/7.jpg)
Contoh Scalingy
x0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)
![Page 8: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/8.jpg)
Rotasi• 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
6
y
x 0
1
2
3
4
5
6
![Page 9: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/9.jpg)
Contoh Rotasiy
x0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(1, 1) (3, 1)
(2, 3)
![Page 10: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/10.jpg)
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?
![Page 11: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/11.jpg)
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
![Page 12: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/12.jpg)
Homogeneous coordinates
y
w
xw = 0
(x, y, w)
w = 1
(x/w, y/w, 1)
x
y
![Page 13: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/13.jpg)
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)
h
xx h
h
yy h
![Page 14: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/14.jpg)
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
![Page 15: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/15.jpg)
Remember Matrix Multiplication
•Recall how matrix multiplication takes place:
ziyhxg
zfyexd
zcybxa
z
y
x
ihg
fed
cba
***
***
***
![Page 16: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/16.jpg)
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:
100
10
01
dy
dx
11*1*0*0
1**1*0
1**0*1
1100
10
01
dyy
dxx
yx
dyyx
dxyx
y
x
dy
dx
![Page 17: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/17.jpg)
Homogenous Coordinates
•To make operations easier, 2-D points are written as homogenous coordinate column vectors
vdydxTvdyy
dxx
y
x
dy
dx
),(':
11100
10
01
vssSvys
xs
y
x
s
s
yxy
x
y
x
),(':
11100
00
00
Translation:
Scaling:
![Page 18: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/18.jpg)
Homogenous Coordinates (cont…)
vRvyx
yx
y
x
)(':
1
cossin
sincos
1100
0cossin
0sincos
Rotation:
![Page 19: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/19.jpg)
Inverse Transformations
•Secara mudah matriks transformasinya dapat dituliskan sebagai
100
10
011 dy
dx
T
100
01
0
001
1
y
x
s
s
S
100
0cossin
0sincos1
R
![Page 20: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/20.jpg)
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
![Page 21: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/21.jpg)
Combining Transformations (cont…)
)(HHouse HdydxT ),(
HdydxTR ),()( HdydxTRdydxT ),()(),(
1 2
3 4
![Page 22: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/22.jpg)
Combining Transformations (cont…)
•The three transformation matrices are combined as follows
1100
10
01
100
0cossin
0sincos
100
10
01
y
x
dy
dx
dy
dx
REMEMBER: Matrix multiplication is not commutative so order matters
vdydxTRdydxTv ),()(),('
![Page 23: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/23.jpg)
Transformasi 2D in Open GL(endang_pg)
Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB
2011
![Page 24: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/24.jpg)
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 Vertices
***
***
***
Stack
![Page 25: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/25.jpg)
To save a copy of the CTM in the stack glPushMatrix();
CTM
Vertices Vertices
***
***
***
Stack
***
***
***
. . .
CTM
Vertices Vertices
***
***
***
Stack
***
***
***
***
***
***
. . .
(before)
(after)
![Page 26: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/26.jpg)
To overwrite the CTM with the top matrix in the stackglPopMatrix();
***
***
***
CTM
Vertices Vertices
Stack
***
***
***
. . .
***
***
***
***
***
***
CTM
Vertices Vertices
Stack
***
***
***
. . .
(before)
(after)
![Page 27: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/27.jpg)
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 Vertices
***
***
***
CTM
Vertices Vertices
100
10
01
Ty
Tx
Before
After
![Page 28: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/28.jpg)
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);draw_head();
glPopMatrix();
glColor3f( 1.0, 1.0, 1.0); //draw a title hkgluBitMapString( -1.9, 1.8, "Translation of (-2, -
1)” );
Progressive Translation
![Page 29: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/29.jpg)
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
![Page 30: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/30.jpg)
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 providedto gl functions are expressed indegrees instead of radians.)
Progressive Rotation
![Page 31: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/31.jpg)
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(…)
z
y
x
Sy
Sx
T
T
z
y
x
T
T
w
y
x
z
y
x
Sy
Sx
w
y
x
y
x
y
x
100
00
00
100
10
01
'
'
'
100
10
01
"
"
"
100
00
00
'
'
'
***
***
***
CTM
Vertices Vertices
100
10
01
Ty
Tx
100
00
00
Sy
Sx
![Page 32: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/32.jpg)
The program
glPushMatrix(); glTranslatef( -2.0, -1.0, 0.0); glScalef( 1.5, 2.0, 1.0); draw_head(); glPopMatrix();
Progressive (Scaling + Translation)
![Page 33: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/33.jpg)
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
![Page 34: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/34.jpg)
Rotation about a pivot point
//Rotate 90 degree about //the apex of the noseglPushMatrix(); 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
![Page 35: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/35.jpg)
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)
.
100
010
001
'
'
'
w
y
x
w
y
x
(x,y)
(x,-y)
![Page 36: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/36.jpg)
Example
glPushMatrix(); glScalef( 1, -1, 1); draw_head(); glPopMatrix();
Reflection about x-axis
![Page 37: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/37.jpg)
Reflection along a lineTranslate (0, -b) so that the line
passes through the originRotate the line onto the x axis by -o
Reflect about the x axisBackward rotatebackward translate
(Be reminded that these operations must be specified in reverse order.)
y =mx+b
)(tan 1 m
b
![Page 38: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/38.jpg)
// 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
![Page 39: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/39.jpg)
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
![Page 40: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/40.jpg)
Equations
•Translation:
•xnew = xold + dx ynew = yold + dy
•Scaling:•xnew = Sx × xold ynew = Sy × yold
•Rotation•xnew = xold × cosθ – yold × sinθ
•ynew = xold × sinθ + yold × cosθ
![Page 41: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/41.jpg)
Terima Kasih
Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB
2011
![Page 42: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/42.jpg)
Exercises 1
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(2, 3)
(3, 2)(1, 2)
(2, 1)
•Translate the shape below by (7, 2)
![Page 43: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/43.jpg)
Exercises 2
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(2, 3)
(3, 2)(1, 2)
(2, 1)
•Scale the shape below by 3 in x and 2 in y
![Page 44: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/44.jpg)
Exercises 3•Rotate the shape below by 30° about the origin
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
6
(7, 3)
(8, 2)(6, 2)
(7, 1)
![Page 45: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/45.jpg)
Exercise 4
•Write out the homogeneous matrices for the previous three transformations
______
______
______
______
______
______
______
______
______Translation Scaling Rotation
![Page 46: Transformasi 2D (endang_pg) Reff: Fundamentals of interactive computer Graphics james d. folley and andreas Van Dam Komputer Grafik Departemen Ilmu Komputer.](https://reader036.fdocuments.in/reader036/viewer/2022062312/55150f6155034673228b48f9/html5/thumbnails/46.jpg)
Exercises 5•Using matrix multiplication calculate the rotation of the shape below by 45° about its centre (5, 3)
x
y
0 1
1
2
2
3 4 5 6 7 8 9 10
3
4
5
(5, 4)
(6, 3)(4, 3)
(5, 2)