Grafika Komputer (TIZ10) Tranformasi Grafik 2D Teady Matius – teadymatius@yahoo.com

Matriks Tranformasi Matriks Tranformasi 2D menggunakan matriks 3 x 3

Matriks Identitas

Translasi Perpindahan Objek dari titik P ke titik P’ secara linier x’ = x + dx y’ = y + dy x, y koordinat saat ini. x’, y’ : koordinat yang baru dx: jarak perpindahan arah sumbu x dy: jarak perpindahan searah sumbu y Sumber gambar: Hearn & Pauline Baker, Computer Graphics C Version

Contoh Translasi Sumber gambar: Hearn & Pauline Baker, Computer Graphics C Version

Matriks Translasi

Rumus Dasar Translasi x’= x + dx y’= y + dy

Fungsi CopyRect() Delphi Class Canvas delphi mempunyai fungsi CopyRect() untuk memindahkan citra dalam suatu bidang segiempat. Syntax: CopyRect(const Dest: TRect; Canvas: TCanvas; const Source: TRect);

Implementasi Persamaan Translasi pada delphi //Ambil nilai dx dan dy dX := StrToInt(EditDx.Text); dY := StrToInt(EditDy.Text); //Persamaan Translasi //Menentukan titik awal pepindahan newX := curX + dX; newY := curY + dY;

Contoh Translasi dengan Raster //copykan Grafik ke Temporary Image1.Canvas.CopyRect(Rect(0,0,lebar,tinggi), Form1.Canvas, Rect(curX, curY, curX + lebar, curY+tinggi)); //hapus grafik asal for i:=0 to tinggi-1 do for j:=0 to lebar-1 do canvas.Pixels[curX + j, curY + i] := clBtnFace; //buat grafik baru, grafik di ambil dari temporary begin canvas.Pixels[newX + j, newY + i] := Image1.Canvas.Pixels[j, i]; end;

Contoh Translasi dengan Vektor //hapus dahulu grafik lama canvas.Pen.Color := clBtnFace; canvas.Ellipse(curX, curY, curX+lebar, curY+tinggi); //gambar grafik baru canvas.Pen.Color := clBlack; canvas.Ellipse(newX, newY, newX+lebar, newY+tinggi);

Contoh Translasi dengan CopyRect() Image1.Canvas.CopyRect(Rect(0,0,lebar,tinggi), Form1.Canvas, Rect(curX,curY,curX+lebar,curY+tinggi)); canvas.Pen.Color := clBtnFace; canvas.Rectangle(curX,curY,curX+lebar,curY+tinggi); Canvas.CopyRect(Rect(newX, newY, newX+lebar, newY+tinggi),Image1.Canvas,Rect(0,0,lebar, tinggi));

Contoh Translasi procedure TForm1.ButtonPindahClick(Sender: TObject); var i, j : integer; begin dX := StrToInt(EditDx.Text); dY := StrToInt(EditDy.Text); newX := curX + dX; newY := curY + dY; if CheckBoxCopyRect.Checked then Image1.Canvas.CopyRect(Rect(0,0,lebar,tinggi),Form1.Canvas,Rect(curX,curY,curX+lebar,curY+tinggi)); canvas.Pen.Color := clBtnFace; canvas.Rectangle(curX,curY,curX+lebar,curY+tinggi); Canvas.CopyRect(Rect(newX, newY, newX+lebar, newY+tinggi),Image1.Canvas,Rect(0,0,lebar, tinggi)); end else if rgTranslasi.ItemIndex = 0 then //copykan Grafik ke Temp //hapus grafik asal for i:=0 to tinggi-1 do for j:=0 to lebar-1 do canvas.Pixels[curX + j, curY + i] := clBtnFace; //buat grafik baru canvas.Pixels[newX + j, newY + i] := Image1.Canvas.Pixels[j, i]; end; //hapus dahulu grafik lama canvas.Ellipse(curX, curY, curX+lebar, curY+tinggi); //gambar grafik baru canvas.Pen.Color := clBlack; canvas.Ellipse(newX, newY, newX+lebar, newY+tinggi); curX := newX; curY := newY;

Penskalaan Sumber gambar: Hearn & Pauline Baker, Computer Graphics C Version

Matriks Skala

Rumus Dasar Penskalaan x’ = x . Sx y’ = y . Sy

Implementasi persamaan Scaling pada Delphi //Menentukan titik awal perpindahan newX := round(curX * sX); newY := round(curY * sY);

Rotasi Ide dasar dari rotasi adalah melakukan perputaran pada sumbunya. Koordinat yang di pergunakan untuk perhitungan adalah koordinat kartesian Karena koordinat sumbu y delphi berbeda, maka harus dilakukan penyesuaian

Matriks Rotasi (koordinat kartesius)

Rumus Dasar Rotasi (koordinat kartesius) x’ = x cos() - y sin() y’ = x sin() + y cos()

Matriks Rotasi (koordinat Delphi)

Rumus Dasar Rotasi (koordinat Delphi) x’ = x cos() + y sin() y’ = -x sin() + y cos() harus di ubah dahulu ke radian untuk dihitung sin() dan cos() nya,  *  / 180

Shearing Tranformasi dengan membebani pada sisi tertentu, sehingga di hasilkan objek yang terdistorsi Contoh: huruf italic: Y  Y Sumber gambar: Hearn & Pauline Baker, Computer Graphics C Version

Shearing searah sumbu X Rumus Dasar x’ = x +y.shx y’ = y

Shearing berdasarkan  atau shx? Pada dasarnya shearing akan melakukan tranformasi pada setiap titik berdasarkan kemiringan yang dihasilkan dari shx Pada operasi vektor x’ didapatkan dari x’ = x+ y.shx Sehingga tidak menjadi masalah, karena hanya perlu menggambar ulang dengan vektor-vektor yang didapat. Tetapi pada operasi raster, atau objek lebih satu setiap titik harus dihitung berdasarkan sudut kemiringannya Karena itu sebaiknya operasi shering dilakukan berdasarkan sudut kemiringannya. Pada operasi raster ataupun grafik yang objeknya lebih dari satu, jika diketahui shx, cari sudut kemiringannya!!!

Mendapatkan  dari y dan shx Jika  adalah sudut kemiringan, tan( ) = y/shx  = arctan(y/shx) / * 180  = 90 – 

Shearing searah sumbu X (menggunakan sudut ) Rumus Dasar x’ = x + y.shx x’ = x + y . cos()/sin() y’ = y tan() = h/shx  shx = h / tan() tan() = sin() / cos() shx = h / tan() shx = h / (sin() / cos()) shx = h . (cos() / sin())

Contoh Shear X Sumber gambar: Hearn & Pauline Baker, Computer Graphics C Version

Shearing searah sumbu Y Rumus Dasar x’ = x y’ = y +x.shy

Shearing searah sumbu Y (menggunakan sudut ) Rumus Dasar x’ = x y’ = y +x.shy y’ = y + x.cos()/sin() Dengan cara yang sama dengan shear x, didapatkan rumus dasar untuk shear y berdasarkan sudut kemiringannya.

Shear Y

Shear XY

Matriks Shear X dan Y

Latihan Susunlah matrik shear x y berdasarkan sudut , dan carilah persamaannya untuk mendapatkan x’ dan y’

Tugas 3 Buatlah program untuk memanggil gambar dan menampilkan pada TImage Buatlah program untuk menyimpan gambar dari TImage ke sebuah file

Tugas 4 Buatlah program untuk menampilkan gambar dan mengcopykan gambar tersebut ke komponen TImage yang lain dengan menggunakan CopyRect() Buatlah program untuk menampilkan gambar dan mengcopykan gambar tersebut ke komponen TImage yang lain dengan cara dicopykan pixel per pixel