Grafika Komputer (TIZ10)

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

2. Matriks Tranformasi • Matriks Tranformasi 2D menggunakan matriks 3 x 3

3. Matriks Identitas

4. 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

5. Contoh Translasi

6. Matriks Translasi

7. Rumus Dasar Translasi • x’= x + dx • y’= y + dy

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

9. 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;

10. 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;

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

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

13. 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;

14. Penskalaan

15. Matriks Skala

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

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

18. 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

19. Matriks Rotasi (koordinat kartesius)

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

21. Matriks Rotasi (koordinat Delphi)

22. Rumus Dasar Rotasi (koordinat Delphi) • x’ = x cos() + y sin() • y’ = -x sin() + y cos()

23. Shearing • Tranformasi dengan membebani pada sisi tertentu, sehingga di hasilkan objek yang terdistorsi • Contoh: huruf italic: Y  Y

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

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

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

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

28. Contoh Shear X

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

30. Shearing searah sumbu Y(menggunakan sudut ) Rumus Dasar • x’ = x • y’ = y +x.shy • y’ = y + x.cos()/sin()

31. Shear Y

32. Shear XY

33. Matriks Shear X dan Y

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

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

36. 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