grafika komputer (tiz10)

36
Grafika Komputer (TIZ10) Tranformasi Grafik 2D Teady Matius – [email protected]

Upload: garran

Post on 18-Mar-2016

171 views

Category:

Documents


11 download

DESCRIPTION

Grafika Komputer (TIZ10). Tranformasi Grafik 2D Teady Matius – [email protected]. 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 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Grafika Komputer (TIZ10)

Grafika Komputer(TIZ10)

Tranformasi Grafik 2DTeady Matius – [email protected]

Page 2: Grafika Komputer (TIZ10)

Matriks Tranformasi

• Matriks Tranformasi 2D menggunakan matriks 3 x 3

333231

232221

131211

aaaaaaaaa

Page 3: Grafika Komputer (TIZ10)

Matriks Identitas

100010001

Page 4: Grafika Komputer (TIZ10)

Translasi• Perpindahan Objek dari ti

tik 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 sear

ah sumbu y

Page 5: Grafika Komputer (TIZ10)

Contoh Translasi

Page 6: Grafika Komputer (TIZ10)

Matriks Translasi

1001001dydx

Page 7: Grafika Komputer (TIZ10)

Rumus Dasar Translasi

• x’= x + dx• y’= y + dy

11001001

1''

yx

dydx

yx

Page 8: Grafika Komputer (TIZ10)

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

Page 9: Grafika Komputer (TIZ10)

Implementasi Persamaan Translasi pada delphi

//Ambil nilai dx dan dydX := StrToInt(EditDx.Text);dY := StrToInt(EditDy.Text);

//Persamaan Translasi//Menentukan titik awal pepindahannewX := curX + dX;newY := curY + dY;

Page 10: Grafika Komputer (TIZ10)

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 asalfor 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 temporaryfor i:=0 to tinggi-1 dobegin for j:=0 to lebar-1 do begin canvas.Pixels[newX + j, newY + i] := Image1.Canvas.Pixels[j, i]; end;end;

Page 11: Grafika Komputer (TIZ10)

Contoh Translasi dengan Vektor

//hapus dahulu grafik lamacanvas.Pen.Color := clBtnFace;canvas.Ellipse(curX, curY, curX+lebar, curY

+tinggi);//gambar grafik barucanvas.Pen.Color := clBlack;canvas.Ellipse(newX, newY, newX+lebar, n

ewY+tinggi);

Page 12: Grafika Komputer (TIZ10)

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+ting

gi),Image1.Canvas,Rect(0,0,lebar, tinggi));

Page 13: Grafika Komputer (TIZ10)

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;

Page 14: Grafika Komputer (TIZ10)

Penskalaan

Page 15: Grafika Komputer (TIZ10)

Matriks Skala

1000000

SySx

Page 16: Grafika Komputer (TIZ10)

Rumus Dasar Penskalaan

11000000

1''

yx

SySx

yx

• x’ = x . Sx• y’ = y . Sy

Page 17: Grafika Komputer (TIZ10)

Implementasi persamaan Scaling pada Delphi

• //Menentukan titik awal perpindahan• newX := round(curX * sX);• newY := round(curY * sY);

Page 18: Grafika Komputer (TIZ10)

Rotasi• Ide dasar dari rotasi adal

ah melakukan perputaran pada sumbunya.

• Koordinat yang di pergunakan untuk perhitungan adalah koordinat kartesian

• Karena koordinat sumbu y delphi berbeda, maka harus dilakukan penyesuaian

Page 19: Grafika Komputer (TIZ10)

Matriks Rotasi (koordinat kartesius)

1000cossin0sincos

Page 20: Grafika Komputer (TIZ10)

Rumus Dasar Rotasi (koordinat kartesius)

11000cossin0sincos

1''

yx

yx

• x’ = x cos() - y sin()• y’ = x sin() + y cos()

Page 21: Grafika Komputer (TIZ10)

Matriks Rotasi (koordinat Delphi)

1000cossin0sincos

Page 22: Grafika Komputer (TIZ10)

Rumus Dasar Rotasi (koordinat Delphi)

11000cossin0sincos

1''

yx

yx

• x’ = x cos() + y sin()• y’ = -x sin() + y cos()

Page 23: Grafika Komputer (TIZ10)

Shearing

• Tranformasi dengan membebani pada sisi tertentu, sehingga di hasilkan objek yang terdistorsi

• Contoh: huruf italic:

Y Y

Page 24: Grafika Komputer (TIZ10)

Shearing searah sumbu X

10001001 xsh

110001001

1''

yxsh

yx x

• Rumus Dasar• x’ = x +y.shx• y’ = y

Page 25: Grafika Komputer (TIZ10)

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!!!

Page 26: Grafika Komputer (TIZ10)

Mendapatkan dari y dan shx

• Jika adalah sudut kemiringan,• tan( ) = y/shx

= arctan(y/shx) / * 180 = 90 –

Page 27: Grafika Komputer (TIZ10)

Shearing searah sumbu X (menggunakan sudut )

1000100sin/cos1

11000100sin/cos1

1''

yx

yx

• Rumus Dasar• x’ = x + y.shx

• x’ = x + y . cos()/sin()• y’ = y

Page 28: Grafika Komputer (TIZ10)

Contoh Shear X

Page 29: Grafika Komputer (TIZ10)

Shearing searah sumbu Y

10001001

ysh

110001001

1''

yx

shyx

y

• Rumus Dasar• x’ = x• y’ = y +x.shy

Page 30: Grafika Komputer (TIZ10)

Shearing searah sumbu Y (menggunakan sudut )

10001sin/cos001

110001sin/cos001

1''

yx

yx

Rumus Dasar• x’ = x• y’ = y +x.shy

• y’ = y + x.cos()/sin()

Page 31: Grafika Komputer (TIZ10)

Shear Y

Page 32: Grafika Komputer (TIZ10)

Shear XY

Page 33: Grafika Komputer (TIZ10)

Matriks Shear X dan Y

1000101

y

x

shsh

Page 34: Grafika Komputer (TIZ10)

Latihan

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

Page 35: Grafika Komputer (TIZ10)

Tugas 3

1. Buatlah program untuk memanggil gambar dan menampilkan pada TImage

2. Buatlah program untuk menyimpan gambar dari TImage ke sebuah file

Page 36: Grafika Komputer (TIZ10)

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