Minggu, 03 April 2011

Bermain grafika komputer dengan library glut.h

Posted by ogietcyber on 09.59

Grafika Komputer merupakan salah satu cabang dari Ilmu Komputer yang sangat seru untuk dipelajari. Kali ini, saya akan share tentang membuat gambar-gambar grafis dengan visual studio 2010 beserta libraby tambahan #include <glut.h>. Seperti beberapa contoh gambar di bawah ini.

Untuk membuat gambar tersebut dengan Ms. Visual studio, dapat digunakan library tambahan ke Ms. VisuaL Studio yang dapat ditambahkan yaitu file beberapa file glut.h ke direktori tempat kita install Ms. Visual Studio.
Langkah-langkahnya yakni :
1. Siapkan file glut-3.7.6.zip pada direktori sementara. Download filenya disini.
2. Copy file glut.h ke drive:\Program Files\Microsoft Visual Studio 2010\Vc\include\GL
3. Copy file glut32.lib ke drive:\Program Files\Microsoft Visual Studio 2010\Vc\lib
4. Copy file glut32.dll ke drive:\Windows\System
Setelah melakukan langkah-langkah di atas, run Visual Studio pada komputer Anda.
Buat New Project>Visual C++>Console Aplication.
Beri nama project, kemudian tentukan direktori tempat menyimpan file.
klik OK.
Coba contoh skrip di bawah ini :
#include “stdafx.h”
#include <windows.h>
#include <GL/glut.h>
#include <stdlib.h>
#include <stdio.h>
#ifndef CALLBACK
#define CALLBACK
#endif
GLfloat ctlpoints[4][4][3];
int showPoints = 0;
GLUnurbsObj *theNurb;
/*
* Initializes the control points of the surface to a small hill.
* The control points range from -3 to +3 in x, y, and z
*/
void init_surface(void)
{
int u, v;
for (u = 0; u < 4; u++) {
for (v = 0; v < 4; v++) {
ctlpoints[u][v][0] = 2.0*((GLfloat)u – 1.5);
ctlpoints[u][v][1] = 2.0*((GLfloat)v – 1.5);
if ( (u == 1 || u == 2) && (v == 1 || v == 2))
ctlpoints[u][v][2] = 3.0;
else
ctlpoints[u][v][2] = -3.0;
}
}
}
void CALLBACK nurbsError(GLenum errorCode)
{
const GLubyte *estring;
estring = gluErrorString(errorCode);
fprintf (stderr, “Nurbs Error: %s\n”, estring);
exit (0);
}
/* Initialize material property and depth buffer.
*/
void init(void)
{
GLfloat mat_diffuse[] = { 0.7, 0.7, 0.7, 1.0 };
GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };
GLfloat mat_shininess[] = { 100.0 };
glClearColor (0.0, 0.0, 0.0, 0.0);
glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glEnable(GL_DEPTH_TEST);
glEnable(GL_AUTO_NORMAL);
glEnable(GL_NORMALIZE);
init_surface();
theNurb = gluNewNurbsRenderer();
gluNurbsProperty(theNurb, GLU_SAMPLING_TOLERANCE, 25.0);
gluNurbsProperty(theNurb, GLU_DISPLAY_MODE, GLU_FILL);
//gluNurbsCallback(theNurb, GLU_ERROR, nurbsError); MEMBUAT ERROR C2664 DONTKNOWWHY?
}
void display(void)
{
GLfloat knots[8] = {0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0};
int i, j;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
glRotatef(330.0, 1.,0.,0.);
glScalef (0.5, 0.5, 0.5);
gluBeginSurface(theNurb);
gluNurbsSurface(theNurb,
8, knots, 8, knots,
4 * 3, 3, &ctlpoints[0][0][0],
4, 4, GL_MAP2_VERTEX_3);
gluEndSurface(theNurb);
if (showPoints) {
glPointSize(5.0);
glDisable(GL_LIGHTING);
glColor3f(1.0, 1.0, 0.0);
glBegin(GL_POINTS);
for (i = 0; i < 4; i++) {
for (j = 0; j < 4; j++) {
glVertex3f(ctlpoints[i][j][0],
ctlpoints[i][j][1], ctlpoints[i][j][2]);
}
}
glEnd();
glEnable(GL_LIGHTING);
}
glPopMatrix();
glFlush();
}
void reshape(int w, int h)
{
glViewport(0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective (45.0, (GLdouble)w/(GLdouble)h, 3.0, 8.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef (0.0, 0.0, -5.0);
}
void keyboard(unsigned char key, int x, int y)
{
switch (key) {
case ‘c’:
case ‘C’:
showPoints = !showPoints;
glutPostRedisplay();
break;
case 27:
exit(0);
break;
default:
break;
}
}
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);
glutInitWindowSize (500, 500);
glutInitWindowPosition (100, 100);
glutCreateWindow(argv[0]);
init();
glutReshapeFunc(reshape);
glutDisplayFunc(display);
glutKeyboardFunc (keyboard);
glutMainLoop();
return 0;
}
Maka, saat program di run, akan keluar salah satu gambar grafis yang ada di atas.
Untuk belajar lebih lanjut lagi, file source program yang lain bisa di download disini.
"Semoga materit ini bisa membantu Anda untuk memperoleh referensi ttg glut.h. Paling tidak jika sudah mengenal dan tahu cara menginstall library ke Visual Studio, suatu hari saat membutuhkan glut ini di dunia kerja tidak perlu bingung lagi. " - Setiawan Hadi.
Selamat mencoba dan selamat berbagi.
sumber : yosamara's blog.

Grafika Komputer part 2

Posted by ogietcyber on 09.50

Grafika komputer (Inggris: Computer graphics) 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.
Hasil dari rendering
Hasil dari rendering
Bagian dari grafika komputer meliputi:
* Geometri: mempelajari cara menggambarkan permukaan bidang
* Animasi: mempelajari cara menggambarkan dan memanipulasi gerakan
* Rendering: mempelajari algoritma untuk menampilkan efek cahaya
* Citra (Imaging): mempelajari cara pengambilan dan penyuntingan gambar.

————————————————————————————————————
Grafika komputer 3D (Inggris: 3D Computer graphics) adalah representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Hasil ini kadang kala ditampilkan secara waktu nyata (real time) untuk keperluan simulasi. Secara umum prinsip yang dipakai adalah mirip dengan grafika komputer 2D, dalam hal: penggunaan algoritma, grafika vektor, model frame kawat (wire frame model), dan grafika rasternya.
Grafika komputer 3D sering disebut sebagai model 3D. Namun, model 3D ini lebih menekankan pada representasi matematis untuk objek 3 dimensi. Data matematis ini belum bisa dikatakan sebagai gambar grafis hingga saat ditampilkan secara visual pada layar komputer atau printer. Proses penampilan suatu model matematis ke bentuk citra 2 D biasanya dikenal dengan proses 3D rendering.

————————————————————————————————————
Grafika komputer (Inggris: Computer graphics) 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.
Hasil dari rendering
Bagian dari grafika komputer meliputi:
Geometri: mempelajari cara menggambarkan permukaan bidang
Animasi: mempelajari cara menggambarkan dan memanipulasi gerakan
Rendering: mempelajari algoritma untuk menampilkan efek cahaya
Citra (Imaging): mempelajari cara pengambilan dan penyuntingan gambar.

Desain Blog Yang Baik

Posted by ogietcyber on 13.07

Di dunia nyata,kita pertama kali melihat orang pasti dari penampilan luarnya. Begitu juga di dunia maya, kita melihat blog pertama kali pasti dari desainnya. Desain merupakan hal yang sangat vital bagi sebuah blog. Jika desain blog kita baik, maka pengunjung akan merasa senang, dan mungkin saja akan berkunjung secara rutin ke blog kita. Tapi jika desain blog kita buruk, jangankan berkunjung lagi, untuk membaca artikel kitapun pasti enggan. Paling dia berkunjung ke blog kita hanya beberapa menit, bahkan beberapa detik. Lalu bagaimana desain blog yang baik. Berikut ini beberapa aspek yang membuat desain blog menjadi (menurut saya) baik.

SIMPLE, MINIMALIS
Suatu Blog hendaknya memiliki desain yang simple dan minimalis. Minimalis disini bukan berarti seadanya, berwarna putih tanpa hiasan apapun. Mnimalis berarti tidak banyak hiasan yang meriah, tidak terlalu fokus pada detail-detail. Penggunaan widgetnya juga tidak terlalu ramai. Cukuplah daftar posting, Shoutbox, dan hit counter. Desain blog yang simple tidak hanya membuat pengunjung tidak capek melihat blog kita, tetapi juga mempercepat loading blog. Di Indonesia, koneksi internet masih terbilang lambat. Apalagi kebanyakan pengunjung tidak mau menunggu berlama-lama. Maka dari itu hendaknya desain blog dibuat sederhana agar lebih mudah dilihat dan lebih cepat dalam loading.
PEMILIHAN WARNA
Orang paling banyak memilih warna hitam atau putih untuk dijadikan warna background blog mereka.Walaupun saya suka hitam, tapi jujur saya lebih nyaman membaca blog berbackground putih daripada hitam. Background putih membuat blog nampak lebih luas, lebih longgar. Warna putih juga lebih cocok dipadukan dengan berbagai warna. Tetapi warna hitam juga punya kelebihan. Yaitu tidak membuat lelah mata. Di dalam ilmu fisika, warna hitam akan menyerap semua sinar. Sehingga warna hitam berkesan gelap dan “dingin”. Berbeda dengan warna putih yang memantulkan semua sinar sehingga berkesan terang dan panas.
Eits, jangan lupa memperhatikan warna font. Warna font yang baik adalah warna yang kontras dengan warna backgroundnya. Misalnya jika warna background anda putih, anda dapat memilih warna hitam atau biru tua untuk warna font. Jika background hitam, warna putih atau kuning menjadi pilihan yang tepat untuk warna font anda.
SIDEBAR DI KANAN ATAU DI KIRI?
Sebetulnya tidak ada yang salah jika kita memilih sidebar kanan atau kiri. Toh, semuanya terlihat baik. Tetapi saya cenderung memilih sidebar di sebelah kanan. Kenapa? Karena orang membaca artikel kita dari kiri ke kanan. Itu berarti kemungkinan orang akan melihat widget setelah membaca artikel. Coba kalau dipasang di kiri, orang akan lebih berkonsentrasi ke widget kita sebelum membaca artikel kita. Rugi kan?? Pengunjung hanya datang untuk melihat widget kita tanpa memperhatikan apa yang kita tulis. Lalu bagaimana dengan sidebar di kanan dan di kiri? Menurut saya itu adalah pilihan yang paling buruk karena dengan sidebar di kanan dan di kiri konsentrasi pengunjung akan pecah. Pengunjung tidak fokus ke artikel maupun widget. Kalau sudah begini, tambah rugi kan kita??
2 COLOUMN ATAU 3 COLOUMN?
Ketika Blogwalking saya melihat kebanyakan blogger menggunakan 3 COLOUMN. Mungkin mereka berpikir dengan 3 coloumn, mereka dapat memanfaatkan desain blog sebanyak mungkin. Ketika kita memutuskan memakai 2 coloumn atau 3 coloumn hendaknya kita mempertimbangkan tujuan kita membangun blog. Jika tujuan kita ringan, misalnya hanya ingin menulis pikiran kita, dan widget juga tidak terlalu banyak, maka 2 coloumn adalah pilihan yang tepat. Jika tujuan kita adalah monetize atau tujuan-tujuan lain yang lebih berat, maka 3 coloumn lebih dibutuhkan untuk menampung iklan-iklan maupun menu yang banyak.
POSISI IKLAN
Letakkan iklan di posisi yang mudah dilihat, misalnya di bawah header, di sidebar, di bagian paling bawah blog, dan di sela-sela posting. Untuk ukuran, di bawah header lebih baik menggunakan ukuran leaderboard, untuk di sidebar menggunakan ukuran SkyCapper jika masih banyak tempat kosong, untuk di bagian bawah bisa menggunakan ukuran leaderboard atau large rectangle. Untuk di sela-sela posting ukuran lebih banyak variasi, misalnya ukuran banner, large rectangle, atau dapat juga menggunakan link unit berukuran banner.

sumber: Muhammad Latif Rozi

Mendesain Menu Dengan CSS part 2

Posted by ogietcyber on 13.03

bingung mau bilang apa,ya bingung toh baru-baru aja ngeblog,hohoho,jadi mohon saran dan kritik ya tmn2,
nah sekarang saya akan melanjutkan postingan sebelum postingan ini,semoga bermanfaat,
Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, sehingga kode di atas menjadi sbb:

<ul id=”nav”>
<li><a href="/">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:

<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #663300;
}
</style>

Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
cokelat. Kurang lebih tampilannya seperti ini:

Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah

<li></li>. Selain tag li, kita juga akan mendesain tag <a></a> (link) sehingga area yang bisa
diklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. Kode CSS nya adalah sbb:

#nav li {
margin: 0;
padding: 0;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}

Degan kode tersebut, maka tampilan menu akan menjadi sebagai berikut:

Apabila ditampilkan pada Internet Explorer 6 (IE6), menu tersebut tidak akan tampil seperti
yang diharapkan. Melainkan akan menampilkan menu sbb:

Untuk mengatasi tampilan yang tidak diharapkan tersebut maka perlu ditambahkan kode sbb:

#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left; /* This corrects the */
width: 100%; /* IE whitespace bug */
}

Dengan kode tersebut maka menu pun akan tampil seperti yang diharapkan pada IE6.
Untuk menambah efek ketika mouse di atas salah satu menu item, maka kita akan mengubah
warna latar dari menu item tersebut dengan kode:

#nav a:hover {
background: #330000;
}

Catatan:
IE6 merupakan browser yang tidak standar, sehingga seringkali menampilkan tampilan yang tidak
diharapkan. Karena itu, selalu gunakan browser yang standar seperti Mozilla Firefox dan Safari.
Dan selalu periksa hasil desain kita di IE6 agar hasil desain kita sama di semua browser.
Sehingga kode html dan css selengkapnya adalah sbb:


<html>
<head><title></title></head>
<style type="text/css">
#container {
width: 720px;
}
#header {
height: 100px;
background-color: #9FB5BD;
}
#content {
width: 540px;
float: left;
}
#sidebar {
width: 180px;
float: right;
}
#footer {
clear: both;
}
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>

2. Mendesain Menu (Horizontal) dengan CSS

Perbedaan menu vertikal dengan horizontal adalah:
· Lebarnya jauh lebih lebar dari menu vertikal
· Teks nya berada di tengah
· Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
· Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
· Elemen a tidak memerlukan display:block, karena akan di-float
· Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
· Border pun diubah dari bottom menjadi right
Kode hasil modifikasi menjadi sbb:

#nav {
margin: 0;
padding: 0;
background: #663300;
list-style-type: none;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
text-align: center;
color: #FFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFF;
}

Referensi
The Art and Science of CSS, Sitepoint.com
Biografi Penulis:
Triswansyah Yuliano. Menyelesaikan D3 di Politeknik Pos Indonesia. Menekuni bidang
pemrograman web maupun desktop. Selain itu juga menyukai design grafis dan web. Di waktu
luang suka bermain musik terutama audio engineering.

sumber: IlmuKomputer.Com

Mendesain Menu Dengan CSS part 1

Posted by ogietcyber on 11.46

Mendesain Menu (Vertikal) dengan CSS

Untuk mendesain menu dengan CSS kita memerlukan daftar menu yang dibuat dengan HTML. Tag HTML yang digunakan untuk membuat menu adalah ul. Di bawah ini adalah kode HTML dari menu yang akan didesain oleh CSS.

<ul>

<li><a href="/">Home</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="support.html">Suport</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

Kode tersebut akan menghasilkan tampilan sbb:

Home
Services
Support
About Us
Contact Us

sumber: Triswansyah Yuliano

ogiet go blogger

Minggu, 03 April 2011

Bermain grafika komputer dengan library glut.h

Grafika Komputer part 2

Sabtu, 26 Maret 2011

Desain Blog Yang Baik

Mendesain Menu Dengan CSS part 2

Mendesain Menu Dengan CSS part 1

Mendesain Menu (Vertikal) dengan CSS

pencarian Blog

my profil

Pengunjung

DAFTAR ISI

Archives

Followers

Daftar Blog

Labels