TRANSFORMASI GRAFIK 2 DIMENSI BAB III TRANSFORMASI GRAFIK 2 DIMENSI Program S1 Teknik Informatika Sekolah Tinggi Teknologi Nurul Jadid Oleh : Moh. Furqan, S. Kom.

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 Komputer Grafik

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 T11 T12 T13 T21 T22 T23 T31 T32 T33 X Y 1 Komputer Grafik

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 = array[1..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 X1 X2 … Xn Y1 Y2 … Yn 1 1 1 1 Komputer Grafik

3.2 Konsep Obyek 2 Dimensi procedure TForm1.FormShow(Sender: TObject); begin StringGrid1.Cells[0,0]:='Koordinat x'; StringGrid1.Cells[0,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; for i := 1 to 2 do for j := 1 to N do Obyek[i,j]:=StrToFloat(StringGrid1.Cells[j,i-1]); Obyek[3,j]:=1; Komputer Grafik

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. Komputer Grafik

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 = array[1..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 Komputer Grafik

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’) = = Y X (0,0) v = a i + b j P (x,y) P’ (x’,y’) x y 1 x’ y’ 1 x + a y + b 1 Komputer Grafik

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;); Komputer Grafik

3.4 Transformasi Geometri Dasar 3.4.2 Rotasi Titik (0,0) Ro,α  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 δ dan y = r cos δ Titik P’(x’,y’) koordinat trigonometri: x’ = r cos(α + δ) = r cos α cos δ - r sin α sin δ = x cos α - y sin α y’ = r sin(α + δ) = r sin α cos δ + r cos α sin δ = x sin α + y cos α (0,0) X Y x' x y y’ r’ r P’(x’,y’) P(x,y) α δ Komputer Grafik

3.4 Transformasi Geometri Dasar Persamaan matrik : P’ = Ro, α o P 3x1 3x3 3x1 Diperoleh nilai : R11 = cos α R12 = - sin α R13 = 0 R21 = sin α R22 = cos α R23 = 0 R31 = 0 R32 = 0 R33 = 1 Sehingga matrik rotasi : Ro, α = cos α -sin α 0 sin α cos α 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;); Komputer Grafik

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 > 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 (0,0) X P (x,y) Y P’ (x’,y’) So,sx,sy Komputer Grafik

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;); Komputer Grafik

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 (0,0) X P (x,y) Y P’ (x’,y’)=(x,-y) P’’ (x’’,y’’)=(-x,y) Komputer Grafik

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;); Komputer Grafik

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;); Komputer Grafik

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;); Komputer Grafik

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 α terhadap titik (0,0). pilih koordinat : x = x0 + r. cos α + a y = y0 - r. sin α + b perkalian matrik : P’ = Ro, α o P hasil matrik : x’ = cos α (x0 + r. cos α + a) – sin α (y0 - r. sin α + b) y’ = sin α (x0 + r. cos α + a) + cos α (y0 - r. sin α + b) Komputer Grafik

3.4 Transformasi Geometri Dasar Procedure : Procedure RotasiLingkaran; begin sudut := 0; while sudut <= 360 do rad := sudut/180*3.14; xhasil = cos α (x0 + r. cos α + a) – sin α (y0 - r. sin α + b) yhasil = sin α (x0 + r. cos α + a) + cos α (y0 - r. sin α + b) canvas.pixels[trunc(xhasil),trunc(yhasil)] := cdColor; sudut := sudut + 0.05; end; end Komputer Grafik

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 Komputer Grafik

3.5 Transformasi Lanjut 3.5.1 Rotasi titik A(a,b) : Ra, α Langkah-langkahnya : Translasikan titik A (a,b) ke titik (0,0)  Tv dengan v = -ai –bj Rotasikan obyek terhadap titik (0,0)  Ro, α Translasikan balik ke titik (0,0) ke titik A (a,b)  T-v Bentuk komposisi : Ra, α = T-v o Ro, α 0 Tv Ra, α = cos α -sin α -a.cos α + b.sin α + a sin α cos α -a.sin α + b.cos α + b 0 0 1 (0,0) Y X A (a,b) α r P’ (x’,y’) P (x,y) Komputer Grafik

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); Komputer Grafik

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 (0,0) X Y A(a,b) P(x,y) P’(x’,y’) SA,sx,sy Komputer Grafik

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); Komputer Grafik

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 -α Ro, - α Pencerminan sumbu x  Mx Rotasikan balik obyek titik (0,0)  sudut putar α Ro, α Translasikan balik ke titik (0,0) ke titik (0,b)  T-v dengan v = 0i + bj Bentuk komposisi : Mxmxb = T-v o Ro, α o Mx o Ro, -α o Tv (0,b) X Y α P(x,y) P’(x’,y’) y = mx + b m √(m² + 1) Komputer Grafik

3.5 Transformasi Lanjut Mymxb = cos² α – sin² α 2. cos α .sin α -2.b.cos α .sin α 2.cos α .sin α sin² α -cos² α -b(sin² α -cos² α) + 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); Komputer Grafik

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); Komputer Grafik

3.5 Transformasi Lanjut 3.5.4 Pencerminan Garis y = mx  Mymx Langkah-langkahnya : Rotasikan obyek titik (0,0)  sudut putar -α Ro, - α Pencerminan sumbu x  Mx Rotasikan balik obyek titik (0,0)  sudut putar α Ro, α Bentuk komposisi : Mymx = Ro, α o Mx o Ro, -α (0,0) X Y P(x,y) P’(x’,y’) y = mx Komputer Grafik

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); Komputer Grafik

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 (0,0) X Y P(x,y) P’(x’,y’) y = a (0,a) Komputer Grafik

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); Komputer Grafik

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 (0,0) X Y P(x,y) P’(x’,y’) x = a (a,0) Komputer Grafik

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); Komputer Grafik