Oleh :

1
BAB III TRANSFORMASI GRAFIK 2 DIMENSI
Program S1 Teknik Informatika Sekolah Tinggi
Teknologi Nurul Jadid

• Oleh
• Moh. Furqan, S. Kom.

2
3.1 Konsep Transformasi

• Transformasi ? menggerakkan obyek. Ada 2 macam
  transformasi
• Transformasi geometri ? sistem koordinat diam dan
  obyek bergerak
• Transformasi koordinat ? sistem koordinat yang
  bergerak dan obyek diam.
• Tranformasi dibagi atas 2 kelompok
• Transformasi Dasar
• - Translasi - Rotasi titik (0,0)
• - Scaling titik (0,0) - Pencerminan sumbu x/y
• - Shearing/Deformasi
• Transformasi Lanjut
• - Rotasi titik (a,b)
• - Scaling titik (a,b)
• - Pencerminan garis y a, x a / y mx b

3
3.1 Konsep Transformasi

• Transformasi ? operasi vektor. Tetapi vektor ?
  matrik, maka transformasi direpresentasikan
  sebagai operasi matrik.
• Untuk penyeragaman bentuk matrik ? operasi
  transformasi 2 dimensi ? matrik 3 x 3, sedangkan
  koordinat titik (x,y) ? matrik 3 x 1
• Prinsip operasi transformasi ? perkalian matrik

4
3.2 Konsep Obyek 2 Dimensi

• Obyek ? kumpulan dari koordinat-koordinat titik.
  
• Ada 2 macam obyek
• Obyek bersegi-N ? obyek yang berbentuk segi-N
• Nilai N dimasukkan melalui Const di bawah Uses.
  Obyek diwakili oleh koordinat titik-titik sudut
  dan direpresentasikan dengan matrik 3 x N
• Type Obyek Matrik3N array1..3, 1..N of
  real ditulis sebagai type global. Variabel obyek
  X0, Y0 didefinisikan sebagai variabel global.
  Data obyek diisikan dalam sel-sel komponen
  StringGrid, agar ditampilkan kata koordinat x
  dan y maka dibuat procedure FormShow

5
3.2 Konsep Obyek 2 Dimensi

• procedure TForm1.FormShow(Sender TObject)
• begin
• StringGrid1.Cells0,0'Koordinat x'
• StringGrid1.Cells0,1'Koordinat y'
• end
• Untuk mengambil nilai variabel obyek dari
  sel-sel StringGrid digunakan procedure tak
  standar dengan nama Obyek2D.
• procedure TForm1.Obyek2D(Sender TObject var
  Obyek Matrik3N)
• var
• i,j Integer
• begin
• for i 1 to 2 do
• for j 1 to N do
• Obyeki,jStrToFloat(StringGrid1.Cells
  j,i-1)
• for j 1 to N do
• Obyek3,j1
• end

6
3.2 Konsep Obyek 2 Dimensi

• Obyek kontiyu (lingkaran, ellips, bola, sinus,
  dll).
• Obyek ini ? semua titik penyusun obyek. Obyek
  ini tidak dapat direpresentasikan dengan matrik
  (obyek bersegi-N), tetapi direpresentasikan
  sebagai matrik dari semua titik yang
  membangunnya.
• Cara operasi ? perulangan sepanjang keliling
  bangun tersebut.

7
3.3 Perkalian Dua Matrik Dalam 2 Dimensi

• Ada 2 jenis perkalian matrik, yaitu
• Perkalian matrik 3 x 3 dengan matrik 3 x 3
• Perkalian matrik 3 x 3 dengan matrik 3 x N.
• Procedure perkalian antar operator ? procedure
  tak standar tanpa Form1 karena tidak memanggil
  nilai dan tidak perlu didaftarkan di kelompok
  type.
• Operator transformasi bertype
• Matrik33 array1..3,1..3 of real
• Variabel operator transformasi Tr1 dan Tr2 ?
  variabel global.
• procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Hasil perkalian Tr1 dengan Tr2 ? Tr1
• procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Hasil perkalian Tr dengan Obyek ? var Obyek

8
3.4 Transformasi Geometri Dasar

• 3.4.1 Translasi 2D
• Tv ? Perpindahan obyek dengan vektor arah v a
  i b j
• a besarnya perpindahan ke x
• b besarnya perpindahan ke y
• Sifat translasi x x a , y y b
• Bentuk matrik
• P (x,y) P (x,y)

9
3.4 Transformasi Geometri Dasar

• Persamaan matrik P Tv o P
• 3 x 1 3 x 3 3 x1
• Diperoleh nila-nilai
• T11 1 T12 0 T13 a
• T21 0 T22 1 T23 b
• T31 0 T32 0 T33 1
• Sehingga dirumuskan
• Tv 1 0 a
• 0 1 b
• 0 0 1
• Procedure matrik translasi nilai a dan b dan
  procedure translasi
• procedure TForm1.MatrikTranlasi2D (Sender
  TObject var Tv Matrik33 a, b real)
• procedure TForm1.btTranslasi (Sender TObject)

10
3.4 Transformasi Geometri Dasar

• 3.4.2 Rotasi Titik (0,0)
• Ro,a ? Memutar obyek dengan titik putar (0,0)
• Sudut rotasi positif jika unclockwise
• Sudut putar harus diubah ke dalam radian.
• Titik P(x,y) ?koordinat trigonometri
• x r sin d dan y r cos d
• Titik P(x,y) ?koordinat trigonometri
• x r cos(a d) r cos a cos d - r sin a sin
  d x cos a - y sin a
• y r sin(a d) r sin a cos d r cos a sin
  d x sin a y cos a

11
3.4 Transformasi Geometri Dasar

• Persamaan matrik P Ro, a o P
• 3x1 3x3 3x1
• Diperoleh nilai
• R11 cos a R12 - sin a R13 0
• R21 sin a R22 cos a R23 0
• R31 0 R32 0 R33 1
• Sehingga matrik rotasi
• Ro, a cos a -sin a 0
• sin a cos a 0
• 0 0 1
• Procedure matrik rotasi dan procedure rotasi
• procedure TForm1.MatrikRotasi2D(Sender TObject
  var R Matrik33 sudut real)
• procedure TForm1.btRotasiObyekClick(Sender
  TObject)

12
3.4 Transformasi Geometri Dasar

• 3.4.3 Scaling Titik (0,0)
• So, sx, sy ? mengubah ukuran obyek dengan acuan
  titik (0,0)
• sx faktor scaling pada x, sy faktor scaling
  pada y
• sx, sy gt 0 sx, sy 1 ? no scaling
• Sifat scaling x sx . x dan y sy . y
• Persamaan P So,sx,sy o P
• 3 x 1 3 x 3 3 x 1

13
3.4 Transformasi Geometri Dasar

• Diperoleh nilai
• S11 sx S12 0 S13 0
• S21 0 S22 sy S23 0
• S31 0 S32 0 S33 1
• matrik scaling
• So,sx,sy sx 0 0
• 0 sy 0
• 0 0 1
• procedure matrik scaling dan procedure scaling
• procedure TForm1.MatrikScaling2D(Sender
  TObject var S Matrik33 sx, sy real)
• procedure TForm1.btScalingObyekClick(Sender
  TObject)

14
3.4 Transformasi Geometri Dasar

• 3.4.4 Pencerminan
• - Percerminan terhadap sumbu x Mx
• - Percerminan terhadap sumbu y My
• Sifat pencerminan sumbu x x x dan y -y
• Persamaan P Mx o P
• 3 x 1 3 x 3 3 x 1

15
3.4 Transformasi Geometri Dasar

• Diperoleh nilai
• Mx11 1 Mx12 0 Mx13 0
• Mx21 0 Mx22 -1 Mx23 0
• Mx31 0 Mx32 0 Mx33 1
• matrik pencerminan
• Mx 1 0 0
• 0 -1 0
• 0 0 1
• procedure matrik pencerminan procedure cermin
  sumbu x
• procedure MatrikPencerminanSumbuX (var Mx
  Matrik33)
• procedure TForm1.btCerminXObyekClick(Sender
  TObject)

16
3.4 Transformasi Geometri Dasar

• Sifat pencerminan sumbu y x -x dan y y
• Persamaan P My o P
• 3 x 1 3 x 3 3 x 1
• Diperoleh nilai
• My11 -1 My12 0 My13 0
• My21 0 My22 1 My23 0
• My31 0 My32 0 My33 1
• matrik pencerminan
• My -1 0 0
• 0 1 0
• 0 0 1
• procedure matrik pencerminan procedure cermin
  sumbu y
• procedure MatrikPencerminanSumbuY (var My
  Matrik33)
• procedure TForm1.btCerminYObyekClick(Sender
  TObject)

17
3.4 Transformasi Geometri Dasar

• 3.4.5 Shearing / Deformasi
• Sh, a, b ? mengubah bentuk bangun (segi empat ?
  bujur sangkar)
• - faktor perubah sumbu x
• - faktor perubah sumbu y
• Bentuk matrik shearing
• Sh, a, b 1 a 0
• b 1 0
• 0 0 1
• Procedure matrik shearing dan procedure
  shearing
• procedure TForm1.MatrikShearing(Sender
  TObject var sh Matrik33 a, b real)
• procedure TForm1.btShearingObyekClick(Sender
  TObject)

18
3.4 Transformasi Geometri Dasar

• 3.4.6 Transformasi Obyek Kontiyu (Ellips atau
  Lingkaran)
• Semua titik di transformasikan ? proses
  transformasi dilakukan dalam perulangan untuk
  semua titik obyek.
• misal lingkaran pusat (a,b) dan radius r
  diputar ? sudut a terhadap titik (0,0).
• pilih koordinat x x0 r. cos a a
• y y0 - r. sin a b
• perkalian matrik P Ro, a o P
• hasil matrik
• x cos a (x0 r. cos a a) sin a (y0 - r.
  sin a b)
• y sin a (x0 r. cos a a) cos a (y0 - r.
  sin a b)

19
3.4 Transformasi Geometri Dasar

• Procedure
• Procedure RotasiLingkaran
• begin
• sudut 0
• while sudut lt 360 do
• begin
• rad sudut/1803.14
• xhasil cos a (x0 r. cos a a) sin a (y0
  - r. sin a b)
• yhasil sin a (x0 r. cos a a) cos a (y0
  - r. sin a b)
• canvas.pixelstrunc(xhasil),trunc(yhasil)
  cdColor
• sudut sudut 0.05
• end
• end

20
3.5 Transformasi Lanjut

• Transformasi lanjut ? tidak mengacu pada titik
  (0,0) atau sumbu x dan sumbu y.
• Transformasi ? berbentuk komposisi fungsi dari
  beberapa transformasi dasar.
• transformasi lanjut terdiri
• Rotasi titik A (a,b)
• Scaling titik (a,b)
• Pencerminan garis x a
• Pencerminan garis y a
• Pencerminan garis y mx
• Pencerminan garis y mx b

21
3.5 Transformasi Lanjut

• 3.5.1 Rotasi titik A(a,b) Ra, a
• Langkah-langkahnya
• Translasikan titik A (a,b) ke titik (0,0) ? Tv
  dengan v -ai bj
• Rotasikan obyek terhadap titik (0,0) ? Ro, a
• Translasikan balik ke titik (0,0) ke titik A
  (a,b) ? T-v
• Bentuk komposisi
• Ra, a T-v o Ro, a 0 Tv
• Ra, a cos a -sin a -a.cos a b.sin a a
• sin a cos a -a.sin a b.cos a b
• 0 0 1

22
3.5 Transformasi Lanjut

• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikTranlasi2D(Sender
  TObject var Tv Matrik33 a, b real)
• Procedure TForm1.MatrikRotasi2D(Sender TObject
  var R Matrik33 sudut real)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Sehingga procedure Rotasi Obyek titik A (a,b)
• Procedure TForm1.btRotasiAObyekClick(Sender
  TObject)

23
3.5 Transformasi Lanjut

• 3.5.2 Scaling titik A(a,b) SA,sx,sy
• Langkah-langkahnya
• Translasikan titik A (a,b) ke titik (0,0) ? Tv
  dengan v -ai bj
• Scaling obyek terhadap titik (0,0) ? So,sx,sy
• Translasikan balik ke titik (0,0) ke titik A
  (a,b) ? T-v
• Bentuk komposisi
• SA,sx,sy T-v o So,sx,sy o Tv
• SA,sx,sy, sx 0 -a.sx a
• 0 sy -b.sy b
• 0 0 1

24
3.5 Transformasi Lanjut

• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikTranlasi2D(Sender
  TObject var Tv Matrik33 a, b real)
• Procedure TForm1.MatrikScaling2D(Sender
  TObject var S Matrik33 sx,sy real)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Sehingga procedure Rotasi Obyek titik A (a,b)
• Procedure TForm1.btScalingAObyekAClick(Sender
  TObject)

25
3.5 Transformasi Lanjut

• 3.5.3 Pencerminan Garis y mx b ? Mymxb
• Langkah-langkahnya
• Translasikan titik (0,b) ke titik (0,0) ? Tv
  dengan v 0i bj
• Rotasikan obyek titik (0,0) ? sudut putar -a ?Ro,
  - a
• Pencerminan sumbu x ? Mx
• Rotasikan balik obyek titik (0,0) ? sudut putar a
  ?Ro, a
• Translasikan balik ke titik (0,0) ke titik (0,b)
  ? T-v dengan v 0i bj
• Bentuk komposisi
• Mxmxb T-v o Ro, a o Mx o Ro, -a o Tv

26
3.5 Transformasi Lanjut

• Mymxb cos² a sin² a 2. cos a .sin a
  -2.b.cos a .sin a
• 2.cos a .sin a sin² a -cos² a
  -b(sin² a -cos² a) b
• 0 0 1
• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikTranlasi2D(Sender
  TObject var Tv Matrik33 a, b real)
• Procedure TForm1.MatrikRotasi2D(Sender TObject
  var R Matrik33 sudut real)
• Procedure MatrikPencerminanX(var Mx Matrik33)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)

27
3.5 Transformasi Lanjut

• Bentuk khusus matrik rotasi jika sudutnya adalah
  kemiringan garis
• procedure TForm1.MatrikRotasi2D(Sender TObject
  var R Matrik33 sudut real)
• begin
• m StrToFloat(edit1.Text)
• Radian atan (m)
• end
• Sehingga procedure Pemcerminan Obyek ? garis y
  mx b
• Procedure TForm1.btPencerminanYmxbObyek(Sender
  TObject)

28
3.5 Transformasi Lanjut

• 3.5.4 Pencerminan Garis y mx ? Mymx
• Langkah-langkahnya
• Rotasikan obyek titik (0,0) ? sudut putar -a ?Ro,
  - a
• Pencerminan sumbu x ? Mx
• Rotasikan balik obyek titik (0,0) ? sudut putar a
  ?Ro, a
• Bentuk komposisi
• Mymx Ro, a o Mx o Ro, -a

29
3.5 Transformasi Lanjut

• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikRotasi2D(Sender TObject
  var R Matrik33 sudut real)
• Procedure MatrikPencerminanX(var Mx Matrik33)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Procedure Pemcerminan Obyek ? garis y mx
• Procedure TForm1.btPencerminanYmxObyek(Sender
  TObject)

30
3.5 Transformasi Lanjut

• 3.5.5 Pencerminan Garis y a ? Mya
• Langkah-langkahnya
• Translasikan (0,a) ke (0,0) ? Tv dengan v 0i
  aj
• Pencerminan sumbu x ? Mx
• Translasikan balik (0,0) ke (0,a) ?T-v dengan v
  0i aj
• Bentuk komposisi
• Mya T-v o Mx o Tv

31
3.5 Transformasi Lanjut

• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikTranslasi2D(Sender
  TObject var Tv Matrik33 a,b real)
• Procedure MatrikPencerminanX(var Mx Matrik33)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Procedure Pemcerminan Obyek ? garis y a
• Procedure TForm1.btPencerminanYaObyek(Sender
  TObject)

32
3.5 Transformasi Lanjut

• 3.5.6 Pencerminan Garis x a ? Mxa
• Langkah-langkahnya
• Translasikan (a,0) ke (0,0) ? Tv dengan v -ai
  0j
• Pencerminan sumbu y ? My
• Translasikan balik (0,0) ke (a,0) ?T-v dengan v
  ai 0j
• Bentuk komposisi
• Mxa T-v o My o Tv

33
3.5 Transformasi Lanjut

• Procedure transformasi ? procedure tak standar
  pendukung
• Procedure TForm1.MatrikObyek2D(Sender TObject
  var Obyek Matrik3N)
• Procedure TForm1.MatrikTranslasi2D(Sender
  TObject var Tv Matrik33 a,b real)
• Procedure MatrikPencerminanY(var My Matrik33)
• Procedure MatrikKaliTransformasi2D (var Tr1
  Matrik33 Tr2 Matrik33)
• Procedure MatrikKaliTransformasiObyek2D (var
  Obyek Matrik3N Tr Matrik33)
• Procedure Pemcerminan Obyek ? garis x a
• Procedure TForm1.btPencerminanXaObyek(Sender
  TObject)