pertemuan 03 grafika komputer windows dan viewport n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Pertemuan 03: Grafika Komputer: Windows dan Viewport PowerPoint Presentation
Download Presentation
Pertemuan 03: Grafika Komputer: Windows dan Viewport

Loading in 2 Seconds...

play fullscreen
1 / 78

Pertemuan 03: Grafika Komputer: Windows dan Viewport - PowerPoint PPT Presentation


  • 221 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Pertemuan 03: Grafika Komputer: Windows dan Viewport' - ashton-rojas


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
pertemuan 03 grafika komputer windows dan viewport

Prodi Teknik Informatika

Fakultas Teknologi Industri

Universitas Atma Jaya Yogyakarta

Pertemuan 03: Grafika Komputer:Windows dan Viewport

Dr. Suyoto

agenda
Agenda
  • Windows, Viewports dan Pemotongan
  • Grafik Kura-kura
  • Poligon Teratur
  • Lingkaran dan Busur
  • Kurva Parametrik
  • Koordinat Polar
fungsi yang b erguna
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);

}

slide4
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
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
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 window1
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 window2
Setting Window
  • Program membutuhkan melalukan data dua kali::
    • Eksekusi rutin penggambaran, tetapi tidak melakukan penggambaran.
    • Eksekusi rutin penggambaran sekali lagi, tetapi inilah saatnya untuk menggambar!
set viewport
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
set viewport1
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 viewport2
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 viewport3
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
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 viewport1
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 viewport2
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);

}

agenda1
Agenda
  • Windows, Viewports dan Pemotongan
  • Pembuatan tool Penggambar yang Berguna.
  • Grafik Kura-kura
windows dan viewports1
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 negatif.
windows dan viewports2
Windows dan Viewports
  • Untuk itu kita perlu membedakan koordinat dunia, koordinat layar dan koordinat viewport.
  • Ini seperti….
windows dan viewports3

Jendela dunia (bagian kecil yang kita inginkan)

Layar

Jendela Layar

Viewport

Windows dan Viewports

Dunia (apa yang kita lihat senyatanya)

windows dan viewports4
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 membuatnya cocok.
windows dan viewports6

Jendela dunia

Ini disebut pemetaan

Windows dan Viewports

Viewport

(0,0)

(100,0)

(0,0)

(100,0)

windows dan viewports7
Windows dan Viewports
  • x’ = Ax + B dan y’ = Cy + D
  • Ini dibutuhkan untuk pemetaan.
windows dan viewports8
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 viewports9
Windows dan Viewports

V.t = Viewport atas

V.l = Viewport kiri

V.b = Viewport bawah

V.r = Viewport kanan

W.t = Window atas

W.l = Window kiri

W.b = Window bawah

W.r = Window kanan

windows dan viewports10
Windows dan Viewports

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

SCREENWIDTH = V.r – V.l

SCREENHEIGHT = V.t – V.b

windows dan viewports11

dx

dsx

Windows dan Viewports
  • 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:
windows dan viewports12

C

A

Windows dan Viewports
  • Jadi:
  • Atau disusun kembali menjadi:
windows dan viewports13

D

B

Windows dan Viewports
  • Dengan cara yang sama untuk y:
  • Atau disusun kembali menjadi:
windows dan viewports14

Jendela dunia

Viewport

400

(10,6)

0

(-10,-6)

600

0

Windows dan Viewports

Contoh

Berapakah A, B, C & D ??

World Window

Viewport

windows dan viewports15
Windows dan Viewports

Viewport

Jendela dunia

400

Contoh

(10,6)

0

(-10,-6)

0

600

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

A = 600/20 = 30

B = 400/12 = 33.3333

C = 0 – 30 * -10 = 300

D = 0 – 33.3333 * -6 = 200

windows dan viewports16
Windows dan Viewports
  • Apakah kita memerlukan perhitungan seperti ini setiap waktu dengan OpenGL??
windows dan viewports17
Windows dan Viewports
  • Tidak
  • OpenGL melakukannya untuk kita
  • Tetapi yang paling penting adalah kita paham apa yang sedang terjadi…..
windows dan viewports18
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 viewports19
Windows dan Viewports
  • 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);

windows dan viewports20
Windows dan Viewports

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

}

windows dan viewports21
Windows dan Viewports

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
  • 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
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 kura1
Grafik Kura-kura

Contoh: Polispiral

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

{

terusLurus(panjang, 1);

putarKe(sudut*i);

panjang += inc;

}

grafik kura kura2
Grafik Kura-kura

Contoh: Polispiral

float sudut = 87, inc = 0.05;

grafik kura kura3
Grafik Kura-kura

Contoh: Polispiral

float sudut = 170, inc = 0.1;

grafik kura kura4
Grafik Kura-kura

Contoh: Polispiral

float sudut = 89.5, inc = 0.1;

poligon teratur
Poligon Teratur

Berikut merupakan contoh poligon teratur.

poligon teratur1
Poligon Teratur
  • Untuk menggambar poligon teratur dibutuhkan titik pusat, jejari dan sudut rotasi.
poligon teratur2
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);

}

}

poligon teratur3
Poligon Teratur

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

}

lingkaran dan busur1
Lingkaran dan Busur
  • Untuk melukis busur atau lingkaran dibutuhkan titik pusat, sudut awal (a) dan sudut busur (b).
lingkaran dan busur2
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));

}

lingkaran dan busur3
Lingkaran dan Busur

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
Latihan: Lingkaran dan Busur

Putar: airmata

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

kurva parametrik
Kurva Parametrik

Sebuah kurva dapat dinyatakan:

  • 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 parametrik1
Kurva Parametrik
  • F(x,y) = x2 + y2 - R2
  • F(x,y) < 0 (didalam)
kurva parametrik2
Kurva Parametrik
  • F(x,y) = x2 + y2 - R2
  • F(x,y) > 0 (diluar)
kurva parametrik3
Kurva Parametrik
  • F(x,y) = x2 + y2 - R2
  • F(x,y) = 0

(pada lingkaran)

kurva parametrik4
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
kurva parametrik5
Kurva Parametrik

Nilai tunggal dalam x

Nilai tunggal dalam y

kurva parametrik6
Kurva Parametrik

Kurva dapat digambarkan:

  • Secara Parametrik
    • Titik berbeda pada sebuah kurva dihasilkan untuk semuah parameter.
    • Nilai parameter menyarankan pergerakan titik pada kurva seturut dengan waktu yang berjalan.
kurva parametrik14
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 parametrik15
Kurva Parametrik

Contoh:

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

B

t=1

A

t=0

kurva parametrik16
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.

B

t=1

A

t=0

kurva parametrik17
Kurva Parametrik

Contoh: Elips

H * sin(t)

W * cos(t)

kurva parametrik18
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();

glPopMatrix();

koordinat polar
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 polar1
Koordinat Polar
  • Untuk masing-masing titik x dan y dapat disederhanakan:
    • x = f(θ)cos(θ)
    • y = f(θ)sin(θ)
koordinat polar2
Koordinat Polar

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

drawPolar(center, 230, 3);

glEnd();