Membuat Objek 2D Pada Python
Kali ini saya
mengerjakan kuis untuk membuat object 2D dengan menggunakan openGL. Disini objek
yang saya gambar tidak berbentuk jelas atau gambar abstrak. Pada program yang
saya buat ini akan mencakup beberapa fungsi yaitu : scalling, tombol mouse, rotasi,
tombol keyboard, translasi.
Langsung saja kita mulai pada
penjelasan program :
Yang harus
dilakukan pertama kali adalah inisialisasi modul yang dipakai pada praktek kali
ini.
from
OpenGLContext import testingcontext
from
random import randrange
from
OpenGL.GL import *
from
OpenGL.GLU import *
from
OpenGL.GLUT import *
Selanjutnya
inisialisasi variable dan warna untuk teks, background, dan warna objek.
#
Variable Kooridinat Posisi objek
pos_x
= 0
pos_y
= 0
#
Variable Koordinat Posisi Kotak
koor_x
= 0
koor_y
= 0
#
Warna Kotak
kt_red
= 24
kt_green
= 101
kt_blue
= 164
#
Warna Background
bg_red
= 24
bg_green
= 101
bg_blue
= 164
#
Warna Teks
teks_merah
= 1
teks_hijau
= 1
teks_biru
= 1
#
Teks Warna Objek
teks_lampu
= "OFF"
#
Rotation
rotation
= 1.0
#
Zoom
zoom_x
= 1.0
zoom_y
= 1.0
#
Cahaya Lampu
light_red
= 24
light_green
= 101
light_blue
= 164
#
Poin
point
= 0
Selanjutnya
mendefinisikan window dimana didalamnya terdapat glClearColor dan gluOrtho2D.
pada glClearColor kita harus menentukan warna background pada layar dan
gluOrtho2D adalah untuk penempatan koordinat objek.
def
init():
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
gluOrtho2D(-500.0, 500.0, -500.0, 500.0)
Lalu buat fungsi
convert_rgb untuk mengkonversi nilai warna rgb menjadi warna yang ada pada openGL.
def
convert_rgb(c):
return c / 255.0
Selanjutnya untuk membuat text pada layar dan juga menentukan
font apa yang kan digunakan serta ukuran font, maka gunakan program sebagai
berikut :
def
drawBitmapText(string,x,y,z) :
glRasterPos3f(x,y,z)
for c in string :
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_18,ord(c))
def
reshape(w, h):
glViewport(0,0,w,h)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(0,w,h,0)
glMatrixMode(GL_MODELVIEW)
glLoadIdentity()
Program diatas
belum dapat ditampilkan pada layar output, maka dari itu kita harus membuat
fungsi berikut ini yang gunanya untuk menampilkan gambar pada layar output.
def
drawText():
glColor3f(teks_merah,teks_hijau,teks_biru)
# Petunjuk
drawBitmapText("GAMBAR :
",-460,440,0)
drawBitmapText("Absurd",-460,400,0)
# Informasi dan Kontrol
drawBitmapText("Controls
:",-460,-200,0)
drawBitmapText("Untuk Scaling Tekan
a/s ",-460,-240,0)
drawBitmapText("Untuk rotasi z/x
",-460,-280,0)
drawBitmapText("Information : "
,-460,-320,0)
drawBitmapText("Ganti Warna Klik Mouse
Kanan dan Kiri",-460,-360,0)
drawBitmapText("Untuk Menjalankan
Objek Tekan Keyboard => KEY UP, KEY DOWN, KEY RIGHT, KEY LEFT "
,-460,-400,0)
drawBitmapText("Poin => " +
str(point),-460,-440,0)
drawBitmapText("Lampu => " +
teks_lampu,-460,-480,0)
Lalu buat kotak
background dengan kode sebagai berikut :
def
kotak():
glBegin(GL_POLYGON)
glColor3f(convert_rgb(kt_red),convert_rgb(kt_green),convert_rgb(kt_blue))
glVertex2f(-50 + koor_x,-50 + koor_y)
glVertex2f(50 + koor_x,-50 + koor_y)
glVertex2f(50 + koor_x,50 + koor_y)
glVertex2f(-50 + koor_x, 50 + koor_y)
glEnd()
lalu buat objek utama dari program
ini, kita harus menentukan titik awal dan titik akhir dari setiap garis yang
akan Digambar. Sehingga apabila garis-garis tersebut digabung saling menyambung
satu sama lain maka akan terbentuk lah sebuah objek.
def
shape():
# Untuk Mengatur Scalling / Zooming objek
glScalef(zoom_x,zoom_y, 0.0)
# Untuk Mengatur Translasi / Pergerakan
objek
glTranslatef(pos_x,pos_y,0)
# Untuk Mengatur Rotation objek
glRotatef(rotation, 0.0, 0.0,1.0)
# Badan
glBegin(GL_POLYGON)
glColor3f(convert_rgb(200),convert_rgb(100),convert_rgb(100))
# Atas
glVertex2f(-200 ,100 )
glVertex2f(400 ,100 )
# Kanan
glVertex2f(-300 ,0 )
glVertex2f(-200 ,100 )
# Bawah
glVertex2f(-300 ,-100
)
# Kiri
glVertex2f(-300 ,0 )
glVertex2f(400 ,-100
)
glEnd()
# Lampu
glBegin(GL_POLYGON)
glColor3f(convert_rgb(229),convert_rgb(142),convert_rgb(38))
glVertex2f(-110 ,120 )
glVertex2f(-200 ,120 )
glVertex2f(-200 ,100 )
glVertex2f(-110 ,100 )
glVertex2f(-110 ,120 )
glEnd()
# Cahaya Lampu 1
glBegin(GL_POLYGON)
glColor3f(convert_rgb(light_red),convert_rgb(light_green),
convert_rgb(light_blue))
glVertex2f(-200 ,110 )
glVertex2f(-460 ,30)
glVertex2f(-460 ,200)
glVertex2f(-200 ,110)
glEnd()
# Cahaya Lampu2
glBegin(GL_POLYGON)
glColor3f(convert_rgb(light_red),convert_rgb(light_green),
convert_rgb(light_blue))
glVertex2f(-300 ,-62 )
glVertex2f(-450 ,-50)
glVertex2f(-450 ,-110)
glVertex2f(-300 ,-72)
glEnd()
Selanjutnya adalah
buat fungsi display untuk memanggil fungsi-fungsi yang telah dibuat dan agar
bentuk yang telah kita rangkai tadi bisa ditampilkan pada layar output.
def
display():
glClear(GL_COLOR_BUFFER_BIT)
# Deklarasi Bentuk Kapal Selam
glPushMatrix()
shape()
glPopMatrix()
# Deklarasi Bentuk Kotak
kotak()
# Deklarasi Teks
drawText()
glFlush()
Berikut ini adalah
fungsi untuk mendapatkan callback event handling pada mouse. Jadi apabila klik
kanan pada mouse akan berubah warna dan begitu juga sebaliknya.
def
input_mouse(button, state, x, y):
global merah, hijau, biru
global teks_lampu
global bg_red, bg_green, bg_blue
global light_red, light_green, light_blue
global kt_red, kt_green, kt_blue
# Jika Klik Kanan ditekan maka lampu akan
dimatikan
# dan warna background dan kotak akan
berubah
if button == GLUT_RIGHT_BUTTON and state ==
GLUT_DOWN:
light_red = 24
light_green = 101
light_blue = 164
# Warna Background
bg_red = 24
bg_green = 101
bg_blue = 164
# Warna Kotak
kt_red = 24
kt_green = 101
kt_blue = 164
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
teks_lampu = "OFF"
print("Klik Kanan ditekan ",
"(", x, ",", y, ")")
# Jika Klik Kiri ditekan maka lampu akan
menyala
# dan warna background dan kotak akan
berubah
elif button == GLUT_LEFT_BUTTON and state
== GLUT_DOWN:
light_red = 255.0
light_green = 255.0
light_blue = 0.0
# Warna Background
bg_red = 66
bg_green = 155
bg_blue = 227
# Warna Kotak
kt_red = 255
kt_green = 255
kt_blue = 255
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
teks_lampu = "ON"
print("Klik Kiri ditekan ",
"(", x, ",", y, ")")
Sama seperti di
atas namun bedanya code berikut ini ada pada keyboard. Keyboard yang dapat berfungsi
yaitu keyboard up untuk menggeser objek ke atas, keyboard down untuk menggeser
objek ke bawah, keyboard right untuk menggeser objek ke kanan, keyboard left
untuk menggeser objek ke kiri.
def
input_keyboard_special_func(key,x,y):
global pos_x, pos_y
global warna_background
global teks_merah, teks_hijau, teks_biru
# Untuk mengubah posisi objek dengan
menekan
# Tombol Key UP, Key DOWN, Key RIGHT, Key
LEFT
# saat ditekan nilai pada variable pos_x
dan pos_y
# akan berubah secara increment dan decremant
dengan pertambahan 20
if key == GLUT_KEY_UP:
pos_y += 20
print("Tombol Atas ditekan ",
"x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_DOWN:
pos_y -= 20
print("Tombol Bawah ditekan ",
"x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_RIGHT:
pos_x += 20
print("Tombol Kanan ditekan
", "x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_LEFT:
pos_x -= 20
print("Tombol Kiri ditekan ",
"x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
Code berikut ini
masih ada pada fungsi keyboard yaitu apabila menekan tombol a/A maka akan
merotasi objek dan apabila menekan tombol s/S akan merotasi objek ke arah
sebaliknya.
def
input_keyboard_func(key, x, y):
global zoom_x, zoom_y
global rotation
dk = key.decode("utf-8")
# Untuk mengatur Zoom In & Out
# Tekan tombol a / s
# Maka variable zoom_x dan zoom_y
# akan berubah secara increment dan
decrement
# dengan pertamban 0.1
if dk == 'a' or dk == 'A':
zoom_x += 0.1
zoom_y += 0.1
elif dk == 's' or dk == 'S':
zoom_x -= 0.1
zoom_y -= 0.1
# Untuk mengatur Rotasi ke kanan / kiri
# Tekan tombol z / x
# Maka variable rotation
# akan berubah secara increment dan
decrement
# dengan pertamban 10
elif dk == 'z' or dk == 'Z':
rotation -= 10
print(rotation)
elif dk == 'x' or dk == 'X':
rotation += 10
print(rotation)
def
update(value):
global koor_x, koor_y, pos_x, pos_y
global point
global kt
global kt_red, kt_green, kt_blue
# Untuk mengatur posisi kotak
# Secara Randaom
koor_x = randrange(-800,100)
koor_y = randrange(-100,800)
# Untuk mendapatkan Poin
# Ketika teks_lampu = ON
# atau nilai koor_x, koor_y sama dengan
pos_x, pos_y
if
teks_lampu == "ON":
if koor_x == pos_x or koor_y == pos_x:
point += 1
glutPostRedisplay()
glutTimerFunc(10,update,0)
def
main():
glutInit(sys.argv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowSize(800,600)
glutInitWindowPosition(100,100)
glutCreateWindow("LOKOMOTIF")
glutDisplayFunc(display)
glutSpecialFunc(input_keyboard_special_func)
glutKeyboardFunc(input_keyboard_func)
glutMouseFunc(input_mouse)
glutTimerFunc(50, update, 0)
init()
glutMainLoop()
Berikut adalah program keseluruhannya
:
#Kuis
Grafika Komputer (Alma Alfiatul Inayah || 17102050)
from
OpenGLContext import testingcontext
from
random import randrange
from
OpenGL.GL import *
from
OpenGL.GLU import *
from
OpenGL.GLUT import *
#
Variable Kooridinat Posisi objek
pos_x
= 0
pos_y
= 0
#
Variable Koordinat Posisi Kotak
koor_x
= 0
koor_y
= 0
#
Warna Kotak
kt_red
= 24
kt_green
= 101
kt_blue
= 164
#
Warna Background
bg_red
= 24
bg_green
= 101
bg_blue
= 164
#
Warna Teks
teks_merah
= 1
teks_hijau
= 1
teks_biru
= 1
#
Teks Warna Objek
teks_lampu
= "OFF"
#
Rotation
rotation
= 1.0
#
Zoom
zoom_x
= 1.0
zoom_y
= 1.0
#
Cahaya Lampu
light_red
= 24
light_green
= 101
light_blue
= 164
#
Poin
point
= 0
def
init():
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
gluOrtho2D(-500.0, 500.0, -500.0, 500.0)
#
Fungsi ini digunakan untuk konversi nilai kode warna rgb menjadi format warna
#
pada PyopenGL
def
convert_rgb(c):
return c / 255.0
def
drawBitmapText(string,x,y,z) :
glRasterPos3f(x,y,z)
for c in string :
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_18,ord(c))
def
reshape(w, h):
glViewport(0,0,w,h)
glMatrixMode(GL_PROJECTION)
glLoadIdentity()
gluOrtho2D(0,w,h,0)
glMatrixMode(GL_MODELVIEW)
glLoadIdentity()
#
Fungsi untuk menampilkan Teks Pada Window
def
drawText():
glColor3f(teks_merah,teks_hijau,teks_biru)
# Petunjuk
drawBitmapText("GAMBAR :
",-460,440,0)
drawBitmapText("Absurd",-460,400,0)
# Informasi dan Kontrol
drawBitmapText("Controls
:",-460,-200,0)
drawBitmapText("Untuk Scaling Tekan
a/s ",-460,-240,0)
drawBitmapText("Untuk rotasi z/x
",-460,-280,0)
drawBitmapText("Information : "
,-460,-320,0)
drawBitmapText("Ganti Warna Klik Mouse
Kanan dan Kiri",-460,-360,0)
drawBitmapText("Untuk Menjalankan
Objek Tekan Keyboard => KEY UP, KEY DOWN, KEY RIGHT, KEY LEFT "
,-460,-400,0)
drawBitmapText("Poin => " +
str(point),-460,-440,0)
drawBitmapText("Lampu => " +
teks_lampu,-460,-480,0)
#
Fungsi Untuk Membuat Kotak
def
kotak():
glBegin(GL_POLYGON)
glColor3f(convert_rgb(kt_red),convert_rgb(kt_green),convert_rgb(kt_blue))
glVertex2f(-50 + koor_x,-50 + koor_y)
glVertex2f(50 + koor_x,-50 + koor_y)
glVertex2f(50 + koor_x,50 + koor_y)
glVertex2f(-50 + koor_x, 50 + koor_y)
glEnd()
#
Fungsi Untuk Membuat objek
def
shape():
# Untuk Mengatur Scalling / Zooming objek
glScalef(zoom_x,zoom_y, 0.0)
# Untuk Mengatur Translasi / Pergerakan
objek
glTranslatef(pos_x,pos_y,0)
# Untuk Mengatur Rotation objek
glRotatef(rotation, 0.0, 0.0,1.0)
# Badan
glBegin(GL_POLYGON)
glColor3f(convert_rgb(200),convert_rgb(100),convert_rgb(100))
# Atas
glVertex2f(-200 ,100 )
glVertex2f(400 ,100 )
# Kanan
glVertex2f(-300 ,0 )
glVertex2f(-200 ,100 )
# Bawah
glVertex2f(-300 ,-100
)
# Kiri
glVertex2f(-300 ,0 )
glVertex2f(400 ,-100
)
glEnd()
# Lampu
glBegin(GL_POLYGON)
glColor3f(convert_rgb(229),convert_rgb(142),convert_rgb(38))
glVertex2f(-110 ,120 )
glVertex2f(-200 ,120 )
glVertex2f(-200 ,100 )
glVertex2f(-110 ,100 )
glVertex2f(-110 ,120 )
glEnd()
# Cahaya Lampu 1
glBegin(GL_POLYGON)
glColor3f(convert_rgb(light_red),convert_rgb(light_green),
convert_rgb(light_blue))
glVertex2f(-200 ,110 )
glVertex2f(-460 ,30)
glVertex2f(-460 ,200)
glVertex2f(-200 ,110)
glEnd()
# Cahaya Lampu2
glBegin(GL_POLYGON)
glColor3f(convert_rgb(light_red),convert_rgb(light_green),
convert_rgb(light_blue))
glVertex2f(-300 ,-62 )
glVertex2f(-450 ,-50)
glVertex2f(-450 ,-110)
glVertex2f(-300 ,-72)
glEnd()
#
Fungsi untuk menampilkan semua bentuk pada Window
def
display():
glClear(GL_COLOR_BUFFER_BIT)
# Deklarasi Bentuk Kapal Selam
glPushMatrix()
shape()
glPopMatrix()
# Deklarasi Bentuk Kotak
kotak()
# Deklarasi Teks
drawText()
glFlush()
#
Fungsi untuk mendapatkan callback event handling
#
Pada Mouse
def
input_mouse(button, state, x, y):
global merah, hijau, biru
global teks_lampu
global bg_red, bg_green, bg_blue
global light_red, light_green, light_blue
global kt_red, kt_green, kt_blue
# Jika Klik Kanan ditekan maka lampu akan
dimatikan
# dan warna background dan kotak akan
berubah
if button == GLUT_RIGHT_BUTTON and state ==
GLUT_DOWN:
light_red = 24
light_green = 101
light_blue = 164
# Warna Background
bg_red = 24
bg_green = 101
bg_blue = 164
# Warna Kotak
kt_red = 24
kt_green = 101
kt_blue = 164
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
teks_lampu = "OFF"
print("Klik Kanan ditekan ",
"(", x, ",", y, ")")
# Jika Klik Kiri ditekan maka lampu akan
menyala
# dan warna background dan kotak akan
berubah
elif button == GLUT_LEFT_BUTTON and state
== GLUT_DOWN:
light_red = 255.0
light_green = 255.0
light_blue = 0.0
# Warna Background
bg_red = 66
bg_green = 155
bg_blue = 227
# Warna Kotak
kt_red = 255
kt_green = 255
kt_blue = 255
glClearColor(convert_rgb(bg_red),
convert_rgb(bg_green), convert_rgb(bg_blue), 1.0)
teks_lampu = "ON"
print("Klik Kiri ditekan ",
"(", x, ",", y, ")")
#
Fungsi untuk mendapatkan callback event handling
#
Pada Keyboard Tombol khusus
def
input_keyboard_special_func(key,x,y):
global pos_x, pos_y
global warna_background
global teks_merah, teks_hijau, teks_biru
# Untuk mengubah posisi objek dengan
menekan
# Tombol Key UP, Key DOWN, Key RIGHT, Key
LEFT
# saat ditekan nilai pada variable pos_x
dan pos_y
# akan berubah secara increment dan
decremant dengan pertambahan 20
if key == GLUT_KEY_UP:
pos_y += 20
print("Tombol Atas ditekan ",
"x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_DOWN:
pos_y -= 20
print("Tombol Bawah ditekan
", "x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_RIGHT:
pos_x += 20
print("Tombol Kanan ditekan
", "x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
elif key == GLUT_KEY_LEFT:
pos_x -= 20
print("Tombol Kiri ditekan ",
"x : ", pos_x, " y : ", pos_y)
print("Koor ", "x :
", koor_x, " y : ", koor_y)
#
Fungsi untuk mendapatkan callback event handling
#
Pada Keyboard Tombol yang akan mengembalikan nilai ascii
def
input_keyboard_func(key, x, y):
global zoom_x, zoom_y
global rotation
dk = key.decode("utf-8")
# Untuk mengatur Zoom In & Out
# Tekan tombol a / s
# Maka variable zoom_x dan zoom_y
# akan berubah secara increment dan
decrement
# dengan pertamban 0.1
if dk == 'a' or dk == 'A':
zoom_x += 0.1
zoom_y += 0.1
elif dk == 's' or dk == 'S':
zoom_x -= 0.1
zoom_y -= 0.1
# Untuk mengatur Rotasi ke kanan / kiri
# Tekan tombol z / x
# Maka variable rotation
# akan berubah secara increment dan
decrement
# dengan pertamban 10
elif dk == 'z' or dk == 'Z':
rotation -= 10
print(rotation)
elif dk == 'x' or dk == 'X':
rotation += 10
print(rotation)
def
update(value):
global koor_x, koor_y, pos_x, pos_y
global point
global kt
global kt_red, kt_green, kt_blue
# Untuk mengatur posisi kotak
# Secara Randaom
koor_x = randrange(-800,100)
koor_y = randrange(-100,800)
# Untuk mendapatkan Poin
# Ketika teks_lampu = ON
# atau nilai koor_x, koor_y sama dengan
pos_x, pos_y
if
teks_lampu == "ON":
if koor_x == pos_x or koor_y == pos_x:
point += 1
glutPostRedisplay()
glutTimerFunc(10,update,0)
def
main():
glutInit(sys.argv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB)
glutInitWindowSize(800,600)
glutInitWindowPosition(100,100)
glutCreateWindow("Absurd")
glutDisplayFunc(display)
glutSpecialFunc(input_keyboard_special_func)
glutKeyboardFunc(input_keyboard_func)
glutMouseFunc(input_mouse)
glutTimerFunc(50, update, 0)
init()
glutMainLoop()
main()
Output :
ini gambar objek jika diklik tombol mouse kanan maka lampunya off
ini gambar objek jika diklik tombol mouse kiri lampunya on
ini gambar objek jika diklik tombol keyboard up maka objek akan keatas
ini gambar objek jika diklik tombol keyboard down maka objek akan kebawah
ini gambar objek jika diklik tombol keyboard left maka objek akan kekiri
ini gambar objek jika diklik tombol keyboard right maka objek akan kekanan
ini gambar objek jika diklik tombol keyboard a/A maka objek akan membesar
ini gambar objek jika diklik tombol keyboard s/S maka objek akan mengecil