GLFW02 Window, Sistem Koordinat, dan Objek 2 Dimensi - auziasfarian/CG-IPB GitHub Wiki

PRAKTIKUM GRAFIKA KOMPUTER

Pertemuan 2 : Window, Sistem Koordinat, dan Objek 2 Dimensi

Window

Window adalah canvas untuk menempatkan objek. Fungsi untuk memunculkan window dapat ditulis sebagai berikut :

#include <GLFW/glfw3.h>
#include <stdlib.h>
#include <stdio.h>

    static void error_callback(int error, const char* description) {
      fputs(description, stderr);
    }
    static void key_callback(GLFWwindow* window, int key, int scancode, int action, int mods){
      if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
      glfwSetWindowShouldClose(window, GL_TRUE);
    }

 int main(void) {
        //Window
        GLFWwindow* window;
        glfwSetErrorCallback(error_callback);

        if (!glfwInit())exit(EXIT_FAILURE);
        window = glfwCreateWindow(640, 480, "Simple Example", NULL, NULL);

        if (!window){
          glfwTerminate();
          exit(EXIT_FAILURE);
        }

        glfwMakeContextCurrent(window);
        glfwSwapInterval(1);
        glfwSetKeyCallback(window, key_callback);

        while (!glfwWindowShouldClose(window)){
          int width, height;
          glfwGetFramebufferSize(window, &width, &height);
          glViewport(0, 0, width, height);
          //fungsi untuk menampilkan objek
          glfwSwapBuffers(window);
          glfwPollEvents();
        }

    //Fungsi Exit
    glfwDestroyWindow(window);
    glfwTerminate();
    exit(EXIT_SUCCESS);
 }

Untuk mengatur ukuran window yang ingin ditampilkan maka window dapat didefinisikan dengan glfwCreateWindow. Parameter pertama dan kedua adalah panjang dan lebar window sementara parameter ketiga adalah judul dari window yang ditampilkan.

window = glfwCreateWindow(800, 800, "Judul Window", NULL, NULL);

Sedangkan untuk mengatur titik awal penghitungan koordinat objek dimulai dapat dilakukan dengan glViewport. Dua parameter pertama glViewport mengatur lokasi sudut kiri bawah window. Parameter ketiga dan keempat mengatur lebar dan tinggi window dan umumnya sama dengan ukuran window GLFW.

glViewport(0, 0, width, height);

Fungsi untuk setup viewport dapat ditulis sebagai berikut :

void setup_viewport(GLFWwindow* window)
{
    // setting viewports size, projection etc
    float ratio;
    int width, height;
    glfwGetFramebufferSize(window, &width, &height);
    ratio = width / (float) height;
    glViewport(0, 0, width, height);

    glClear(GL_COLOR_BUFFER_BIT);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0, 800, 800, 0, 1.f, -1.f);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
}

Fungsi display berfungsi untuk mengatur warna backgrpund dari window yang ditampilkan. Fungsi display dapat ditulis sebagai berikut:

    void display()
    {
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f); //warna background
    glClear(GL_COLOR_BUFFER_BIT);
    glFlush();
    }

Fungsi setup_viewport dan display dapat dipanggil dalam fungsi main

      while (!glfwWindowShouldClose(window)){
           setup_viewport(window);
           display();
           glfwSwapBuffers(window);
           glfwPollEvents();
       }

Sistem Koordinat

Default yang ditetapkan pada glfw untuk titik koordinat (0,0) berada di tengah. Untuk mengubahnya kita bisa mengatur dengan glViewport.

  • Untuk membuat suatu objek diawali dengan glBegin() dan diakhiri dengan glEnd().
  • Untuk memberi warna pada objek bisa dilakukan dengan glColor3d() atau glColor3ub() dan berisi value RGB dari warna yang diinginkan.
  • Membuat fungsi grid

Objek 2 Dimensi

  • Untuk membuat objek 2 dimensi dapat dilakukan dengan glVertex2f() atau glVertex2d()
  • Parameter pertama adalah titik koordinat x dan parameter kedua adalah titik koordinat y.

Contoh : Membuat segitiga berwarna hijau

glBegin(GL_TRIANGLES);
glColor3d(0, 255, 0);
glVertex2d(400, 200);
glVertex2d(600, 500);
glVertex2d(200, 500);
glEnd();

Contoh GL_LINE_LOOP

void display()  {
  glClear(GL_COLOR_BUFFER_BIT);
  glColor3f(0.0, 1.0, 0.0);
  
  glBegin(GL_LINE_LOOP);
  glVertex2d(400, 200);
  glVertex2d(600, 200);
  glVertex2d(600, 500);
  glVertex2d(200, 500);
  glEnd();
  
  glFlush();
}

LATIHAN

Coba buat 8 titik dengan menggunakan fungsi yang berbeda-beda yaitu

  • GL_POINTS
  • GL_LINES
  • GL_LINE_STRIP
  • GL_LINE_LOOP
  • GL_TRIANGLES
  • GL_TRIANGLE_STRIP
  • GL_TRIANGLE_FAN
  • GL_QUADS
  • GL_QUAD STRIP
  • GL_POLYGON Temukan perbedaan dari fungsi-fungsi tersebut!
⚠️ **GitHub.com Fallback** ⚠️