Grafika Komputer (TIZ10)

Post on 18-Mar-2016

163 views 11 download

description

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 - PowerPoint PPT Presentation

Transcript of Grafika Komputer (TIZ10)

Grafika Komputer(TIZ10)

Tranformasi Grafik 2DTeady Matius – teadymatius@yahoo.com

Matriks Tranformasi

• Matriks Tranformasi 2D menggunakan matriks 3 x 3

333231

232221

131211

aaaaaaaaa

Matriks Identitas

100010001

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

Contoh Translasi

Matriks Translasi

1001001dydx

Rumus Dasar Translasi

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

11001001

1''

yx

dydx

yx

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 dydX := StrToInt(EditDx.Text);dY := StrToInt(EditDy.Text);

//Persamaan Translasi//Menentukan titik awal pepindahannewX := 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 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;

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

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

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

1000000

SySx

Rumus Dasar Penskalaan

11000000

1''

yx

SySx

yx

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

Matriks Rotasi (koordinat kartesius)

1000cossin0sincos

Rumus Dasar Rotasi (koordinat kartesius)

11000cossin0sincos

1''

yx

yx

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

Matriks Rotasi (koordinat Delphi)

1000cossin0sincos

Rumus Dasar Rotasi (koordinat Delphi)

11000cossin0sincos

1''

yx

yx

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

Shearing

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

• Contoh: huruf italic:

Y Y

Shearing searah sumbu X

10001001 xsh

110001001

1''

yxsh

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

1000100sin/cos1

11000100sin/cos1

1''

yx

yx

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

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

Contoh Shear X

Shearing searah sumbu Y

10001001

ysh

110001001

1''

yx

shyx

y

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

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

Shear Y

Shear XY

Matriks Shear X dan Y

1000101

y

x

shsh

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