BAB IV - · PDF fileMenggambar Objek 2D {Bagaimana cara menggambar objek 2D? zLangsung pada layar Ækesulitan manipulasi yaitu dalam transformasi zMelalui sistem koordinat kartesius

BAB IV

TOOLS UNTUK MENGGAMBAR(WINDOW DAN VIEWPORT)

Menggambar Objek 2D

Bagaimana cara menggambar objek 2D?Langsung pada layar

kesulitan manipulasi yaitu dalam transformasiMelalui sistem koordinat kartesius 2D

Dalam menggambar selalu digunakan perhitungan pixel (bil. bulat positif), padahal kenyataannya bisa bil. pecahan/ negatif yang dinyatakan dalam koord. Cartesius. perlu transformasi dari world window ke viewport.

ViewPort dan World Coordinate/ World Window (Koordinat Nyata)

ViewPort dan World Coordinate/ World Window (Koordinat Nyata)

World CoordinateDaerah segi empat pada sistem koordinat kartesius di mana gambar didefinisikanViewportDaerah segi empat pada layar di mana gambar akan ditempatkan/ dibuat.

Pemetaan dari World Coordinate ke Viewport

Pemetaan dari World Coordinate ke Viewport

World coordinate dinyatakan dengan w, dan batas kiri (left), kanan (right), atas (top), dan bawah (bottom) masing-masing dinyatakan dengan w.l, w.r, w.t, w.b. Koordinat viewport dinyatakan dengan v, dan batas kiri (left), kanan (right), atas (top), dan bawah (bottom) masing-masing dinyatakan dengan v.l, v.r, v.t, v.b.

Rumus Transformasi

Sumbu sx terhadap x dan sumbu sy terhadap y, masing-masing dinyatakan dengan :

sx = Ax + Csy = By + D

untuk suatu konstanta A, B, C, dan D.Konstanta A dan B menskala sumbu x dan y, sedangkan C dan D menggeser obyek.Dengan menggunakan perbandingan skala A, B, C, dan D masing-masing dapat dinyatakan sebagai berikut :

C = V.l – A W.l

D = V.b – B W.b

lWrWlVrVA....

−−

=

bWtWbVtVB....

−−

=

Contoh

Contoh

Perhatikan gambar(w.l,w.r,w.t,w.b)= (0, 2.0, 0, 1.0) (v.l,v.r,v.t,v.b)=(40, 400, 60, 300)Dengan menggunakan rumus diperoleh

A= 180, C = 40, B = 240, D = 60Pemetaan dari world ke viewport

sx= 180x + 40sy= 240y + 60

Contoh

Dalam OpenGL, pemetaan tersebut dinyatakan denganglMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(0.0, 2.0, 0.0, 2.0);

// mengatur windowglViewport(40, 60, 360, 240);

// mengatur viewport

Poligon (1)

Poligon (2)

Prinsip dasar:Setiap titik sudut n-gon ( Pi ) mempunyai koordinat :

untuk i = 0, 1, …, n-1dimana π = 3.14159265

) 2sin , 2cos ( ⎟⎠⎞

⎜⎝⎛

⎟⎠⎞

⎜⎝⎛=

niR

niRPi

ππ

Poligon (3)

glBegin(GL_LINE_STRIP);glColor3f(0.0, 0.0, 1.0); /* hexagon */glVertex2f(10.0, 0.0);glVertex2f(10*cos(2*3.14159265*1/6),10*sin(2*3.14159265*1/6));glVertex2f(10*cos(2*3.14159265*2/6),10*sin(2*3.14159265*2/6));glVertex2f(10*cos(2*3.14159265*3/6),10*sin(2*3.14159265*3/6));glVertex2f(10*cos(2*3.14159265*4/6),10*sin(2*3.14159265*4/6));glVertex2f(10*cos(2*3.14159265*5/6),10*sin(2*3.14159265*5/6));

glEnd();

Poligon (4)void ngon(int n,float cx,float cy,float radius,float rotAngle)double angle , angleInc; int k;

if(n < 3) return; // jml sisi tdk memenuhi syaratangle=rotAngle*3.14159265/180; // initial angleangleInc=2*3.14159265/n; //angle incrementglVertex2f(radius * cos(angle) + cx, radius * sin(angle)+cy);for(k = 0; k < n; k++) // repeat n times{angle += angleInc; glVertex2f(radius*cos(angle)+cx,radius*sin(angle)+cy);}

}

Clipping Garis (1)

Dalam OpenGL clipping dilakukan secara otomatis. Kalau gambarnya keluar dari window, maka otomatis tidak ditampilkan. Tetapi dalam bab ini akan dipelajari teori untuk membuang obyek diluar bingkai.

Clipping Garis (2)

window

A B

E

C

D

Clipping Garis (3)

1. Seluruh garis di dalam window (garis CD). Fungsi mengembalikan nilai 1.

2. Seluruh garis di luar window (garis AB). Fungsi mengembalikan nilai 0.

3. Satu ujung garis di luar dan ujung lainnya di dalam window (garis BC atau DE). Fungsi membuang bagian garis di luar window dan mengembalikan nilai 1.

4. Kedua ujung garis di luar window, tetapi ada bagian garis di dalam window (garis AE). Fungsi memotong kedua ujung di luar window dan mengembalikan nilai 1.

Status P dinyatakan dengan 4 field berikut ini :

Kode untuk P :

F

Apakah P di kiri W

Apakah P di atas W Apakah P di kanan W

Apakah P bwh W

window

F FF

Clipping Garis

TTFF FTFF FTTF

TFFF FFFF(window) FFTF

TFFT FFFT FFTT

Clipping Garis

Trivial acceptkedua titik ujung bernilai FFFFTrivial rejectkedua titik ujung mempunyai T pada posisi yang sama, keduanya di kiri, di kanan, di atas, atau di bawah.Untuk memotong garis yang berada di luar window perlu diketahui titik yang berada tepat di batas window.

Rumus Algoritma Cohen-Sutherland

Karena P1.y’ = A.ydanP1.x’ = A.x = w.kanan, maka diperoleh:P1.y’=P1.y+(w.kanan-p1.x)*dely/delx

Gambar Lingkaran

void drawCircle(point2 center, float radius)

{const int numVerts = 50;ngon(numVerts, center.getX(), center.getY(), radius, 0);

}

Gambar Busur

Demikian juga dengan menggambar busur. Busur adalah sebagian dari lingkaran. Kalau lingkaran digambar mulai dari titik asal, berputar dan kembali lagi ke titik asal. Kalau busur, digambar mulai dari titik asal berputar setengah lingkaran lalu dihentikan. Selamat mencoba.

Demo Program

Demo untuk lingkaran dan busur