Anda di halaman 1dari 118

Untuk kalangan

Untuk Kalangan sendiri


sendiri

Handouts
Grafika Komputer
Handouts

Grafika Komputer
Edisi I

Diterbitkan oleh:
Badan Penerbit
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM Yogyakarta

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 1


Kata Pengantar

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 2


Daftar Isi

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 3


Daftar Tabel

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 4


Daftar Gambar

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 5


BAB 1. PENDAHULUAN

Grafika Komputer merupakan sekumpulan alat yang digunakan untuk


membuat gambar dan berinteraksi dengan gambar dengan cara-cara seperti
yang biasa digunakan. Peralatan tersebut dapat berupa perangkat keras
ataupun piranti lunak. Semua peralatan tersebut memberi fasilitas kepada
programmer membuat program-program grafis yang baik. Secara umum
program-program komputer grafis ditujukan untuk memudahkan interaksi
antara manusia dengan komputer.

1.1 Implementasi Grafika Komputer


Aplikasi grafika komputer adalah program komputer yang dirancang
khusus untuk menghasilkan grafis datau representasi visual dari data ke
dalam bentuk gambar, slide dan sebagainya. Ruang lingkup aplikasi grafika
komputer sangat luas mencakup dari sekedar proses interaktif. Selain itu
ruang lingkup aplikasi grafika komputer mulai dari bidang dua dimensi
sampai ke ruang tiga dimensi, mulai dari pemodelan benda sederhana
sampai ke representasi data geografis. Aplikas grafika komputer dapar dibagi
mejadi beberapa kelompok, yaitu :
 Aplikasi pengolah Bentuk dan Citra
 Presentasi
 CAD (Computer Aided Design)
 Animasi
 Representasi Data
 Permainan

1.1.1 Aplikasi Pengolah Bentuk dan Citra


Aplikasi Pengolah bentuk dan Citra merupakan aplikas yang banyak
digunakan oleh Desaigner grafis dan ilustrator.
Aplikasi pengoleh Bentuk ditujukan untukmengolah bentuk (Shape)
yang disusun dari serangkaian garis sedangkan Aplikasi pengolah Citra
ditujukan untuk memanipulasi sekumpulan titik yang membentuk sebuah
gambar (Citra).

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 6


Bentuk/Shape
 Shape/bentuk tidak akan berubah kehalusannya meskipun diubah
ukurannya
 Gambar yang dibuat/direkayasa dari bentuk geometri
 Contoh aplikasi Pengolah bentuk antara lain Corel Drow, Adobe
ilustrator, Adobe FreeHand

Citra / raster
 Citra akan berubah bentuknya jika diubah ukurannya diberbersar atau
diperkecil. Perubahan bentuk Pada citra terjadi karena ukuran pixel
mengikuti perbandingan perbesaran citra. Sehingga perbesaran
mengakibatkan citra kehilangan ketajaman.
 Aplikasi pengolah Citra daoat digunakan untukmemberikan efek khusu
terhadap citra yang diolah, tergantung aplikas yang digunakan dapat
diberkan efek khusu seperti bayangan (shadow), pengkaburan (blur)
dsb.
 Contoh aplikas pengolah Citra antara lain Corel PhotoPaint, Adobe
Photoshope

1.1.2 Presentasi
Aplikasi presentasi banyak digunakan oleh kalangan bisnis dalam
mempresentaskan ide-ide ataupun konsep-konsep. Dalam
perkembangannya, aplikas presentas tidak hanya sekedar menampilkan slide
ke layar tetapi juga dilengkapi dengan fasilitas animasi. (contoh aplikasi
presentasi antara lain : Power point, Marcomedia Flash)

1.1.3 CAD (Computer Aided Design)


Aplikasi CAD banyak digunkan dalam bidang Teknik. Dengan
menggunkan CAD seorang perancang teknik tidka lagi menggunakan meja
gambar dan kertas tetapi mengunakan komputer sebagai media. Contoh
Aplikasi CAD . Contoh aplikasi CAD antara lain AutoCad untuk aplika
teknik/rekaya bangunan/mesin, Protel untuk aplikasi rekyasa elektronik,

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 7


Home Designer untuk aplikasi design anterior dan NuGraf untuk aplikas
pemodelan benda tiga dimensi.

1.1.4 Animasi
Aplikasi animasi merupakan aplikas yang banyak digunakan dalam
bidang periklanan dan Film. Dengan mengunakan aplikasi animasi, seorang
kreator dapat menciptakan benda-benda maya yang dapat bergerak dalam
dunia nyata. Contoh aplikasi animasi antara lain Autodesk 3D Studio,
Extreme 3D, Animator Pro, Ray Dream Studio.

1.1.5 Representas Data


Representasi data merupakan salah satu cara melihat data dalam
bentuk yang lebih mudah diamati. Aplikasi representas data banyak
digunakan dalam bidang analisa statistik dan geografi. Contoh apliasi untuk
merepresentasikan data geografis antara lain ArcInfor, MapInfo.

1.1.6 Permainan
Saat ini hampir tidak ada aplikas permainan komputer yang tiak
memanfaatkan modus grafik. Aplikasi permainan antara lain aplikasi tembak
dan lari (Shoot adn run), Aplikasi permainan strategi (war games), dll.

1. 3 SISTEM GRAFIKA KOMPUTER


 Sistem grafika komputer pasif adalah sistem dimana operator tidak
bisa berinteraksi secara langsung dengan gambar yang dibangkitkan.
 Sistem Grafika komputer interaktif (interactive Computer Graphics)
adalah sistem yang memungkinkan operator untuk berdialog langsung
dengan apa yang terlihat pada layar komputer.

1.4 KOMPONEN LAYAR PENAMPIL


Pada dasarnya, semua layar penampil dengan kemampuan grafis
punya 3 komponen utama :
- Pengingat digital (frame buffer)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 8


Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai
elemennxm menunjukkan intensitas dari citra grafis yang akan
ditampilkan
- Layar Penampil
- Piranti pengendalian tampilan (Display controller) atau pengolah
tampilann (Display processor)
Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya
untuk ditampilkan ke layar penampil.

Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke


display) dikembangkan tahun 60-an. Pada jenis ini pengingat digital berisi
daftar tampilan (display list) atau tampilkan (display program) yang berisi
perintah pengambaran titik, perintah penggambaran garis, dan perintah
penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan
mengubah data digital menjadi tegangan analog yang dipakai untuk
memancarkan elektron yang bisa mengenal tabung layar tampilan berlapis
fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar.
Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan
atau ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan
minimal 30 kali per detik untuk menghindari adanya kedip (flicker). Proses ini
disebut sebagai penyegaran eletron (electron refreshing).
Tampilan berdasarkan teknologi TV dan disebut raster display.
Dikembangkan tahun 70an. Pada tampilan ini, garis, karakter dan bentuk-
bentuk lain selalu digambar berdasar komponen terkecilnya yaitu titik, dan
biasa disebut sebagai pixel atau pel(picture element). Sebuah titik pada layar
tampilan bisa dihidup matikan dengan mudah dalam pengingat digital karena
0 untuk titik matik dan 1 untuk titik yang menyala.
Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan
sebagai polabit dengan mengubah pola bit (piksel) yang ada dalam pengingat
digital, bisa dibentuk gambar sesuai dengan keinginan. Untuk gambar hitam-
putih, warna hitam disajikan menggunakan bit 1, dan warna putih
menggunakan bit 0. Untuk gambar berwarna pengaturan yaitu lebih rumit.
Yang dimaksud dengan raster atau resolusi layar (screen resolution)
adalah matrix piksel yang menutup seluruh permukaan layar tampilan.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 9


Semakin besar ukuran matrix pikxel yang dibentuk pada suatu layar tampilan,
semakin bagus dan halus pula gambar yang bisa dihasilkan oleh layar
tersebut.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 10


Bab 2.GRAFIS PRIMITIF

2.1 Pengertian Output Primitif


Output/Grafis primitif adalah bentuk geometri dasar yang dapat
digunakan untuk membentuk obyek yang lebih komplek.
Dengan memasukkan output primitif tersebut sebagai stuktur yang lebih
kompleks. Setiap output primitif mempunyai data koordinat dan informasi lain
tentang bagaimana cara object ditampilkan pada layar. Titik dan garis lurus
adalah bentuk geometri paling sederhana dan komponen gambar.
Borland C++ Builder menyediakan Canvas yang dapat digunakan
untuk menampilkan gambar maupun tulisan ke layar. Kelas Canvas pada
umumnya merupakan atribut dari kelas Lain. Beberapa kelas yang
mempuntai atribut Canvas antara lain TPaintBox, TShape.

2.2 Macam-macam Output/Grafis primitif


1. Titik (Pixel)
Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar
titik maka kita dapat menggambar obyek apapun. Termasuk bentuk
geometri dibawah merupakan bentuk –bentuk yang pada dasarnya
berasal dari titik-titik. Operasi titik ini sering digunakan pada pengolahan
citra (Image processing). Setiap titik pada monitor memiliki parameter
:koordinat dan warna.

Kode untuk menggambar titik :


Canvas-> Pixels[x][y] = warna
Dengan x : koordinat mendatar
y : koordinat vertikal
Warna : warna pixel
Contoh :
Canvas->Pixel [100][100] = clRed;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 11


2. Garis (line)
Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier
dari titik awal sampai titik akhir

Kode :
Canvas->MoveTo(x0, y0);
Canvas->MoveTo(x1, y1);
...
Canvas->LineTo(xn, yn)

Garis ini berawal dari titik koordinat (x0,y0) sampai ke (x1,y1) dan
selanjutnya ke (xn,yn).

X0,y0 X2,y2

Xn,yn

X1,y1

Contoh

3. Kotak (Box)
Kotak merupakan siklus tertutup minimal memiliki 2 titik pokok

X1,y1

X2,y2

Keterangan :
X1,y1:koordinat kotak awal
X2,y2:koordinat kotak akhir (diagonal)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 12


Canvas->Rectangle(x1, y1, x2, y2);

4. Lingkaran/Elip (Circle/Ellipse)

Lingkaran adalah kumpulan titik yang melingkar dengan garis tengah


mendatar dan vertikal sama, sedangkan untuk elip, garis tengahnya
berbeda.
x1,y1 x1,y1

X2,y2 X2,y2

Lingkaran Elip

Canvas->Ellipse(x1, y1, x2, y2);

5. Busur (Arc)
Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat
busur.
Canvas->Arc(x1, y1, x2, y2, x3, y3, x4, y4);
x3,y3
x1,y1

X4,y4

X2,y2

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 13


6. Chord / Tembereng
Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat
tembereng.
Canvas->Chord(x1, y1, x2, y2, x3, y3, x4, y4);

X3,y3
X1,y1

X4,y4

X2,y2

7. Pie/Juring
Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat
Juring.

Canvas->Pie(x1, y1, x2, y2, x3, y3, x4, y4);

X3,y3
X1,y1

X4,y4

X2,y2

8. Poligon (Polygon)
 Method Poligon digunakan untuk mengambar segi banyak
Gambar yang terbentuk adalah kurva tertutup.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 14


POINT Var[n[;
Var[0] = point(x, y);
Var[1] = point(x, y);
...
Var[n] = point(x, y);
Canvas->Polygon((TPOint*)Var, n);
Dengan var : variabel
n : jumlah titik yang membentuk poligon - 1

Contoh :
POINT titik[4]
Titik[0]=POINT(10,10);  a
Titik[1]=POINT(100,10); b
Titik[2]=POINT(150,100);c
Titik[3]=POINT(50,150);d
Titik[4]=POINT(0,50); e
Canvas->Polygon((Tpoint*) titik,4);

Hasil:

a b

9. Polyline
 Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari
suatu koordinat ke koordinat lainnya.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 15


Gambar yang terbentuk adalah kurva terbuka.

POINT var[n]; //deklarasi variabel


var[0]=Point(x,y);
var[1]=Point(x,y);
….
var[n]=Point(x,y);
Canvas->Polyline((TPoint*)var,n);

Dengan var : variabel


N: jumlah titik yang membentuk poligon

Contoh :
POINT titik[4]
Titik[0]=point(10,10);  a
Titik[1]=point(100,10); b
Titik[2]=point(150,100);c
Titik[3]=point(50,150);d
Titik[4]=point(0,50); e
Canvas->Polyline((Tpoint*) titik,4);

Hasil:

a b

2.3 Atribut Output Primitif

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 16


Pada umumnya, setiap parameter yang memberi pengaruh pada
output primitif ditampilkan sesuai dengan parameter atribut.

1. Atribut Garis
Atribut dasar untuk garis lurus adalah style (tipe garis), width (tebal)
dan color(warna).
Dalam beberapa paket aplikasi grafik, garis dapat ditampilkan dengan
mengunakan Pen.
2. Atribut Kurva
Parameter untuk atribut kurva sama dengan atribut segmen garis.
Kurva dapat ditampilkan dengan berbagai warna, tebal, dot-dash(Style
garis) dan pilihan pen atau brush. Selain itu untuk pengisian suatu
bidang tertentu termasuk memilih warna antara solid dan pattern
tertentu dan memilih warna pattern yang ada.
3. Atribut Karakter

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 17


2.3 Implementasi

2.3.1 Membuat Bentuk dengan dari Objek Geometri

Kode Program
//--------------------------------------#include <vcl.h>
#pragma hdrstop
#include "Umobil.h"
//---------------------------------------------#pragma
package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------__fastcall
TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------void __fastcall
TForm1::FormPaint(TObject *Sender)
{
Canvas->Brush->Color = clYellow;
Canvas->Rectangle(0,0,650,300);
Canvas->Brush->Color = clGray;
Canvas->Rectangle(0,300,650,500);
Canvas->MoveTo(200,200);
Canvas->Brush->Color = clBlue;

POINT Titik[13];
Titik[0]=Point(260,170);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 18


Titik[1]=Point(520,170);
Titik[2]=Point(560,350);
Titik[3]=Point(520,350);
Titik[4]=Point(500,310);
Titik[5]=Point(460,310);
Titik[6]=Point(440,350);
Titik[7]=Point(300,350);
Titik[8]=Point(280,310);
Titik[9]=Point(240,310);
Titik[10]=Point(220,350);
Titik[11]=Point(160,350);
Titik[12]=Point(180,250);
Titik[13]=Point(240,250);

Canvas->Polygon((TPoint*) Titik,13);
Canvas->Brush->Color = clBlack;
Canvas->Pen->Width = 14;
Canvas->Brush->Style = bsCross;
Canvas->Ellipse(450,315, 510, 390);
Canvas->Ellipse(230,315, 290, 390);
Canvas->Brush->Color = clRed;
Canvas->Brush->Style = bsSolid;
Canvas->Pen->Width = 5;
POINT Jendela[3];
Jendela[0]=Point(250,250);
Jendela[1]=Point(265,180);
Jendela[2]=Point(515,180);
Jendela[3]=Point(530,250);
Canvas->Polygon((TPoint*) Jendela,3);

Canvas->MoveTo(330,180);
Canvas->LineTo(330,250);
Canvas->MoveTo(400,180);
Canvas->LineTo(400,250);
Canvas->MoveTo(470,180);
Canvas->LineTo(470,250);

}
//---------------------------------------------------------------------
------

2.3.2 Mengenal Atribut


1. Mengenal Pen
Langkah 1
Rancanglah Form Dengan Nama untuk File Unit adalah Upen.cpp dan
Nama file project adalah Pen.bpr

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 19


Langkah 2
Buat menu dengan komponen TMainMenu terdiri dari Pen dan sub
menu Pen adalah ”Style”, ”Color” ,”Width”

Langkah 3
Buka File Upen.h (ctrl-F6) dan deklarasikan fungsi-fungsi berikut pada
bagian public
void _fastcall BersihkanCanvas();
void _fastcall SetDefault();

Langkah 4
Buka File Upen.cpp dan definisikan fungsi-fungsi tersebut pada bagain
akhir kode program dengan menggunakan sintak berikut

void _fastcall TForm1::BersihkanCanvas()


{
Canvas->Brush->Style = bsSolid;
Canvas->Brush->Color = clWhite;
Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight));
}
//---------------------------------------------------------------------
------
void _fastcall TForm1::SetDefault()
{
Canvas->Pen->Width = 1;
Canvas->Pen->Mode = pmCopy;
Canvas->Pen->Style = psSolid;
Canvas->Pen->Color = clBlack;
}

Langkah 5
Isikan sintak berikut pada event OnClick pada item “Style” dari
komponen MainMenu1.
void __fastcall TForm1::Style1Click(TObject *Sender)
{
//membuat 7 element array dari tipe TPenStyle
TPenStyle JENIS[7] = { psSolid, psDash, psDot, psDashDot,
psDashDotDot, psClear, psInsideFrame };
int posisiY = 20; //deklarasi posisiY dengan nilai awal 20

BersihkanCanvas(); //Memanggil Fungsi bersihkanCanvas()


SetDefault();//memanggil Fungsi SetDefault()
for (int j=0; j<7; j++) {
Canvas->Pen->Style = JENIS[j];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 20


//menentukan koordinat awal
Canvas->MoveTo(100, posisiY);
//menggambar garis dari posisi awal sampai ke posisi ...
// (Lebar layar - 10, posisiY)
Canvas->LineTo(ClientWidth-10, posisiY);
posisiY +=20;
}

//Menuliskan teks ke layar pada koordinat tertentu


Canvas->TextOut(1, 10, "psSolid ");
Canvas->TextOut(1, 30, "psDash ");
Canvas->TextOut(1, 50, "psDot ");
Canvas->TextOut(1, 70, "psDashDot ");
Canvas->TextOut(1, 90, "psDashDotDot ");
Canvas->TextOut(1, 110, "psClear ");
Canvas->TextOut(1, 130, "psInsideFrame ");
}
//---------------------------------------------------------------------
------

Sampai disini, coba jalankan aplikas dan pilih menu Style, kita akan
melihat hasil seperti berikut

Langkah 6
Selanjutnya isikan sintak berikut pada event OnClick pada item ”Color”
dari komponen MainMenu1

void __fastcall TForm1::Color1Click(TObject *Sender)


{
BersihkanCanvas();
SetDefault();

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 21


//melakukan pengulangan untuk membuat 100 buah garis
for (int k=0; k<100; k++) {
//untuk mengacak (random) warna pena
Canvas->Pen->Color = RGB(random(255),random(255), random(255));
//untuk mengacak penentuan koordinat awal
Canvas->MoveTo(random(ClientWidth), random(ClientHeight));
//untuk membuat garis sampai koordinat acak
Canvas->LineTo(random(ClientWidth), random(ClientHeight));
}
}

Coba jalankan aplikasi tersebut. Pilih Menu Color. Hasil aplikasi akan
tampak sebagai berikut

Langkah 7
Isikan Sintak dibawah ini untuk Event Onclick pada item ”Width” dari
Komponen MainMenu1

void __fastcall TForm1::Width1Click(TObject *Sender)


{
int posisiY = 20;
BersihkanCanvas();
SetDefault();
for (int i=0; i<10; i++) {
Canvas->TextOut(10,posisiY, "Width = " + AnsiString(i));
Canvas->Pen->Width = i;
Canvas->MoveTo(80, posisiY + 8);
Canvas->LineTo(ClientWidth -10, posisiY + 8);
posisiY +=20;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 22


}
}
//---------------------------------------------------------------------
------

Jalankan aplikasi dan pilih menu Width, kita akan mendapatkan hasil
sebagai berikut

2. Mengenal Brush
Langkah 1
Buat aplikasi baru simpan untuk File Unit dengan nama Ubrush.cpp
dan untuk File Project Brush.bpr. Kemudian menu dari komponen
TmainMenu tambahan Menu dengan Caption ”&Brush” dan submenu
dengan Caption ”Style”

Langkah 2
Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada
Bagian Public
void _fastcall BersihkanCanvas();

Selanjutnya deklarasikan fungsi BersihkanCanvas() pada File


Ubrush.cpp sebagai berikut

void _fastcall TForm1::BersihkanCanvas()


{

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 23


Canvas->Brush->Style = bsSolid;
Canvas->Brush->Color = clWhite;
Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight));
}
//---------------------------------------------------------------------------

Langkah 3
Isikan sintak berikut untuk event OnClick pada item ”Style” dari
komponen MainMenu1 sebagai berikut

//---------------------------------------------------------------------
------

void __fastcall TForm1::Style1Click(TObject *Sender)


{
BersihkanCanvas();

Canvas->TextOut(10,110, "bsClear");
Canvas->TextOut(120,110, "bsSolid");
Canvas->TextOut(240,110, "bsCrosh");
Canvas->TextOut(360,110, "bsBDiagonal");
Canvas->TextOut(10,250, "bsFDiagonal");
Canvas->TextOut(120,250, "bsDiagCross");
Canvas->TextOut(240,250, "bsHorizantal");
Canvas->TextOut(360,250, "bsVertical");

Canvas->Brush->Style = bsClear;
Canvas->Rectangle(10,10,100,100);

Canvas->Brush->Color = clRed;

Canvas->Brush->Style = bsSolid;
Canvas->Brush->Color = clBlue;
Canvas->Rectangle(120, 10, 220, 100);

Canvas->Brush->Style = bsCross;
Canvas->Brush->Color = clGreen;
Canvas->Rectangle(240, 10, 340, 100);

Canvas->Brush->Style = bsBDiagonal;
Canvas->Brush->Color = clYellow;
Canvas->Rectangle(360, 10, 460, 100);

Canvas->Brush->Style = bsFDiagonal;
Canvas->Brush->Color = clBlack;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 24


Canvas->Rectangle(10, 140, 100, 240);

Canvas->Brush->Style = bsDiagCross;
Canvas->Brush->Color = clBlue;
Canvas->Rectangle(120, 140, 220, 240);

Canvas->Brush->Style = bsHorizontal;
Canvas->Brush->Color = clGreen;
Canvas->Rectangle(240, 140, 340, 240);

Canvas->Brush->Style = bsVertical;
Canvas->Brush->Color = clRed;
Canvas->Rectangle(360, 140, 460, 240);

Jalankan aplikasi pilih menu Style, akan mendapat hasil sebagai


berikut

2.1 Latihan
Buatlah Aplikasi membentuk objek dengan bidang geomerti dan
atributnya.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 25


Bab 3.KOORDINAT SISTEM DAN LAYAR

3.1 Pendahuluan
Koordinat dapat diartinya sebagai tata keseimbangan yang membantu
kita di dalam menentukan suatu kondisi dengan nilai dan batas dalam konteks
geometri. Pada koordinat kartesius arah vertikal digunakan sebagai sumbu y,
dengan y positif ke atas dan arah ke bawah sebagai y negatif, arah mendatar
digunakan sebagai sumbu x dan x positif ke arah kanan dan x negatif ke arah
kiri. Tetapi layar monitor menggunakan orientasi berbeda. Monitor
mengunakan arah ke bawah sebagai sumbu y positif, disamping itu monitor
juga tidak mengenal nilai negatif.
Pada komputer grafik, ada 3 macam sistem koordinat yang harus kita
perhatikan, yaitu
1. Koordinat Nyata
2. Koordinat Sistem
3. Koordinat Tampilan atau Layar

3.2 Koordinat Nyata (World Coordinat)


Yang dimaksud dengan koordinat nyata adalah koordinat yang pada
saat itu object bersangkutan berada. Dalam bahasa Inggris disebut real
world coordinate untuk menghindari kerancuan dengan istilah world
coordinate yang digunakan untuk GLOBUS.

3.3 Sistem Koordinat


Adalah suatu yang abstrak dan biasanya digunakan untuk perhitungan
data yang hasilnya perlu ditampilkan kembali pada layar atau di atas kertas.
Sistem koordinat sealau dikaitkan dengan dimensi, dimana
0 D , dimensi ke 0
1 D, dimensi ke 1
2 D, dimensi ke 2
3 D, dimensi ke 3

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 26


4 D, dimensi ke 4
5 D, dimensi ke 5, dan seterusnya
Sebuah titik secara umum sering disebut dimensi ke 0, garis dimensi
ke 1, bidang dimensi ke 2, kubus dimensi ke 3, dan seterusnya. Untuk
kebutuhan grafik umumnya kita menggunakan dimensi ke 3. Kita mempunyai
sistem koordinat untuk 2 dimensi dan 3 dimensi yang dibedakan dengan
jumlah sumbu koordinat yang dimiliki oleh masing-masing sistem. Sistem 2
Dimensi memiliki 2 sumbu koordinat, yaitu sumbu x dan sumbu y, sedangkan
sistem koordinat 3 dimensi memiliki 3 buah sumbu koordinat, yaitu x, y dan z.

y
y

x
z
x

Sistem koordinat 2D Sistem Koordinat 3D


Gambar 3.1 Dimensi Sistem Koordinat

3.4 Sistem koordinat dua dimensi

Sistem koordinat Kartesius dalam dua dimensi umumnya didefinisikan


dengan dua sumbu yang saling bertegak lurus antar satu dengan yang lain,
yang keduanya terletak pada satu bidang (bidang xy). Sumbu horizontal diberi
label x, dan sumbu vertikal diberi label y. Pada sistem koordinat tiga dimensi,
ditambahkan sumbu yang lain yang sering diberi label z. Sumbu-sumbu
tersebut ortogonal antar satu dengan yang lain. (Satu sumbu dengan sumbu
lain bertegak lurus.)

Titik pertemuan antara kedua sumbu, titik asal, umumnya diberi label
0. Setiap sumbu juga mempunyai besaran panjang unit, dan setiap panjang
tersebut diberi tanda dan ini membentuk semacam grid. Untuk
mendeskripsikan suatu titik tertentu dalam sistem koordinat dua dimensi, nilai

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 27


x ditulis (absis), lalu diikuti dengan nilai y (ordinat). Dengan demikian, format
yang dipakai selalu (x,y) dan urutannya tidak dibalik-balik.

Gambar 3.2 Keempat kuadran sistem koordinat Kartesius


Gambar - Keempat kuadran sistem koordinat Kartesius. Panah yang ada
pada sumbu berarti panjang sumbunya tak terhingga pada arah panah
tersebut.Pilihan huruf-huruf didasari oleh konvensi, dimana huruf-huruf yang
dekat akhir (seperti x dan y) digunakan untuk menandakan variabel dengan
nilai yang tak diketahui, sedangkan huruf-huruf yang lebih dekat awal
digunakan untuk menandakan nilai yang diketahui. Sebagai contoh, pada
Gambar 3, titik P berada pada koordinat (3,5).Karena kedua sumbu bertegak
lurus satu sama lain, bidang xy terbagi menjadi empat bagian yang disebut
kuadran, yang pada Gambar 3.2 ditandai dengan angka I, II, III, dan IV.
Menurut konvensi yang berlaku, keempat kuadran diurutkan mulai dari yang
kanan atas (kuadran I), melingkar melawan arah jarum jam (lihat Gambar 3).
Pada kuadran I, kedua koordinat (x dan y) bernilai positif. Pada kuadran II,
koordinat x bernilai negatif dan koordinat y bernilai positif. Pada kuadran III,
kedua koordinat bernilai negatif, dan pada kuadran IV, koordinat x bernilai
positif dan y negatif (lihat tabel dibawah ini).

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 28


Tabel 3. 1 Tabel Kuadran Sistem Koordinat Kartesius
Nilai nilai
Kuadran
x y
I >0 >0
II <0 >0
III <0 <0
IV >0 <0

3.4 Koordinat Layar


Koordinat layar atau screen coordinat adalah koordinat yang dipakai
untuk mengatur penampilan suatu objek pada layar, baik itu layar komputer
maupun layar lainnya. Umumnya layar 2 dimensi mempunyai 2 sumbu
koordinat, yaitu sumbu x dan y. Namun demikian ada yang berusaha untuk
membuat layar 3 dimensi, walau kini masih dalam tahap penelitian dan belum
ditemukan dipasaran bebas (Ingat istilah Hologram)

(0,0)

Y
Gambar 3.3 Sistem Koordinat Layar

Perbedaan koordinat layar dengan sistem koordinat yang lain adalah


posisi nilai 0 untuk sumbu x dan Y. Ada yang menempatkan sumbu (0,0)
pada kiri atas dan ada juga yang meletakkan pada kiri bawah.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 29


3.5 Konversi Koordinat

3.5.1 Konversi dari koordinat Nyata ke Sistem


Konversi dari koordinat nyata ke sistem dilakukan dengan
memperhatikan dimensi dari sistem itu sendiri. Koordinat nyata mempunyai
sistem 3 dimensi, sedangkan koordinat sistem ada 2 pilihan yaitu 2 dimensi
dan 3 dimensi.
Kita juga perlu memperhatikan adakah nilai titik pusat sumbu koordinat
karena koordinat nyata kita belum tahu dimana letaknya.

Real World Koordinat sistem (1)

Koordinat Sistem (2) Koordinat Sistem (3)


Gambar 3.4 Koordinat Sistem

Contoh di atas menunjukkan bahwa ada banyak kemungkinan untuk


konversi nilai koordinat nyata ke koordinat sistem. Masing-masing posisi
memiliki kelemahan dan kelebihan untuk proses selanjutnya. Dengan
demikian untuk menentukan nilai sistem koordinat juga perlu
mempertimbangkan bagaimana langkah selanjutnya.
Jika kita sudah menentukan nilainya, langkah selanjutnya adalah
memproses nilai tersebut untuk sistem koordinat.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 30


3.5.2 Konversi dari koordinat sistem ke layar
Masalah yang penting untuk diperhatikan di sini adalah perbedaan nilai
koordinat antar koordinat sistem dengan koordinat layar, di mana koordinat
sistem bisa memiliki nilai negatif, sedangkan koordinat layar hanya mengenal
nilai positif. Kalau pada koordinat sistem ada salah satu sumbu yang bernilai
negatif maka data tersebut (pixel) tidak akan tampil pada layar. Dengan kata
lain, pixel tampil di luar layar. Lihat contoh pada gambar dibawah ini :

Koordinat Sistem (3) Koordinat Layar


Gambar 3.5 Konversi Koordinta Sistem ke layar

Pada contoh di depan, gambar yang ditampilkan di layar muncul


secara terbalik karena sistem nilai antara koordinat sistem dan layar berbeda.
Agar gambar dapat tampil dengan sempurna, maka jika ada nilai sumbu
koordinat yang negatif, nilai tersebut harus diubah menjadi positif terlebih
dahulu dengan menggeser semua data yang terkait yang sama sementara
nilai sumbu Y dibalik.

Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2 tetap


seperti semula.Untuk mengkonversi koordinat sistem x dan y ke koordinat
dilakukan perhitungan:

Scr_x = x + midx, dimana midx = max_x_screen/2

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 31


Scr_y = midy - y, dimana midy = max_y_screen/2

Contoh :
Untuk layar dengan ukuran 400 x 640, maka
Max_x_screen = 400 dan
Max_y_screen = 640
1. Terdapat segitiga dengan sistem koordinat titik A(-10,-10), B(80,-
10), C(35, 70), konversikan ke koordinat layar

A B
Solusi
Scr_x = x + midx, dimana midx = max_x_screen/2
Scr_y = midy - y, dimana midy = max_y_screen/2
Sehingga
midx = 400/2 = 200; midy = 640/2 = 320
A’x = x + midx = -10 + 200 = 190
A’y = midy –y = 320 –(-10) = 330
B’x = x + midx = 80 + 200 = 280
B’y = midy –y = 320 –(-10) = 330
C’x = x + midx = 35 + 200 = 235
C’y = midy –y = 320 –(70) = 250
Hasil : A’(190, 330) B’(280,330) C’(235, 250)

(0,0)

midy

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 32


midx (400,640)

Bab 4.PEMBANGKIT GARIS

4.1 Titik dan Garis


Pembentukan titik dilakukan dengan mengkonversi suatu posisi
koordinat dengan program aplikasi ke dalam suatu operasi tertentu
menggunakan peralatan output. Garis dibuat dengan menentukan posisi titik
diantara titik awal dan akhir dari suatu garis. Kemudian , peralatan output
membuat garis sesuai titik-titik tersebut. Untuk peralatan analog, seperti
plotter dan random –scan display, garis lurus dapat dihasilkan dengan halus.
Sedangkan pada peralatan digital, garis lurus dihasilkan dengan menetapkan
titik diskrit antara titik awal dan akhir. Posisi titik diskrit sepanjang garis lurus
dapat diperhitungkan dari persamaan garis tersebut. Perhitungan titik yang
menghasilkan nilai pecahan, dikonversi menjadi posisi pixel. Pembulatan nilai
koordinat ke integer menghasilkan garis yang ditampilkan pada layar
menyerupai gambar tangga, Kehalusan tampilan pada layar akan tergantung
pada resolusi yang digunakan.
Resolusi dapat diartikan sebagai kepadatan pixel yang terdapat pada
suatu area tertentu. Resolusi 400 x 640 berarti pada layar komputer terdapat
sebanyak 400 pixel per layar dengan masing-masing baris mempunyi 640
pixel. Resolusi juga dapat dibedakan menjadi kasar, medium dan halus.
Resolusi berpengaruh terhadap baik tidaknya tampilan gambar grafik pada
layar komputer. Layar dengan resolusi tinggi (Halus) akan menghasilkan
gambar yang bagus pula. Sebagai ilustrasi, lihat gambar berikut.
Low Resolusion High Resolusion

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 33


Gambar 4.1 Perbandingan Resolusi Layar
Pada gambar diatas terlihat bahwa tampilan garis pada layar komputer
tidak sesempurna garis di atas kertas.
Garis dikaterorikan menjadi 4 macam, yaitu horisontal, vertikal,
diagonal dan garis bebas. Untuk menampilkan atau menggambar garis layar
dibutuhkan minimal 2 titik (endpoint), yaitu titik awal dan akhir. Awal garis kita
mulai dengan titik atau pixel pertama, P1, diikuti dengan titik kedua, P2. Untuk
mendapatkan titik-titik selanjutnya sampai ke Pn, perlu dilakukan inkrementasi
atas nilai koordinat sumbu X dan Y pada titik sebelumnya. Perhitungan
inkrementasi untuk masing-masing sumbu adalah berbeda. Garis vertikal,
horisontal, diagonal, dan bebas masing-masing mempunyai ciri khas sendiri
Tabel 4.1 Inkrementasi sumbu
Jenis Sumbu-X Sumbu-Y
Horisontal Gerak(X=X+1) Konstan
Vertikal Konstan Gerak(Y=Y+1)
Diagonal Gerak(X=X+1) Gerak(Y=Y+1)
Bebas Gerak(X=X+n) Gerak(Y=Y+m)
n dan m adalah nilai inkrementasi

4.2 Garis Horisontal


Garis horisontal adalah garis yang membentang secara paralel dengan
sumbu-X dengan asumsi titik P1 pada koordinat x1 lebih kecil daripada x2
dari P2, sedangkan y1 dan y2 konstan.
Algoritma
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik awal < titik akhir, lakukan inkrementasi sumbu-x dari titik
awal sampai titik akhir.
Jika tidak, maka

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 34


Lakukan dekrementasi sumbu-X dari titik awal sampai titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.

Program gambar garis harisontal

void __fastcall TForm1::Button1Click(TObject *Sender)


{
x1=100; y1=100;
x2=200; y2=100;
int i;
if (x1<x2)
for (i=x1;i<=x2;i++)
Canvas->Pixels[i][y1]=clRed;
else
for (i=x1;i>=x2;i--)
Canvas->Pixels[i][y1]=clRed;
}

4.3 Garis Vertikal


Garis vertikal adalah garis yang membentang paralel dengan sumbu-Y
dengan asumsi kita mulai dengan titik P1 pada koordinat Y1 lebih kecil dari
pada Y2 dari P2, sedangkan x1 dan x2 adalah konstan
Algoritma:
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik akhir < titik awal, lakukan inkrementasi sumbu-y dari titik
awal sampai titik akhir.
Jika tidak, maka
Lakukan dekrementasi sumbu-y dari titik awal sampai titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.
Program gambar garis vertikal
void __fastcall TForm1::Button1Click(TObject *Sender)
{
x1=200; y1=100;
x2=200; y2=200;
int i;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 35


if (y1<y2)
for (i=y1;i<=y2;i++)
Canvas->Pixels[x1][i]=clBlue;
else
for (i=y1;i>=y2;i--)
Canvas->Pixels[x1][i]=clBlue;
}

4.4 Garis Diagonal


Garis diagonal adalah garis yang membentang parale dengan 45
derajat dari sumbu-x atau sumbu-y dengan asumsi kita mulai dengan titik P1
dengan koordinat x1 dan y1 lebih kecil dari pada y1 dan y2 dari P2 atau
sebaliknya
Algoritma:
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik akhir < titik awal, lakukan inkrementasi sumbu-x dan
sumbu-y dari titik awal sampai titik akhir.
Jika tidak, maka
Lakukan dekrementasi sumbu-x dan sumbu-y dari titik awal sampai
titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.
Program gambar garis vertikal
Program garis diagonal
void __fastcall TForm1::Button1Click(TObject *Sender)
{
x1=50; y1=100;
x2=200; y2=200;
int i;
if ((x1<x2) && (y1<y2))
{ do
{
x1++;
y1++;
Canvas->Pixels[x1][y1]=clBlue;
}
while ((x1<=x2)||(y1<=y2));
}
else
{do

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 36


{
x1--;
y1--;
Canvas->Pixels[x1][y1]=clBlue;
}
while ((x1>=x2)||(y1>=y2));
}
}
//---------------------------------------------------------------------
------

4.5 Garis Bebas


Garis bebas berbeda dengan garis horisontal, vertikal dan diagonal
yang telah kita kenal. Untuk penayangannya pada layar tidak begitu sulit dan
bentuk garis yang ditampilkan cukup sempurna. Garis bebas mempunyai ciri,
yaitu antara 2 titik, P1 dan P2, selalu membentuk suatu sudut yang besarnya
sangat bervariasi. Sudut ini lah yang menentukan kemiringan suatu garis atau
disebut juga gradasi.
Pengambaran garis bebas salah satunya adalah dengan
menggunakan algoritma Digital Differential Analyzer(DDA) adalah algoritma
pembentukan garis berdasarkan berhitungan dx maupun dy, menggunakan
rumus dy = m.dx.
Algoritma DDA
1. Tentukan koordinat awal garis (x0,y0)
2. tentukan koordinat akhir garis (x1,y1)
3. Hitung jarak mendatar ke 2 titik (dx)
Dx=x1-x0

4. Hitung jarak mendatar ke 2 titik (dy)


Dy=y1-y0

5. Tentukan faktor pembagi (mencari yg lebih panjang)


Apakah dx>dy,bila ya
Step=dx

Bila tidak
Step=dy

6. Hitung faktor penambah ke koordinat mendatar dan vertikal titik


berikut (x_tambah,y_tambah)
X_tambah=dx/step
Y_tambah=dy/step

7. Buat loop mulai titik ke 1 sampai titik ke step

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 37


For k=1 to step

8. Hitung koodinat titik berikutnya


X=x+x_tambah
Y=y+y_tambah

9. gambar pikxel pada koordinat (x,y)


Catatan : koordinat x,y harus bulat (integer), sehingga hasil dari
perhitungan diatas harus diinteger-kan
10. Ulangi langkah ke 7, dan seterusnya sampai titik ke step

Program untuk menciptakan garis dari titik dengan algoritma DDA


x0=10;y0=10;
x1=100;y1=200;
dx=x1-x0;
dy=y1-y0;
x=float(x0);y=float(y0);
if (dx>dy)
step=dx;
else
step=dy;
x_tambah=(float) dx/step;
y_tambah=(float) dy/step ;
int xx,yy;
for (k=0;k<step;k++)
{
x+=x_tambah;
y+=y_tambah;
Canvas->Pixels[int(x)][int(y)]=clRed;
}

BAB 5.TRANSFORMASI 2D

5.1 Transformasi
Gambar dan grafik dapat dibuat berdasarkan prosedur dan atribut
output primitif. Dalam aplikasi grafik diperlukan perubahan bentuk, ukuran dan
posisi suatu gambar yang disebut dengan manipulasi. Perubahan gambar
dengan mengubah koordinat dan ukuran suatu objek disebut transformasi
geometri. Kata transformasi berarti berubah bentuk. Transformasi diperlukan
untuk
 mengubah (transform) posisi suatu objek dari suatu tempat asal ke
posisi elemen grafik.
 Memindahkan suatu objek dari suatu tempat ke tempat lain

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 38


 Memutar posisi suatu objek pada titik pusat
 Mengubah ukuran suat objek baik memperkecil maupun memperbesar
dari ukuran aslinya.
 Menarik objek ke samping kiri atau kanan dan bahkan atas bawah.
Transformasi dasar yaitu translasi, skala dan rotasi. Selain
transformasi tersebut , masih ada transformasi lain yang biasa digunakan
untuk mengubah suatu objek , seperti refleksi, streching/shear. Ilustrasi
Tampak pada gambar dibawah ini

Gambar 5.1 Transformasi

5.2 Perpindahan (iTranslation)


Translasi adalah transformasi terhadap suatu objek dengan
menggesernya dari suatu posisi ke posisi lain.

C’
C
ty tx A’ B’
A B

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 39


Gambar 5.2 Translasi (1)

Translasi dilakukan dengan penambahan translasi pada sumbu suatu


titik koordinat dengan translasi vector atau shift vector, yaitu (tx, ty) dimana tx
adalah translasi vector menurut sumbu x, sedangkan ty adalah translasi
vektor menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh
dengan menggunakan rumus
x’ = x + tx
y’ = y + ty
dimana (x,y) adalah koordinat asal suatu objek dan (x’, y’) adalah
koordinat baru objek tersebut setelah di translasi. Translasi adalah
transformasi dengan bentuk yang tetap, memindahkan object apa adanya.
Dengan demikian, setiap titik dari object akan ditranslasi dengan besaran
yang sama. Titik yang ditranslasi akan dipindahkan ke lokasi lain menurut
garis lurus.

P2(x, y+ty)

P(x,y) P1(x+tx, y)
P3(x+(-tx),y)

P4(x, y-ty)

Gambar 5.3 Translasi (2)

Contoh translasi
Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan
sistem koordinat A(10, 10), B(30, 10) dan C(10, 30) dengan translasi
vektor (10, 20), pertama-tama dihitung hasil translasi satu demi satu.
Penyelesaian

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 40


Titik A x’A = xA + tx = 10 + 10 = 20
y'A = yA + ty = 10 + 20 = 30
Hasil translasi titik A’(20, 30)
Titik B x’B = xB + tx = 30 + 10 = 40
y'B = yB + ty = 10 + 20 = 30
Hasil translasi titik B’(40, 30)
Titik C x’C = xC + tx = 10 + 10 = 20
y'C = yC + ty = 30 + 20 = 50
Hasil translasi titik C’(20, 50)
Dengan demikian hasil translasi merupakan segitiga dengan koordinat
A’(20, 30), B’(40, 30), C’(20, 50)

Latihan :
1. Coba Gambarkan proses tranlasi tersebut
2. Geser objek ABC ke kanan 30 pixel
3. Geser objek ABC ke bawah 10 pixel
4. Terdapat segiempat ABCD dengan koodinat sebagai berikut
A(40, 100), B(70, 100), C(70, 70), D(40, 70)
a. Translasikan objek ABCD dengan translasi vektor (15, 30)
b. Geserlah objek ABCD ke kiri 40 pixel
c. Gambarkan Objek ABCD dan kedua proses transalasi A dan B

5.3 Penskalaan (scalling)


Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu
yang mengakibatkan berubahnya ukuran obyek secara keseluruhan.
Perubahan ukuran suatu objek menghasilkan koordinat baru.
Koordinat baru diperoleh dengan melakukan perkalian koordinat dengan
skaling faktor , yaitu (sx, sy), dimana sx adalah scaling factor menurut sumbu
x, sedangkan sy adalah scaling faktor menurut sumbu y. Koordinat baru titik
yang diskala dapat diperoleh dengan rumus
x’ = x . Sx
y’ = y . Sy

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 41


Dimana (x, y) adalah koordinat asal suatu objek dan (x’, y’) adalah
koordinat setelah diskala.
Scaling factor sx dan sy dapat diberikan sembarang nilai positif. Nilai
lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil
dari 1, maka objek akan diperkecil. Bila sx dan sy mempunyai nilai sama,
maka skala tersebut uniform scaling. Nilai yang tidak sama dari sx dan sy
menghasilkan differential scaling, yang biasa digunakan pada program
aplikasi.

Contoh skala

Segitiga A(10,20),B(50,20),dan C (10,100) diperbesar mendatar 2 kali


dan vertikal 0,5 kali.Hitung hasil transformasi dan gambarkan hasil.

Penyelesaian :
Sx=2, Sy=0,5

Xa’=xa*Sx=10*2=20 ya’=ya*Sy=20*0,5=10
Xb’=xb*Sx=50*2=100 yb’=yb*Sy=20*0,5=10
Xc’ =xc*Sx=10*2=20 yc’=yc*Sy=100*0,5=50
Sehingga A’(20,10),B’(100,10),C’(20,50)

Gambar
100
90
80
70 asal
60
50
40
30 hasil
20
10

10 20 30 40 50 60 70 80 90 100 110

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 42


Gambar 5.4 Skala

5.4 Perputaran (Rotation)


Rotasi dapat diartikan sebagai aksi perputaran suatu objek sebuah
sudut θ dari posisi asal pada titik rotasi (r = Rotasion point). Yang berputar
adalah titik objek tersebut.
Rotasi dua dimensi pada suatu objek akan memindahkan objek
tersebut menurut garis melingkar. Pada bidang xy. Untuk melakukan rotasi
diperlukan sudut rotasi θ dan pivot point (xp, yp) atau rotation point dimana
objek di rotasi.
Nilai positif dari sudut rotasi menentukan arah rotasi berlawanan
dengan jarum jam, dan sebaliknya nilai negatif akan memutar objek searah
jarum jam.

Persamaan

X’=x*cos θ -y*sin θ
Y’=x*sin θ + y*cos θ

Dengan θ:adalah sudut putar

Contoh
Segitiga ABC diatas diputar 90o,hitung koordinat hasil dan gambarkan!
Segitiga A(10,20),B(50,20),dan C (10,100)
Penyelesaian
θ=90o
maka,
xa’=xa*cos 90-ya*sin 90=10*0-20*1=-20
ya’=xa*sin 90+ya*cos 90=10*1+20*0=10
xb’=xb*cos 90-yb*sin 90=50*0-20*1=-20
yb’=xb*sin 90+yb*cos 90=50*1+20*0=50
xc ’=xc *cos 90-yc*sin 90=10*0-100*1=-100

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 43


yc’=xc*sin 90+yc*cos 90=10*1+100*0=10
jadi
A’(-20,10),B’(-20,50),C’(-100,10)
Gambar
100
90
80
70
asal
60
50
hasil
40
30
20
10

-100 -90 -80 -70 -60 -50 -40 -30 -20 -10 0 10 20 30 40 50

Gambar 5.5 Rotasi

Latihan
1. Terdapat segiempat A(10,10),B(100,10),C(100,100),dan D(10,100)
diperbesar 2x hitung dan gambar hasil!
2. terdapat garis A(0,0) dan B(100,100) diputar –90o.hitung dan gambar
hasil !

5.5 Pencerminan (Refection)


Refleksi suatu titik (x, y) terhadap sumbu x akan menempatkan titik di (x’,
y’) dengan hubungan
x’ = x
y’= -y

5.6 Pembebanan (Shearing)


Shear terhadap sumbu y dengan faktor s akan menempatkan titik di
(x’,y’) dengan hubungan
x’ = x + y s
y’ = y

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 44


5.7 Implementasi Transformasi
1. Translasi dan Skala
Rancang Form Sebagai Berikut

Kode Perintah dalam file Header


public: // User declarations
int x1, y1, x2, y2;
int Tx, Ty;
float Sx, Sy;
__fastcall TForm1(TComponent* Owner);
Kode Perintah dalam File Unit
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "UtranSkal.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------------

void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender)


{
//PaintBox1->Canvas->Pen->Color = clWhite;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 45


//PaintBox1->Canvas->Brush->Color = clWhite;
//PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);
int Tx;
Tx = StrToInt(EditTx->Text);
Ty = StrToInt(EditTy->Text);
x1 = x1 + Tx; y1 = y1 + Ty;
x2 = x2 + Tx; y2 = y2 + Ty;
PaintBox1->Canvas->Pen->Color = clRed;
PaintBox1->Canvas->Brush->Color = clGreen;
PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);

}
//---------------------------------------------------------------------------

void __fastcall TForm1::FormPaint(TObject *Sender)


{
x1 = 10;
x2 = 40;
y1 = 10;
y2 = 60;
PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);
PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonSkalaClick(TObject *Sender)
{
PaintBox1->Canvas->Pen->Color = clWhite;
PaintBox1->Canvas->Brush->Color = clWhite;
PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);
Sx = StrToFloat(EditSx->Text);
Sy = StrToFloat(EditSy->Text);
x1 = int(x1 * Sx); y1=int(y1*Sy);
x2 = int(x2*Sx); y2= int(y2*Sy);
//PaintBox1->Canvas->Brush->Color = clYellow;
PaintBox1->Canvas->Pen->Color = clBlack;
PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);

}
//---------------------------------------------------------------------------

void __fastcall TForm1::ButtonGambarClick(TObject *Sender)


{
x1 = 10;
x2 = 40;
y1 = 10;
y2 = 60;
PaintBox1->Canvas->Pen->Color = clYellow;
PaintBox1->Canvas->Brush->Color = clYellow;
PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);
PaintBox1->Canvas->Pen->Color = clRed;
PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 46


PaintBox1->Canvas->Ellipse(x1, y1, x2, y2);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonKeluarClick(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------

Jika Apilkasi dijalankan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 47


BAB 6. TRANSFORMASI 2D LANJUT

6.1 Transformasi Komposit dan Sistem Koordinat Homogen


Suatu transformasi adalah merupakan komposisi dari sejumlah
transformasi dasar. Misal rotasi dilakukan pada suatu titik rotasi (pivot point)
yang bukan origin maka transformasi ini dapat dilakukan dengan melakukan
translasi pivot point ke titik origin, lalu melakukan rotasi terhadao titik origin,
lalu hasilnya ditransalasikan kembali ke pivot point. Dalam bentuk
matematisnya itu komputasi transformasi komposit seperti itu memerlukan
komputasi-komputasi masing-masing transformasi dasar tersebut.
Agar dapat dibentuk reperesentasi yang lebih umum untuk digunakan
sistem koordinat komogen. Suatu titik (x, y) di dalam sistem koordinat
homogen ini menjadi suatu matrik kolom [xh yh h]T dengan
x = xh / h
y = yh / h
h≠ 0
Dalam sistem koordinat ini makan setiap transformasi di atas dapat
direpresentasikan dalam bentuk matriks transformasi 3 x 3. Operasi
transformasi suatu titik adalah perkalian matriks transformasi dengan matriks
kolom dari titik ybs sbb.
 x'  m11 m12 m13   x 
 y ' =  m m22 m23   y 
   21
 1   m31 m32 m33   1 

Matriks translasi T (t x , t y ) adalah :

 1 0 tx 
T (t x , t y ) =  0 1 t y 
 0 0 1 

Matriks rotasi R (α ) adalah:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 48


 cos α − sin α 0
R (α ) =  sin α cos α 0
 0 0 1

 sx 0 0
 0
Matriks Skala S ( s x , s y ) =  0 xy
 0 0 1

Matriks refleksi terhadap sumbu x,Refx, dan matriks refleksi terhadap sumbu
y, Refy, adalah :
 1 0 0  − 1 0 0
Re f x =  0 − 1 0 Re f y =  0 0 0
 0 0 1  0 0 1

Dan, matriks shear terhadap sumbu y dengan faktor shy, shy(s) adalah :
 1 s 0
Shx =  0 1 0
 0 0 1

Karena suatu transformasi komposit pada sutu titik itu dapat dipandang
sebagai sejumlah transformasi dasar yang terjadi pada titik tersebut. Maka
matriks dari dari transformasi komposit adalah hasil perkalian dari matriks-
matriks transformasi dasar yang bersangkutan.
M komposit = M n ...M 2 M 1

Contoh transformasi yang merupkana rotasi dari titik ( x r , y r ) dengan sudut α .


Transformasi ini dapat dipandang sebagai sejumlah transformasi dasar:
Translasi dari ( x r , y r ) ke titik origin  T (− x r ,− y r )
Rotasi di titik origin dengan sudut α → R (α )
Translasi dari titik origin ke ( x r , y r ) → T ( x r , y r )

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 49


Gambar 6.1 Transformasi Gabungan
Matriks transformasinya adalah
M = T ( x y , y r ) R(α )T (− x r ,− y r )

1 0 x r   cos α − sin α 0  1 0 − x r 
=  0 1 y r   sin ε cos α 0  0 1 − y r 
 0 0 1   0 0 1  0 0 1 

1 0 x r   cos α − sin α − x r cos α + y r sin α 


=  0 1 y r   sin α cos α − x r sin α + y r cos α 

 0 0 1   0 0 1 

Dalam aplikasi di grafika komputer kita mungkin akan mentrasformasikan


sejumlah besar titik dengan transformasi yang sama. Demikian representasu
koordinat homogen serta matriks transformasi ini maka transformasi komposit
dapat dilakukan dengan menghitung matriks transformasi terlebih dahulu
 cos α − sin α − x r cos α + y r sin α + x r 
=  sin α cos α − x r sin α + y r cos α + y r 
 0 0 1 

Kemudian memperkalikan setiap titik tersebut dengan matriks ini. Dalam


representasi fungsi transformasi biasa maka setiap titik perlu diperklaikan ke
masing-masing fungsi transformasi dasdarnya secara tidak efisien.
Walaupun secara konseptual dalam sistem koordinat homogen perkalian
matriks dengan titik tersebut adalah perkalian matriks 3x3 dengan matrik 3x1,

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 50


sebagai berikut. Dalam pemrogramannya bisa diefisienkan dengan
menggantikannya dengan perkalian berikut ini.
x' = m11 x + m12 y + m13

y ' = m21 x + m212 y + m23

6.2 Skala atau rotasi menggunakan sembarang titik pusat


Seperti telah dijelaskan sebelumnya, skala dan rotasi menggunakan
titik (0,0) sebagai titik pusat transformasi. Agar kita dapat menggunakan
sembarang titik pusat (Xt, Yt) sebagai titik pusat transformasi dilakukan
dengan urutan:
A. Cara 1
1. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt
2. Rotasi/Skala
3. Translasi (Xt, Yt)
Latihan
Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut
sebesar 60o dengan titik pusat (3,2)
y
D C
2
1 A B

1 3 x

Jawab :
A = (1,1), B = (3,1), C = (3,2), D=(1,2)
Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek
harus ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan
titik pusat (0,0), setelah itu objek diputar sebesar 60o dan kemudian hasil
pemutaran ditranslasikan sebesar(3,2)
1. Translasi sebesar (-3,-2)
A = (1-3,1-2) = (-2, -1)
B = (3-3, 1-2) = (0, -1)
C = (3-3, 2-2) = (0, 0)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 51


D = (1-3, 2-2) =(-2, 0)
2. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan:
X’=x*cos θ -y*sin θ
Y’=x*sin θ + y*cos θ

Xa’ = (-2)*cos 60 –(-1) *sin 60 = 1* 0.5 – 1 * 0.866 = -0.134


Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232
Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660
Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500
Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000
Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000
Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000
Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732
3. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan
A”=(2.866, -0.232)
B”=(3.866, 1.500)
C”=(3.000, 2.000)
D”=(2.000, 0.268)

Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah
y
D C
2 C”
1 A B B”
D”
1 A” 3 x

B. Cara 2
1. Rotasi/Skala, Misal : A’
2. Hitung dx dan dy , dx = Xt-XA’
dy = Yt-YA’
3. Translasi ke dx, dy

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 52


Misal
Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut
sebesar 60o dengan titik pusat (3,2)
y
D C
2
1 A B

1 3 x
Jawab

Aplikasi

Kode program
Jam.h
//---------------------------------------------------------------------------

#ifndef jam1H

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 53


#define jam1H
//---------------------------------------------------------------------------
#include <Classes.hpp>
#include <Controls.hpp>
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <ExtCtrls.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published: // IDE-managed Components
TPaintBox *PaintBox1;
TTimer *Timer1;
TTimer *Timer2;
void __fastcall PaintBox1Paint(TObject *Sender);
void __fastcall Timer2Timer(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);
float x1, x2, y1, y2, x,y;
float xt1, xt2, yt1, yt2, sudut;
float xs1, xs2, ys1, ys2, dx, dy ;
float sudut_rad;
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif

Jam.cpp
//---------------------------------------------------------------------
------
#include <vcl.h>
#include <math.h>
#pragma hdrstop
#include "jam1.h"
//---------------------------------------------------------------------
------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------
------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------
------
void __fastcall TForm1::PaintBox1Paint(TObject *Sender)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 54


{
PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110);
PaintBox1->Canvas->Ellipse(0,0,400,400);

PaintBox1->Canvas->MoveTo(200,0);
PaintBox1->Canvas->Pen->Width = 3;
PaintBox1->Canvas->LineTo(200,25);
PaintBox1->Canvas->MoveTo(200,400);
PaintBox1->Canvas->LineTo(200,375);
PaintBox1->Canvas->MoveTo(0,200);
PaintBox1->Canvas->LineTo(25,200);
PaintBox1->Canvas->MoveTo(400,200);
PaintBox1->Canvas->LineTo(375,200);

PaintBox1->Canvas->MoveTo(200,200);
PaintBox1->Canvas->LineTo(200,70);
PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);
PaintBox1->Canvas->Ellipse(196,196,204,204);
x1=200; y1=200; x2=200; y2=70;
x=200; y =70;
sudut = 0;
}
//---------------------------------------------------------------------
------
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
PaintBox1->Canvas->Pen->Width = 4;
PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110);
PaintBox1->Canvas->MoveTo(x1,y1);
PaintBox1->Canvas->LineTo(x2,y2);
PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);
PaintBox1->Canvas->Ellipse(196,196,204,204);
sudut=-25;
xs1=x1 *cos(sudut)-y1*sin(sudut);
ys1=x1 *sin(sudut)+y1*cos(sudut);
xs2=x2 *cos(sudut)-y2*sin(sudut);
ys2=x2 *sin(sudut)+y2*cos(sudut);
dx = x1-xs1;
dy = y1-ys1;
x1= xs1 + dx;
y1= ys1 + dy;
x2 =xs2 + dx;
y2 = ys2 + dy;
PaintBox1->Canvas->Pen->Width = 3;
PaintBox1->Canvas->Pen->Color = RGB (0, 0,0);
PaintBox1->Canvas->MoveTo(x1,y1);
PaintBox1->Canvas->LineTo(x2,y2);
PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);
PaintBox1->Canvas->Ellipse(196,196,204,204);
}

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 55


//---------------------------------------------------------------------
------

Hasil

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 56


Bab 7.A N I M A S I

Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika
komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer
pada bagian tertentu di layar, menvisualisasi cara kerja suatu alat bantu atau
mekanisme tertentu, menampilkan keluaran program dengan gambar-gambar yang
menarik dibanding hanya sederet angka, serta tak ketinggalan pula untuk program-
program permainan.

Teknik Animasi
1. inbetweening
Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari.
Ide dasar dari teknik ini adalah dengan menentukan posisi awal dan posisi
akhir dari objek, dan kemudian menghitung posisi objek yang baru,
menghapus pada posisi semula dan menggambar objek pada posisi yang
baru, sampai objek berada pada posisi akhir yang dituju.

Contoh

Hiu
Rancangan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 57


Hiu.H
//---------------------------------------------------------------------------
#ifndef sharkH
#define sharkH
//---------------------------------------------------------------------------
#include <Classes.hpp>
#include <Controls.hpp>
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <ExtCtrls.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published: // IDE-managed Components
TPaintBox *PaintBox1;
TTimer *Timer1;
TTimer *Timer2;
void __fastcall PaintBox1Paint(TObject *Sender);
void __fastcall Timer1Timer(TObject *Sender);
void __fastcall Timer2Timer(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);
int x1, y1, x2,y2,x3,y3;
int xk1,yk1, xk2, yk2, xk3, yk3, xk4, yk4;
int xl1, yl1, xl2, yl2, xl3, yl3;
int xg1, yg1, xg2, yg2;
POINT kapal[4];
POINT layar[3];
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
//---------------------------------------------------------------------------
Hiu.Cpp
#include <vcl.h>
#pragma hdrstop

#include "shark.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 58


void __fastcall TForm1::PaintBox1Paint(TObject *Sender)
{
PaintBox1->Canvas->Pen->Width=1;
PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);
PaintBox1->Canvas->Rectangle(0,0, 617,250);
PaintBox1->Canvas->Brush->Color=RGB(20,65, 212);
PaintBox1->Canvas->Rectangle(0,250, 617,473);
xk1=70; yk1=250;
xk2=120; yk2=250;
xk3=140; yk3=220;
xk4=50; yk4=220;

xg1=95; yg1=220;
xg2=95; yg2=200;

PaintBox1->Canvas->MoveTo(70,250);

PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);

kapal[0] = Point(70,250);
kapal[1] = Point(120,250);
kapal[2] = Point(140,220);
kapal[3] = Point(50,220);
PaintBox1->Canvas->Polygon((TPoint*)kapal,3);
PaintBox1->Canvas->MoveTo(95,220);
PaintBox1->Canvas->LineTo(95,200);
xl1=95;yl1=200;
xl2=140; yl2=200;
xl3=95; yl3=100;

layar[0] = Point(xl1,yl1);
layar[1] = Point(xl2,yl2);
layar[2] = Point(xl3,yl3);
PaintBox1->Canvas->Polygon((TPoint*)layar,2);
PaintBox1->Canvas->MoveTo(617,200);
PaintBox1->Canvas->Brush->Color=RGB(172,146, 25);

POINT titik[5];
titik[0] = Point(617,200);
titik[1] = Point(250,250);
titik[2] = Point(500,275);
titik[3] = Point(617,300);
titik[4] = Point(617,200);
PaintBox1->Canvas->Polygon((TPoint*)titik,4);
PaintBox1->Canvas->Pen->Color=RGB(126,39, 22);
PaintBox1->Canvas->Pen->Width=5;
PaintBox1->Canvas->MoveTo(540,260);
PaintBox1->Canvas->LineTo(520,150);
PaintBox1->Canvas->Pen->Color=RGB(22,126, 88);
PaintBox1->Canvas->LineTo(560,150);
PaintBox1->Canvas->MoveTo(520,150);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 59


PaintBox1->Canvas->LineTo(545,120);
PaintBox1->Canvas->MoveTo(520,150);
PaintBox1->Canvas->LineTo(520,120);
PaintBox1->Canvas->MoveTo(520,150);
PaintBox1->Canvas->LineTo(500,110);
PaintBox1->Canvas->MoveTo(520,120);
PaintBox1->Canvas->LineTo(530,100);
PaintBox1->Canvas->MoveTo(520,150);
PaintBox1->Canvas->LineTo(480,110);
PaintBox1->Canvas->MoveTo(520,150);
PaintBox1->Canvas->LineTo(480,150);
PaintBox1->Canvas->MoveTo(520,150);
PaintBox1->Canvas->LineTo(490,130);

PaintBox1->Canvas->Pen->Width=1;

x1=20; y1= 400;


x2=10; y2= 440;
x3=40; y3= 440;
PaintBox1->Canvas->MoveTo(x1, y1);
PaintBox1->Canvas->Pen->Color=RGB(119,131, 127);
PaintBox1->Canvas->Brush->Color=RGB(119,131, 127);
POINT titikhiu[4];
titikhiu[0] = Point(x1,y1);
titikhiu[1] = Point(x2,y2);
titikhiu[2] = Point(x3,y3);
titikhiu[3] = Point(x1,y1);
PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
PaintBox1->Canvas->Pen->Width = 2;
PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);
PaintBox1->Canvas->MoveTo(0,250);
PaintBox1->Canvas->LineTo(250,250);
PaintBox1->Canvas->Pen->Width = 1;
PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); //warna latar (laut/biru tua)
PaintBox1->Canvas->Pen->Color=RGB(20,65, 212); //warna latar (laut/biru tua)
POINT titikhiu[2];
titikhiu[0] = Point(x1,y1);
titikhiu[1] = Point(x2,y2);
titikhiu[2] = Point(x3,y3);
PaintBox1->Canvas->Polygon((TPoint*)titikhiu,2);
x1=x1+7; y1= 400;
x2=x2+7; y2= 440;
x3=x3+7; y3= 440;
PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); //warna hiu
PaintBox1->Canvas->Brush->Color=RGB(119,131, 127); //warna hiu
titikhiu[0] = Point(x1,y1);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 60


titikhiu[1] = Point(x2,y2);
titikhiu[2] = Point(x3,y3);
titikhiu[3] = Point(x1,y1);
PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3);
if (x2 > 617)
Close();

}
//---------------------------------------------------------------------------

void __fastcall TForm1::Timer2Timer(TObject *Sender)


{
PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);
PaintBox1->Canvas->Pen->Color=RGB(172,243, 246);

PaintBox1->Canvas->MoveTo(70,250);
PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);
POINT kapal[4];
kapal[0] = Point(xk1,yk1);
kapal[1] = Point(xk2,yk2);
kapal[2] = Point(xk3,yk3);
kapal[3] = Point(xk4,yk4);
PaintBox1->Canvas->Polygon((TPoint*)kapal,3);
PaintBox1->Canvas->MoveTo(xg1,yg1);
PaintBox1->Canvas->LineTo(xg2,yg2);

layar[0] = Point(xl1,yl1);
layar[1] = Point(xl2,yl2);
layar[2] = Point(xl3,yl3);
PaintBox1->Canvas->Polygon((TPoint*)layar,2);
xk1=xk1+2; yk1=250;
xk2=xk2+2; yk2=250;
xk3=xk3+2; yk3=220;
xk4=xk4+2; yk4=220;
xg1=xg1+2; yg1=220;
xg2=xg2+2; yg2=200;
xl1=xl1+2;yl1=200;
xl2=xl2+2; yl2=200;
xl3=xl3+2; yl3=100;
PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);
PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);

PaintBox1->Canvas->MoveTo(xk1,yk1);
PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);

kapal[0] = Point(xk1,yk1);
kapal[1] = Point(xk2,yk2);
kapal[2] = Point(xk3,yk3);
kapal[3] = Point(xk4,yk4);
PaintBox1->Canvas->Polygon((TPoint*)kapal,3);
PaintBox1->Canvas->MoveTo(xg1,yg1);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 61


PaintBox1->Canvas->LineTo(xg2,yg2);
POINT layar[3];
layar[0] = Point(xl1,yl1);
layar[1] = Point(xl2,yl2);
layar[2] = Point(xl3,yl3);
PaintBox1->Canvas->Polygon((TPoint*)layar,2);

PaintBox1->Canvas->Pen->Width = 2;
PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);
PaintBox1->Canvas->MoveTo(0,250);
PaintBox1->Canvas->LineTo(250,250);

if (xk2 > 250)


Timer2->Enabled = false;

}
//---------------------------------------------------------------------
------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 62


BAB 8.GRAFIKA 3D

8.1 Pendahuluan
Salah satu bentuk perkembangan terakhir penerapan komputer dalam
bidang grafika adalah pada aplikasi simulasi obyek tiga dimensi atau lebih
dikenal dengan sebutan kenyataan semu (virtual reality-VR). Aplikasi ini
dijumpai pada berbagai bidang dari yang sifatnya hiburan, rancang-bangun,
sampai pada simulasi untuk keperluan riset ilmiah.
Untuk mendukung adanya VR selain diperlukan suatu metode untuk
memvisualisasikan obyek 3 dimensi pada layar 2 dimensi juga didukung
perangkat keras berupa monitor yang langsung dipakai seperti memakai
kacamata dan sensor-sensor yang dipakai oleh pemakai.
Pada implementasi yang lebih sederhana dapat digunakan komputer yang
dipakai sehari-hari dengan layar monitor sebagai media penampil dan
berbagai alat input yang umum dipakai misalnya keyboard, mouse, joystick,
dan lain sebagainya.
Untuk menampilkan efek 3 dimensi pada layar 2 dimensi dengan
animasinya dapat digunakan metode analogi kamera sintetis. Dengan
metode ini suatu obyek nyata dapat dipandang dari kamera dari berbagai
jarak dan sudut pandang. Dengan mengubah jarak, sudut, dan arah
pandang akan didapatkan efek gambar dan animasi 3 dimensi di layar
kamera dari suatu obyek.
Pada implementasinya, agar didapatkan kinerja yang optimum, setiap
bagian dari obyek dibagi menjadi poligon-poligon, sehingga titik-titik yang
diproses merupakan titik acuannya saja dan setiap titik dibentuk poligon dan
diberi warna dengan kecerahan sesuai dengan posisi terhadap sumber
cahaya sintetis. Dengan demikian kualitas gambar semakin baik bila
kerapatan poligon persatuan luas semamin tinggi dengan konsekwensi beban
memori menjadi lebih tinggi dan kecepatan proses rendah, sehingga animasi
lebih kasar.
Visualisasi obyek 3 dimensi dengan komputer ini memungkinkan suatu
obyek 3 dimensi dapat dimanipulasi dan hasilnya dapat langsung terlihat
secara visual. Selain itu suatu obyek juga dapat dilihat dari berbagai jarak

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 63


dan sudut pandang serta dapat dilihat pula dalam bentuk kerangka (wire
frame) maupun solid dengan demikian apa yang terlihat lebih mendekati
pada obyek yang sesungguhnya.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 64


Bab 9.Transformasi pada obyek tiga dimensi
Pada obyek tiga dimensi dapat dilakukan 3 transformasi pokok yaitu
penggeseran (translation), perputaran (rotasi) , pembesaran (scaling).
Adapun jenis transformasi lain adalah pembebanan (shearing), dan
pencerminan (mirroring). Didalam program, transformasi ini juga dapat
dilakukan dengan mengubah persamaan menjadi operasi matriks 4x4.
Adapun persamaan setiap transformasi adalah sebagai berikut.
1. Penggeseran (translation)
( x’, y’,z’ ) = ( Tx +x, Ty +y, Tz +z)
dengan x’,y’, z’ : koordinat hasil transformasi
x,y,z : koordinat titik awal
Tx,Ty, Tz : faktor penggeseran kearah x, y, z
2. Pembesaran (scaling)
( x’,y’,z’ ) = (Sx *x, Sy *y, Sz *z)
dengan Sx,Sy, Sz : faktor pembesaran kearah x, y, z
3. Perputaran (rotation)
a) terhadap sumbu x
( x’,y’, z’ ) = (x , y *cos θ +z*sinθ, - y *sinθ+z*consθ)
b) terhadap sumbu y
( x’,y’,z’ ) = ( x *cos θ +z*sinθ,y , - x *sinθ+z*consθ)
c) terhadap sumbu z
(x’,y’, z’ ) = ( x *cos θ +y*sinθ, - x*sinθ+y*consθ , z )
dengan θ : sudut putar berlawanan arah jarum jam

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 65


Bab 10.Teknik penampilan obyek 3 dimensi
Pada sistem dua dimensi obyek gambar dua dimensi dapat langsung di
aplikasikan pada layar karena memiliki dimensi yang sama, kalaupun ada
perbedaan hanya pada arah sumbunya. Koordinat Cartesian memiliki sumbu
y arah ke atas, sedangkan koordinat layar sumbu y ke arah bawah. Akan
tetapi dengan sedikit modifikasi atau menggunakan fungsi bahasa
pemrograman tertentu misalnya Borland C++ 4.0 keatas dengan fungsi
terpasang, koordinat layar dapat disesuaikan dengan kordinat kartesian
dengan sumbu y ke arah atas.
Pada sistem tiga dimensi setiap titik memiliki 3 koordinat yaitu koordinat
x, y, dan z, sedangkan layar hanya memiliki sumbu x dan y. Oleh karena itu
diperlukan transformasi dari koordinat tiga dimensi atau disebut dengan
koordinat dunia menjadi koordinat dua dimensi.
Beberapa metode untuk menampilkan efek tiga dimensi pada layar dua
dimensi selain metode kamera sintetis yaitu proyeksi paralel, dan proyeksi
perspektif.

a. Proyeksi paralel

Proyeksi paralel merupakan teknik dasar untuk penyajian obyek tiga


dimensi pada layar dua dimensi, yang bertumpu pada 3 sudut pandang.
Pandangan depan, pandangan samping dan pandangan atas. Contoh
proyeksi paralel seperti pada gambar 1.

Untuk menggambarkan proyeksi paralel dalam tiga dimensi


diperlukan beberapa sudut pandang minimal atas, samping dan depan
kemudian di proyeksikan dalam koordinat tiga dimensi sehingga seperti
y
terlihat pada gambar 1.b.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 66


y
x
a. Bentuk obyek dalam tiga dimensi

b. Proyeksi pada bidang xy, pengamat terletak pada sumbu z

Gambar 1. Proyeksi paralel ortogonal tiga dimensi

Proyeksi parallel merupakan teknik yang relatif sederhana tetapi


gambar yang ditampilkan masih sulit untuk dibayangkan sebagai image
tiga dimensi, seperti pada gambar 1. Untuk itu dikembangkan cara lain
yaitu dengan teknik proyeksi perspektif seperti pada gambar 2.

b. Proyeksi perspektif
y
y y
z
z
x
z x x
x
a. Gambar kotak 3 dimensi b. Proyeksi pada bidang xy

Gambar 2. Proyeksi perspektif

Proyeksi perspektif adalah bentuk gambar tiga dimensi seperti


yang dilihat pada kenyataan sesungguhnya seperti yang terlihat oleh
mata manusia ataupun kamera. Teknik ini lebih menggambarkan
keadaan yang sesungguhnya tetapi untuk obyek dalam bentuk gambar
rangka (wire frame) untuk kedalaman tertentu dapat menimbulkan
dualisme gambar. Misalnya bagian yang terkesan didalam kadang-kadang
juga terkesan di luar.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 67


c. Kamera sintetis

Metode pendekatan yang telah dibahas dengan teknik proyeksi


diatas masih belum mampu menghasilkan efek 3 dimensi dengan baik.
Pada proyeksi paralel yang terlihat oleh pengamat hanyalah bagian depan
obyek sedang bagian yang lebih jauh untuk posisi x, dan y yang sama tak
terlihat.

Sedangkan pada proyeksi perspektif mata harus terletak pada


sumbu koordinat z, yang berarti bidang pandang harus berimpit dengan
bidang koordinat, misalnya xy. Dengan ketentuan ini maka penyajian
obyek tiga dimensi menjadi terbatas.

Untuk mengatasi hal tersebut sebelum diproyeksikan diperlukan


proses transformasi rotasi sehingga suatu obyek dapat dipandang dari
berbagai posisi, atas, bawah, samping dan lain sebagainya.

Terdapat dua cara yang identik untuk memandang suatu obyek dari
berbagai sisi yakni bidang pandang (view plane) pada posisi tetap, obyek
diputar atau bidang pandang berputar sedangkan obyek tetap.

Bila digunakan cara kedua dengan bidang pandang dianggap


sebagai film dalam kamera, maka suatu obyek dapat di pandang dari
berbagai sisi dengan menggerakkan dan memutar kamera. Metode ini
sering disebut dengan metode kamera sitetis (synthetic camera) seperti
pada gambar 3. Metode ini secar alengkap akan dibahas pada bab-bab
berikutnya

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 68


Bab 11.Metode kamera sintetis
Prinsip dengan metode kamera sitetis adalah mata akan melihat
sebagian obyek yang ada lewat jendela di dalam bidang pandang, dan
bagian obyek ini nanti akan digambar pada layar. Sistem koordinat pandang
ini sering disebut dengan koordinat uvn .

v yy

VUP-arah atas

Jarak pandang
VPN

u

N x

bidang pandang
z
Titik acuanpandang
(VRP)

Gambar 3. Sistem koordinat pandang

dengan VRP adalah titik acuan pandang (view reference point), r =


(rx,ry,rz), VPN adalah normal bidang pandang ( view-plane normal), N=
(nx,ny,nz).
Untuk menentukan arah kamera diperlukan 3 komponen yaitu VRP, VPN,
dan verktor v. Vektor r dan n dapat ditentukan secara bebas, sehingga
vektor v dapat ditentukan dengan menggunakan sembarang vektor.

11.1 Tahapan Transformasi pada Metode Kamera Sintetis

Langkah-langkah transformasi dari koordinat dunia menjadi koordinat


bidang pandang adalah sebagai berikut :

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 69


1. Translasikan setiap titik pada koordinat dunia sejauh jarak pandang
(view distance) yaitu jarak antara bidang pandang dengan titik
pandang (view refernce point).

yw
yw

V U N V U N

xw
xw

zw zw

2. Lakukan rotasi sedemikian sehingga sumbu z sama dengan vektor


normal bidang pandang (view plane normal-VPN) atau sumbu n,
sumbu y sama dengan sumbu v , dan sumbu x sama dengan sumbu
u.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 70


yw yw

V
V U
U

xw xw

N N

zw zw

yw

U xw

zw

3. Menentukan vektor “arah atas “ (view-up direction) dari bidang


pandang, dan putar obyek sejauh sudut arah-atas dengan sumbu
vertikal. Arah-atas adalah arah dari sumbu u dari bidang pandang.

4. Lakukan proyeksi paralel atau proyeksi perspektif dari obyek yang


sudah dalam koordinat bidang pandang dan masing-masing titik
memiliki koordinat uvn ke dalam bidang proyeksi uv. Pada proyeksi
paralel, bagian yang jauh dari pengamat ukurannya sama dengan bila
bagian tersebut dekat dengan pengamat, sehingga kesan tiga dimensi
pada layar belum nampak nyata, oleh karena itu untuk membuat kesan
tiga dimensi agar lebih nyata dapat digunakan proyeksi perspektif.
Proyeksi perspektif memiliki minimal satu titik lenyap (vanishing point),
sehingga bagian suatu obyek yang jeuh dari pengamat ukurannya
semakin mengecil. Hal ini sesuai dengan pandangan pada dunia nyata.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 71


5. Pemotongan (clipping) bagian-bagian yang akan dimunculkan pada
jendela bidang pandang untuk mengalokasikan bagian-bagian dari
obyek yang akan diproses dan tidak.

6. Menghapus bagian-bagian yang tersembunyi sehingga hanya bagian


permukaan yang nampak oleh pengamat saja yang di tampilkan.

7. Menentukan vektor normal tiap poligon yang membentuk bidang


tersebut untuk menetukan intensitas cahaya yang jatuh pada setiap
poligon tersebut

8. Penggambaran obyek dengan warna tiap poligon disesuaikan dengan


intensitas cahaya.

Langkah nomor 1 sampai dengan langkah nomor 5 diatas akan


menghasilkan simulasi tiga dimensi pada layar, akan tetapi hasil yang
nampak masih sulit mengidentifikasi bagian-bagian yang seharusnya
nampak dan tersembunyi, bagian yang jauh dan yang dekat.

Untuk menyempurnakan proses diatas agar efek tiga dimensi


semakin mendekati nyata dilakukan langkah dari nomor 6 dan seterusnya
dengan konsep seperti yang dijabarkan dibawah ini.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 72


BAB 12.PERMUKAAN TERSEMBUNYI (HIDDEN SURFACE)

Salah satu cara untuk menentukan bagian tersembunyi yang dibahas


disini adalah dengan algoritma pelukis (painter’s algorithm) disamping cara
lain misalnya back-face removal, z buffers, dan lain-lain. Cara ini relatif
sederhana, didasarkan pada cara seorang pelukis menggambar suatu obyek
di kanvas. Obyek atau bidang yang terletak lebih jauh di lukis dahulu,
kemudian digambar obyek atau bidang yang lebih dekat dan seterusnya.

Dengan demikian pada lukisan tersebut sebetulnya terjadi


penumpukan berbagai obyek yang memiliki letak sama. Bagian obyek yang
nampak oleh pengamat adalah bagian yang paling dekat dengan pengamat.

Penerapan metode ini pada grafika tiga dimensi digunakan untuk


menunjukkan bagian yang nampak oleh pengamat. Semua poligon yang
membetuk suatu obyek dihitung rata-rata nilai koordinat z-nya. Setelah itu
diurutkan dengan urut naik. Poligon yang memiliki nilai z terkecil di gambar
dulu dan seterusnya sampai pada poligon dengan nilai z rata-rata terbesar.

zx

Gambar 4. Ilustrasi algoritma pelukis

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 73


Berdasarkan gambar 4 tersebut bila pengamat terletak pada sumbu z,
maka obyek A yang terletak lebih jauh terhadap obyek B digambar lebih
dulu. Obyek A ini sendiri terdiri atas 6 poligon. Maka poligon yang paling jauh
dari pengamat digambar lebih dahulu begitu seterusnya sehingga hasil dapat
terlihat seperti pada gambar tersebut.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 74


Bab 13.Rendering pada obyek 3 dimensi

Suatu obyek nyata dapat terlihat oleh mata bila obyek tersebut
terkena oleh cahaya dan memantulkan kembali cahaya tersebut ke mata
pengamat. Pada kenyataannya warna yang terlihat pada masing-masing
bagian obyek tersebut oleh mata pengamat tidaklah sama walaupun obyek
atau benda tersebut di cat dengan warna yang sama. Bagian yang
permukaannya tegak lurus dengan cahaya akan memiliki warna yang lebih
terang dibanding bagian lainnya.

Kecerahan warna pada permukaan suatu obyek ditentukan oleh


karakteristik sumber cahaya, karaketeristik permukaan, dan posisi relatif
sumber cahaya terhadap permukaan yang ditinjau seperti ilustrasi gambar 5.

Untuk menentukan intensitas cahaya yang mengenai suatu titik pada


permukaan diperlukan parameter intensitas cahaya (Is), reflektifitas
permukaan (kd), vektor normal (n), dan sudut θ yakni sudut antara vektor
normal dan arah cahaya (i).

Berdasarkan hukum Lambert intensitas cahaya yang sampai pada


suatu titik adalah

I = Is kd cos θ

Cosinus pada sudut θ dapat di wakili dengan dot product dari satuan
vektor n dan i, sehingga persamaan diatas menjadi

I = Is kd (n.i)

Bila terdapat beberapa sumber cahaya yang berpengaruh pada titik


tersebut maka persamaan menjadi

I = Ia + ∑ Ij kd cos θ = Ia + ∑ Ij kd (ij.n)

Dengan Ia kontribusi cahaya dari sekeliling sumber cahaya, dan Ij


adalah intensitas masing-masing sumber cahaya. Intensitas terbesar akan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 75


terjadi pada titik permukaan yang memiliki sudut vektor i dan vektor n , yaitu
sudut θ bernilai 0 derajat. Pada kondisi ini intensitas cahaya yang jatuh pada
titik tersebut memiliki nilai terbesar. Bila intensitas bernilai negatif maka
bidang atau titik tersebut merupakan titik tersembunyi atau dibalik permukaan
yang tekena cahaya.

i
n

θ i

Gambar 5. Menentukan intensitas cahaya pada permukaan

Untuk mendapatkan vektor i dapat digunakan persamaan

i = (ai + bj + ck)/sqrt(a2+b2+c2) satuan vektor

dengan a, b, c adalah arah sumber cahaya dari titik yang ditinjau


intensitasnya.

Suatu bidang yang akan ditinjau intensitasnya dapat diwakili oleh tiga titik
pokok misalnya titik A, B, dan C, maka vektor normalnya berupakan cross
product adalah vektor AB dan AC sehingga

n = (AB X AC)/||ABX AC||

Setiap titik pada suatu bidang poligon dapat dihitung nilai rata-rata n
sehingga

nrerata = (∑ ni) / |(∑ ni)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 76


Gambar 1. Arsiran akibat pengaruh cahaya.

Gambar @ memperlihatkan pengaruh cahaya terhadap warna dan arsiran


suatu bagian dengan cahaya berasal dari arah kiri atas.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 77


Bab 14.Pewarnaan

Pewarnaan pada grafika komputer merupakan unsur penting sebagai


upaya untuk menampilkan citra yang mendekati dengan bentuk dan warna
suatu obyek nyata.

Beberapa model pewarnaan yang dikenal yaitu model RGB, model


CMY, dan model HSV. Model RGB menggunakan warna dasar merah (red),
hijau(green), dan biru(blue) , sedangkan model CMY menggunakan warna
cyan, magenta, dan yellow sebagai warna dasar, dan model HSV berbasis
pada hue, saturation, dan value.

Warna-warna lain dapat dibuat merupakan kombinasi dari ketiga warna


tersebut dengan masing-masing intensitas warna dasar yang berbeda. Model
RGB dapat digambarkan dalam ruangan kotak 3 dimensi seperti gambar 6.

Gambar 6. Representasi warna model RGB

dengan koordinat black(0,0,0), white( 1,1,1), red( 0,0,1), green( 1,0,0), yellow(
1,0,1), magenta( 0,1,1), cyan(1,1,0), dan blue(0,1,0).
Berdasarkan model diatas maka suatu warna arsiran akan semakin terang
dengan menambah unsur putih pada setiap warna yang diproses, begitu juga
sebaliknya.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 78


Bila diaplikasikan pada setiap poligon yang membentuk suatu obyek,
maka tingkat kecerahan setiap poligon di sesuaikan dengan intensitas
cahaya pada jatuh pada poligon tersebut.

Bagan pada gambar 7 menunjukkan garis-pipa (pipeline) proses


keseluruhan untuk menampilkan obyek tiga dimensi di layar .

Deskripsi obyek y
tiga dimensi awal

Pemodelan
x
koordinat
z
Pemodelan v
transformasi
Koordinat dunia

nz
Transformasi ke v
bidang pandang

u
Koordinat pandang
n
Operasi pemotongan,
hapus bag. tersembunyi,
diarrsir
Normalisasi koordinat v
proyeksi

u
Proyeksi perspektif dan
n
Tranformasi ke koordinat

Koordinat layar

Gambar 7. Garis pipa (pipelaine) proses penampilan tiga dimensi

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 79


Bab 15.Parameter Obyek 3 dimensi
Suatu obyek yang merupakan salah satu unsur keseluruhan obyek yang
divisualisasikan dapat dibagi menjadi beberapa poligon. Setiap poligon
memiliki parameter : x1, y1, x2, y2, x3, y3, x4, y4, dan warna, dan intensitas
cahaya seperti pada ilustrasi gambar 8.

Ψ sumber cahaya
Warna
Vektor tegak lurus X1,y1,z1 X2,y2,z2
bidang poligon
X4,y4,z4

X3,y3,z3

poligon
Gambar 8. Pembagian poligon dan parameternya

Koordinat sudut tersebut merupakan koordinat layar hasil transformasi


dari koordinat dunia, sedangkan kecerahan warna tiap poligon sudah
diperhitungkan posisi, dan arah vektor normal poligon terhadap letak sumber
cahaya.
Seperti pada contoh warna meja diatas, warna obyek adalah abu-abu.
Akibat pengaruh cahaya yang terletak pada sisi kiri atas dari meja maka
warna pada bidang bagian atas dengan sudut normal paling kecil adalah
abu-abu syrah, dan seterusnya sehingga bagian meja yang memiliki sudut
vektor paling besar terhadap sumber cahaya memiliki warna abu-abu gel.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 80


Bab 16.Algoritma dan Implementasi Grafis 3D

16.1 Visualisasi 3D-Statis

Grafis 3D statis adalah tampilan dengan efek 3D tetapi tidak dapat


dimanipulasi pengguna misal obyek dilihat dari sisi yang berbeda ataupun
obyek yg dilihat berbeda. Hal ini terjadi karena nilai posisi kamera kx,ky,kz
maupun titik fokus (view reference point-VRP) vrp_x,vrp_y,vrp_z dibuat
konstanta.

Pada algoritma ini untuk mengubah posisi kamera maupun


mengubah titik fokus harus mengubah nilai dari konstanta pada variabel
tersebut.

1. Deklarasikan obyek dalam koordinat dunia

 Misal obyek berbentuk balok, maka tiap titik sudut


harus dideklaraiskan kooridinat dunianya (bisa dengan
satuan yang riil misal meter, kilometer dlsb.)
Contoh deklarasi balok sebagai berikut.

Sturtur data:
Baris Program : 2-12

Struct {
Int x; koordinat x
Int y; kooridnat y
Int z;  kooridnat z
}s[20]; titik pokok/sudut ke

deklarasi/deskripsi/penjelasan posisi titik pokok obyek balok:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 81


s[1].x=0;s[1].y=0;s[1].z=250;//titik ke-1, koordinat x=0,y=0,z=250

s[2].x=250;s[2].y=0;s[2].z=250;
s[3].x=250;s[3].y=250;s[3].z=250;
s[4].x=0;s[4].y=250;s[4].z=250;
s[5].x=0;s[5].y=0;s[5].z=0;
s[6].x=250;s[6].y=0;s[6].z=0;
s[7].x=250;s[7].y=250;s[7].z=0;
s[8].x=0;s[8].y=150;s[8].z=0;

deklarasi tsb untuk menggambarkan bentuk balok sebagai berikut.

7
8

4
3

5 6 x

1 2

S[1].x menunjukkan koordinat x titik sudut 1


S[1].y menunjukkan koordinat y titik sudut 1
S[1].z menunjukkan koordinat z titik sudut 1

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 82


S[2].x menunjukkan koordinat x titik sudut 2, dan
seterusnya.

2. Tentukan letak kamera (View Plane Normal-VPN)


Baris Program : 17-19
Misal :
Kx=10;
Ky=300;
Kz=400;
Artinya posisi kamera di koordinat x=10, y=100,z=100

Posisi kamera ini dpaat diatur dengan menggunakan tombol atau


alat input lain

3. Tentukan fokus kamera(VRP-View Refference Point)


Baris Program : 27-29
Misal :
Vrp_X=50;vrp_y=50;vrp_z=50;
Artinya titik fokus pandang di koordinat x=50,y=50,z=50

Posisi fokus ini dpaat diatur dengan menggunakan tombol atau alat
input lain

4. Tentukan pusat proyeksi prespsktif


Baris Program : 33-35
5. Deklarisikan matriks yang diperlukan
 Matrks tranlasi obyek sejauh titik fikus dengan posisi kamera
 Matriks rotasi, pada ke-3 sumbu (x,y,z)
 Matriks proyeksi perpektif
Baris Program : 41-76

6. Lakukan operasi perkalian matrix


Baris Program : 77-105

7. Transformasikan koord obyek dalam koordinat dunia ke VPN

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 83


Baris Program : 107-111

8. Proyeksi perpektif ke bidang u-v


Baris Program : 112-117

9. Membuat nilai 1 pada matriks ordo ke 3


Baris Program : 119-122

10. Transformasi koordinat caertesian ke koordinat layar, karena deskripsi


obyek menggunakan koordinat cartesian, sementara penampil koordinat
layar
Baris Program : 126-130

11. Penggambaran obyek ke layar


Baris Program : 136-184

16.2 Langkah untuk menghasilkan grafis 3D statis model


rangka adalah sebagai berikut.
1. Buka C++ Builder
2. Buka Form baru
3. Buat jendela tampilan dengan komponen
PaintBox,Name:PaintBox1 (default)
4. tulis kode dibawah (Bold) pada Event->OnPaint

void __fastcall TForm1::PaintBox1Paint(TObject *Sender)


{
//menentukan tiitk-titik pokok koorrdinat obyek balok
s[1].x=0;s[1].y=0;s[1].z=250;
s[2].x=250;s[2].y=0;s[2].z=250;
s[3].x=125;s[3].y=500;s[3].z=125;
s[4].x=125;s[4].y=500;s[4].z=125;
s[5].x=0;s[5].y=0;s[5].z=0;
s[6].x=250;s[6].y=0;s[6].z=0;
s[7].x=125;s[7].y=500;s[7].z=125;
s[8].x=125;s[8].y=500;s[8].z=125;

//menentukan jumla obyek dan jumlkah titik sudut


int jumlah_obyek=1;
int max_titik=8;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 84


//------------------posisi kamera
float kx=0;
float ky=50;
float kz=350;
//----------------------------------
//menenutkan jarak kamera dengan fokur
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
float dyn=ky/d;
float dzn=kz/d;

//- fokus kamera atau titik pandang (VRP)


float vrp_x=0;
float vrp_y=0;
float vrp_z=0;
//-------------------------------
//vektor kemiringan kamera,asumsi kamera tegak lurus
float dxup=0;
float dyup=1;
float dzup=0;

//titik pusat proyeksi


float xc=0 ;
float yc=0 ;
float zc=-100;
//mennetukan batas bawah
int batasbawah=PaintBox1->ClientHeight;
//deklarasi matriks proyeksi perpektif
float perspek[4][4]=
{
//0 1 2 3
{-zc,0,0,0}, //0
{0,-zc,0,0}, //1
{xc,yc,-1,1}, //2
{0,0,0,-zc} //3
};

// matriks translasi titik koord. Cartesian (world coordinat) ke VPN

float T[4][4]=
{
{1,0,0,0},
{0,1,0,0},
{0,0,1,0},
{-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1}
};
// putar sehiongga vektor n sesuai sumbu z
float v1=sqrt(dyn*dyn+dzn*dzn);
// rotasi sumbu x
float Rx[4][4]=

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 85


{
{1,0,0,0},
{0,-dzn/v1,-dyn/v1,0},
{0,dyn/v1,-dzn/v1,0},
{0,0,0,1}
};
// rorasu sumbu y;

float Ry[4][4]=
{
{v1,0,-dxn,0},
{0,1,0,0},
{dxn,0,v1,0},
{0,0,0,1}
};

// mengalikan matriks Rx * Ry

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


{
for (int k=0;k<=3;k++)
Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+
Rx[i][3] * Ry[3][k];
}

xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];
yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];
rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);

float Rz[4][4]=
{
{yup_vp/rup,xup_vp/rup,0,0},
{-xup_vp/rup,yup_vp/rup,0,0},
{0,0,1,0},
{0,0,0,1}
};

// perklaian matriks dxy * dz


for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+
Rxy[i][3] * Rz[3][k];
}

// perkalian matriks T dan Rxyz


for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+
T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 86


}
//Trxyz : matrik gabungan rotasi ke 3 sumbu dan ttranlasi/matrik transformasi
koordina dunia ke koordinat bidang padang
// transfoemasi titik obyek ke VPN

for (int i=1;i<=8;i++) // loop poligon


{
for (int k=0;k<=3;k++) // loop titik
vpn_k[i][k]=s[i].x*TRxyz[0][k] + s[i].y * TRxyz[1][k]+s[i].z* TRxyz[2][k] + 1*
TRxyz[3][k];
}

//transfoemasi perpeksif
for (int i=1;i<=8;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=vpn_k[i][0] * perspek[0][k] + vpn_k[i][1] * perspek[1][k] +
vpn_k[i][2]
*perspek[2][k]+ vpn_k[i][3] * perspek[3][k];
}

//membuat niali 1 pada matrix padaordo ke-4


for (int i=1;i<=max_titik;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3];
}

int tengah=PaintBox1->ClientWidth/2;
// trabsformasi ke koordinat layar
for (int i=1;i<=max_titik;i++)
{
vpn_pers[i][0]=vpn_pers[i][0]+tengah;
vpn_pers[i][1]=batasbawah-vpn_pers[i][1]-50;
}

//mmebuat jendela paint box dengan warna dasa putih


PaintBox1->Canvas->Brush->Color=clWhite;
PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
//nggambar polyline
//poligon 1
POINT t1[4]; //deklarasi variabel
t1[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t1[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t1[2]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t1[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t1[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t1,4);

//poligon 2 belakang
POINT t2[4]; //deklarasi variabel

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 87


t2[0]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t2[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t2[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t2[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t2[4]=Point(vpn_pers[5][0],vpn_pers[5][1]);
PaintBox1->Canvas->Polyline((TPoint*)t2,4);

//poligon 3 bawah
POINT t3[4]; //deklarasi variabel
t3[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t3[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t3[2]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t3[3]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t3[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t3,4);

//poligon 4 atas
POINT t4[4]; //deklarasi variabel
t4[0]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t4[1]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t4[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t4[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t4[4]=Point(vpn_pers[4][0],vpn_pers[4][1]);
PaintBox1->Canvas->Polyline((TPoint*)t4,4);

//poligon 5 kanan
POINT t5[4]; //deklarasi variabel
t5[0]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t5[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t5[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t5[3]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t5[4]=Point(vpn_pers[2][0],vpn_pers[2][1]);
PaintBox1->Canvas->Polyline((TPoint*)t5,4);

//poligon 6 kiri
POINT t6[4]; //deklarasi variabel
t6[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t6[1]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);

PaintBox1->Canvas->Polyline((TPoint*)t6,4);\

5. Tambahkah kode pada file header (.h) sbb


(yg dicetak Bold ¸cetak regular bawaan C++)

//---------------------------------------------------------------------------
#ifndef rangkaH

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 88


#define rangkaH
//---------------------------------------------------------------------------
#include <Classes.hpp>
#include <Controls.hpp>
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <ExtCtrls.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published: // IDE-managed Components
TPaintBox *PaintBox1;
void __fastcall PaintBox1Paint(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);
float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4];
float vpn_p[8][4],TRxyz[4][4],vpn_k[8][5];
float vpn_pers[8][4];
struct titik{
int x;
int y;
int z;
}s[50];

};
//---------------------------------------------------------------------extern
PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------#endif

tambahkan kode pada file .cpp bagian atas


(yg dicetak Bold ¸cetak regular bawaan C++)

//--------------------------------------------------------------
-------------
#include <vcl.h>
#include <math.h>
#pragma hdrstop
#include "rangka.h"
//-------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//--------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)

6. jalankan program diatas

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 89


16.3 Grafis 3D dinamis/interactive

Algoritma dan kode yang sudah dibahas pada bab-bab terdahulu masih
bersifat dasar, yakni obyek masih statis dalam arti sudut, jarak pandang dan
fokus pandang masih berupa konstanta. Dengan sedikit modifikasi maka

1. Sudut dan jarak pandang dapat diubah misal dikendalikan dengan tombol
dengan mengatur nilai koordinat posisi kamera kx,ky, dan kz.
2. Titik fokus kamera dapat diubah untuk menentukan bagian obyek yang
dapat dilihat dengan mengatur vrp_x,vrp_y, dan vrp_z.

Untuk menampilkan grafis 3D dinamis model rangka maka program yang


telah ada dimodifikasi dengan langkah sbb.
1. Buatlah tombol untuk mengggerakkan kamera pada form dengan
contoh sbb

1
1

4
Paint Box

1:BitBtn1 2:BitBtn2 3:BitBtn3 4:BitBtn4

2. Tambahkan kode pada tombol BitBtn untuk membuat menggeser


posisi kamera dengan counter sbb

BitBtn1->Click:
kamera_y=kamera_y+20;
gambar(kamera_x,kamera_y);

BitBtn2->Click:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 90


kamera_x=kamera_x-20;
gambar(kamera_x,kamera_y);

BitBtn3>Click:
kamera_y=kamera_y-20.0;
gambar(kamera_x,kamera_y);

BitBtn4->Click:
kamera_x=kamera_x+20;
gambar(kamera_x,kamera_y);

catatan :
Angka 20 pada counter menunjukkan posisi penggeseran setiap
tombol diklik yang dapat diatur sesuai kebutuhan. Bila
diinginkan pengeseran terasa halus/tahapan pelan maka nilai
diperkecil dan sebaliknya

3. Pindahkan bagian program awal ini (untuk deskripsi obyek dan


penentuan posisi kamera) ke Form1->Activated, sbb

void __fastcall TForm1::FormActivate(TObject *Sender)


{
//deskripsi koordinat dunia dari obyek
s[1].x=0;s[1].y=0;s[1].z=400;
s[2].x=300;s[2].y=0;s[2].z=400;

s[3].x=300;s[3].y=200;s[3].z=400;
s[4].x=0;s[4].y=200;s[4].z=400;

s[5].x=0;s[5].y=0;s[5].z=0;
s[6].x=300;s[6].y=0;s[6].z=0;

s[7].x=300;s[7].y=200;s[7].z=0;
s[8].x=0;s[8].y=200;s[8].z=0;
//posisi awal kamera
kamera_x=50.0;
kamera_y=50.0;

/*
8-----------7
! !
4-----------3 !

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 91


! 5--!-------6
1---------- 2
*/
}
//-------------------------------------------------------
--------------------

4. Buatlah fungsi Gambar() pada editor, dan pindahkan kode yang ada
pada PaintBox1 ->Paint ke fungsi gambar() seperti dibawah ini

void _fastcall TForm1::gambar(float kamx,float kamy)


{
//menetukan jujlkah obyek dan jumlkah titik sudut
PaintBox1->Canvas->Brush->Color=clWhite;
PaintBox1->Canvas->Rectangle(1,1,ClientWidth-
1,ClientHeight-1);
int jumlah_obyek=1;
int max_titik=8;

//------------------posisi kamera
float kx=kamx;
float ky=kamy;
float kz=800;

//----------------------------------
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
float dyn=ky/d;
………………..
…………………….. sesuai program sebelumnya
……………….
t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t6,4);
}

5. Tambahkan kode pada file header sbb (yg di ketik Bold)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 92


……………..
public: // User declarations
__fastcall TForm1(TComponent* Owner);
void _fastcall gambar(float,float);
float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4],
TRxyz[4][4],vpn_k[8][5];
float vpn_p[8][4],vpn_pers[8][4];
float kamera_x,kamera_y,kamera_z;
……………

6. Jalankan aplikasi diatas, cobalah menekan tombol yg ada dan amati


perubahan tampilannya.

16.4 Realitas Visual Grafis 3D(3D Graphics Visual Realism)

Yang dimaksud realitas grafis 3D adalah bagimana membentuk suatu obyek


3D agar sesuai dengan kenyataan suatu obyek yang dilihat sehari-hari.
Sebagian besar obyek nyata bersifat solid atau tidak tembus pandang.
Pada contoh bab sebelumnya obyek yang dibuat masih dalam bentuk rangka
(wireframe). Dalam implementasinya model rangka ini masih banyak dipakai
untuk mengetahui bagian dlaam suatu obyek.
Relaitas grafis 3D dapat dilakukan dengan : mengarsir poligon, rendering,
dan shadowing.

16.5 Pewarnaan dan Arsiran (brush)


Terdapat 3 metode pewarnaan dalam grafis baik untuk mewarnai garis (Pen)
maupun mengarsir poligon (Brush)
1. dengan variabel default (bawaan C++ Builder). Biasanya digunakan
untuk warna2 dasar

untuk mewarnai garis


Canvas->Pen->Color=clRed ;//garis warna merah

untuk mewarnai arsiran


Canvas->Brush->Color=clRed ;//arsiran warna merah

clRed : merah

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 93


clBlue:biru
clBlack:hitam
clYellow:kuning
dll

2. dengan RGB
RGB merupakan warna yang dihasilkan kombinasi dari Red[R]-
Green[G]-Blue[B], dengan nilai R:0-255 G:0-255 B:0-255, nilai 0
pada masing2 warna adalah hitam , dan 255 adalah warna maksimal

untuk mewarnai garis


Canvas->Pen->Color=RGB(100,100,100) ;//garis warna
abu2

untuk mewarnai arsiran


Canvas->Brush->Color=RGB(0,255,0) ;//arsiran warna
hijau

 kombinasi warna dapat dilihat di custom color Msword


3. dengan CMY
CMY seperti haknya RGB meruppakan warna yang dikombinasikan
Cyan[C],Magenta[M], Yellow[Y]
tidak dibahas disini
4. dengan HSL
HSL seperti haknya RGB meruppakan warna yang dikombinasikan
Hue[H],Saturation[S], Lamp[LY]
tidak dibahas disini

16.6 Gaya arsiran (style)


Arsiran dari suatu poligon dapat dibentuk dalam beberapa macam dengan
perintah arsiran adalah

Canvas->Brush->Style=arsiran

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 94


Arsiran:

16.6.1bsSolid: arsiran homogen/solid/pejal


Pen->Color:clBlue
bsCross:arsiran kotak-kotak Pen->Style:psDot

bsDiagonal: arsiran bergaris diagonal


bsVertical: arsiran bergaris tegak
bsHorisontal: arsiran bergaris mendatar
dll

Brush->Color:clBlack
16.7 Mode Pen Brush->Style:csDiagonal
Garis yang membetuk suatu obyek juga dapat dibentuk

Canvas->Pen->Style=bentuk
Bentuk:
psSolid :garis homogen
psDot:garis berbentuk titik-titik
psDash: garis berbentuk garis kecil2
psDashDot: garis berbentuk kombinasi dash dan dot

16.8 Membuat arsiran pada grafis 3D


1. Ubah perintah Polyline (membentuk bagan sisi banyak ->2- tetapi
berbentuk rangka/kawat (wireframe) menjadi Polygon (dapat
diarsir/di blok)
2. tulis perintah untuk membuat arsir sebelum masing-masing
polygon
Canvas->Brush->Color=warna
3. jalankan
4. akan terlihat bahwa tampilan gambar belum dapat diidentifikasi
secara jelas –saling tumpang tindih (bentuk belum riil), karena
proses penggambaran poligon belum memenuhi
kaidah/algoritma pelukis (painter’s algorithm)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 95


16.9 Algoritma pelukis (painter’s algorithm)
Algoritma pelukis adalah cara/urutan mengarsir suatu obyek yang saling
menutupi dimulai dari yang terjauh (dari pengamat) dulu.

Maka agar pada grafis 3D poligon yang jauh akan tertutup oleh poligon yang
dekat dengan pengamat, maka setiap poligon harus diurutkan proses
pembuatannya dimulai dari yang terjauh dari pengamat/user (nilai koordinat z
paling kecil)

Untuk mengurutkan poligon , maka nilai koordinat z dari setiap poligon harus
dihitung rata-rata dari ke empat titik yg membetuk poligon.

Berdasarkan z rata-rata setiap poligon ini maka proses penampilan poligon


dimulai dari yg bernilai z terkecil (ditulis paling atas pada program)

Poligon tanpa algoritma pelukis

Poligon dengan algoritma pelukis

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 96


16.10Implementasi Poligon dan Arsiran
Untuk membuat suatu obyek menjadi solid maka obyek tersebut harus
tersusun atas poligon-poligon. Poligon ini tidak harus segi empat, tetapi bisa
segitiga, dlsb sesuai dengan keperluan.
Langkah2 poligonisasi sebagai berikut.
1. Identifikasi titik-titik poligon yang membetuk suatu obyek, misal
poligon 1 adalah bagian depan kotak (titik 1, titik 2,tiitk 3, dan titik 4),
poligon 2 bagian belakang kotak (titik 5,titik 6, titik 7, dan titik8) dan
seterusnya.

(Identifikasi ini dilakukan sebelum proses transformasi ke koordinat layar


misal ,mulai nomor program 124 dst)
2. Urutkan posisi poligon tersebut berdasarkan nilai z-nya
(vpn_pers[I][2]), sehingga poligon dengan nilai z paling kecil diletakkan
kapa posisi pertama dst. Hal ini dilakukan agar proses pembuatan
arsiran dimulai dari poligon yang paling jauh (algoritma pelukis-
painter’s algorithm).
3. Bila tidak ada proses pengurutan maka poligon akan saling tumpang-
tindih. Nilai z ini dapat dihitung dari nilai z rata-rata titik-titik yang
membentuk poligon
4. Lakukan transformasi ke koordinat layar
5. Gambar poligon beserta arsiran setiap poligon(brush)
Untuk menggambar poligon maka perintah Polyline diganti menjadi
Polygon, sedangkan untuk mengarsir, sebelum perintah poligon,
perlu diatur arsiran sbb
Canvas ->Brush-> Color=warna arsir

Sampai langkah ini realitas obyek sudah mulai nampak , yakni bagian
yang berada di belakang tidak nampak lagi, akan tetapi realitas ini masih
dapat ditingkatkan yakni dengan efek rendering , yaitu perubahan warna
akibat pencahayaan dari posisi tertentu (tidak di bahas disini, ada di buku-
buku referensi grafika komputer), shadowing, yaitu efek bayangan.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 97


Bila obyek yang akan di proses memilki cakupan yang besar, maka agar
proses komputasi lebih cepat diperlukan clipping atau pemotongan (teori ada
di berbagai buku referensi).

16.11Implementasi Program
Untuk menerapkan visual realism dasar dilakukan tahapan sbb
1. Bari aplikasi sebelumnya ubahlah semua kode
……Polyline…. menjadi …Polygon ………
misal :

PaintBox1->Canvas->Polyline((TPoint*)t6,4);
Diganti menjadi
PaintBox1->Canvas->Polygon((TPoint*)t6,4);
2. Tambahkan perintah untuk mengarsir poligon sebelum/diatas perintah
poligon dengan
……… Canvas->Brush->Color=warna..
warna, warna arsiran dapat diatur dengan
(i) konstanta, misal biru -> clBlue
merah -> clRed
kuning->clYellow
misal :
……… Canvas->Brush->Color=clBlue; arsir
biru

(ii) kombinasi RGB(Red Green Blue-Merah Hijau Biru)


misal :
……… Canvas->Brush->Color=RGB(200,100,0)
artinya nilai Red:100, Green 100, Blue:0
masing-masing warna memiliki range 0-255

misal poligon berwarna merah, maka tambahkan perintah arsir pada


setiap poligon sbb

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 98


…………..
PaintBox1->Canvas->Color=clRed;
PaintBox1->Canvas->Polygon((TPoint*)t6,4);
……………….

3. Jalankan aplikasi, amati yang terjadi ! Mengapa gambar balok belum


seperti yang diharapkan ? artinya wujud balok masih kacau ?

16.12Pengurutan Poligon
Agar bentuk 3d rterlihat riil maka sesuai dengan algoritma pelukis, maka
poligon yang lebih jauh diteampilkan lebih dulu. Didalam pemrograman untuk
menrpakna tersebut dilakukan langkah sbb
1. Buat nilai rata-rata setiap poligon dan tampung dlaam variabel dengan
index tersendiri
2. dengan algoritma untuk sorting (misal: bubble sort) , Urutkan setiap
nilai sesuai dengan nilai z-nya.
3. tampilkan poligon tersebut.

16.133D Graphics Interactive

Grafis 3D yang telah dibuat sebelumnya masih bersifat statis, artinya grafis
belum dapat dikendalikan/dimanipulasi. Agar grafis dapat dikendalikan maka
sekurang-kurangnya parameter untuk posisi kamera dapat diatur, misalnya
menggunakan tombol untuk menggerakkan ke:kiri,kanan,atas,bawah,
sehingga program yang ada di modifikasi menjadi sbb.

1. Buatlah form sbb


Form1
Name: Paintbox1

Name:
Name:Kanan
Kanan

Name: Atas

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 99


Name: Kiri

Name: Bawah

Auto

Name:Auto

2. Buatlah fungsi tersendiri untuk menampilkan grafis, sementara


progtram untuk nilai awal (identifikasi obyek dalam koordina dunia)
dimasukkan dalam event Form-Active sbb

void __fastcall TForm1::FormActivate(TObject *Sender)


{
//deskripsi koordinat dunia dari obyek

s[1].x=0;s[1].y=0;s[1].z=200;
s[2].x=300;s[2].y=0;s[2].z=200;

s[3].x=300;s[3].y=100;s[3].z=200;
s[4].x=0;s[4].y=100;s[4].z=200;

s[5].x=0;s[5].y=0;s[5].z=100;
s[6].x=300;s[6].y=0;s[6].z=100;

s[7].x=300;s[7].y=100;s[7].z=100;
s[8].x=0;s[8].y=100;s[8].z=100;

s[9].x=0;s[9].y=0;s[9].z=0;
s[10].x=300;s[10].y=0;s[10].z=0;

s[11].x=300;s[11].y=200;s[11].z=0;
s[12].x=0;s[12].y=200;s[12].z=0;
//posisi awal kamera
kamera_x=100.0;kamera_y=100;

/*
8-----------7
! !
4-----------3 !
! 5--!-------6
1---------- 2
*/
}

3. Buat fungsi sendiri misal : fungsi gambar() untuk menampilkan grafis3d

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 100


void _fastcall TForm1::gambar(float kamx,float kamy)
{
//menetukan jujlkah obyek dan jumlkah titik sudut
PaintBox2->Canvas->Brush->Color=clWhite;
PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
int jumlah_obyek=1;
int max_titik=8;
int max_poli=6;

//------------------posisi kamera
float kx=kamx;
float ky=kamy;
float kz=500;

//----------------------------------
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
float dyn=ky/d;
float dzn=kz/d;

//--- fokus kamera atau titik pandang (VRP)


float vrp_x=0;
float vrp_y=0;
float vrp_z=0;
//-------------------------------
//mengantur kemiringan kamera
float dxup=0;
float dyup=1; //tegak
float dzup=0;
//pusat proyeksi
float xc=0 ;
float yc=0 ;
float zc=-3000;

//mennetukan batas bawah


int batasbawah=PaintBox2->ClientHeight;

// matriks proyeksi perpektif


float perspek[4][4]=
{
//0 1 2 3
{-zc,0,0,0}, //0
{0,-zc,0,0}, //1
{xc,yc,-1,1},//2
{0,0,0,-zc} //3
};

// matriks translasi titik WRC ke VPN

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 101


float T[4][4]=
{
{1,0,0,0},
{0,1,0,0},
{0,0,1,0},
{-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1}
};
// putar sehiongga vektor n sesuai sumbu z
float v1=sqrt(dyn*dyn+dzn*dzn);
// rotasi sumbu x
float Rx[4][4]=
{
{1,0,0,0},
{0,-dzn/v1,-dyn/v1,0},
{0,dyn/v1,-dzn/v1,0},
{0,0,0,1}
};
// rorasu sumbu y;

float Ry[4][4]=
{
{v1,0,-dxn,0},
{0,1,0,0},
{dxn,0,v1,0},
{0,0,0,1}
};

// mengalikan matriks Rx * Ry

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


{
for (int k=0;k<=3;k++)
Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+
Rx[i][3] * Ry[3][k];
}
xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];
yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];
rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);

float Rz[4][4]=
{
{yup_vp/rup,xup_vp/rup,0,0},
{-xup_vp/rup,yup_vp/rup,0,0},
{0,0,1,0},
{0,0,0,1}
};

// perklaian matriks dxy * dz


for (int i=0;i<=3;i++)
{

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 102


for (int k=0;k<=3;k++)
Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+
Rxy[i][3] * Rz[3][k];
}

// perkalian matriks T dan Rxyz


for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+
T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];
}

// transfoemasi titik obyek ke VPN

for (int i=1;i<=max_titik;i++) // loop poligon


{
for (int k=0;k<=3;k++) // loop titik
{
vpn_k[i][k]=-s[i].x*TRxyz[0][k] - s[i].y * TRxyz[1][k]-s[i].z* TRxyz[2][k] + 1*
TRxyz[3][k];
}
vpn_k[i][4]=vpn_k[i][2];//menampung nilai z untuk pengurutan
}

//transfoemasi perpeksif
for (int i=1;i<=max_titik;i++)
{
for (int k=0;k<=3;k++)
vpn_k[i][k]=vpn_k[i][0]* perspek[0][k]
+vpn_k[i][1]* perspek[1][k]
+ vpn_k[i][2]*perspek[2][k]
+vpn_k[i][3] * perspek[3][k];

//membuat niali 1 pada matrix padaordo ke-4


for (int i=1;i<=max_titik;i++)
{
for (int k=0;k<=3;k++)
vpn_k[i][k]=(int) vpn_k[i][k]/vpn_k[i][3];
}

int tengah_x=PaintBox2->ClientWidth/2;
// trabsformhasi ke koordinat layar
float tk_x=(vpn_k[1][0]+vpn_k[2][0])/2;
int geser_x=tengah_x-tk_x;

int tengah_y=PaintBox2->ClientHeight/2;
// trabsformhasi ke koordinat layar

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 103


float tk_y=(vpn_k[1][1]+vpn_k[4][1])/2;
int geser_y=tengah_y-tk_y;

for(int i=1;i<=max_titik;i++)
{
vpn_k[i][0]=vpn_k[i][0]+geser_x;
vpn_k[i][1]=vpn_k[i][1]+geser_y;
}

//identifikasi poligon ke memori


//poli 1 : depan
p[1].x[1]=vpn_k[1][0];
p[1].y[1]=vpn_k[1][1];
p[1].z[1]=vpn_k[1][4];

p[1].x[2]=vpn_k[2][0];
p[1].y[2]=vpn_k[2][1];
p[1].z[2]=vpn_k[2][4];

p[1].x[3]=vpn_k[3][0];
p[1].y[3]=vpn_k[3][1];
p[1].z[3]=vpn_k[3][4];

p[1].x[4]=vpn_k[4][0];
p[1].y[4]=vpn_k[4][1];
p[1].z[4]=vpn_k[4][4];

//poli 2:belakang
p[2].x[1]=vpn_k[5][0];
p[2].y[1]=vpn_k[5][1];
p[2].z[1]=vpn_k[5][4];

p[2].x[2]=vpn_k[6][0];
p[2].y[2]=vpn_k[6][1];
p[2].z[2]=vpn_k[6][4];

p[2].x[3]=vpn_k[7][0];
p[2].y[3]=vpn_k[7][1];
p[2].z[3]=vpn_k[7][4];

p[2].x[4]=vpn_k[8][0];
p[2].y[4]=vpn_k[8][1];
p[2].z[4]=vpn_k[8][4];

//poli 3:bawah
p[3].x[1]=vpn_k[1][0];
p[3].y[1]=vpn_k[1][1];
p[3].z[1]=vpn_k[1][4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 104


p[3].x[2]=vpn_k[2][0];
p[3].y[2]=vpn_k[2][1];
p[3].z[2]=vpn_k[2][4];

p[3].x[3]=vpn_k[6][0];
p[3].y[3]=vpn_k[6][1];
p[3].z[3]=vpn_k[6][4];

p[3].x[4]=vpn_k[5][0];
p[3].y[4]=vpn_k[5][1];
p[3].z[4]=vpn_k[5][4];
//poli 4:atas depan
p[4].x[1]=vpn_k[4][0];
p[4].y[1]=vpn_k[4][1];
p[4].z[1]=vpn_k[4][4];

p[4].x[2]=vpn_k[3][0];
p[4].y[2]=vpn_k[3][1];
p[4].z[2]=vpn_k[3][4];

p[4].x[3]=vpn_k[7][0];
p[4].y[3]=vpn_k[7][1];
p[4].z[3]=vpn_k[7][4];

p[4].x[4]=vpn_k[8][0];
p[4].y[4]=vpn_k[8][1];
p[4].z[4]=vpn_k[8][4];
//poli 5:kanan
p[5].x[1]=vpn_k[2][0];
p[5].y[1]=vpn_k[2][1];
p[5].z[1]=vpn_k[2][4];

p[5].x[2]=vpn_k[6][0];
p[5].y[2]=vpn_k[6][1];
p[5].z[2]=vpn_k[6][4];

p[5].x[3]=vpn_k[7][0];
p[5].y[3]=vpn_k[7][1];
p[5].z[3]=vpn_k[7][4];

p[5].x[4]=vpn_k[3][0];
p[5].y[4]=vpn_k[3][1];
p[5].z[4]=vpn_k[3][4];
//poli 6:kiri
p[6].x[1]=vpn_k[1][0];
p[6].y[1]=vpn_k[1][1];
p[6].z[1]=vpn_k[1][4];

p[6].x[2]=vpn_k[5][0];
p[6].y[2]=vpn_k[5][1];
p[6].z[2]=vpn_k[5][4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 105


p[6].x[3]=vpn_k[8][0];
p[6].y[3]=vpn_k[8][1];
p[6].z[3]=vpn_k[8][4];

p[6].x[4]=vpn_k[4][0];
p[6].y[4]=vpn_k[4][1];
p[6].z[4]=vpn_k[4][4];

//hitung zrata tiap poligon


for (int i=1;i<=max_poli;i++)
{
p[i].zrata=(int) (p[i].z[1]+p[i].z[2]+p[i].z[3]+p[i].z[4])/4;
}

//pengurutan poligon sesaui nilai z


for (int i=1;i<=max_poli;i++)
{
for (int j=1;j<=max_poli-i;j++)
{
if (p[j].zrata>p[j+1].zrata)
{
int t=p[j+1].zrata;
p[j+1].zrata=p[j].zrata;
p[j].zrata=t;
for (int k=1;k<=4;k++)
{
int u=p[j+1].x[k];
p[j+1].x[k]=p[j].x[k];
p[j].x[k]=u;

int v=p[j+1].y[k];
p[j+1].y[k]=p[j].y[k];
p[j].y[k]=v;
}

}//if
}
}

//bacground putih
PaintBox2->Canvas->Brush->Color=clWhite;
PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);

//gambar di paint box 2


POINT g1[4];
g1[0]=Point(p[1].x[1],p[1].y[1]);
g1[1]=Point(p[1].x[2],p[1].y[2]);
g1[2]=Point(p[1].x[3],p[1].y[3]);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 106


g1[3]=Point(p[1].x[4],p[1].y[4]);
g1[4]=Point(p[1].x[1],p[1].y[1]);
PaintBox2->Canvas->Brush->Color=clBlue;
PaintBox2->Canvas->Polygon((TPoint*)g1,4);

POINT g2[4];
g2[0]=Point(p[2].x[1],p[2].y[1]);
g2[1]=Point(p[2].x[2],p[2].y[2]);
g2[2]=Point(p[2].x[3],p[2].y[3]);
g2[3]=Point(p[2].x[4],p[2].y[4]);
g2[4]=Point(p[2].x[1],p[2].y[1]);
PaintBox2->Canvas->Brush->Color=clGreen;
PaintBox2->Canvas->Polygon((TPoint*)g2,4);

POINT g3[4];
g3[0]=Point(p[3].x[1],p[3].y[1]);
g3[1]=Point(p[3].x[2],p[3].y[2]);
g3[2]=Point(p[3].x[3],p[3].y[3]);
g3[3]=Point(p[3].x[4],p[3].y[4]);
g3[4]=Point(p[3].x[1],p[3].y[1]);
PaintBox2->Canvas->Brush->Color=clGray;
PaintBox2->Canvas->Polygon((TPoint*)g3,4);

POINT g4[4];
g4[0]=Point(p[4].x[1],p[4].y[1]);
g4[1]=Point(p[4].x[2],p[4].y[2]);
g4[2]=Point(p[4].x[3],p[4].y[3]);
g4[3]=Point(p[4].x[4],p[4].y[4]);
g4[4]=Point(p[4].x[1],p[4].y[1]);
//PaintBox2->Canvas->Brush->Color=clGray;
PaintBox2->Canvas->Polygon((TPoint*)g4,4);

POINT g5[4];
g5[0]=Point(p[5].x[1],p[5].y[1]);
g5[1]=Point(p[5].x[2],p[5].y[2]);
g5[2]=Point(p[5].x[3],p[5].y[3]);
g5[3]=Point(p[5].x[4],p[5].y[4]);
g5[4]=Point(p[5].x[1],p[5].y[1]);
PaintBox2->Canvas->Brush->Color=clGreen;
PaintBox2->Canvas->Polygon((TPoint*)g5,4);

POINT g6[4];
g6[0]=Point(p[6].x[1],p[6].y[1]);
g6[1]=Point(p[6].x[2],p[6].y[2]);
g6[2]=Point(p[6].x[3],p[6].y[3]);
g6[3]=Point(p[6].x[4],p[6].y[4]);
g6[4]=Point(p[6].x[1],p[6].y[1]);
PaintBox2->Canvas->Brush->Color=RGB(2,100,200);
PaintBox2->Canvas->Polygon((TPoint*)g6,4);
}

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 107


void __fastcall TForm1::PaintBox1Paint(TObject *Sender)
{
gambar(kamera_x,kamera_y);
}
//---------------------------------------------------------------------------

void __fastcall TForm1::Button1Click(TObject *Sender)


{
for (int r=-200;r<=200;r++){
for(int t=1;t<1000000;t++){}//tunda
kamera_x+=r;
gambar(kamera_x,kamera_y);
}
for (int r=-200;r<=200;r++){
for(int t=1;t<1000000;t++){}//tunda
kamera_y+=r;
gambar(kamera_x,kamera_y);
}

4. tulis kode event Onclick pada masing-maisng button


misal :

16.13.1Tombol Kanan-OnClick

void __fastcall TForm1::KananClick(TObject *Sender)


{
kamera_x=kamera_x+20.0;
gambar(kamera_x,kamera_y);
}
//---------------------------------------------------------------------------

16.13.2Tombol Kiri-OnClick

void __fastcall TForm1::KiriClick(TObject *Sender)


{
kamera_x=kamera_x-20.0;
gambar(kamera_x,kamera_y);
}
//---------------------------------------------------------------------------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 108


16.13.3Tombol Atas-OnClick

void __fastcall TForm1::AtasClick(TObject *Sender)


{
kamera_y+=20.0;
gambar(kamera_x,kamera_y);
}
//---------------------------------------------------------------------------

16.13.4Tombol Bawah-OnClick

void __fastcall TForm1::BawahClick(TObject *Sender)


{
kamera_y-=20.0;
gambar(kamera_x,kamera_y);
}
//---------------------------------------------------------------------------

16.13.5Tombol Auto-OnClick

void __fastcall TForm1::AutoClick(TObject *Sender)


{
for (int r=-200;r<=200;r++){
for(int t=1;t<1000000;t++){}//tunda
kamera_x+=r;
gambar(kamera_x,kamera_y);
}
for (int r=-200;r<=200;r++){
for(int t=1;t<1000000;t++){}//tunda
kamera_y+=r;
gambar(kamera_x,kamera_y);
}

5. Jangan lupa , diklarasikan semua variabel/fungsi yang ada pada file


header
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <MPlayer.hpp>
#include <Buttons.hpp>
#include <ExtCtrls.hpp>
//---------------------------------------------------------------------
------
class TForm1 : public TForm
{

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 109


__published: // IDE-managed Components
TBitBtn *BitBtn1;
TBitBtn *BitBtn2;
TBitBtn *BitBtn3;
TBitBtn *BitBtn4;
TPaintBox *PaintBox2;
void __fastcall FormActivate(TObject *Sender);
void __fastcall BitBtn2Click(TObject *Sender);
void __fastcall BitBtn1Click(TObject *Sender);
void __fastcall PaintBox1Paint(TObject *Sender);
void __fastcall BitBtn3Click(TObject *Sender);
void __fastcall BitBtn4Click(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);

void _fastcall gambar(float,float);


float
Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4],TRxyz[4][4],vpn_k[12][5
];
float vpn_p[12][4];
float kamera_x,kamera_y,kamera_z;
int g[12][5];
struct titik{
int x;
int y;
int z;
}s[50];

struct poligon{
int x[4];
int y[4];
int z[4];
int zrata;
}p[9];

};
//---------------------------------------------------------------------
------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------
------

16.14 More Complex 3D CG Interactive

Grafis 3D yang telah dibuat sebelumnya walaupun sudah nampak lebih riil
(setiap poligon di arsir) dan dapat di kendalikan (interaktif) tetapi bentuk

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 110


masih sangat dasar. Untuk mengembangkan ke bentuk yang lebih komplek,
lakukan langkah sbb
1. Misal akan dibentuk menjadi sebuah kursi duduk seperti dibawah,
modifkasilah program sbb.
(intruksi/var/konstanta yang diubah ber-font Bold)

…….
//menetukan jujlkah obyek dan jumlkah titik sudut
PaintBox2->Canvas->Brush->Color=clWhite;
PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
int jumlah_obyek=1;
int max_titik=12;
int max_poli=9;

//------------------posisi kamera
float kx=kamx;
float ky=kamy;
float kz=500;

//----------------------------------
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
…………………..

2. Modifikasi deklarasi obyek sbb


s[1].x=0;s[1].y=0;s[1].z=200;
s[2].x=300;s[2].y=0;s[2].z=200;

s[3].x=300;s[3].y=100;s[3].z=200;
s[4].x=0;s[4].y=100;s[4].z=200;

s[5].x=0;s[5].y=0;s[5].z=100;
s[6].x=300;s[6].y=0;s[6].z=100;

s[7].x=300;s[7].y=100;s[7].z=100;
s[8].x=0;s[8].y=100;s[8].z=100;

s[9].x=0;s[9].y=0;s[9].z=0;
s[10].x=300;s[10].y=0;s[10].z=0;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 111


s[11].x=300;s[11].y=200;s[11].z=0;
s[12].x=0;s[12].y=200;s[12].z=0;

3. Modifikasilah bagian pembentukan poligon menjadi 9 poligon sbb

//identifikasi poligon ke //poli 6:kiri depan


memori p[6].x[1]=vpn_k[1][0];
//poli 1 : depan p[6].y[1]=vpn_k[1][1];
p[1].x[1]=vpn_k[1][0]; p[6].z[1]=vpn_k[1][4];
p[1].y[1]=vpn_k[1][1];
p[1].z[1]=vpn_k[1][4]; p[6].x[2]=vpn_k[5][0];
p[6].y[2]=vpn_k[5][1];
p[1].x[2]=vpn_k[2][0]; p[6].z[2]=vpn_k[5][4];
p[1].y[2]=vpn_k[2][1];
p[1].z[2]=vpn_k[2][4]; p[6].x[3]=vpn_k[8][0];
p[6].y[3]=vpn_k[8][1];
p[1].x[3]=vpn_k[3][0]; p[6].z[3]=vpn_k[8][4];
p[1].y[3]=vpn_k[3][1];
p[1].z[3]=vpn_k[3][4]; p[6].x[4]=vpn_k[4][0];
p[6].y[4]=vpn_k[4][1];
p[1].x[4]=vpn_k[4][0]; p[6].z[4]=vpn_k[4][4];
p[1].y[4]=vpn_k[4][1];
p[1].z[4]=vpn_k[4][4]; //poli 6:atas miring
p[7].x[1]=vpn_k[8][0];
//poli 2:belakang p[7].y[1]=vpn_k[8][1];
p[2].x[1]=vpn_k[9][0]; p[7].z[1]=vpn_k[8][4];
p[2].y[1]=vpn_k[9][1];
p[2].z[1]=vpn_k[9][4]; p[7].x[2]=vpn_k[7][0];
p[7].y[2]=vpn_k[7][1];
p[2].x[2]=vpn_k[10][0]; p[7].z[2]=vpn_k[7][4];
p[2].y[2]=vpn_k[10][1];
p[2].z[2]=vpn_k[10][4]; p[7].x[3]=vpn_k[11][0];
p[7].y[3]=vpn_k[11][1];
p[2].x[3]=vpn_k[11][0]; p[7].z[3]=vpn_k[11][4];
p[2].y[3]=vpn_k[11][1];
p[2].z[3]=vpn_k[11][4]; p[7].x[4]=vpn_k[12][0];
p[7].y[4]=vpn_k[12][1];
p[2].x[4]=vpn_k[12][0]; p[7].z[4]=vpn_k[12][4];
p[2].y[4]=vpn_k[12][1];
p[2].z[4]=vpn_k[12][4]; //poli 8:kiri belakang
p[8].x[1]=vpn_k[6][0];
//poli 3:bawah p[8].y[1]=vpn_k[6][1];
p[3].x[1]=vpn_k[1][0]; p[8].z[1]=vpn_k[6][4];
p[3].y[1]=vpn_k[1][1];
p[3].z[1]=vpn_k[1][4]; p[8].x[2]=vpn_k[10][0];
p[8].y[2]=vpn_k[10][1];
p[3].x[2]=vpn_k[2][0]; p[8].z[2]=vpn_k[10][4];
p[3].y[2]=vpn_k[2][1];
p[3].z[2]=vpn_k[2][4]; p[8].x[3]=vpn_k[11][0];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 112


p[8].y[3]=vpn_k[11][1];
p[3].x[3]=vpn_k[10][0]; p[8].z[3]=vpn_k[11][4];
p[3].y[3]=vpn_k[10][1];
p[3].z[3]=vpn_k[10][4]; p[8].x[4]=vpn_k[7][0];
p[8].y[4]=vpn_k[7][1];
p[3].x[4]=vpn_k[9][0]; p[8].z[4]=vpn_k[7][4];
p[3].y[4]=vpn_k[9][1];
p[3].z[4]=vpn_k[9][4]; //poli 9:kanan belakang
p[9].x[1]=vpn_k[9][0];
//poli 4:atas depan p[9].y[1]=vpn_k[9][1];
p[4].x[1]=vpn_k[4][0]; p[9].z[1]=vpn_k[9][4];
p[4].y[1]=vpn_k[4][1];
p[4].z[1]=vpn_k[4][4]; p[9].x[2]=vpn_k[5][0];
p[9].y[2]=vpn_k[5][1];
p[4].x[2]=vpn_k[3][0]; p[9].z[2]=vpn_k[5][4];
p[4].y[2]=vpn_k[3][1];
p[4].z[2]=vpn_k[3][4]; p[9].x[3]=vpn_k[8][0];
p[9].y[3]=vpn_k[8][1];
p[4].x[3]=vpn_k[7][0]; p[9].z[3]=vpn_k[8][4];
p[4].y[3]=vpn_k[7][1];
p[4].z[3]=vpn_k[7][4]; p[9].x[4]=vpn_k[12][0];
p[9].y[4]=vpn_k[12][1];
p[4].x[4]=vpn_k[8][0]; p[9].z[4]=vpn_k[12][4];
p[4].y[4]=vpn_k[8][1];
p[4].z[4]=vpn_k[8][4];

//poli 5:kanan depan


p[5].x[1]=vpn_k[2][0];
p[5].y[1]=vpn_k[2][1];
p[5].z[1]=vpn_k[2][4];

p[5].x[2]=vpn_k[6][0];
p[5].y[2]=vpn_k[6][1];
p[5].z[2]=vpn_k[6][4];

p[5].x[3]=vpn_k[7][0];
p[5].y[3]=vpn_k[7][1];
p[5].z[3]=vpn_k[7][4];

p[5].x[4]=vpn_k[3][0];
p[5].y[4]=vpn_k[3][1];
p[5].z[4]=vpn_k[3][4];

4. Modifikasi bagian penggambaran poligon sbb



POINT g1[4];
g1[0]=Point(p[1].x[1],p[1].y[1]);
g1[1]=Point(p[1].x[2],p[1].y[2]);
g1[2]=Point(p[1].x[3],p[1].y[3]);
g1[3]=Point(p[1].x[4],p[1].y[4]);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 113


g1[4]=Point(p[1].x[1],p[1].y[1]);
PaintBox2->Canvas->Brush->Color=clBlue;
PaintBox2->Canvas->Polygon((TPoint*)g1,4);

POINT g2[4];
g2[0]=Point(p[2].x[1],p[2].y[1]);
g2[1]=Point(p[2].x[2],p[2].y[2]);
g2[2]=Point(p[2].x[3],p[2].y[3]);
g2[3]=Point(p[2].x[4],p[2].y[4]);
g2[4]=Point(p[2].x[1],p[2].y[1]);
//PaintBox2->Canvas->Brush->Color=clGreen;
PaintBox2->Canvas->Polygon((TPoint*)g2,4);

POINT g3[4];
g3[0]=Point(p[3].x[1],p[3].y[1]);
g3[1]=Point(p[3].x[2],p[3].y[2]);
g3[2]=Point(p[3].x[3],p[3].y[3]);
g3[3]=Point(p[3].x[4],p[3].y[4]);
g3[4]=Point(p[3].x[1],p[3].y[1]);
//PaintBox2->Canvas->Brush->Color=clBlue;
PaintBox2->Canvas->Polygon((TPoint*)g3,4);

POINT g4[4];
g4[0]=Point(p[4].x[1],p[4].y[1]);
g4[1]=Point(p[4].x[2],p[4].y[2]);
g4[2]=Point(p[4].x[3],p[4].y[3]);
g4[3]=Point(p[4].x[4],p[4].y[4]);
g4[4]=Point(p[4].x[1],p[4].y[1]);
//PaintBox2->Canvas->Brush->Color=clGray;
PaintBox2->Canvas->Polygon((TPoint*)g4,4);

POINT g5[4];
g5[0]=Point(p[5].x[1],p[5].y[1]);
g5[1]=Point(p[5].x[2],p[5].y[2]);
g5[2]=Point(p[5].x[3],p[5].y[3]);
g5[3]=Point(p[5].x[4],p[5].y[4]);
g5[4]=Point(p[5].x[1],p[5].y[1]);
//PaintBox2->Canvas->Brush->Color=clGreen;
PaintBox2->Canvas->Polygon((TPoint*)g5,4);

POINT g6[4];
g6[0]=Point(p[6].x[1],p[6].y[1]);
g6[1]=Point(p[6].x[2],p[6].y[2]);
g6[2]=Point(p[6].x[3],p[6].y[3]);
g6[3]=Point(p[6].x[4],p[6].y[4]);
g6[4]=Point(p[6].x[1],p[6].y[1]);
//PaintBox2->Canvas->Brush->Color=RGB(2,100,200);
PaintBox2->Canvas->Polygon((TPoint*)g6,4);

POINT g7[4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 114


g7[0]=Point(p[7].x[1],p[7].y[1]);
g7[1]=Point(p[7].x[2],p[7].y[2]);
g7[2]=Point(p[7].x[3],p[7].y[3]);
g7[3]=Point(p[7].x[4],p[7].y[4]);
g7[4]=Point(p[7].x[1],p[7].y[1]);
//PaintBox2->Canvas->Brush->Color=RGB(2,100,100);
PaintBox2->Canvas->Polygon((TPoint*)g7,4);

POINT g8[4];
g8[0]=Point(p[8].x[1],p[8].y[1]);
g8[1]=Point(p[8].x[2],p[8].y[2]);
g8[2]=Point(p[8].x[3],p[8].y[3]);
g8[3]=Point(p[8].x[4],p[8].y[4]);
g8[4]=Point(p[8].x[1],p[8].y[1]);
//PaintBox2->Canvas->Brush->Color=RGB(2,100,50);
PaintBox2->Canvas->Polygon((TPoint*)g8,4);

POINT g9[4];
g9[0]=Point(p[9].x[1],p[9].y[1]);
g9[1]=Point(p[9].x[2],p[9].y[2]);
g9[2]=Point(p[9].x[3],p[9].y[3]);
g9[3]=Point(p[9].x[4],p[9].y[4]);
g9[4]=Point(p[9].x[1],p[9].y[1]);
//PaintBox2->Canvas->Brush->Color=RGB(2,100,20);
PaintBox2->Canvas->Polygon((TPoint*)g9,4);
}

5. Jalankan !

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 115


Bab 17.PENUTUP
Metode kamera sitetis ini sangat fleksibel dalam memandang suatu obyek,
karena suatu obyek dapat dipandang dari berbagai sisi dan jarak. Bila obyek
yang akan divisualisasikan relatif besar misalnya simulasi bangunan
perkotaan, maka dengan mengubah titik VRP dan posisi kamera dengan
perubahan yang otomatis begitu suatu tombol (misal tombol panah pada
keyboard ) maka akan didapatkan animasi 3 dimensi dan pengamat seakan-
akan sedang beraktifitas di alam nyata.

Pada prinsipnya metode kamera sintetis memiliki 4 tahapan utama yakni


representasi obyek dalam koordinat dunia (koordinat x,y,z) , transformasi ke
koordinat bidang pandang (koordinat u,v,n), proyeksi perspektif pada bidang
uv, dan transformasi ke koordinat layar.

Realita visual (visual realism) akan menjadi lebih baik dengan adanya
proyeksi perspektif pada bidang uv karena obyek yang jauh akan nampak
lebih kecil. Selain itu kesan 3 dimensi akan semakin nampak dengan adanya
rendering dan bayangan (shadowing), sehingga suatu obyek walaupun
warnanya homogen tetapi akibat pengaruh pencahayaan dari suatu tempat
maka kecerahan warna berbeda pada setiap titik atau setiap poligon yang
membentuk obyek tersebut selain itu akan muncul bayangan yang akan
mempertajam efek 3 dimensi.

Semakin tinggi kerapatan poligon per satuan luas maka gambar yang
muncul akan semakin halus, dengan konsekwensi beban memori akan
semakin tinggi pula. Melalui penambahan berbagai efek yang sering terjadi
di dunia nyata, sudah dapat dihasilkan kenyataan semu yang dapat
digunakan untuk memvisualkan atau untuk simulasi dalam berbagai hal.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 116


DAFTAR PUSTAKA
Adams, Lee.1991. Visualization Graphics in C. Mc Graw Hill.

Anand, Vera B. 1993. Computer Graphics and Geometric Modelling for


Engineer. Singapore:John Wiley & Son, Inc.

Foley, James D. 1982. Fundamentals of Interactif Computer Graphics.


Addison-Wesley Publisihing Company.

Harrington, Steve. 1987. Computer Graphics: Programming Approach.


McGraw Hill. 2th edition.

Hearn, Donald dan Bakar, M. Puline.1986.Computer Graphics. Prentice Hall


International

Insap Santoso, Ir., M.Sc. 1994. Grafika Komputer dan Antar Muka Grafis. Andi
Offset . Yogyakarta. Cetakan I.

Newman, William M. & Sproul, Robert F.1984. Principle of Interactif Computer


Graphics. McGraw Hill

Pimentel, Ken dan Teixeira, Kevin.1995.Virtual Reality. Intel/McGrawHill. 2th


edition

Presmann, RogerL.1992.Computer Graphics: Apractitioner’s Approach. Mc.


Graw Hill. Third Edition.

Rimer, Steve.1993.Super VGA Graphics:Programming Secrets.McGraw Hill.

P. Insap Santoso, Ir.1997. Interaksi Manusi dan Komputer. Andi Offset.


Yogyakarta. Edisi Pertama.
Surya Setiawan, MSc. 2000. Diktat Kuliah Grafika Komputer Fakultas
Universitas Indonesia. Jakarta

Paulus Bambangwirawan, Dipl.Inforn. 2004. Grafika Komputer. Penerbit Andi.


Yogykarta.

Edhi Nugroho, 2005. Teori dan Praktek Grafika Komputer. Penerbit Graha
Ilmu. Yogyakarta

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 117


Imam Heryanto, Budi Raharjo. 2006. Pemrograman Borland C++ Builder.
Penerbit Informastika. Bandung

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 118