BAB III GRAFIKA 2D
Untuk menggambar objek 2D bisa dilakukan dengan beberapa cara, antara lain langsung menggambar pada layar monitor (viewport) dan kebanyakan objek 2D harus digambar melalui transformasi dari sistem koordinat kartesius (window ) ke sistem koordinat layar (viewport).
3.1 Transformasi window to viewport
Objek yang akan digambar pada layar biasanya memiliki ukuran yang jauh lebih besar dibanding ukuran layar bahkan mempunyai sistem koordinat yang berbeda, sehingga perlu dilakukan pemetaan/transformasi yang memungkinkan objek tersebut bisa digambar pada layar. Meskipun demikian, objek seringkali terlalu rumit untuk ditampilkan pada layar dengan koordinat yang sangat terbatas. Sehingga biasanya kita memilih bagian tertentu dari objek untuk ditampilkan pada layar. Didalam memilih objek yang akan ditampilkan biasanya dibatasi oleh sebuah kotak yang disebut dengan jendela (window).
Dalam praktek kita bisa menggunakan seluruh atau sebagian lebar layar untuk menmpilkan objek yang berada pada sebuah window. Daerah layar yang dipilih untuk menampilkan objek yang dimaksud disebut viewport. Dalam keadaan tertentu, viewport akan meliputi seluruh layar, meskipun demikian, kita bisa memilih bagian tertentu dari layar untuk dijadikan sebuah viewport.
Rumus Transformasi Window to Viewport :
Xv = Xvmin + round((Xw - Xwmin)*(Xvmax-Xvmin)/(Xwmax-Xwmin)) Yv = Yvmax - round((Yw - Ywmin)*(Yvmax-Yvmin)/(Ywmax-Ywmin)) Rumus Transformasi Viewport to Window :
Xw = Xwmin+(Xv-Xvmin)*(Xwmax-Xwmin)/(Xvmax-Xvmin); Yw = Ywmin+(Yvmax-Yv)*(Ywmax-Ywmin)/(Yvmax-Yvmin); Contoh program penggambaran grafik Y= sin(x)
procedure TForm1.Button5Click(Sender: TObject); var x,y,x1,x2,x3 :real;xi,yi,xj,yj,xk,yk,xl,yl:integer; begin
xwmin:=0;xwmax:=2*pi;ywmin:=-1.25;ywmax:=1.25;{WINDOW} xvmin:=50;xvmax:=678; yvmin:=200; yvmax:=450; {VIEWPORT} CANVAS.Font.Size:=30;
CANVAS.Font.Color:=CLRED;
CANVAS.TextOut(120,50,'GRAFIK FUNGSI SINUS X'); CANVAS.Brush.Color:=CLBLACK;
CANVAS.Rectangle(xvmin,yvmin,xvmax,yvmax); X:=xwmin;
Y:=SIN(X); WindowToViewport(x,y,xi,yi); CANVAS.Pixels[xi,yi]:=CLyellow; X:=X+0.01; END; end;
Transformasi selain window to viewport dijumpai pada beberapa kasus, berikut contoh transformasi lain untuk penggambaran diagram batang dari hasil pemungutan suara.
procedure TForm1.DiagramBATANGClick(Sender: TObject); var x:array of longint;
T:array of integer; i,X1 : integer; max:longint; begin setlengtH(x,10); setlengtH(T,10);
FOR I:=1 TO 4 DO X[I]:=RANDOM(50000000); MAX:=X[1];
FOR I:=2 TO 4 DO IF X[I]>MAX THEN MAX:=X[I]; canvas.Brush.Color:=CLBLACK;
CANVAS.Rectangle(0,0,500,400); X1:=20;
FOR I:=1 TO 4 DO BEGIN
T[I]:=round((X[I]/max)*350); {Transformasi lain} canvas.Brush.Color:=RGB(120*I,140*I,50*I); CANVAS.Rectangle(X1,400-T[I],X1+100,400); X1:=X1+120; END; end; 3.2 Transformasi Geometri
Sejumlah objek seringkali mempunyai sifat simetri. Sehingga untuk menggambar seluruh objek, cukup dilaksanakan dengan melakukan manipulasi terhadap objek yang sudah ada, misalnya dengan pencerminan, pergeseran, atau pemutaran objek yang sudah digambar terlebih dahulu.
Kita akan mempelajari cara mentransformasikan objek grafis khususnya objek grafis 2D sebagai salah satu cara untuk memanipulasi objek grafis dan sistem koordinat yang dipakai dengan cara yang lebih terorganisir dan efisien. Salah satu contoh penting untuk diketahui adalah pemakaian transformasi jendela ke
Ada dua cara untuk melakukan transformasi, yaitu transformasi objek dan transformasi kordinat. Pada transformasi objek semua titik pada sembarang objek akan dirubah sesuai dengan aturan tertentu sementara kordinatnya tetap. Pada transformasi sistem koordinat, objek tetap tetapi karena sistem koordinatnya diganti maka kedudukan objek harus disesuaikan dengan kedudukan sistem kordinat yangbaru.
Jenis-jenis transformasi
1. Translasi
Sembarang titik pada bidang xy bisa digeser ke sembarang tempat dengan menambahkan besaran pada absis x dan ordinat y. Translasi adalah transformasi dengan bentuk tetap memindahkan objek apa adanya. Dengan menggunakan persamaan Q = PM + tr, maka hasil pergeseran bisa dinyatakan sbb:
(Qx, Qy) = (Px +trx, Py+try)
dimana trx adalah vektor translasi menurut sumbu x sedang try adalah vektor
translasi menurut sumbu y, dan matrik M bisa dikatakan sebagai matrix identitas.
Sembarang objek bisa digeser ke posisinya yang baru dengan mengoperasikan persamaan diatas pada setiap titik dari objek tersebut. Hal ini karena setiap garis dari objek tersebut terdiri dari titik-titik yang jumlahnya tak terbatas, maka proses penggeseran bisa berlangsung sangat lama. Tetapi pada kenyataannya kita cukup menggeser dua titik ujungnya saja dan kemudian menggandeng dua titik tersebut untuk membentuk garis hasil pergeseran. Contoh translasi:
Untuk menggambarkan translasi objek yang berupa garis dengan koordinat A(10,10), B(30,10) dengan vektor translasi (10,20)
Titik A Qx=Px +trx =10 + 10 =20 Qy=Py + try =10+20=30 Hasil translasi A = (20, 30) Titik B Qx=Px + trx = 30+10 = 40 Qy=Py + try = 10+20 =30 Hasil translasi B = (40, 30) 2. Rotasi
Kita bisa memutar objek searah dengan arah perputaran jarum jam(dinyatakan dengan sudut negatif) atau berlawanan arah dengan arah jarum jam(dinyatakan sebagai sudut positif).
Dengan menganggap bahwa besarnya sudut putar adalah sama dengan t, maka posisi sebuah titik yang baru adalah:
Qx = Pxcos(t) - Pysin(t)
Qy = Pxsin(t) + Pycos(t)
Dengan menggunakan notasi matrix, maka besaran M bisa dikatakan sbb: M = cos(t) sin(t)
3. Skala
Penskalaan adalah proses untuk memperbesar atau memperkecil suatu gambar. Dengan faktor absolut yang lebih besar dari 1, akan diperoleh gambar yang lebih besar dan semakin menjauh dari titik(0,0). Sebaliknya dengan faktor skala yang mempunyai nilai absolut lebih kecill dari 1, akan diperoleh gambar yang lebih kecil dan mendekat ke titik (0,0).
Dengan menggunakan persamaan Q=PM+tr, maka hasil penggeseran bisa dinyatakan sebagai:
(Qx, Qy)=(SxPx, SyPy)
Dengan Sx adalah faktor skala ke arah mendatar dan Sy adalah faktor skala arah tegak dan ofset vektor tr bernilainol. Dengan menggunakan notasi matrix, maka matrixM bisa dinyatakan sbb:
M= (sx 0) (0 sy)
Transformasi geometri dengan pusat sembarang mempunyai rumus sedikit berbeda, berikut contoh program visualisasi transformasi geometri.
unit UnitTransformasi; interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, Menus, StdCtrls; type TForm1 = class(TForm) Button1: TButton; Label1: TLabel; Edit1: TEdit; Edit2: TEdit;
Label2: TLabel; Edit3: TEdit; Label3: TLabel; Edit4: TEdit; MainMenu1: TMainMenu; R1: TMenuItem; ROTASI1: TMenuItem; SKALA1: TMenuItem; FLIP1: TMenuItem; FLIPV1: TMenuItem;
procedure FormMouseMove(Sender: TObject; Shift: TShiftState; Xi, Yi: Integer);
procedure R1Click(Sender: TObject); procedure Button1Click(Sender: TObject); procedure ROTASI1Click(Sender: TObject); procedure SKALA1Click(Sender: TObject); procedure FLIP1Click(Sender: TObject); procedure FLIPV1Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var
Form1: TForm1; T : ARRAY[1..3] OF TPOINT; xp,yp:integer;s,sx,sy:real;
implementation {$R *.dfm}
procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; Xi, Yi: Integer);
begin
if ssleft in Shift then begin
xp:=xi;yp:=yi; edit1.text:=inttostr(xp); edit2.text:=inttostr(yp); canvas.Brush.Color:=clyellow; canvas.ellipse(xp-3,yp-3,xp+3,yp+3); end;
end;
procedure TForm1.R1Click(Sender: TObject); VAR TX,TY,I :INTEGER;
begin
TX:=STRTOINT(EDIT1.TEXT); TY:=STRTOINT(EDIT2.TEXT); FOR I:=1 TO 3 DO BEGIN
T[I].X:=T[I].X +Xp-t[3].x; T[I].Y:=T[I].Y +Yp-t[3].y; END; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end;
procedure TForm1.Button1Click(Sender: TObject); begin Canvas.Brush.Color := clBLACK; CANVAS.Rectangle(0,0,500,500); T[1].X:=100;T[1].Y:=100; T[2].X:=200;T[2].Y:=200; T[3].X:=100;T[3].Y:=200; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end;
procedure TForm1.ROTASI1Click(Sender: TObject); var x,y,i :integer;
begin
s:=strtoint(edit3.Text);s:=-s; FOR I:=1 TO 3 DO BEGIN x:=T[I].X; y:=T[I].y; T[I].X:=xp+round((X-xp)*cos(s*pi/180) - (y-yp)*sin(s*pi/180)); T[I].Y:=yp+round((X-xp)*sin(s*pi/180) + (y-yp)*cos(s*pi/180)); END; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end;
procedure TForm1.SKALA1Click(Sender: TObject); var x,y,i :integer;
begin
s:=strtofloat(edit4.Text); sx:=s; sy:=s; FOR I:=1 TO 3 DO BEGIN
x:=T[I].X; y:=T[I].y; T[I].X:=xp+round(sx*(x-xp)); T[I].Y:=yp+round(sy*(y-yp)); END; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end;
procedure TForm1.FLIP1Click(Sender: TObject); var x,y,i,Y1,Sx,sy :integer;
begin
sx:=-1;Sy:=1;y1:=250; FOR I:=1 TO 3 DO BEGIN x:=T[I].X; y:=T[I].y; T[I].X:=y1+round(sx*(x-y1)); T[I].Y:=round(sy*(y)); END; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end;
procedure TForm1.FLIPV1Click(Sender: TObject); var x,y,i,X1,Sx,sy :integer;
begin
sx:=1;Sy:=-1;X1:=250; FOR I:=1 TO 3 DO BEGIN x:=T[I].X; y:=T[I].y; T[I].X:=round(sx*(x)); T[I].Y:=X1+round(sy*(y-X1)); END; Canvas.Brush.Color := clwhite; Canvas.Polygon(T); end; end.
