TRANSFORMASI GRAFIK 2 DIMENSI

Slides:



Advertisements
Presentasi serupa
PERSAMAAN GERAK LURUS smanda giri.
Advertisements

Transformasi Linier.
JENIS PERULANGAN For..To..Do
Bab 8 Turunan 7 April 2017.
Transformasi geometri.  Pemindahan objek (titik, garis, bidang datar) pada bidang.  Perubahan yang (mungkin) terjadi: Kedudukan / letak Arah Ukuran.
MATEMATIKA KELAS XI IPA
Grafika Komputer (TIZ10)
Grafika Komputer (TIZ10)
Bab 5 TRANSFORMASI.
Koordinat Kartesius, Koordinat Tabung & Koordinat Bola
Grafika Komputer (TIZ10)
Transformasi Geometri 2 Dimensi
KOMPUTER GRAFIKA TRANSFORMASI 2D (ROTASI DAN SHEARING)
TRANSFORMASI GEOMETRI.
KOMPUTER GRAFIKA TRANSFORMASI 2D (TRANSLASI DAN SKALA)
JENIS PERULANGAN While.. Do Beda antara while..Do dengan repeat..Until
Koordinat Kartesius, Koordinat Bola, dan Koordinat Tabung
Mata Kuliah Komputer Grafik Orientasi Perkuliahan
Berkelas.
TRANSFORMASI 2D.
Transformasi Geometri Sederhana
Transformasi Geometri Sederhana
Apakah Bilangan Kompleks itu ?
Transformasi 2D Grafika Komputer.
GEOMETRI Probolinggo SMK Negeri 2 SUDUT DAN BIDANG.
Anna Dara Andriana, S.Kom., M.Kom
Transformasi geometri
PIXEL, WARNA, SISTEM KOORDINAT & BAHASA PROGRAM
Dasar teori dan algoritma grafika komputer
BAB 8 TRIGONOMETRI Sumber gambar : peusar.blogspot.com.
Apakah Bilangan Kompleks itu ?
TRIGONOMETRI.
AYO BELAJAR TRANSFORMASI GEOMETRI !!!
Vektor Vektor memiliki besaran dan arah. Beberapa besaran fisika yang
Matematika Dasar 3 “Trigonometri”
TRANSFORMASI GEOMETRI Transformasi Geometri
PERPUTARAN ( ROTASI ) Selanjutnya P disebut pusat rotasi dan  disebut sudut rotasi.  > 0 jika arah putar berlawanan arah putaran jarum jam.
P. XIV RUANG-RUANG VEKTOR EUCLIDEAN
TRANSFORMASI GRAFIK 3 DIMENSI
Transformasi 2D.
KOMPUTER GRAFIKA TRANSFORMASI 2D (TRANSLASI DAN SKALA)
Transformasi (Refleksi).
KOMPUTER GRAFIKA TRANSFORMASI 2D (ROTASI DAN SHEARING)
Kelompok 2 Agra Ahmad Afandi Ahmad Afif Alfian Hadi Pratama
MENGGAMBAR DENGAN PIXEL (KONVERSI SCAN)
Nur Cahya Setyaningsih
M-03 SISTEM KOORDINAT kartesius dan kutub
KINEMATIKA PARTIKEL.
PERGESERAN (TRANSLASI)
TRANSFORMASI 2 DIMENSI Oleh : Hieronimus Edhi Nugroho, M.Kom
Transformasi 2 Dimensi.
ilmu yang mempelajari gerak benda tanpa ingin tahu penyebab gerak
Grafika Komputer Transformasi 2 Dimensi.
Tidak ada yang mudah, tapi tidak ada yang tidak mungkin…..
DIMENSI DUA transformasi TRANSLASI.
Kelas 1.C Nina Ariani Juarna Ghia Mugia Wilujeng Faujiah Lulu Kamilah.
AFLICH YUSNITA F, M.Pd. STKIP SILIWANGI BANDUNG
Ihr Logo Dasar teori dan algoritma grafika komputer.
Peta Konsep. Peta Konsep C. Penerapan Matriks pada Transformasi.
Transformasi Geometri 2 Dimensi
Pertemuan 2 – Pendahuluan 2
Peta Konsep. Peta Konsep A. Macam-Macam Transformasi.
Peta Konsep. Peta Konsep B. Transformasi pada Garis dan Kurva.
Transformasi Geometri 2 Dimensi
Peta Konsep. Peta Konsep A. Komposisi Transformasi.
ULANGAN SELAMAT BEKERJA Mata Pelajaran : Matematika
Peta Konsep. Peta Konsep C. Transformasi Geometris.
Peta Konsep. Peta Konsep A. Komposisi Transformasi.
KINEMATIKA PARTIKEL.
KOMPUTER GRAFIKA TRANSFORMASI 2D (TRANSLASI DAN SKALA)
Transcript presentasi:

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