Pertemuan 03: Grafika Komputer: Windows dan Viewport

(1)

Pertemuan 03:

Grafika Komputer:

Windows dan Viewport

Dr. Suyoto

Prodi Teknik Informatika Fakultas Teknologi Industri

(2)

Agenda

• Windows, Viewports dan Pemotongan • Grafik Kura-kura

• Poligon Teratur

• Lingkaran dan Busur • Kurva Parametrik

(3)

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)

{

(4)

float x, xmin = 0, xmax=1024;

glColor3f(0,0,1); //warna garis biru glPushMatrix();

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

(5)

Windows dan Viewports

• Contoh: Zooming In

(6)

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

(7)

Setting Window

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

(8)

Setting Window

• Program membutuhkan melalukan data dua kali::

1. Eksekusi rutin penggambaran, tetapi tidak melakukan penggambaran.

(9)

Set Viewport

• Untuk menggambar dengan tampilan di viewport tidak terdistorsi, kita perlukan untuk memastikan bahwa baik window maupun viewport

(10)

Set Viewport

• Jika aspect ratio segiempat kurang dari 0, maka segiempat lebih tinggi dibandingkan lebarnya. • Contoh. W/H = 3/5

(11)

Set Viewport

a) 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.

(12)

Set Viewport

b) 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.

(13)

Pengubahan Ukuran Viewport

• Dalam lingkungan windows environment,

pengguna perlu mengubah ukuran dengan suka-suka.

• Jika ini terjadi, maka kita perlu memastikan

(14)

Pengubahan Ukuran Viewport

• OpenGL menyediakan fungsi resize untuk mengubah ukuran window. Ini dapat

dihubungkan dengan fungsi pengubahan ukuran yang anda buat sendiri.

(15)

Pengubahan Ukuran Viewport

void myReshape(GLsizei W, GLsizei H) {

if(R > W/H) //use global window aspect ratio setViewport(0, W, 0, W/R);

else

(16)

Agenda

• Windows, Viewports dan Pemotongan

(17)

Windows dan Viewports

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

(18)

Windows dan Viewports

(19)

Layar

Dunia (apa yang kita lihat senyatanya)

Jendela Layar Jendela dunia (bagian kecil yang kita inginkan)

(20)

• Jendela dunia adalah segiempat • Viewport adalah segiempat.

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

(21)

Windows dan Viewports

Jendela dunia

(22)

Jendela dunia Viewport

(0,0) (100,0) (0,0) (100,0) Ini disebut

(23)

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

(24)

• Pemetaan melibatkan skala dan translasi. • Baik jendela dunia dan viewport dapat

sembarang segiempat.

(25)

W.t = Window atas W.l = Window kiri W.b = Window bawah W.r = Window kanan

(26)

Windows dan Viewports

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

(27)

dsx dx _

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

(28)

Windows dan Viewports

l

W

r

W

l

W

x

l

V

r

V

l

V

sx

.



• Jadi:

• Atau disusun kembali menjadi:

           

 W l

(29)

b

W

t

W

b

W

x

b

V

t

V

b

V

sy

.



• Dengan cara yang sama untuk y:

• Atau disusun kembali menjadi:

           

 W b

(30)

Contoh

Berapakah A, B, C & D ??

World Window Viewport Jendela dunia Viewport

(10,6)

(-10,-6)

400

0

(31)

Contoh

Jendela dunia Viewport

(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 = 0 sy = B * -6 + D = 0 sx = A * 10 + C = 600 xy = B * 6 + D = 400

(32)

Windows dan Viewports

(33)

• Tidak

• OpenGL melakukannya untuk kita

(34)

• Setiap kali kita memanggil OpenGL untuk

melukis titik (Contoh:

glVertex2f()

etc..)

koordinat titik dilalakan melalui set

(35)

• Pertama-tam kita set koordinat jendela dunia

dengan:

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

• Kemudian set viewport dengan:

(36)

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

(37)

Windows dan Viewports

glPointSize(10.0);

glBegin(GL_POINTS);

glVertex2i(-10,-6);

glVertex2i(0,0);

glVertex2i(10,6);

glEnd();

*Catatan: titik yang diberikan dalam

(38)

Penggambaran Relatif

• Penggambaran Relatif merujuk pada

pergerakan titik gambar pada kanvas relatif ke lokasi penggambaran.

• Pikirkanlah ini seprti pergerakan pena pada kertas.

(39)

Grafik Kura-kura

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

• Gunakan:

– garisKe(float x, float y)

(40)

Grafik Kura-kura

Contoh: Polispiral

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

terusLurus(panjang, 1); putarKe(sudut*i);

(41)

G

ra

fi

k

K

ur

a-ku

ra

(42)

G

ra

fi

k

K

ur

a-ku

ra

(43)

G

ra

fi

k

K

ur

a-ku

ra

(44)

Poligon Teratur

(45)

Poligon Teratur

• Untuk menggambar poligon teratur

dibutuhkan titik pusat, jejari dan sudut rotasi.



R

cos(

2

i

/

n

),

R

sin(

2

i

/

n

)



(46)

Poligon Teratur

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

(47)

P

ol

ig

on

T

er

at

ur

(48)

Lingkaran dan Busur

• Lingkaran dapat dibuat dengan

poligon teratur tetapi dengan sejumlah

besar titik.

void drawCircle(Point2 center, float radius) {

const int numVerts = 50;

(49)

L

in

gk

ar

(50)

Lingkaran dan Busur

• Untuk melukis busur atau lingkaran

dibutuhkan titik pusat, sudut awal (a) dan

(51)

Lingkaran dan Busur

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

(52)

B

us

(53)

(54)

Latihan: Lingkaran dan Busur

Putar: airmata

(55)

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.

(56)

Kurva Parametrik

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

(57)

Kurva Parametrik

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

(58)

Kurva Parametrik

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

• F(x,y) = 0

(59)

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

x

R

y

2 2



(60)

Kurva Parametrik

(61)

Kurva Parametrik

Kurva dapat digambarkan:

2. Secara Parametrik

• Titik berbeda pada sebuah kurva dihasilkan untuk semuah parameter.

(62)

Kurva Parametrik

(63)

Kurva Parametrik

(64)

Kurva Parametrik

(65)

Kurva Parametrik

(66)

Kurva Parametrik

(67)

Kurva Parametrik

(68)

Kurva Parametrik

(69)

Kurva Parametrik

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

(70)

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

(71)

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

(72)

Kurva Parametrik

Contoh: Elips

H * sin(t)

(73)

Kurva Parametrik

//plot ellipse

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

(74)

K

ur

va

P

ar

am

et

ri

(75)

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

(76)

Koordinat Polar

• Untuk masing-masing titik x dan y dapat disederhanakan:

(77)

K

oo

rd

in

at

P

ol

ar

Contoh: Kurva bunga mawar

glBegin(GL_POINTS);

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

drawPolar(center, 270, 10);

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

drawPolar(center, 260, 6);

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

(78)