bab 4 tools untuk menggambar : window dan viewport
DESCRIPTION
BAB 4 Tools untuk Menggambar : Window dan viewport. ^@^ & Evang’zzzz. Mengenal ViewPort dan World Coordinate. Gambar 4.1. World Window dan ViewPort. Gambar 4.2. Pemetaan dari World Coordinate ke ViewPort. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/1.jpg)
BAB 4BAB 4Tools untuk Tools untuk
Menggambar : Window Menggambar : Window dan viewportdan viewport
^@^ & Evang’zzzz^@^ & Evang’zzzz
![Page 2: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/2.jpg)
Mengenal ViewPort dan Mengenal ViewPort dan World CoordinateWorld Coordinate
Gambar 4.1. World Window dan ViewPort
![Page 3: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/3.jpg)
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.
Gambar 4.2. Pemetaan dari World Coordinate ke ViewPort
![Page 4: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/4.jpg)
Sumbu sx terhadap x dan sumbu sy terhadap y, Sumbu sx terhadap x dan sumbu sy terhadap y, masing-masing dinyatakan dengan :masing-masing dinyatakan dengan :
sx = Ax + Csx = Ax + C
sy = By + Dsy = By + D
untuk suatu konstanta A, B, C, dan D.untuk suatu konstanta A, B, C, dan D.
Konstanta A dan B menskala sumbu x dan y,Konstanta A dan B menskala sumbu x dan y,
sedangkan C dan D menggeser obyek.sedangkan C dan D menggeser obyek.
Dengan menggunakan perbandingan skala A, B,Dengan menggunakan perbandingan skala A, B,
C, dan D masing-masing dapat dinyatakanC, dan D masing-masing dapat dinyatakan
sebagai berikut :sebagai berikut :
(4.1)
![Page 5: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/5.jpg)
Contoh :Contoh :
Perhatikan gambar di bawah iniPerhatikan gambar di bawah ini
(w.l,w.r,w.t,w.b)= (0,2.0, 0, 1.0) dan (v.l, v.r,(w.l,w.r,w.t,w.b)= (0,2.0, 0, 1.0) dan (v.l, v.r,
v.t, v.b) = (40, 400, 60, 300).v.t, v.b) = (40, 400, 60, 300).
(4.2)
![Page 6: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/6.jpg)
Dengan menggunakan rumus 4.1 dan 4.2 diperolehA= 180, C = 40, B = 240 dan D = 60Sehingga pemetaan dari world ke viewport menggunakan persamaan berikut ini.sx= 180x + 40sy= 240y + 60
Gambar 4.3. Contoh pemetaan Window dan Viewport
![Page 7: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/7.jpg)
Dalam OpenGL, pemetaan tersebut dinyatakanDalam OpenGL, pemetaan tersebut dinyatakandengan:dengan:
glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);glLoadIdentity();glLoadIdentity();gluOrtho2D(0.0, 2.0, 0.0, 2.0); gluOrtho2D(0.0, 2.0, 0.0, 2.0);
// mengatur window// mengatur windowglViewport(40, 60, 360, 240);glViewport(40, 60, 360, 240);
// mengatur viewport// mengatur viewport
Kalau anda perhatikan pada contoh-contoh programKalau anda perhatikan pada contoh-contoh programmateri 2, perintah-perintah ini adalah bagian darimateri 2, perintah-perintah ini adalah bagian darifungsi init().fungsi init().
![Page 8: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/8.jpg)
LATIHAN :LATIHAN :
Buatlah Buatlah program untuk program untuk menampilkan menampilkan konfigurasi konfigurasi hexagon (6-hexagon (6-gon/segi enam) gon/segi enam) seperti gambar seperti gambar di bawah ini.di bawah ini.
![Page 9: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/9.jpg)
TRY TRY THIS…THIS…#include <windows.h>#include <windows.h>
#include <gl/gl.h>#include <gl/gl.h>#include <gl/glut.h>#include <gl/glut.h>#include <math.h>#include <math.h>
void myInit(void)void myInit(void){{
glClearColor(1.0, 1.0, 1.0, 0.0);glClearColor(1.0, 1.0, 1.0, 0.0);glColor3f(0.0f, 0.0f, 0.0f);glColor3f(0.0f, 0.0f, 0.0f);glMatrixMode(GL_PROJECTION);glMatrixMode(GL_PROJECTION);glPointSize(4.0);glPointSize(4.0);glLoadIdentity();glLoadIdentity();gluOrtho2D(0.0, 500.0, 0.0, 500.0);gluOrtho2D(0.0, 500.0, 0.0, 500.0);
}}
![Page 10: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/10.jpg)
void ngon(int n, float cx, float cy, float radius, float rotAngel)void ngon(int n, float cx, float cy, float radius, float rotAngel){{
double angel, angelInc;double angel, angelInc;
int k;int k;if(n<3) return;if(n<3) return;angel = rotAngel * 3.14159265/180;angel = rotAngel * 3.14159265/180;angelInc = 2 * 3.14159265/n;angelInc = 2 * 3.14159265/n;glVertex2f(radius * cos(angel)+cx, radius * sin(angel) +cy);glVertex2f(radius * cos(angel)+cx, radius * sin(angel) +cy);for (k=0; k<n;k++)for (k=0; k<n;k++){{
angel+=angelInc;angel+=angelInc;glVertex2f(radius * cos(angel)+cx, radius * sin(angel) +cy);glVertex2f(radius * cos(angel)+cx, radius * sin(angel) +cy);
}}}}
![Page 11: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/11.jpg)
void myDisplay(void){void myDisplay(void){glClear(GL_COLOR_BUFFER_BIT);glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_LINE_STRIP);glBegin(GL_LINE_STRIP);ngon(6,250,250,150,90);ngon(6,250,250,150,90);glEnd();glEnd();glFlush();}glFlush();}
void main(int argc, char** argv){void main(int argc, char** argv){glutInit(&argc, argv);glutInit(&argc, argv);glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);glutInitWindowSize(500,500);glutInitWindowSize(500,500);glutCreateWindow(" TUGAS");glutCreateWindow(" TUGAS");glutDisplayFunc(myDisplay);glutDisplayFunc(myDisplay);myInit();myInit();glutMainLoop();glutMainLoop();
}}
![Page 12: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/12.jpg)
TUGAS:TUGAS: Modifikasilah rumus n-gon diatas sehingga Modifikasilah rumus n-gon diatas sehingga
menjadi seperti di bawah inimenjadi seperti di bawah ini
![Page 13: BAB 4 Tools untuk Menggambar : Window dan viewport](https://reader033.vdocuments.mx/reader033/viewer/2022061617/568151eb550346895dc024cf/html5/thumbnails/13.jpg)
TUGASTUGAS