Pertemuan 03: Grafika Komputer: Windows dan Viewport

  _{Universitas Atma Jaya Yogyakarta Fakultas Teknologi Industri} Prodi Teknik Informatika

  Pertemuan 03:

  

Grafika Komputer:

  Windows dan Viewport

  

Dr. Suyoto

  Agenda

• Windows, Viewports dan Pemotongan • Grafik Kura-kura
• Poligon Teratur • Lingkaran dan Busur • Kurva Parametrik • Koordinat Polar

  _{//--------------- setWindow ---------------------} Fungsi yang Berguna _{ void setWindow(GLdouble left, Gldouble right, GLdouble _{bottom, GLdouble top) gluOrtho2D(left, right, bottom, top); glLoadIdentity();} glMatrixMode(GL_PROJECTION); _{//---------------- 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 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)); _{} 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.

  1. Eksekusi rutin penggambaran, tetapi tidak melakukan penggambaran.

  Setting Window

• Program membutuhkan melalukan data dua kali::

  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

  W W _{window viewport} 

  H H _{window viewport}

  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 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. _{• Lebar jendela dunia akan dipetakan ke lebar} layar:setViewport(0,W,0,W/R);

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

  Pengubahan Ukuran Viewport

• OpenGL menyediakan fungsi resize untuk mengubah ukuran window. Ini dapat dihubungkan dengan fungsi pengubahan ukuran yang anda buat sendiri.
• glutReshapeFunc( myReshape);

  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 _{setViewport(0, H*R, 0, H);} }

  Agenda

• Windows, Viewports dan Pemotongan • Pembuatan tool Penggambar yang Berguna.
• Grafik Kura-kura

  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.
• Artinya harus dapat menampilkan nilai positif dan

  Windows dan Viewports

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

  _{Dunia (apa yang kita lihat senyatanya)} Windows dan Viewports _{yang kita inginkan)} Jendela dunia (bagian kecil Layar _{Jendela Layar}

  Windows dan Viewports

• Jendela dunia adalah segiempat • Viewport adalah segiempat.
• Keduanya tidak perlu mempunyai ukuran dan aspect ratio yang sama.
• Koordinat dibutuhkan dijangkau, disusutkan dan dipindahkan untuk

  Windows dan Viewports Jendela dunia

  Windows dan Viewports Jendela dunia ^Viewport

  (0,0) ^{(0,0) (100,0) (100,0) Ini disebut pemetaan}

  Windows dan Viewports

• x’ = Ax + B dan y’ = Cy + D • Ini dibutuhkan untuk pemetaan.

  Windows dan Viewports • Pemetaan melibatkan skala dan translasi.

• Baik jendela dunia dan viewport dapat sembarang segiempat.
• Biasanya viewport diset untuk seluruh jendela layar.

  Windows dan Viewports

  Windows dan Viewports

  Windows dan Viewports

  dsx _dx dx  _dsx

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

  Windows dan Viewports

  W l r W W l x V r l

  V l V sx . .

  .

  . . .

     

   ^{• Jadi:}

• Atau disusun kembali menjadi:

   ^ W l r

  V l V r

  V . .

  . . ^{A C} Windows dan Viewports

  W b t W W b x V t b

  V b V sy . .

  .

  . .

.

     

   ^{• Dengan cara yang sama untuk y:}

• Atau disusun kembali menjadi:

   ^{        W b W b t V b V y b V t V sy . . . . . . B D} Windows dan Viewports _{Jendela dunia Viewport}

  400 Contoh _{World Window Viewport (10,6)}

  (-10,-6) ₆₀₀ Windows dan Viewports _Viewport Jendela dunia ₄₀₀

  Contoh _(10,6)

  (-10,-6) _{600 B = 400/12 = 33.3333 A = 600/20 = 30 sx = A * -10 + C = 0 (0,0) dan (10,6) -> (600,400)} Jika benar, (-10,-6) harus dipetakan ke Windows dan Viewports

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

  Windows dan Viewports

• Tidak • OpenGL melakukannya untuk kita
• Tetapi yang paling penting adalah kita paham apa yang sedang terjadi…..

  Windows dan Viewports

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

  Windows dan Viewports

• • Pertama-tam kita set koordinat jendela dunia

  _{void glOrtho2D(GLDouble left, GLDouble right,}

  dengan: GLDouble bottom, GLDouble top);

• Kemudian set viewport dengan: _{void glViewport(GLint xmin, GLint ymin,}

  Windows dan Viewports _{ void myInit(void) _{glColor3f(0,0,0);} glClearColor(1.0,1.0,1.0,0.0); glClear(GL_COLOR_BUFFER_BIT); _{glLoadIdentity();} glMatrixMode(GL_PROJECTION); //set Pandangan Koordinat

  Windows dan Viewports

  glPointSize(10.0); glBegin(GL_POINTS); _{glVertex2i(-10,-6);} glVertex2i(0,0); _{glVertex2i(10,6);} glEnd();

• Catatan: titik yang

  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++ ) _{putarKe(sudut*i);} terusLurus(panjang, 1);

panjang += inc;

  _{float sudut = 87, inc = 0.05;} Contoh: Polispiral ra ku a- ur K k fi ra G

  _{float sudut = 170, inc = 0.1;} Contoh: Polispiral ra ku a- ur K k fi ra G

  _{float sudut = 89.5, inc = 0.1;} Contoh: Polispiral ra ku a- ur K k fi ra G

  Poligon Teratur Berikut merupakan contoh poligon teratur.

  Poligon Teratur

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

  R cos( 2 i / n ), R sin( 2 i / n ) 

    

   p

  _{void ngon(int n, float cx, float cy, float radius, float} Poligon Teratur _{{ if(n < 3) return; //bad number of sides} rotAngle) _{double angle = rotAngle * 3.14159265 / 180; double angleInc = 2 * 3.14159265 /n; cvs. moveTo(radius * cos(angle) + cx, radius * //angle increment} //initial angle _{{ for(int k = 0; k < n; k++) // repeat n times} sin(angle) + cy); _{+ cy); cvs.lineTo(radius*cos(angle) + cx, radius*sin(angle)} angle += angleInc; _} }

  _{ngon(4,0.0,0.0,150.0, 10.0);}

_{ngon(10,0.0,0.0,200.0, 30.0);}

ngon(6,0.0,0.0,250.0, 20.0); ngon(20,0.0,0.0,100.0, 5.0);

  ur at er T on ig ol P

  void drawCircle(Point2 center, float radius) _{ const int numVerts = 50;

  Lingkaran dan Busur

• Lingkaran dapat dibuat dengan poligon teratur tetapi dengan sejumlah besar titik.
an ar gk in L

  Lingkaran dan Busur

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

  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) garisKe(cx + radius * cos(angle), cy + radius * sin(angle));} } ur us B

  _{drawArc(p, 50,45,90);} p.set(0.0,0.0); _{drawArc(p, 30,0,90);} drawArc(p, 40,15,90);

  ur _{drawArc(p, 20,90,90);} us B an d an ar gk in

  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) = 0 untuk semua titik pada kurva.}

   F(x,y) = (y – A _{y )(B x -A x ) – (x-A x )(B y -A y )  F(x,y) < 0 untuk semua titik di dalam kurva.}  F(x,y) > 0 untuk semua titik di luar kurva.

  Kurva Parametrik

  2 ^{2 2}

• F(x,y) = x + y - R • F(x,y) < 0 (didalam)

  Kurva Parametrik

  2 ^{2 2}

• F(x,y) = x + y - R • F(x,y) > 0 (diluar)
• _{• F(x,y) = x + y - R}
_{2 2} Kurva Parametrik ₂
• F(x,y) = 0 (pada lingkaran)

  Kurva Parametrik

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

  2 ²    y _{– Beberapa fungsi mungkin hanya bergantung pada} R x _{– Beberapa fungsi mungkin hanya bergantung pada} nilai x saja. Kurva Parametrik

  Kurva Parametrik Kurva dapat digambarkan: _•

  2. Secara Parametrik _{Titik berbeda pada sebuah kurva dihasilkan untuk Nilai parameter menyarankan pergerakan titik •} semuah parameter.

  pada kurva seturut dengan waktu yang berjalan.

  Kurva Parametrik

  Kurva Parametrik

  Kurva Parametrik

  Kurva Parametrik

  Kurva Parametrik

  Kurva Parametrik

  Kurva Parametrik

  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. _t=1 B

  A

  Kurva Parametrik Jadi: _{x(t) = A x + (B x – A x )t Titik bergerak melalui semua titik pada garis A dan B} y(t) = A y + (B y – A y (t) pada t dari 0 ke 1. _B t=1

  A

  Kurva Parametrik Contoh: Elips

  H * sin(t) W * cos(t) Kurva Parametrik _{GLdouble height = 200.0; GLdouble width = 500.0;} //plot ellipse _{glPushMatrix(); float interval = 2500.0;} GLdouble TWOPI = 2 * 3.14159265 ; _{glColor3f(0,0,1); //warna poligon biru glBegin(GL_POINTS);} glTranslated (512, 300, 0); _{glVertex2d(width * cos(t), height * sin(t)); {} for(GLdouble t = 0; t <= TWOPI; t += TWOPI/interval ) _glEnd(); }

k ri et am ar P va ur 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(θ)

  _{glBegin(GL_POINTS);} Contoh: Kurva bunga mawar _{glColor3f(1,0,0); //warna poligon merah drawPolar(center, 260, 6); glColor3f(0,1,0); //warna poligon hijau} drawPolar(center, 270, 10); _{drawPolar(center, 230, 3);} glColor3f(0,0,1); //warna poligon biru ar _glEnd(); ol P at in rd oo K

  Istirahat