Langsung ke konten utama

Komputer Grafik

Gambar
Oleh
Grafika komputer adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D yang kemudian berkembang menjadi grafika komputer 3D, pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Grafika komputer sering dikenal juga dengan istilah visualisasi data.

Soal:
  1. Buatlah suatu program animasi berbasis OpenGL yang hanya memanfaatkan primitif grafika yang tersedia di OpenGL (points, lines, line_loop, line_strip, polygon, dll). Animasi bebas, merupakan kreativitas anda.
#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
#include <stdlib.h>

static GLfloat spin= 0.0; 
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);  //Berwarna Putih
glShadeModel (GL_FLAT);
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glRotatef(spin, 0.0, 0.0, 1.0);  //untuk menjalankan rotasi persegi
glColor3f(1.0, 1.0, 1.0);  //Warna
glRectf(-25.0, -25.0, 25.0, 25.0);
glPopMatrix();
glutSwapBuffers();
}

void spinDisplay(void)   //untuk memutarkan persegi
{
spin = spin + 2.0;
if (spin > 360.0)
spin = spin - 360.0;
glutPostRedisplay();
}


void reshape(int w, int h)
{
glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

void mouse(int button, int state, int x, int y)  //Menjalankan menggunakan klik button
{
switch (button) {
case GLUT_LEFT_BUTTON:
if (state == GLUT_DOWN)
glutIdleFunc(spinDisplay);  //Biar spin muncul di output, tanpa spinDislay gambar hilang
break;
case GLUT_MIDDLE_BUTTON:
if (state == GLUT_DOWN)
glutIdleFunc(NULL);
break;
default:
break;
}
}


int main(int argc, char** argv) //Funsi Utama
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (250, 250); //Ukuran Layar Window
glutInitWindowPosition (100, 100); //Posisi pada layar
glutCreateWindow ("UTS | No.1 - 111 0511 048 | Syamsul Amin"); //nama judul window
init ();
glutDisplayFunc(display); //Menampilkan Output
glutReshapeFunc(reshape);  //
glutMouseFunc(mouse); //berfungsi untuk menjalankan dari Mouse
glutMainLoop();  //Ketika output tampil ada maka akan Loop
return 0;
}#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
#include <stdlib.h>

static GLfloat spin= 0.0; 
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);  //Berwarna Putih
glShadeModel (GL_FLAT);
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glRotatef(spin, 0.0, 0.0, 1.0);  //untuk menjalankan rotasi persegi
glColor3f(1.0, 1.0, 1.0);  //Warna
glRectf(-25.0, -25.0, 25.0, 25.0);
glPopMatrix();
glutSwapBuffers();
}

void spinDisplay(void)   //untuk memutarkan persegi
{
spin = spin + 2.0;
if (spin > 360.0)
spin = spin - 360.0;
glutPostRedisplay();
}


void reshape(int w, int h)
{
glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

void mouse(int button, int state, int x, int y)  //Menjalankan menggunakan klik button
{
switch (button) {
case GLUT_LEFT_BUTTON:
if (state == GLUT_DOWN)
glutIdleFunc(spinDisplay);  //Biar spin muncul di output, tanpa spinDislay gambar hilang
break;
case GLUT_MIDDLE_BUTTON:
if (state == GLUT_DOWN)
glutIdleFunc(NULL);
break;
default:
break;
}
}


int main(int argc, char** argv) //Funsi Utama
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (250, 250); //Ukuran Layar Window
glutInitWindowPosition (100, 100); //Posisi pada layar
glutCreateWindow ("UTS | No.1 - 111 0511 048 | Syamsul Amin"); //nama judul window
init ();
glutDisplayFunc(display); //Menampilkan Output
glutReshapeFunc(reshape);  //
glutMouseFunc(mouse); //berfungsi untuk menjalankan dari Mouse
glutMainLoop();  //Ketika output tampil ada maka akan Loop
return 0;
}
2.  Buatlah Program 26 posisi kamera
#include<stdlib.h>
#include<ctype.h>
#include<GL/glut.h>
#include<GL/gl.h>
#include<math.h>

/*Deklarasi Variable*/
static GLfloat rot_y, rot_x;
static GLfloat bgn_y, bgn_x;
static int mouse_x, mouse_y;
static GLuint cubelist;

/*Fungsi Tempat Menampilkan*/
void display_func(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glClearColor(1.0,1.0,1.0,1.0);
glPushMatrix();
glTranslatef(0.0, 0.0, -15.0);
glRotatef(rot_x, 1.0, 0.0, 0.0);
glRotatef(rot_y, 0.0, 1.0, 0.0);
glCallList(cubelist);
glPopMatrix();
glutSwapBuffers();
}

/*Fungsi Membuat Lingkaran*/
void drawCircle( float Radius, int numPoints )
{
glBegin( GL_LINE_STRIP );
int i; float PI= 3.14;
for(i=0; i<numPoints; i++ )
{
float Angle = i * (2.0*PI/numPoints); // use 360 instead of 2.0*PI if
float X = cos( Angle )*Radius;        // you use d_cos and d_sin
float Y = sin( Angle )*Radius;
glVertex2f( X, Y);
}
glEnd();
}

/*Fungsi Membuat BangunRuang*/
GLuint make_cube(void)
{
GLint list;
/*Kumpulan Titik Kordinat*/
static GLfloat vert[][4]={
{ 2.0,  2.0,  4.0}, //0
{ 0.0,  2.0,  4.0}, //1
{-2.0,  2.0,  4.0}, //2
{ 2.0,  0.0,  4.0}, //3
{ 0.0,  0.0,  4.0}, //4
{-2.0,  0.0,  4.0}, //5
{ 2.0, -2.0,  4.0}, //6
{ 0.0, -2.0,  4.0}, //7
{-2.0, -2.0,  4.0}, //8
{ 2.0,  2.0, -4.0}, //9
{ 0.0,  2.0, -4.0}, //10
{-2.0,  2.0, -4.0}, //11
{ 2.0,  0.0, -4.0}, //12
{ 0.0,  0.0, -4.0}, //13
{-2.0,  0.0, -4.0}, //14
{ 2.0, -2.0, -4.0}, //15
{ 0.0, -2.0, -4.0}, //16
{-2.0, -2.0, -4.0}, //17
{ 2.0,  2.0,  0.0}, //18
{ 0.0,  2.0,  0.0}, //19
{-2.0,  2.0,  0.0}, //20
{ 2.0,  0.0,  0.0}, //21
{ 0.0,  0.0,  0.0}, //22
{-2.0,  0.0,  0.0}, //23
{ 2.0, -2.0,  0.0}, //24
{ 0.0, -2.0,  0.0}, //25
{-2.0, -2.0,  0.0}, //26
};

/*Kumpulan Warna*/
static GLfloat color[][4]={
{1.0, 0.0, 0.0, 0.0},
{0.0, 1.0, 0.0, 0.0},
{0.0, 0.0, 1.0, 0.0},
{0.0, 1.0, 1.0, 0.0},
{1.0, 0.0, 1.0, 0.0},
{1.0, 1.0, 0.0, 0.0},
{0.0, 0.0, 0.0, 0.0},
};


list=glGenLists(1);
glNewList(list, GL_COMPILE);

/*Memanggil Fungsi Membuat Lingkaran*/
drawCircle(1, 360);

/*Membuat Rangka BangunRuang*/
glBegin(GL_LINES);
glColor3fv(color[6]);
//Merah
//Garis Horizontal
glVertex3fv(vert[0]);
glVertex3fv(vert[2]);
glVertex3fv(vert[3]);
glVertex3fv(vert[5]);
glVertex3fv(vert[6]);
glVertex3fv(vert[8]);
//Garis Vertikal
glVertex3fv(vert[0]);
glVertex3fv(vert[6]);
glVertex3fv(vert[2]);
glVertex3fv(vert[8]);
glVertex3fv(vert[1]);
glVertex3fv(vert[7]);
//Biru
//Garis Horizontal
glVertex3fv(vert[9]);
glVertex3fv(vert[11]);
glVertex3fv(vert[12]);
glVertex3fv(vert[14]);
glVertex3fv(vert[15]);
glVertex3fv(vert[17]);
//Garis Vertikal
glVertex3fv(vert[9]);
glVertex3fv(vert[15]);
glVertex3fv(vert[11]);
glVertex3fv(vert[17]);
glVertex3fv(vert[10]);
glVertex3fv(vert[16]);
//Hijau
//Garis Horizontal
glVertex3fv(vert[18]);
glVertex3fv(vert[20]);
glVertex3fv(vert[21]);
glVertex3fv(vert[23]);
glVertex3fv(vert[24]);
glVertex3fv(vert[26]);
//Garis Vertikal
glVertex3fv(vert[18]);
glVertex3fv(vert[24]);
glVertex3fv(vert[20]);
glVertex3fv(vert[26]);
glVertex3fv(vert[19]);
glVertex3fv(vert[25]);
//Garis Penghubung
glVertex3fv(vert[0]);
glVertex3fv(vert[9]);
glVertex3fv(vert[1]);
glVertex3fv(vert[10]);
glVertex3fv(vert[2]);
glVertex3fv(vert[11]);
glVertex3fv(vert[3]);
glVertex3fv(vert[12]);
glVertex3fv(vert[4]);
glVertex3fv(vert[13]);
glVertex3fv(vert[5]);
glVertex3fv(vert[14]);
glVertex3fv(vert[6]);
glVertex3fv(vert[15]);
glVertex3fv(vert[7]);
glVertex3fv(vert[16]);
glVertex3fv(vert[8]);
glVertex3fv(vert[17]);
glEnd();
glBegin(GL_POINTS);
//Titik Merah
glColor3fv(color[0]);
glVertex3fv(vert[0]);
glVertex3fv(vert[1]);
glVertex3fv(vert[2]);
glVertex3fv(vert[3]);
glVertex3fv(vert[4]);
glVertex3fv(vert[5]);
glVertex3fv(vert[6]);
glVertex3fv(vert[7]);
glVertex3fv(vert[8]);
//Titik Biru
glColor3fv(color[2]);
glVertex3fv(vert[9]);
glVertex3fv(vert[10]);
glVertex3fv(vert[11]);
glVertex3fv(vert[12]);
glVertex3fv(vert[13]);
glVertex3fv(vert[14]);
glVertex3fv(vert[15]);
glVertex3fv(vert[16]);
glVertex3fv(vert[17]);
//Titik Hijau
glColor3fv(color[1]);
glVertex3fv(vert[18]);
glVertex3fv(vert[19]);
glVertex3fv(vert[20]);
glVertex3fv(vert[21]);
glVertex3fv(vert[22]);
glVertex3fv(vert[23]);
glVertex3fv(vert[24]);
glVertex3fv(vert[25]);
glVertex3fv(vert[26]);
glEnd();
glPointSize(10); //Ukuran Titik
glEndList();
return list;
}

/*Fungsi Mengatur BangunRuang*/
void reshape_func(int width, int height)
{
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glFrustum(-1.0, 1.0, -1.0, 1.0, 3.0, 10000.0);
glMatrixMode(GL_MODELVIEW);
}

/*Fungsi Mouse Ketika di-Klik*/
void mouse_func(int button, int stat, int x, int y)
{
if(GLUT_DOWN==stat && GLUT_LEFT==button){
mouse_x=x;
mouse_y=y;
bgn_y=rot_y;
bgn_x=rot_x;
}
}

/*Fungsi Ketika di-Drag*/
void drag_func(int x, int y)
{
rot_x=(GLfloat)(y-mouse_y)+bgn_x;
rot_y=(GLfloat)(x-mouse_x)+bgn_y;
if(90<rot_x)
{
rot_x=90;
}
if(rot_x<-90)
{
rot_x=-90;
}
glutPostRedisplay();
}

/*Fungsi Ketika Keyboard 'Q' di Tekan*/
void key_func(unsigned char key, int x, int y)
{
switch(toupper(key)){
case 0x1b:
case 'Q':
exit(0);
break;
}
}

/*Fungsi Ketika Keyboard Arah di Tekan*/
void skey_func(int key, int x, int y)
{
switch(key){
case GLUT_KEY_UP:
if(rot_x<90){
rot_x+=10;
}
break;
case GLUT_KEY_DOWN:
if(-90<rot_x){
rot_x-=10;
}
break;
case GLUT_KEY_LEFT:
rot_y+=10;
break;
case GLUT_KEY_RIGHT:
rot_y-=10;
break;
}
glutPostRedisplay();
}


/*Main Func*/
int main(int argc, char *argv[])
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowSize(500,500); //Ukuran Layar Window
glutCreateWindow("UTS | 26 Posisi Kamera - 111 0511 048 | Syamsul Amin"); //Nama Judul Window
glutDisplayFunc(display_func); //Ambil Fungsi Tempat Menampilkan
glutReshapeFunc(reshape_func); //Ambil Fungsi Mengatur BangunRuang
glutKeyboardFunc(key_func); //Ambil Fungsi Ketika Keyboard 'Q' di Tekan
glutSpecialFunc(skey_func); //Ambil Fungsi Ketika Keyboard Arah di Tekan
glutMotionFunc(drag_func); //Ambil Fungsi Ketika di-Drag
glutMouseFunc(mouse_func); //Ambil Fungsi Ketika di-Klik
glEnable(GL_DEPTH_TEST);
cubelist=make_cube();
glutMainLoop();

return 0;
}

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa itu API

Oleh
Bagaimana membuat aplikasi atau website dengan performa yang baik? Bagaimana membuat website yang mudah dikembangkan di berbagai platform? Bagaimana mengintegrasikan website dengan aplikasi yang berbeda bahasa pemrograman? Jawabannya adalah dengan membuat API. Untuk membuat API, arsitektur yang paling populer yaitu RESTful API.   Pada tutorial kali ini saya akan sharing bagaimana membuat RESTful API menggunakan node.js, express, dan MySQL secara step by step. Api itu RESTful API? RESTful API  merupakan implementasi dari API  ( Application Programming Interface ). REST (REpresentational State Transfer) adalah suatu arsitektur metode komunikasi yang menggunakan protocol HTTP untuk pertukaran data dan metode ini sering diterapkan dalam pengembangan aplikasi. Mungkin terdengar rumit tapi sebenarnya tidak. Tujuannya untuk menjadikan system dengan performa yang baik, cepat, dan mudah untuk dikembangkan ( scale ) terutama dalam pertukaran dan komunikasi data...
Posting Komentar
Baca selengkapnya

Arsitektur & Organisasi Komputer

Oleh
    Arsitektur Komputer  Dalam bidang teknik komputer, arsitektur komputer adalah konsep perencanaan dan struktur pengoperasian dasar dari suatu sistem komputer. Arsitektur komputer ini merupakan rencana cetak-biru dan deskripsi fungsional dari kebutuhan bagian perangkat keras yang didesain (kecepatan proses dan sistem interkoneksinya). Dalam hal ini, implementasi perencanaan dari masing–masing bagian akan lebih difokuskan terutama, mengenai bagaimana CPU akan bekerja, dan mengenai cara pengaksesan data dan alamat dari dan ke memori cache, RAM, ROM, cakram keras, dll). Beberapa contoh dari arsitektur komputer ini adalah arsitektur von Neumann, CISC, RISC, blue Gene, dll.     Arsitektur komputer juga dapat didefinisikan dan dikategorikan sebagai ilmu dan sekaligus seni mengenai cara interkoneksi komponen-komponen perangkat keras untuk dapat menciptakan sebuah komputer yang memenuhi kebutuhan fungsional, kinerja, dan target biayanya. Arsitektur komputer ini...
Posting Komentar
Baca selengkapnya

How to use CKEditor in Nuxt Js

Oleh
Requirement:  Node 14.18.3 NPM 6.14.15 Yarn 1.22.4 yarn add @ckeditor/ckeditor5-vue@23.0.0 yarn add @blowstack/ckeditor5-full-free-build@1.0.2 // plugins/ckeditor.vue import Vue from ' vue ' import CKEditor from ' @ckeditor/ckeditor5-vue ' Vue . use ( CKEditor ) // components/CkEditor.vue < template > < ckeditor : editor = " editor " : value = " value " : config = " config " @ input = " ( event ) => $emit ( ' input ' , event) " /> </ template > < script > let FullFreeBuildEditor; let CKEditor; if (process . client ) { FullFreeBuildEditor = require ( ' @blowstack/ckeditor5-full-free-build ' ); CKEditor = require ( ' @ckeditor/ckeditor5-vue ' ); } else { CKEditor = { component: { template: ' <div></div> ' } }; } export default { name: ' CkEditor ' , components: { ckeditor: CKEditor . component , }, p...
Posting Komentar
Baca selengkapnya