Pertemuan 03: Grafika Komputer: Windows dan Viewport

download Pertemuan 03:  Grafika Komputer: Windows dan Viewport

of 78

  • date post

    30-Dec-2015
  • Category

    Documents

  • view

    51
  • download

    0

Embed Size (px)

description

Prodi Teknik Informatika Fakultas Teknologi Industri Universitas Atma Jaya Yogyakarta. 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. - PowerPoint PPT Presentation

Transcript of Pertemuan 03: Grafika Komputer: Windows dan Viewport

  • Pertemuan 03: Grafika Komputer:Windows dan ViewportDr. SuyotoProdi Teknik InformatikaFakultas Teknologi IndustriUniversitas Atma Jaya Yogyakarta

  • AgendaWindows, Viewports dan PemotonganGrafik Kura-kuraPoligon TeraturLingkaran dan BusurKurva ParametrikKoordinat 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 ViewportsContoh: Zooming InUntuk zoom in pada objek dan membuat animasi, kita butuhkan sejumlah frame dan menggambarnya dari satu bagian ke bagian yang lain.

  • Setting WindowJika 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 WindowUntuk set window ke ukuran yang tepat, kita perlukan ukuran koordinat yang kita tangkap.Kemudian set perpanjangan koordinat ini ke minimum dan maksimum.

  • Setting WindowProgram membutuhkan melalukan data dua kali::Eksekusi rutin penggambaran, tetapi tidak melakukan penggambaran. Eksekusi rutin penggambaran sekali lagi, tetapi inilah saatnya untuk menggambar!

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

  • Set ViewportJika 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 ViewportDalam 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 ViewportOpenGL 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 ratiosetViewport(0, W, 0, W/R);elsesetViewport(0, H*R, 0, H);}

  • AgendaWindows, Viewports dan PemotonganPembuatan tool Penggambar yang Berguna.Grafik Kura-kura

  • Windows dan ViewportsSebelumnya 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.

  • Windows dan ViewportsUntuk itu kita perlu membedakan koordinat dunia, koordinat layar dan koordinat viewport.Ini seperti.

  • Windows dan ViewportsDunia (apa yang kita lihat senyatanya)

  • Windows dan ViewportsJendela dunia adalah segiempatViewport adalah segiempat.Keduanya tidak perlu mempunyai ukuran dan aspect ratio yang sama.Koordinat dibutuhkan dijangkau, disusutkan dan dipindahkan untuk membuatnya cocok.

  • Windows dan ViewportsContoh Viewports

  • Windows dan ViewportsViewport(0,0)(0,0)(100,0)(100,0)

  • Windows dan Viewportsx = Ax + B dan y = Cy + DIni dibutuhkan untuk pemetaan.

  • Windows dan ViewportsPemetaan melibatkan skala dan translasi.Baik jendela dunia dan viewport dapat sembarang segiempat. Biasanya viewport diset untuk seluruh jendela layar.

  • Windows dan ViewportsW.t = Window atasW.l = Window kiriW.b = Window bawahW.r = Window kananV.t = Viewport atasV.l = Viewport kiriV.b = Viewport bawahV.r = Viewport kanan

  • Windows dan Viewportsxmin, ymin, xmax, ymax = W.l, W.b, W.r, W.tSCREENWIDTH = V.r V.lSCREENHEIGHT = V.t V.b

  • Windows dan ViewportsPemetaan 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.lSebagai proporsi keseluruhan panjang:

  • Windows dan ViewportsJadi:

    Atau disusun kembali menjadi:

  • Windows dan ViewportsDengan cara yang sama untuk y:

    Atau disusun kembali menjadi:

  • Windows dan ViewportsContoh

    Berapakah A, B, C & D ??

    World WindowViewport

  • Windows dan ViewportsContoh

    Jendela duniaViewport(10,6)(-10,-6)4000600A = 600/20 = 30B = 400/12 = 33.3333C = 0 30 * -10 = 300D = 0 33.3333 * -6 = 200Jika 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 = 4000

  • Windows dan ViewportsApakah kita memerlukan perhitungan seperti ini setiap waktu dengan OpenGL??

  • Windows dan ViewportsTidakOpenGL melakukannya untuk kitaTetapi yang paling penting adalah kita paham apa yang sedang terjadi..

  • Windows dan ViewportsSetiap 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 ViewportsPertama-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);

  • Windows dan Viewportsvoid 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);}

  • Windows dan ViewportsglPointSize(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 RelatifPenggambaran Relatif merujuk pada pergerakan titik gambar pada kanvas relatif ke lokasi penggambaran. Pikirkanlah ini seprti pergerakan pena pada kertas.moveRel() and lineRel()

  • Grafik Kura-kuraGambarlah 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-kuraContoh: Polispiral

    for( int i=0; i

  • Grafik Kura-kuraContoh: Polispiralfloat sudut = 87, inc = 0.05;

  • Grafik Kura-kuraContoh: Polispiralfloat sudut = 170, inc = 0.1;

  • Grafik Kura-kuraContoh: Polispiralfloat sudut = 89.5, inc = 0.1;

  • Poligon TeraturBerikut merupakan contoh poligon teratur.

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

  • 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 incrementcvs. 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);}}

  • Poligon Teraturngon(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 BusurLingkaran 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);}

  • Lingkaran

  • Lingkaran dan BusurUntuk 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));}

  • Busur

  • Lingkaran dan Busurp.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