Grafika Komputer-In Editing2

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

Daftar Isi

Daftar Tabel

Daftar Gambar

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).

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,

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)

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.

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

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;

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)

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

6. Chord / Tembereng
tembereng.
Canvas->Chord(x1, y1, x2, y2, x3, y3, x4, y4);
X3,y3
X1,y1
X4,y4
X2,y2
7. Pie/Juring
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.

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.

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

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

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->MoveTo(200,200);
Canvas->Brush->Color = clBlue;
POINT Titik[13];
Titik[0]=Point(260,170);

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;
POINT Jendela[3];
Jendela[0]=Point(250,250);
Canvas->Polygon((TPoint*) Jendela,3);
Canvas->LineTo(330,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

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->Color = clWhite;
Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight));
}
//---------------------------------------------------------------------
------
void _fastcall TForm1::SetDefault()
{
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];

//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();

//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;

}
}
//---------------------------------------------------------------------
------
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()

{

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(120, 10, 220, 100);
Canvas->Brush->Style = bsCross;
Canvas->Brush->Color = clGreen;
Canvas->Brush->Style = bsBDiagonal;
Canvas->Brush->Color = clYellow;
Canvas->Brush->Style = bsFDiagonal;
Canvas->Brush->Color = clBlack;

Canvas->Brush->Style = bsDiagCross;
Canvas->Brush->Style = bsHorizontal;
Canvas->Brush->Color = clGreen;
Canvas->Brush->Style = bsVertical;
Jalankan aplikasi pilih menu Style, akan mendapat hasil sebagai

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

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

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

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).

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.

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.

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

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

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

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

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:
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
dihitung.
Program gambar garis vertikal
{
x1=200; y1=100;
x2=200; y2=200;
int i;

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:
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
dihitung.
Program gambar garis vertikal
Program garis diagonal
{
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

{
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

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

 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

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

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

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

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

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

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)
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender)

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

//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);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonSkalaClick(TObject *Sender)
{
PaintBox1->Canvas->Pen->Color = clWhite;
PaintBox1->Canvas->Brush->Color = clWhite;
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;
}
//---------------------------------------------------------------------------
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->Pen->Color = clRed;

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

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:

 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 )

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,

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)

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

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

#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
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"
//---------------------------------------------------------------------
------
TForm1 *Form1;
//---------------------------------------------------------------------
------
: TForm(Owner)
{
}
//---------------------------------------------------------------------
------
void __fastcall TForm1::PaintBox1Paint(TObject *Sender)

{
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);
x1=200; y1=200; x2=200; y2=70;
x=200; y =70;
sudut = 0;
}
//---------------------------------------------------------------------
------
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110);
PaintBox1->Canvas->MoveTo(x1,y1);
PaintBox1->Canvas->LineTo(x2,y2);
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->Color = RGB (0, 0,0);
PaintBox1->Canvas->MoveTo(x1,y1);
PaintBox1->Canvas->LineTo(x2,y2);
}

//---------------------------------------------------------------------
------
Hasil

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

Hiu.H
//---------------------------------------------------------------------------
#ifndef sharkH
#define sharkH
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
{
TTimer *Timer1;
TTimer *Timer2;
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];
};
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
#endif
//---------------------------------------------------------------------------
Hiu.Cpp
#include <vcl.h>
#pragma hdrstop
#include "shark.h"
//---------------------------------------------------------------------------
TForm1 *Form1;
//---------------------------------------------------------------------------
: TForm(Owner)
{
}
//---------------------------------------------------------------------------

{
PaintBox1->Canvas->Pen->Width=1;
PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);
PaintBox1->Canvas->Rectangle(0,0, 617,250);
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;
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);
xl1=95;yl1=200;
xl2=140; yl2=200;
xl3=95; yl3=100;
layar[0] = Point(xl1,yl1);
PaintBox1->Canvas->Polygon((TPoint*)layar,2);
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);

x1=20; y1= 400;

x2=10; y2= 440;
x3=40; y3= 440;
PaintBox1->Canvas->MoveTo(x1, y1);
POINT titikhiu[4];
titikhiu[0] = Point(x1,y1);
PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3);
}
//---------------------------------------------------------------------------
{
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];
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

if (x2 > 617)
Close();
}
//---------------------------------------------------------------------------

{
POINT kapal[4];
kapal[0] = Point(xk1,yk1);
PaintBox1->Canvas->MoveTo(xg1,yg1);
PaintBox1->Canvas->LineTo(xg2,yg2);
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->MoveTo(xk1,yk1);
PaintBox1->Canvas->MoveTo(xg1,yg1);

PaintBox1->Canvas->LineTo(xg2,yg2);
POINT layar[3];
if (xk2 > 250)

Timer2->Enabled = false;
}
//---------------------------------------------------------------------
------

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

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.

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

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.

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.

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

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 :

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.

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.

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.

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

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.

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

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)

Gambar 1. Arsiran akibat pengaruh cahaya.
Gambar @ memperlihatkan pengaruh cahaya terhadap warna dan arsiran

suatu bagian dengan cahaya berasal dari arah kiri atas.

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.

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

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.

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:

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

S[2].x menunjukkan koordinat x titik sudut 2, dan
seterusnya.
2. Tentukan letak kamera (View Plane Normal-VPN)

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)

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

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
6. Lakukan operasi perkalian matrix

7. Transformasikan koord obyek dalam koordinat dunia ke VPN

8. Proyeksi perpektif ke bidang u-v

9. Membuat nilai 1 pada matriks ordo ke 3

10. Transformasi koordinat caertesian ke koordinat layar, karena deskripsi

obyek menggunakan koordinat cartesian, sementara penampil koordinat
layar
11. Penggambaran obyek ke layar

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

{
//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;

//------------------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]=

{
{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

{
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

{
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];

}
//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
{
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++)
{
vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3];
}
int tengah=PaintBox1->ClientWidth/2;
// trabsformasi ke koordinat layar
{
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]);
PaintBox1->Canvas->Polyline((TPoint*)t1,4);
//poligon 2 belakang

//poligon 3 bawah
//poligon 4 atas
//poligon 5 kanan
//poligon 6 kiri
PaintBox1->Canvas->Polyline((TPoint*)t6,4);\
5. Tambahkah kode pada file header (.h) sbb

(yg dicetak Bold ¸cetak regular bawaan C++)
//---------------------------------------------------------------------------
#ifndef rangkaH

#define rangkaH
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
{
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"
//-------------------------------------------------------------
TForm1 *Form1;
//--------------------------------------------------------------
6. jalankan program diatas

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:

kamera_x=kamera_x-20;
BitBtn3>Click:
kamera_y=kamera_y-20.0;
BitBtn4->Click:
kamera_x=kamera_x+20;
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 !

! 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->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 dxn=kx/d;
float dyn=ky/d;
………………..
…………………….. sesuai program sebelumnya
……………….
}
5. Tambahkan kode pada file header sbb (yg di ketik Bold)

……………..
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

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

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)

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

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.

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 :
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

…………..
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

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

void _fastcall TForm1::gambar(float kamx,float kamy)
{
int jumlah_obyek=1;
int max_titik=8;
int max_poli=6;
//------------------posisi kamera
float kx=kamx;
float ky=kamy;
float kz=500;
//----------------------------------
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

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

{
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

{

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

{
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
{
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

{
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

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];

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];

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;
{
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
//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]);

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;
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;
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;
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;
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);
}

{
}
//---------------------------------------------------------------------------

{
for (int r=-200;r<=200;r++){
for(int t=1;t<1000000;t++){}//tunda
kamera_x+=r;
}
for (int r=-200;r<=200;r++){
kamera_y+=r;
}
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;
}
//---------------------------------------------------------------------------
16.13.2Tombol Kiri-OnClick
void __fastcall TForm1::KiriClick(TObject *Sender)

{
kamera_x=kamera_x-20.0;
}
//---------------------------------------------------------------------------

16.13.3Tombol Atas-OnClick
void __fastcall TForm1::AtasClick(TObject *Sender)

{
kamera_y+=20.0;
}
//---------------------------------------------------------------------------
16.13.4Tombol Bawah-OnClick
void __fastcall TForm1::BawahClick(TObject *Sender)

{
kamera_y-=20.0;
}
//---------------------------------------------------------------------------
16.13.5Tombol Auto-OnClick
void __fastcall TForm1::AutoClick(TObject *Sender)

{
for (int r=-200;r<=200;r++){
kamera_x+=r;
}
for (int r=-200;r<=200;r++){
kamera_y+=r;
}
5. Jangan lupa , diklarasikan semua variabel/fungsi yang ada pada file

header
#include <MPlayer.hpp>
#include <Buttons.hpp>
//---------------------------------------------------------------------
------
{

TBitBtn *BitBtn1;
TBitBtn *BitBtn2;
TBitBtn *BitBtn3;
TBitBtn *BitBtn4;
void __fastcall FormActivate(TObject *Sender);
void __fastcall BitBtn2Click(TObject *Sender);
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];
};
//---------------------------------------------------------------------
------
//---------------------------------------------------------------------
------
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

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)
…….
int jumlah_obyek=1;
int max_titik=12;
int max_poli=9;
//------------------posisi kamera
float kx=kamx;
float ky=kamy;
float kz=500;
//----------------------------------
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;

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];

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]);

g1[4]=Point(p[1].x[1],p[1].y[1]);
PaintBox2->Canvas->Brush->Color=clBlue;
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;
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;
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;
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;
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);
POINT g7[4];

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]);
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]);
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]);
}
5. Jalankan !

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.

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

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

Grafika Komputer-In Editing2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Grafika Komputer-In Editing2

Diunggah oleh

Hak Cipta:

Format Tersedia

Untuk kalangan

Untuk Kalangan sendiri

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 1

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 2

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 3

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 4

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 5

Grafika Komputer merupakan sekumpulan alat yang digunakan untuk

1.1 Implementasi Grafika Komputer

1.1.1 Aplikasi Pengolah Bentuk dan Citra

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 6

1.1.3 CAD (Computer Aided Design)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 7

1.1.5 Representas Data

1. 3 SISTEM GRAFIKA KOMPUTER

1.4 KOMPONEN LAYAR PENAMPIL

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 8

Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 9

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 10

2.1 Pengertian Output Primitif

2.2 Macam-macam Output/Grafis primitif

Kode untuk menggambar titik :

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 11

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 12

Lingkaran adalah kumpulan titik yang melingkar dengan garis tengah

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 13

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 14

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 15

POINT var[n]; //deklarasi variabel

Dengan var : variabel

2.3 Atribut Output Primitif

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 16

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 17

2.3.1 Membuat Bentuk dengan dari Objek Geometri

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 18

2.3.2 Mengenal Atribut

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 19

void _fastcall TForm1::BersihkanCanvas()

BersihkanCanvas(); //Memanggil Fungsi bersihkanCanvas()

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 20

//Menuliskan teks ke layar pada koordinat tertentu

void __fastcall TForm1::Color1Click(TObject *Sender)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 21

void __fastcall TForm1::Width1Click(TObject *Sender)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 22

Selanjutnya deklarasikan fungsi BersihkanCanvas() pada File

void _fastcall TForm1::BersihkanCanvas()

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 23

void __fastcall TForm1::Style1Click(TObject *Sender)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 24

Jalankan aplikasi pilih menu Style, akan mendapat hasil sebagai

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 25

3.2 Koordinat Nyata (World Coordinat)

3.3 Sistem Koordinat

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 26

Sistem koordinat 2D Sistem Koordinat 3D

3.4 Sistem koordinat dua dimensi

Sistem koordinat Kartesius dalam dua dimensi umumnya didefinisikan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 27

Gambar 3.2 Keempat kuadran sistem koordinat Kartesius

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 28