Transcript ComputerGraphics03

Grafika Komputer
(TIZ10)
Tranformasi Grafik 2D
Teady Matius – [email protected]
Matriks Tranformasi
• Matriks Tranformasi
2D menggunakan
matriks 3 x 3
 a11
a
 21
 a31
a12
a22
a32
a13 

a23 
a33 
Matriks Identitas
1 0 0 
0 1 0 


0 0 1 
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
Contoh Translasi
Matriks Translasi
1 0 dx
0 1 dy


0 0 1 
Rumus Dasar Translasi
 x' 1 0 dx  x 
 y '  0 1 dy  y 
  
 
 1  0 0 1   1 
• 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
for i:=0 to tinggi-1 do
begin
for j:=0 to lebar-1 do
begin
canvas.Pixels[newX + j, newY + i] := Image1.Canvas.Pixels[j, i];
end;
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
begin
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
begin
if rgTranslasi.ItemIndex = 0 then
begin
//copykan Grafik ke Temp
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
for i:=0 to tinggi-1 do
begin
for j:=0 to lebar-1 do
begin
canvas.Pixels[newX + j, newY + i] := Image1.Canvas.Pixels[j, i];
end;
end;
end else
begin
//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);
end;
end;
curX := newX; curY := newY;
end;
Penskalaan
Matriks Skala
 Sx 0 0
 0 Sy 0


 0 0 1
Rumus Dasar Penskalaan
 x'  Sx 0 0  x 
 y '   0 Sy 0  y 
  
 
 1   0 0 1  1 
• 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)
cos
 sin 

 0
 sin  0

cos 0
0
1
Rumus Dasar Rotasi (koordinat kartesius)
 x' cos
 y '   sin 
  
 1   0
• x’ = x cos() - y sin()
• y’ = x sin() + y cos()
 sin 
cos
0
0  x 



0  y 
1  1 
Matriks Rotasi (koordinat Delphi)
 cos sin  0
 sin  cos 0


 0
0
1
Rumus Dasar Rotasi (koordinat Delphi)
 x'  cos
 y '   sin 
  
 1   0
• x’ = x cos() + y sin()
• y’ = -x sin() + y cos()
sin 
cos
0
0  x 



0  y 
1  1 
Shearing
• Tranformasi dengan
membebani pada sisi
tertentu, sehingga di
hasilkan objek yang
terdistorsi
• Contoh: huruf italic:
YY
Shearing searah sumbu X
1 shx
0 1

0 0
 x' 1 shx
 y '  0 1
  
 1  0 0
0
0
1
0  x 
0  y 
1  1 
• 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 )
1 cos / sin 
0
1

0
0
0

0
1
 x' 1 cos / sin  0  x 
 y '  0
 y
1
0
  
 
 1  0
0
1  1 
• Rumus Dasar
• x’ = x + y.shx
• x’ = x + y . cos()/sin()
• y’ = y
Contoh Shear X
Shearing searah sumbu Y
 1
 sh
 y
 0
 x'  1
 y '   sh
   y
 1   0
0 0
1 0
0 1
0 0  x 
1 0  y 
0 1  1 
• Rumus Dasar
• x’ = x
• y’ = y +x.shy
Shearing searah sumbu Y
(menggunakan sudut )
1

cos / sin 


0
0 0

1 0
0 1
1
0 0  x 
 x' 
 y '  cos / sin  1 0  y 
  
 
 1  
0
0 1  1 
Rumus Dasar
• x’ = x
• y’ = y +x.shy
• y’ = y + x.cos()/sin()
Shear Y
Shear XY
Matriks Shear X dan Y
 1
 sh
y

 0
shx
1
0
0

0
1
Latihan
• Susunlah matrik shear x y berdasarkan
sudut , dan carilah persamaannya untuk
mendapatkan x’ dan y’
Tugas 3
1. Buatlah program untuk memanggil
gambar dan menampilkan pada TImage
2. Buatlah program untuk menyimpan
gambar dari TImage ke sebuah file
Tugas 4
1. Buatlah program untuk menampilkan
gambar dan mengcopykan gambar
tersebut ke komponen TImage yang lain
dengan menggunakan CopyRect()
2. Buatlah program untuk menampilkan
gambar dan mengcopykan gambar
tersebut ke komponen TImage yang lain
dengan cara dicopykan pixel per pixel