Download - Pertemuan 03: Grafika Komputer: Windows dan Viewport

Pertemuan 03:

Grafika Komputer:Windows dan Viewport

Dr. Suyoto

Prodi Teknik InformatikaFakultas Teknologi IndustriUniversitas Atma Jaya Yogyakarta

Agenda

• Windows, Viewports dan Pemotongan

• Grafik Kura-kura

• Poligon Teratur

• Lingkaran dan Busur

• Kurva Parametrik

• Koordinat Polar

Fungsi yang Berguna//--------------- setWindow ---------------------void setWindow(GLdouble left, Gldouble right, GLdouble

bottom, GLdouble top){

glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(left, right, bottom, top);

}

//---------------- setViewport ------------------void setViewport(GLdouble left, Gldouble right, GLdouble

bottom, GLdouble top){

glViewport(left, bottom, right – left, top - bottom);}

float x, xmin = 0, xmax=1024;glColor3f(0,0,1);//warna garis biruglPushMatrix();

glTranslated (0, 300, 0);glBegin(GL_POINTS);

glVertex2d(0, 0);for(x = xmin; x < xmax; x+=0.005 ){

//glVertex2d(x, 200*pow(2.71, -x/300)*cos(4*3.14*x/360));glVertex2d(x, 200*cos(2*2*3.14*x/360));

}glEnd();

glPopMatrix();

Windows dan Viewports

• Contoh: Zooming In– Untuk zoom in pada objek dan membuat

animasi, kita butuhkan sejumlah frame dan menggambarnya dari satu bagian ke bagian yang lain.

Setting Window

• Jika kita set ukuran window, dan kita ingin objek pemandangan yang akan kita tangkap.

• Objeknya terlalu besarkah atau terlalu kecil.

• Jika terlalu kecil maka objek akan terpotong.

Setting Window

• Untuk set window ke ukuran yang tepat, kita perlukan ukuran koordinat yang kita tangkap.

• Kemudian set perpanjangan koordinat ini ke minimum dan maksimum.

Setting Window

• Program membutuhkan melalukan data dua kali::1. Eksekusi rutin penggambaran, tetapi tidak melakukan

penggambaran.

2. Eksekusi rutin penggambaran sekali lagi, tetapi inilah saatnya untuk menggambar!

Set Viewport

• Untuk menggambar dengan tampilan di viewport tidak terdistorsi, kita perlukan untuk memastikan bahwa baik window maupun viewport mempunyai aspect ratio yang sama.

• Jadi

viewport

viewport

window

window

H

W

H

W

Set Viewport

• Jika aspect ratio segiempat kurang dari 0, maka segiempat lebih tinggi dibandingkan lebarnya.

• Contoh. W/H = 3/5 • Jika aspect ratio segiempat lebih besar 0, maka

segiempat lebih lebar dibandingkan Tingginya.• Contoh. W/H = 5/3

Set Viewporta) R > W/H (dengan R aspect ratio dari jendela dunia)

• Jika jendela dunia ‘flatter’ daripada jendela layar, maka ada ruang yang tidak digunakan di atas dan atau dibawah.

• Lebar jendela dunia akan dipetakan ke lebar layar:setViewport(0,W,0,W/R);

Set Viewportb) R < W/H (dengan R aspect ratio dari jendela dunia)

• Jika jendela dunia ‘lebih tinggi’ daripada jendela layar maka akan ada ruang yang tidak terpakai.

• Tinggi jendela dunia akan dipetakan ke tinggi jendela layar. setViewport(0,H*R,0,H);

Pengubahan Ukuran Viewport

• Dalam lingkungan windows environment, pengguna perlu mengubah ukuran dengan suka-suka.

• Jika ini terjadi, maka kita perlu memastikan bahwa yang digambar tidak berubah bentuk dan ukurannya.


• OpenGL menyediakan fungsi resize untuk mengubah ukuran window. Ini dapat dihubungkan dengan fungsi pengubahan ukuran yang anda buat sendiri.

• glutReshapeFunc( myReshape);


void myReshape(GLsizei W, GLsizei H)

{

if(R > W/H) //use global window aspect ratio

setViewport(0, W, 0, W/R);

else

setViewport(0, H*R, 0, H);

}

Agenda

• Windows, Viewports dan Pemotongan

• Pembuatan tool Penggambar yang Berguna.

• Grafik Kura-kura


• Sebelumnya kita melihat bahwa pada window OpenGL dengan x dan y digambar sebagai nilai piksel positif.

• Oleh karena itu, kita tidak tertarik untuk mempertahannya.

• Kita lebih baik menggunakan koordinat dengan bebas sesuai dengan kondisi nyata.

• Artinya harus dapat menampilkan nilai positif dan negatif.


• Untuk itu kita perlu membedakan koordinat dunia, koordinat layar dan koordinat viewport.

• Ini seperti….

Layar

Windows dan ViewportsDunia (apa yang kita lihat senyatanya)

Jendela Layar

Jendela dunia (bagian kecil yang kita inginkan)

Viewport


• Jendela dunia adalah segiempat

• Viewport adalah segiempat.

• Keduanya tidak perlu mempunyai ukuran dan aspect ratio yang sama.

• Koordinat dibutuhkan dijangkau, disusutkan dan dipindahkan untuk membuatnya cocok.


Jendela dunia

Contoh Viewports


Jendela dunia Viewport

(0,0)

(0,0)

(100,0) (100,0)

Ini disebut pemetaan


• x’ = Ax + B dan y’ = Cy + D

• Ini dibutuhkan untuk pemetaan.


• Pemetaan melibatkan skala dan translasi.

• Baik jendela dunia dan viewport dapat sembarang segiempat.

• Biasanya viewport diset untuk seluruh jendela layar.


W.t = Window atasW.l = Window kiriW.b = Window bawahW.r = Window kanan

V.t = Viewport atasV.l = Viewport kiriV.b = Viewport bawahV.r = Viewport kanan


xmin, ymin, xmax, ymax = W.l, W.b, W.r, W.tSCREENWIDTH = V.r – V.lSCREENHEIGHT = V.t – V.b


dsxdx

•Pemetaan dibuat secara proporsional

•Jarak sebuah titik sepanjang sumbu x di jendela dunia proporsional dengan titik yang dibambar di sepanjang sumbu x di Viewport.

•Berapa jauhkah x dari W.l?

•dx = x – W.l

•Sebagai proporsi keseluruhan panjang:

dx dsx

lWrW

lWx

..

.


lWrW

lWx

lVrV

lVsx

..

.

..

.

• Jadi:

• Atau disusun kembali menjadi:

lWlWrW

lWrVlVx

lWrW

lVrVsx .

..

...

..

..

A C


bWtW

bWx

bVtV

bVsy

..

.

..

.

• Dengan cara yang sama untuk y:

• Atau disusun kembali menjadi:

bWbWtW

bWtVbVy

bWtW

bVtVsy .

..

...

..

..

B D


Contoh

Berapakah A, B, C & D ??

World Window Viewport


(10,6)

(-10,-6)

400

0

0 600


Contoh


(10,6)

(-10,-6)

400

0

600

A = 600/20 = 30

B = 400/12 = 33.3333

C = 0 – 30 * -10 = 300

D = 0 – 33.3333 * -6 = 200

Jika benar, (-10,-6) harus dipetakan ke (0,0) dan (10,6) -> (600,400)sx = A * -10 + C = 0sy = B * -6 + D = 0sx = A * 10 + C = 600xy = B * 6 + D = 400

0


• Apakah kita memerlukan perhitungan seperti ini setiap waktu dengan OpenGL??


• Tidak

• OpenGL melakukannya untuk kita

• Tetapi yang paling penting adalah kita paham apa yang sedang terjadi…..


• Setiap kali kita memanggil OpenGL untuk melukis titik (Contoh: glVertex2f() etc..) koordinat titik dilalakan melalui set transformasi yang memtakan dari koordinat dunia ke koordinat viewport.


• Pertama-tam kita set koordinat jendela dunia dengan:

void glOrtho2D(GLDouble left, GLDouble right, GLDouble bottom, GLDouble top);

• Kemudian set viewport dengan:void glViewport(GLint xmin, GLint ymin, GLint width, GLint height);


void myInit(void){

glClearColor(1.0,1.0,1.0,0.0);

glColor3f(0,0,0);glClear(GL_COLOR_BUFFER_BIT);

glMatrixMode(GL_PROJECTION);glLoadIdentity();

//set Pandangan Koordinat gluOrtho2D(-10.0, 10.0, -6.0, 6.0);glViewport(0,0,600,400);

}


glPointSize(10.0);

glBegin(GL_POINTS);

glVertex2i(-10,-6);

glVertex2i(0,0);

glVertex2i(10,6);

glEnd();

*Catatan: titik yang diberikan dalam Koordinat dunia dan OpenGL memetakannya ke koordinat Viewport.

Penggambaran Relatif

• Penggambaran Relatif merujuk pada pergerakan titik gambar pada kanvas relatif ke lokasi penggambaran.

• Pikirkanlah ini seprti pergerakan pena pada kertas.

• moveRel() and lineRel()

Grafik Kura-kura

• Gambarlah garis dan titik pada layar sehingga menyerupai kura-kura.

• Gunakan:– garisKe(float x, float y)– terusLurus(float panjang, int apaNampak)– dan lain-lain

Grafik Kura-kura

Contoh: Polispiral

for( int i=0; i<200; i++ )

{

terusLurus(panjang, 1);

putarKe(sudut*i);

panjang += inc;

}

Gra

fik

Kur

a-ku

raContoh: Polispiralfloat sudut = 87, inc = 0.05;

Gra

fik

Kur

a-ku

raContoh: Polispiralfloat sudut = 170, inc = 0.1;

Gra

fik

Kur

a-ku

raContoh: Polispiralfloat sudut = 89.5, inc = 0.1;

Poligon Teratur

Berikut merupakan contoh poligon teratur.

Poligon Teratur

• Untuk menggambar poligon teratur dibutuhkan titik pusat, jejari dan sudut rotasi.

)/2sin(),/2cos( niRniRpi

Poligon Teraturvoid ngon(int n, float cx, float cy, float radius, float

rotAngle){

if(n < 3) return; //bad number of sides double angle = rotAngle * 3.14159265 / 180; //initial angle double angleInc = 2 * 3.14159265 /n; //angle increment

cvs. moveTo(radius * cos(angle) + cx, radius * sin(angle) + cy);for(int k = 0; k < n; k++) // repeat n times{

angle += angleInc; cvs.lineTo(radius*cos(angle) + cx,

radius*sin(angle) + cy);}

}

Pol

igon

Ter

atur

ngon(6,0.0,0.0,250.0, 20.0);ngon(10,0.0,0.0,200.0, 30.0);ngon(4,0.0,0.0,150.0, 10.0);ngon(20,0.0,0.0,100.0, 5.0);

Lingkaran dan Busur

• Lingkaran dapat dibuat dengan poligon teratur tetapi dengan sejumlah besar titik.

void drawCircle(Point2 center, float radius){

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

}

Lin

gkar

an

Lingkaran dan Busur

• Untuk melukis busur atau lingkaran dibutuhkan titik pusat, sudut awal (a) dan sudut busur (b).

Lingkaran dan BusurKode ini mirip dengan ngon( ) sehingga busar dapat digambar, yang berarti kita tidak menggambar 360 derajad.

drawArc(Point2 center, float radius, float startAngle, float sweep){ // startAngle dan sweep dalam derajad const int n = 30; // jumlah segmen float angle = startAngle * 3.14159265 / 180; // inisialisasi sudut dalam radian

float angleInc = sweep * 3.14159265 /(180 * n); // penaikan sudut float cx = center.getX(), cy = center.getY(); pindahKe(cx + radius * cos(angle), cy + radius * sin(angle)); for(int k = 1; k < n; k++, angle += angleInc)

garisKe(cx + radius * cos(angle), cy + radius * sin(angle));}

Bus

ur

Lin

gkar

an d

an B

usur

p.set(0.0,0.0);

drawArc(p, 50,45,90);

drawArc(p, 40,15,90);

drawArc(p, 30,0,90);

drawArc(p, 20,90,90);

Latihan: Lingkaran dan Busur

Putar: airmata

Tulis sebuah fungsi airmata() yang akan menggambarkan sebuah airmata.

Kurva Parametrik

Sebuah kurva dapat dinyatakan:1. Secara implisit

F(x,y) = 0; F(x,y) = (y – Ay)(Bx-Ax) – (x-Ax)(By-Ay)

F(x,y) = 0 untuk semua titik pada kurva. F(x,y) > 0 untuk semua titik di luar kurva. F(x,y) < 0 untuk semua titik di dalam kurva.

Kurva Parametrik

• F(x,y) = x2 + y2 - R2

• F(x,y) < 0 (didalam)

Kurva Parametrik

• F(x,y) = x2 + y2 - R2

• F(x,y) > 0 (diluar)

Kurva Parametrik• F(x,y) = x2 + y2 - R2

• F(x,y) = 0

(pada lingkaran)

Kurva Parametrik

• Masalah perwakilan secara implisit– Mungkin banyak nilai x dan y.

– Beberapa fungsi mungkin hanya bergantung pada nilai x saja.

– Beberapa fungsi mungkin hanya bergantung pada nilai y saja

xRy 22

Kurva Parametrik

Nilai tunggal dalam y Nilai tunggal dalam x

Kurva Parametrik

Kurva dapat digambarkan:2. Secara Parametrik

• Titik berbeda pada sebuah kurva dihasilkan untuk semuah parameter.

• Nilai parameter menyarankan pergerakan titik pada kurva seturut dengan waktu yang berjalan.

Kurva Parametrik

waktu

Kurva Parametrik

• Lintasan pergerakan partikel sepanjang kurva ditetapkan oleh dua fungsi, x() and y().

• Posisi dari partikel pada sembarang titik dan pada waktu tertentu adalah (x(t), y(t)).

Kurva Parametrik

Contoh:

Sebuah garis lurus dari A ke B pada t=0 partikel di A dan pada t=1 partikel ada di B.

A

B

t=1

t=0

Kurva Parametrik

Jadi:x(t) = Ax + (Bx – Ax)t

y(t) = Ay + (By – Ay(t)

Titik bergerak melalui semua titik pada garis A dan B pada t dari 0 ke 1.

A

B

t=1

t=0

Kurva Parametrik

Contoh: Elips

H * sin(t)

W * cos(t)

Kurva Parametrik//plot ellipseGLdouble width = 500.0;GLdouble height = 200.0;GLdouble TWOPI = 2 * 3.14159265;float interval = 2500.0;glPushMatrix();

glTranslated (512, 300, 0);glBegin(GL_POINTS); glColor3f(0,0,1); //warna poligon biru for(GLdouble t = 0; t <= TWOPI; t += TWOPI/interval ) {

glVertex2d(width * cos(t), height * sin(t)); }glEnd();

glPopMatrix();

Kur

va P

aram

etri

k

Koordinat Polar

• Masing-masing titik pada kurva diwakili oleh jarak radial (r) dan sudut (θ).

r dan θ merupakan fungsi t

yang dinyatakan dengan (r(t), θ(t))• x(t) = r(t)cos(θ(t))• y(t) = r(t)sin(θ(t))

Koordinat Polar

• Untuk masing-masing titik x dan y dapat disederhanakan:– x = f(θ)cos(θ)

– y = f(θ)sin(θ)

Koo

rdin

at P

olar

Contoh: Kurva bunga mawarglBegin(GL_POINTS);

glColor3f(1,0,0); //warna poligon merah

drawPolar(center, 270, 10);

glColor3f(0,1,0); //warna poligon hijau


glColor3f(0,0,1); //warna poligon biru


glEnd();

Istirahat