Grafika Komputer-In Editing2
description
Transcript of Grafika Komputer-In Editing2
Untuk Kalangan sendiri
Handouts
Grafika Komputer
Diterbitkan oleh:
Badan Penerbit
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM Yogyakarta
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 1
Untuk kalangan sendiri
Handouts
Grafika Komputer Edisi I
Kata Pengantar
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 2
Daftar Isi
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 3
Daftar Tabel
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 4
Daftar Gambar
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 5
BAB 1. PENDAHULUAN
Grafika Komputer merupakan sekumpulan alat yang digunakan untuk
membuat gambar dan berinteraksi dengan gambar dengan cara-cara seperti
yang biasa digunakan. Peralatan tersebut dapat berupa perangkat keras
ataupun piranti lunak. Semua peralatan tersebut memberi fasilitas kepada
programmer membuat program-program grafis yang baik. Secara umum
program-program komputer grafis ditujukan untuk memudahkan interaksi
antara manusia dengan komputer.
1.1 Implementasi Grafika Komputer
Aplikasi grafika komputer adalah program komputer yang dirancang
khusus untuk menghasilkan grafis datau representasi visual dari data ke
dalam bentuk gambar, slide dan sebagainya. Ruang lingkup aplikasi grafika
komputer sangat luas mencakup dari sekedar proses interaktif. Selain itu
ruang lingkup aplikasi grafika komputer mulai dari bidang dua dimensi
sampai ke ruang tiga dimensi, mulai dari pemodelan benda sederhana
sampai ke representasi data geografis. Aplikas grafika komputer dapar dibagi
mejadi beberapa kelompok, yaitu :
Aplikasi pengolah Bentuk dan Citra
Presentasi
CAD (Computer Aided Design)
Animasi
Representasi Data
Permainan
1.1.1 Aplikasi Pengolah Bentuk dan Citra
Aplikasi Pengolah bentuk dan Citra merupakan aplikas yang banyak
digunakan oleh Desaigner grafis dan ilustrator.
Aplikasi pengoleh Bentuk ditujukan untukmengolah bentuk (Shape)
yang disusun dari serangkaian garis sedangkan Aplikasi pengolah Citra
ditujukan untuk memanipulasi sekumpulan titik yang membentuk sebuah
gambar (Citra).
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 6
Bentuk/Shape
Shape/bentuk tidak akan berubah kehalusannya meskipun diubah
ukurannya
Gambar yang dibuat/direkayasa dari bentuk geometri
Contoh aplikasi Pengolah bentuk antara lain Corel Drow, Adobe
ilustrator, Adobe FreeHand
Citra / raster
Citra akan berubah bentuknya jika diubah ukurannya diberbersar atau
diperkecil. Perubahan bentuk Pada citra terjadi karena ukuran pixel
mengikuti perbandingan perbesaran citra. Sehingga perbesaran
mengakibatkan citra kehilangan ketajaman.
Aplikasi pengolah Citra daoat digunakan untukmemberikan efek khusu
terhadap citra yang diolah, tergantung aplikas yang digunakan dapat
diberkan efek khusu seperti bayangan (shadow), pengkaburan (blur)
dsb.
Contoh aplikas pengolah Citra antara lain Corel PhotoPaint, Adobe
Photoshope
1.1.2 Presentasi
Aplikasi presentasi banyak digunakan oleh kalangan bisnis dalam
mempresentaskan ide-ide ataupun konsep-konsep. Dalam
perkembangannya, aplikas presentas tidak hanya sekedar menampilkan slide
ke layar tetapi juga dilengkapi dengan fasilitas animasi. (contoh aplikasi
presentasi antara lain : Power point, Marcomedia Flash)
1.1.3 CAD (Computer Aided Design)
Aplikasi CAD banyak digunkan dalam bidang Teknik. Dengan
menggunkan CAD seorang perancang teknik tidka lagi menggunakan meja
gambar dan kertas tetapi mengunakan komputer sebagai media. Contoh
Aplikasi CAD . Contoh aplikasi CAD antara lain AutoCad untuk aplika
teknik/rekaya bangunan/mesin, Protel untuk aplikasi rekyasa elektronik,
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 7
Home Designer untuk aplikasi design anterior dan NuGraf untuk aplikas
pemodelan benda tiga dimensi.
1.1.4 Animasi
Aplikasi animasi merupakan aplikas yang banyak digunakan dalam
bidang periklanan dan Film. Dengan mengunakan aplikasi animasi, seorang
kreator dapat menciptakan benda-benda maya yang dapat bergerak dalam
dunia nyata. Contoh aplikasi animasi antara lain Autodesk 3D Studio,
Extreme 3D, Animator Pro, Ray Dream Studio.
1.1.5 Representas Data
Representasi data merupakan salah satu cara melihat data dalam
bentuk yang lebih mudah diamati. Aplikasi representas data banyak
digunakan dalam bidang analisa statistik dan geografi. Contoh apliasi untuk
merepresentasikan data geografis antara lain ArcInfor, MapInfo.
1.1.6 Permainan
Saat ini hampir tidak ada aplikas permainan komputer yang tiak
memanfaatkan modus grafik. Aplikasi permainan antara lain aplikasi tembak
dan lari (Shoot adn run), Aplikasi permainan strategi (war games), dll.
1. 3 SISTEM GRAFIKA KOMPUTER Sistem grafika komputer pasif adalah sistem dimana operator tidak
bisa berinteraksi secara langsung dengan gambar yang dibangkitkan.
Sistem Grafika komputer interaktif (interactive Computer Graphics)
adalah sistem yang memungkinkan operator untuk berdialog langsung
dengan apa yang terlihat pada layar komputer.
1.4 KOMPONEN LAYAR PENAMPILPada dasarnya, semua layar penampil dengan kemampuan grafis
punya 3 komponen utama :
- Pengingat digital (frame buffer)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 8
Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai
elemennxm menunjukkan intensitas dari citra grafis yang akan
ditampilkan
- Layar Penampil
- Piranti pengendalian tampilan (Display controller) atau pengolah
tampilann (Display processor)
Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya
untuk ditampilkan ke layar penampil.
Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke
display) dikembangkan tahun 60-an. Pada jenis ini pengingat digital berisi
daftar tampilan (display list) atau tampilkan (display program) yang berisi
perintah pengambaran titik, perintah penggambaran garis, dan perintah
penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan
mengubah data digital menjadi tegangan analog yang dipakai untuk
memancarkan elektron yang bisa mengenal tabung layar tampilan berlapis
fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar.
Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan
atau ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan
minimal 30 kali per detik untuk menghindari adanya kedip (flicker). Proses ini
disebut sebagai penyegaran eletron (electron refreshing).
Tampilan berdasarkan teknologi TV dan disebut raster display.
Dikembangkan tahun 70an. Pada tampilan ini, garis, karakter dan bentuk-
bentuk lain selalu digambar berdasar komponen terkecilnya yaitu titik, dan
biasa disebut sebagai pixel atau pel(picture element). Sebuah titik pada layar
tampilan bisa dihidup matikan dengan mudah dalam pengingat digital karena
0 untuk titik matik dan 1 untuk titik yang menyala.
Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan
sebagai polabit dengan mengubah pola bit (piksel) yang ada dalam pengingat
digital, bisa dibentuk gambar sesuai dengan keinginan. Untuk gambar hitam-
putih, warna hitam disajikan menggunakan bit 1, dan warna putih
menggunakan bit 0. Untuk gambar berwarna pengaturan yaitu lebih rumit.
Yang dimaksud dengan raster atau resolusi layar (screen resolution)
adalah matrix piksel yang menutup seluruh permukaan layar tampilan.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 9
Semakin besar ukuran matrix pikxel yang dibentuk pada suatu layar tampilan,
semakin bagus dan halus pula gambar yang bisa dihasilkan oleh layar
tersebut.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 10
Bab 2.GRAFIS PRIMITIF
2.1 Pengertian Output Primitif
Output/Grafis primitif adalah bentuk geometri dasar yang dapat
digunakan untuk membentuk obyek yang lebih komplek.
Dengan memasukkan output primitif tersebut sebagai stuktur yang lebih
kompleks. Setiap output primitif mempunyai data koordinat dan informasi lain
tentang bagaimana cara object ditampilkan pada layar. Titik dan garis lurus
adalah bentuk geometri paling sederhana dan komponen gambar.
Borland C++ Builder menyediakan Canvas yang dapat digunakan
untuk menampilkan gambar maupun tulisan ke layar. Kelas Canvas pada
umumnya merupakan atribut dari kelas Lain. Beberapa kelas yang
mempuntai atribut Canvas antara lain TPaintBox, TShape.
2.2 Macam-macam Output/Grafis primitif
1. Titik (Pixel)
Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar
titik maka kita dapat menggambar obyek apapun. Termasuk bentuk
geometri dibawah merupakan bentuk –bentuk yang pada dasarnya
berasal dari titik-titik. Operasi titik ini sering digunakan pada pengolahan
citra (Image processing). Setiap titik pada monitor memiliki parameter
:koordinat dan warna.
Kode untuk menggambar titik :
Canvas-> Pixels[x][y] = warna
Dengan x : koordinat mendatar
y : koordinat vertikal
Warna : warna pixel
Contoh :
Canvas->Pixel [100][100] = clRed;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 11
2. Garis (line)
Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier
dari titik awal sampai titik akhir
Kode :
Canvas->MoveTo(x0, y0);
Canvas->MoveTo(x1, y1);
...
Canvas->LineTo(xn, yn)
Garis ini berawal dari titik koordinat (x0,y0) sampai ke (x1,y1) dan
selanjutnya ke (xn,yn).
Contoh
3. Kotak (Box)
Kotak merupakan siklus tertutup minimal memiliki 2 titik pokok
Keterangan :
X1,y1:koordinat kotak awal
X2,y2:koordinat kotak akhir (diagonal)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 12
X0,y0X0,y0
X1,y1
X2,y2
Xn,yn
X1,y1
X2,y2
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.
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);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 13
x1,y1
X2,y2
x1,y1
X2,y2
x1,y1
X2,y2
X4,y4
x3,y3
6. Chord / Tembereng
Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat
tembereng.
Canvas->Chord(x1, y1, x2, y2, x3, y3, x4, y4);
7. Pie/Juring
Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat
Juring.
Canvas->Pie(x1, y1, x2, y2, x3, y3, x4, y4);
8. Poligon (Polygon)
Method Poligon digunakan untuk mengambar segi banyak
Gambar yang terbentuk adalah kurva tertutup.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 14
X1,y1
X2,y2
X3,y3
X4,y4
X1,y1
X2,y2
X3,y3
X4,y4
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:
9. Polyline
Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari
suatu koordinat ke koordinat lainnya.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 15
a b
c
d
e
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 : variabelN: 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:
2.3Atribut Output Primitif
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 16
a b
c
d
e
Pada umumnya, setiap parameter yang memberi pengaruh pada
output primitif ditampilkan sesuai dengan parameter atribut.
1. Atribut Garis
Atribut dasar untuk garis lurus adalah style (tipe garis), width (tebal)
dan color(warna).
Dalam beberapa paket aplikasi grafik, garis dapat ditampilkan dengan
mengunakan Pen.
2. Atribut Kurva
Parameter untuk atribut kurva sama dengan atribut segmen garis.
Kurva dapat ditampilkan dengan berbagai warna, tebal, dot-dash(Style
garis) dan pilihan pen atau brush. Selain itu untuk pengisian suatu
bidang tertentu termasuk memilih warna antara solid dan pattern
tertentu dan memilih warna pattern yang ada.
3. Atribut Karakter
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 17
2.3 Implementasi
2.3.1 Membuat Bentuk dengan dari Objek Geometri
Kode Program //--------------------------------------#include <vcl.h>#pragma hdrstop#include "Umobil.h"//---------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner){}//---------------------------------------------void __fastcall TForm1::FormPaint(TObject *Sender){Canvas->Brush->Color = clYellow;Canvas->Rectangle(0,0,650,300);Canvas->Brush->Color = clGray;Canvas->Rectangle(0,300,650,500);Canvas->MoveTo(200,200);Canvas->Brush->Color = clBlue;
POINT Titik[13];Titik[0]=Point(260,170);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 18
Titik[1]=Point(520,170);Titik[2]=Point(560,350);Titik[3]=Point(520,350);Titik[4]=Point(500,310);Titik[5]=Point(460,310);Titik[6]=Point(440,350);Titik[7]=Point(300,350);Titik[8]=Point(280,310);Titik[9]=Point(240,310);Titik[10]=Point(220,350);Titik[11]=Point(160,350);Titik[12]=Point(180,250);Titik[13]=Point(240,250);
Canvas->Polygon((TPoint*) Titik,13);Canvas->Brush->Color = clBlack;Canvas->Pen->Width = 14;Canvas->Brush->Style = bsCross;Canvas->Ellipse(450,315, 510, 390);Canvas->Ellipse(230,315, 290, 390);Canvas->Brush->Color = clRed;Canvas->Brush->Style = bsSolid;Canvas->Pen->Width = 5;POINT Jendela[3];Jendela[0]=Point(250,250);Jendela[1]=Point(265,180);Jendela[2]=Point(515,180);Jendela[3]=Point(530,250);Canvas->Polygon((TPoint*) Jendela,3);
Canvas->MoveTo(330,180);Canvas->LineTo(330,250);Canvas->MoveTo(400,180);Canvas->LineTo(400,250);Canvas->MoveTo(470,180);Canvas->LineTo(470,250);
}//---------------------------------------------------------------------------
2.3.2 Mengenal Atribut
1. Mengenal Pen
Langkah 1Rancanglah Form Dengan Nama untuk File Unit adalah Upen.cpp dan
Nama file project adalah Pen.bpr
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 19
Langkah 2Buat menu dengan komponen TMainMenu terdiri dari Pen dan sub
menu Pen adalah ”Style”, ”Color” ,”Width”
Langkah 3Buka File Upen.h (ctrl-F6) dan deklarasikan fungsi-fungsi berikut pada
bagian public
void _fastcall BersihkanCanvas();
void _fastcall SetDefault();
Langkah 4Buka File Upen.cpp dan definisikan fungsi-fungsi tersebut pada bagain
akhir kode program dengan menggunakan sintak berikut
void _fastcall TForm1::BersihkanCanvas(){ Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clWhite; Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight));}//---------------------------------------------------------------------------void _fastcall TForm1::SetDefault(){ Canvas->Pen->Width = 1; Canvas->Pen->Mode = pmCopy; Canvas->Pen->Style = psSolid; Canvas->Pen->Color = clBlack;}
Langkah 5Isikan sintak berikut pada event OnClick pada item “Style” dari komponen MainMenu1.void __fastcall TForm1::Style1Click(TObject *Sender){//membuat 7 element array dari tipe TPenStyle TPenStyle JENIS[7] = { psSolid, psDash, psDot, psDashDot, psDashDotDot, psClear, psInsideFrame }; int posisiY = 20; //deklarasi posisiY dengan nilai awal 20
BersihkanCanvas(); //Memanggil Fungsi bersihkanCanvas() SetDefault();//memanggil Fungsi SetDefault() for (int j=0; j<7; j++) { Canvas->Pen->Style = JENIS[j];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 20
//menentukan koordinat awal Canvas->MoveTo(100, posisiY); //menggambar garis dari posisi awal sampai ke posisi ... // (Lebar layar - 10, posisiY) Canvas->LineTo(ClientWidth-10, posisiY); posisiY +=20; }
//Menuliskan teks ke layar pada koordinat tertentu Canvas->TextOut(1, 10, "psSolid "); Canvas->TextOut(1, 30, "psDash "); Canvas->TextOut(1, 50, "psDot "); Canvas->TextOut(1, 70, "psDashDot "); Canvas->TextOut(1, 90, "psDashDotDot "); Canvas->TextOut(1, 110, "psClear "); Canvas->TextOut(1, 130, "psInsideFrame ");}//---------------------------------------------------------------------------
Sampai disini, coba jalankan aplikas dan pilih menu Style, kita akan
melihat hasil seperti berikut
Langkah 6Selanjutnya isikan sintak berikut pada event OnClick pada item ”Color”
dari komponen MainMenu1
void __fastcall TForm1::Color1Click(TObject *Sender){ BersihkanCanvas(); SetDefault();
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 21
//melakukan pengulangan untuk membuat 100 buah garis for (int k=0; k<100; k++) { //untuk mengacak (random) warna pena Canvas->Pen->Color = RGB(random(255),random(255), random(255)); //untuk mengacak penentuan koordinat awal Canvas->MoveTo(random(ClientWidth), random(ClientHeight)); //untuk membuat garis sampai koordinat acak Canvas->LineTo(random(ClientWidth), random(ClientHeight)); } }
Coba jalankan aplikasi tersebut. Pilih Menu Color. Hasil aplikasi akan
tampak sebagai berikut
Langkah 7Isikan Sintak dibawah ini untuk Event Onclick pada item ”Width” dari
Komponen MainMenu1
void __fastcall TForm1::Width1Click(TObject *Sender){ int posisiY = 20; BersihkanCanvas(); SetDefault(); for (int i=0; i<10; i++) { Canvas->TextOut(10,posisiY, "Width = " + AnsiString(i)); Canvas->Pen->Width = i; Canvas->MoveTo(80, posisiY + 8); Canvas->LineTo(ClientWidth -10, posisiY + 8); posisiY +=20;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 22
}}//---------------------------------------------------------------------------
Jalankan aplikasi dan pilih menu Width, kita akan mendapatkan hasil
sebagai berikut
2. Mengenal Brush
Langkah 1Buat 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 2Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada
Bagian Public
void _fastcall BersihkanCanvas();
Selanjutnya deklarasikan fungsi BersihkanCanvas() pada File
Ubrush.cpp sebagai berikut
void _fastcall TForm1::BersihkanCanvas()
{
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 23
Canvas->Brush->Style = bsSolid;
Canvas->Brush->Color = clWhite;
Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight));
}
//---------------------------------------------------------------------------
Langkah 3Isikan sintak berikut untuk event OnClick pada item ”Style” dari
komponen MainMenu1 sebagai berikut
//---------------------------------------------------------------------------
void __fastcall TForm1::Style1Click(TObject *Sender){BersihkanCanvas();
Canvas->TextOut(10,110, "bsClear");Canvas->TextOut(120,110, "bsSolid");Canvas->TextOut(240,110, "bsCrosh");Canvas->TextOut(360,110, "bsBDiagonal");Canvas->TextOut(10,250, "bsFDiagonal");Canvas->TextOut(120,250, "bsDiagCross");Canvas->TextOut(240,250, "bsHorizantal");Canvas->TextOut(360,250, "bsVertical");
Canvas->Brush->Style = bsClear;Canvas->Rectangle(10,10,100,100);
Canvas->Brush->Color = clRed;
Canvas->Brush->Style = bsSolid;Canvas->Brush->Color = clBlue;Canvas->Rectangle(120, 10, 220, 100);
Canvas->Brush->Style = bsCross;Canvas->Brush->Color = clGreen;Canvas->Rectangle(240, 10, 340, 100);
Canvas->Brush->Style = bsBDiagonal;Canvas->Brush->Color = clYellow;Canvas->Rectangle(360, 10, 460, 100);
Canvas->Brush->Style = bsFDiagonal;Canvas->Brush->Color = clBlack;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 24
Canvas->Rectangle(10, 140, 100, 240);
Canvas->Brush->Style = bsDiagCross;Canvas->Brush->Color = clBlue;Canvas->Rectangle(120, 140, 220, 240);
Canvas->Brush->Style = bsHorizontal;Canvas->Brush->Color = clGreen;Canvas->Rectangle(240, 140, 340, 240);
Canvas->Brush->Style = bsVertical;Canvas->Brush->Color = clRed;Canvas->Rectangle(360, 140, 460, 240);
}
Jalankan aplikasi pilih menu Style, akan mendapat hasil sebagai
berikut
2.1 Latihan
Buatlah Aplikasi membentuk objek dengan bidang geomerti dan
atributnya.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 25
Bab 3.KOORDINAT SISTEM DAN LAYAR
3.1 Pendahuluan
Koordinat dapat diartinya sebagai tata keseimbangan yang membantu
kita di dalam menentukan suatu kondisi dengan nilai dan batas dalam konteks
geometri. Pada koordinat kartesius arah vertikal digunakan sebagai sumbu y,
dengan y positif ke atas dan arah ke bawah sebagai y negatif, arah mendatar
digunakan sebagai sumbu x dan x positif ke arah kanan dan x negatif ke arah
kiri. Tetapi layar monitor menggunakan orientasi berbeda. Monitor
mengunakan arah ke bawah sebagai sumbu y positif, disamping itu monitor
juga tidak mengenal nilai negatif.
Pada komputer grafik, ada 3 macam sistem koordinat yang harus kita
perhatikan, yaitu
1. Koordinat Nyata
2. Koordinat Sistem
3. Koordinat Tampilan atau Layar
3.2 Koordinat Nyata (World Coordinat)
Yang dimaksud dengan koordinat nyata adalah koordinat yang pada
saat itu object bersangkutan berada. Dalam bahasa Inggris disebut real
world coordinate untuk menghindari kerancuan dengan istilah world
coordinate yang digunakan untuk GLOBUS.
3.3 Sistem Koordinat
Adalah suatu yang abstrak dan biasanya digunakan untuk perhitungan
data yang hasilnya perlu ditampilkan kembali pada layar atau di atas kertas.
Sistem koordinat sealau dikaitkan dengan dimensi, dimana
0 D , dimensi ke 0
1 D, dimensi ke 1
2 D, dimensi ke 2
3 D, dimensi ke 3
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 26
4 D, dimensi ke 4
5 D, dimensi ke 5, dan seterusnya
Sebuah titik secara umum sering disebut dimensi ke 0, garis dimensi
ke 1, bidang dimensi ke 2, kubus dimensi ke 3, dan seterusnya. Untuk
kebutuhan grafik umumnya kita menggunakan dimensi ke 3. Kita mempunyai
sistem koordinat untuk 2 dimensi dan 3 dimensi yang dibedakan dengan
jumlah sumbu koordinat yang dimiliki oleh masing-masing sistem. Sistem 2
Dimensi memiliki 2 sumbu koordinat, yaitu sumbu x dan sumbu y, sedangkan
sistem koordinat 3 dimensi memiliki 3 buah sumbu koordinat, yaitu x, y dan z.
Sistem koordinat 2D Sistem Koordinat 3D
Gambar 3.1 Dimensi Sistem Koordinat
3.4 Sistem koordinat dua dimensi
Sistem koordinat Kartesius dalam dua dimensi umumnya didefinisikan
dengan dua sumbu yang saling bertegak lurus antar satu dengan yang lain,
yang keduanya terletak pada satu bidang (bidang xy). Sumbu horizontal diberi
label x, dan sumbu vertikal diberi label y. Pada sistem koordinat tiga dimensi,
ditambahkan sumbu yang lain yang sering diberi label z. Sumbu-sumbu
tersebut ortogonal antar satu dengan yang lain. (Satu sumbu dengan sumbu
lain bertegak lurus.)
Titik pertemuan antara kedua sumbu, titik asal, umumnya diberi label
0. Setiap sumbu juga mempunyai besaran panjang unit, dan setiap panjang
tersebut diberi tanda dan ini membentuk semacam grid. Untuk
mendeskripsikan suatu titik tertentu dalam sistem koordinat dua dimensi, nilai
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 27
y
x
y
xz
x ditulis (absis), lalu diikuti dengan nilai y (ordinat). Dengan demikian, format
yang dipakai selalu (x,y) dan urutannya tidak dibalik-balik.
Gambar 3.2 Keempat kuadran sistem koordinat Kartesius
Gambar - Keempat kuadran sistem koordinat Kartesius. Panah yang ada
pada sumbu berarti panjang sumbunya tak terhingga pada arah panah
tersebut.Pilihan huruf-huruf didasari oleh konvensi, dimana huruf-huruf yang
dekat akhir (seperti x dan y) digunakan untuk menandakan variabel dengan
nilai yang tak diketahui, sedangkan huruf-huruf yang lebih dekat awal
digunakan untuk menandakan nilai yang diketahui. Sebagai contoh, pada
Gambar 3, titik P berada pada koordinat (3,5).Karena kedua sumbu bertegak
lurus satu sama lain, bidang xy terbagi menjadi empat bagian yang disebut
kuadran, yang pada Gambar 3.2 ditandai dengan angka I, II, III, dan IV.
Menurut konvensi yang berlaku, keempat kuadran diurutkan mulai dari yang
kanan atas (kuadran I), melingkar melawan arah jarum jam (lihat Gambar 3).
Pada kuadran I, kedua koordinat (x dan y) bernilai positif. Pada kuadran II,
koordinat x bernilai negatif dan koordinat y bernilai positif. Pada kuadran III,
kedua koordinat bernilai negatif, dan pada kuadran IV, koordinat x bernilai
positif dan y negatif (lihat tabel dibawah ini).
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 28
Tabel 3. 1 Tabel Kuadran Sistem Koordinat Kartesius
KuadranNilai
xnilai
yI > 0 > 0II < 0 > 0III < 0 < 0IV > 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)
Gambar 3.3 Sistem Koordinat Layar
Perbedaan koordinat layar dengan sistem koordinat yang lain adalah
posisi nilai 0 untuk sumbu x dan Y. Ada yang menempatkan sumbu (0,0)
pada kiri atas dan ada juga yang meletakkan pada kiri bawah.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 29
(0,0)
Y
3.5 Konversi Koordinat
3.5.1 Konversi dari koordinat Nyata ke Sistem
Konversi dari koordinat nyata ke sistem dilakukan dengan
memperhatikan dimensi dari sistem itu sendiri. Koordinat nyata mempunyai
sistem 3 dimensi, sedangkan koordinat sistem ada 2 pilihan yaitu 2 dimensi
dan 3 dimensi.
Kita juga perlu memperhatikan adakah nilai titik pusat sumbu koordinat
karena koordinat nyata kita belum tahu dimana letaknya.
Real World Koordinat sistem (1)
Koordinat Sistem (2) Koordinat Sistem (3)
Gambar 3.4 Koordinat Sistem
Contoh di atas menunjukkan bahwa ada banyak kemungkinan untuk
konversi nilai koordinat nyata ke koordinat sistem. Masing-masing posisi
memiliki kelemahan dan kelebihan untuk proses selanjutnya. Dengan
demikian untuk menentukan nilai sistem koordinat juga perlu
mempertimbangkan bagaimana langkah selanjutnya.
Jika kita sudah menentukan nilainya, langkah selanjutnya adalah
memproses nilai tersebut untuk sistem koordinat.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 30
3.5.2 Konversi dari koordinat sistem ke layar
Masalah yang penting untuk diperhatikan di sini adalah perbedaan nilai
koordinat antar koordinat sistem dengan koordinat layar, di mana koordinat
sistem bisa memiliki nilai negatif, sedangkan koordinat layar hanya mengenal
nilai positif. Kalau pada koordinat sistem ada salah satu sumbu yang bernilai
negatif maka data tersebut (pixel) tidak akan tampil pada layar. Dengan kata
lain, pixel tampil di luar layar. Lihat contoh pada gambar dibawah ini :
Koordinat Sistem (3) Koordinat Layar
Gambar 3.5 Konversi Koordinta Sistem ke layar
Pada contoh di depan, gambar yang ditampilkan di layar muncul
secara terbalik karena sistem nilai antara koordinat sistem dan layar berbeda.
Agar gambar dapat tampil dengan sempurna, maka jika ada nilai sumbu
koordinat yang negatif, nilai tersebut harus diubah menjadi positif terlebih
dahulu dengan menggeser semua data yang terkait yang sama sementara
nilai sumbu Y dibalik.
Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2 tetap
seperti semula.Untuk mengkonversi koordinat sistem x dan y ke koordinat
dilakukan perhitungan:
Scr_x = x + midx, dimana midx = max_x_screen/2
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 31
Scr_y = midy - y, dimana midy = max_y_screen/2
Contoh :
Untuk layar dengan ukuran 400 x 640, maka
Max_x_screen = 400 dan
Max_y_screen = 640
1. Terdapat segitiga dengan sistem koordinat titik A(-10,-10), B(80,-
10), C(35, 70), konversikan ke koordinat layar
C
A B
Solusi
Scr_x = x + midx, dimana midx = max_x_screen/2
Scr_y = midy - y, dimana midy = max_y_screen/2
Sehingga
midx = 400/2 = 200; midy = 640/2 = 320
A’x = x + midx = -10 + 200 = 190
A’y = midy –y = 320 –(-10) = 330
B’x = x + midx = 80 + 200 = 280
B’y = midy –y = 320 –(-10) = 330
C’x = x + midx = 35 + 200 = 235
C’y = midy –y = 320 –(70) = 250
Hasil : A’(190, 330) B’(280,330) C’(235, 250)
(0,0)
midy
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 32
midx (400,640)
Bab 4.PEMBANGKIT GARIS
4.1 Titik dan Garis
Pembentukan titik dilakukan dengan mengkonversi suatu posisi
koordinat dengan program aplikasi ke dalam suatu operasi tertentu
menggunakan peralatan output. Garis dibuat dengan menentukan posisi titik
diantara titik awal dan akhir dari suatu garis. Kemudian , peralatan output
membuat garis sesuai titik-titik tersebut. Untuk peralatan analog, seperti
plotter dan random –scan display, garis lurus dapat dihasilkan dengan halus.
Sedangkan pada peralatan digital, garis lurus dihasilkan dengan menetapkan
titik diskrit antara titik awal dan akhir. Posisi titik diskrit sepanjang garis lurus
dapat diperhitungkan dari persamaan garis tersebut. Perhitungan titik yang
menghasilkan nilai pecahan, dikonversi menjadi posisi pixel. Pembulatan nilai
koordinat ke integer menghasilkan garis yang ditampilkan pada layar
menyerupai gambar tangga, Kehalusan tampilan pada layar akan tergantung
pada resolusi yang digunakan.
Resolusi dapat diartikan sebagai kepadatan pixel yang terdapat pada
suatu area tertentu. Resolusi 400 x 640 berarti pada layar komputer terdapat
sebanyak 400 pixel per layar dengan masing-masing baris mempunyi 640
pixel. Resolusi juga dapat dibedakan menjadi kasar, medium dan halus.
Resolusi berpengaruh terhadap baik tidaknya tampilan gambar grafik pada
layar komputer. Layar dengan resolusi tinggi (Halus) akan menghasilkan
gambar yang bagus pula. Sebagai ilustrasi, lihat gambar berikut.
Low Resolusion High Resolusion
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 33
Gambar 4.1 Perbandingan Resolusi Layar
Pada gambar diatas terlihat bahwa tampilan garis pada layar komputer
tidak sesempurna garis di atas kertas.
Garis dikaterorikan menjadi 4 macam, yaitu horisontal, vertikal,
diagonal dan garis bebas. Untuk menampilkan atau menggambar garis layar
dibutuhkan minimal 2 titik (endpoint), yaitu titik awal dan akhir. Awal garis kita
mulai dengan titik atau pixel pertama, P1, diikuti dengan titik kedua, P2. Untuk
mendapatkan titik-titik selanjutnya sampai ke Pn, perlu dilakukan inkrementasi
atas nilai koordinat sumbu X dan Y pada titik sebelumnya. Perhitungan
inkrementasi untuk masing-masing sumbu adalah berbeda. Garis vertikal,
horisontal, diagonal, dan bebas masing-masing mempunyai ciri khas sendiri
Tabel 4.1 Inkrementasi sumbu
Jenis Sumbu-X Sumbu-YHorisontal Gerak(X=X+1) KonstanVertikal Konstan Gerak(Y=Y+1)Diagonal Gerak(X=X+1) Gerak(Y=Y+1)Bebas Gerak(X=X+n) Gerak(Y=Y+m)
n dan m adalah nilai inkrementasi
4.2 Garis Horisontal
Garis horisontal adalah garis yang membentang secara paralel dengan
sumbu-X dengan asumsi titik P1 pada koordinat x1 lebih kecil daripada x2
dari P2, sedangkan y1 dan y2 konstan.
Algoritma
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik awal < titik akhir, lakukan inkrementasi sumbu-x dari titik
awal sampai titik akhir.
Jika tidak, maka
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 34
Lakukan dekrementasi sumbu-X dari titik awal sampai titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.
Program gambar garis harisontal
void __fastcall TForm1::Button1Click(TObject *Sender){x1=100; y1=100;x2=200; y2=100;int i; if (x1<x2) for (i=x1;i<=x2;i++) Canvas->Pixels[i][y1]=clRed; else for (i=x1;i>=x2;i--) Canvas->Pixels[i][y1]=clRed;}
4.3 Garis Vertikal
Garis vertikal adalah garis yang membentang paralel dengan sumbu-Y
dengan asumsi kita mulai dengan titik P1 pada koordinat Y1 lebih kecil dari
pada Y2 dari P2, sedangkan x1 dan x2 adalah konstan
Algoritma:
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik akhir < titik awal, lakukan inkrementasi sumbu-y dari titik
awal sampai titik akhir.
Jika tidak, maka
Lakukan dekrementasi sumbu-y dari titik awal sampai titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.
Program gambar garis vertikalvoid __fastcall TForm1::Button1Click(TObject *Sender){x1=200; y1=100;x2=200; y2=200;int i;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 35
if (y1<y2) for (i=y1;i<=y2;i++) Canvas->Pixels[x1][i]=clBlue; else for (i=y1;i>=y2;i--) Canvas->Pixels[x1][i]=clBlue;}
4.4 Garis Diagonal
Garis diagonal adalah garis yang membentang parale dengan 45
derajat dari sumbu-x atau sumbu-y dengan asumsi kita mulai dengan titik P1
dengan koordinat x1 dan y1 lebih kecil dari pada y1 dan y2 dari P2 atau
sebaliknya
Algoritma:
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat) :
Jika titik akhir < titik awal, lakukan inkrementasi sumbu-x dan
sumbu-y dari titik awal sampai titik akhir.
Jika tidak, maka
Lakukan dekrementasi sumbu-x dan sumbu-y dari titik awal sampai
titik akhir
3. Tampilkan garis menggunakan nilai parameter koordinat yang telah
dihitung.
Program gambar garis vertikal
Program garis diagonalvoid __fastcall TForm1::Button1Click(TObject *Sender){x1=50; y1=100;x2=200; y2=200;int i; if ((x1<x2) && (y1<y2)) { do { x1++; y1++; Canvas->Pixels[x1][y1]=clBlue; } while ((x1<=x2)||(y1<=y2)); } else {do
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 36
{ x1--; y1--; Canvas->Pixels[x1][y1]=clBlue; } while ((x1>=x2)||(y1>=y2)); }}//---------------------------------------------------------------------------
4.5 Garis Bebas
Garis bebas berbeda dengan garis horisontal, vertikal dan diagonal
yang telah kita kenal. Untuk penayangannya pada layar tidak begitu sulit dan
bentuk garis yang ditampilkan cukup sempurna. Garis bebas mempunyai ciri,
yaitu antara 2 titik, P1 dan P2, selalu membentuk suatu sudut yang besarnya
sangat bervariasi. Sudut ini lah yang menentukan kemiringan suatu garis atau
disebut juga gradasi.
Pengambaran garis bebas salah satunya adalah dengan
menggunakan algoritma Digital Differential Analyzer(DDA) adalah algoritma
pembentukan garis berdasarkan berhitungan dx maupun dy, menggunakan
rumus dy = m.dx.
Algoritma DDA
1. Tentukan koordinat awal garis (x0,y0)
2. tentukan koordinat akhir garis (x1,y1)
3. Hitung jarak mendatar ke 2 titik (dx)Dx=x1-x0
4. Hitung jarak mendatar ke 2 titik (dy)Dy=y1-y0
5. Tentukan faktor pembagi (mencari yg lebih panjang)
Apakah dx>dy,bila yaStep=dx
Bila tidakStep=dy
6. Hitung faktor penambah ke koordinat mendatar dan vertikal titik
berikut (x_tambah,y_tambah)X_tambah=dx/step
Y_tambah=dy/step
7. Buat loop mulai titik ke 1 sampai titik ke step
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 37
For k=1 to step
8. Hitung koodinat titik berikutnyaX=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 DDAx0=10;y0=10;x1=100;y1=200;dx=x1-x0;dy=y1-y0;x=float(x0);y=float(y0);if (dx>dy) step=dx;else step=dy;x_tambah=(float) dx/step;y_tambah=(float) dy/step ; int xx,yy; for (k=0;k<step;k++) { x+=x_tambah; y+=y_tambah; Canvas->Pixels[int(x)][int(y)]=clRed; }
BAB 5.TRANSFORMASI 2D
5.1 Transformasi
Gambar dan grafik dapat dibuat berdasarkan prosedur dan atribut
output primitif. Dalam aplikasi grafik diperlukan perubahan bentuk, ukuran dan
posisi suatu gambar yang disebut dengan manipulasi. Perubahan gambar
dengan mengubah koordinat dan ukuran suatu objek disebut transformasi
geometri. Kata transformasi berarti berubah bentuk. Transformasi diperlukan
untuk
mengubah (transform) posisi suatu objek dari suatu tempat asal ke
posisi elemen grafik.
Memindahkan suatu objek dari suatu tempat ke tempat lain
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 38
Memutar posisi suatu objek pada titik pusat
Mengubah ukuran suat objek baik memperkecil maupun memperbesar
dari ukuran aslinya.
Menarik objek ke samping kiri atau kanan dan bahkan atas bawah.
Transformasi dasar yaitu translasi, skala dan rotasi. Selain
transformasi tersebut , masih ada transformasi lain yang biasa digunakan
untuk mengubah suatu objek , seperti refleksi, streching/shear. Ilustrasi
Tampak pada gambar dibawah ini
Gambar 5.1 Transformasi
5.2 Perpindahan (iTranslation)
Translasi adalah transformasi terhadap suatu objek dengan
menggesernya dari suatu posisi ke posisi lain.
C’
C
ty tx A’ B’
A B
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 39
Gambar 5.2 Translasi (1)
Translasi dilakukan dengan penambahan translasi pada sumbu suatu
titik koordinat dengan translasi vector atau shift vector, yaitu (tx, ty) dimana tx
adalah translasi vector menurut sumbu x, sedangkan ty adalah translasi
vektor menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh
dengan menggunakan rumus
x’ = x + txy’ = y + ty
dimana (x,y) adalah koordinat asal suatu objek dan (x’, y’) adalah
koordinat baru objek tersebut setelah di translasi. Translasi adalah
transformasi dengan bentuk yang tetap, memindahkan object apa adanya.
Dengan demikian, setiap titik dari object akan ditranslasi dengan besaran
yang sama. Titik yang ditranslasi akan dipindahkan ke lokasi lain menurut
garis lurus.
P2(x, y+ty)
P(x,y) P1(x+tx, y)
P3(x+(-tx),y)
P4(x, y-ty)
Gambar 5.3 Translasi (2)
Contoh translasi
Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan
sistem koordinat A(10, 10), B(30, 10) dan C(10, 30) dengan translasi
vektor (10, 20), pertama-tama dihitung hasil translasi satu demi satu.
Penyelesaian
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 40
Titik A x’A = xA + tx = 10 + 10 = 20
y'A = yA + ty = 10 + 20 = 30
Hasil translasi titik A’(20, 30)
Titik B x’B = xB + tx = 30 + 10 = 40
y'B = yB + ty = 10 + 20 = 30
Hasil translasi titik B’(40, 30)
Titik C x’C = xC + tx = 10 + 10 = 20
y'C = yC + ty = 30 + 20 = 50
Hasil translasi titik C’(20, 50)
Dengan demikian hasil translasi merupakan segitiga dengan koordinat
A’(20, 30), B’(40, 30), C’(20, 50)
Latihan :
1. Coba Gambarkan proses tranlasi tersebut
2. Geser objek ABC ke kanan 30 pixel
3. Geser objek ABC ke bawah 10 pixel
4. Terdapat segiempat ABCD dengan koodinat sebagai berikut
A(40, 100), B(70, 100), C(70, 70), D(40, 70)
a. Translasikan objek ABCD dengan translasi vektor (15, 30)
b. Geserlah objek ABCD ke kiri 40 pixel
c. Gambarkan Objek ABCD dan kedua proses transalasi A dan B
5.3 Penskalaan (scalling)
Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu
yang mengakibatkan berubahnya ukuran obyek secara keseluruhan.
Perubahan ukuran suatu objek menghasilkan koordinat baru.
Koordinat baru diperoleh dengan melakukan perkalian koordinat dengan
skaling faktor , yaitu (sx, sy), dimana sx adalah scaling factor menurut sumbu
x, sedangkan sy adalah scaling faktor menurut sumbu y. Koordinat baru titik
yang diskala dapat diperoleh dengan rumus
x’ = x . Sx
y’ = y . Sy
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 41
Dimana (x, y) adalah koordinat asal suatu objek dan (x’, y’) adalah
koordinat setelah diskala.
Scaling factor sx dan sy dapat diberikan sembarang nilai positif. Nilai
lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil
dari 1, maka objek akan diperkecil. Bila sx dan sy mempunyai nilai sama,
maka skala tersebut uniform scaling. Nilai yang tidak sama dari sx dan sy
menghasilkan differential scaling, yang biasa digunakan pada program
aplikasi.
Contoh skala
Segitiga A(10,20),B(50,20),dan C (10,100) diperbesar mendatar 2 kali
dan vertikal 0,5 kali.Hitung hasil transformasi dan gambarkan hasil.
Penyelesaian :
Sx=2, Sy=0,5
Xa’=xa*Sx=10*2=20 ya’=ya*Sy=20*0,5=10
Xb’=xb*Sx=50*2=100 yb’=yb*Sy=20*0,5=10
Xc’ =xc*Sx=10*2=20 yc’=yc*Sy=100*0,5=50
Sehingga A’(20,10),B’(100,10),C’(20,50)
Gambar
100908070605040302010
10 20 30 40 50 60 70 80 90 100 110
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 42
asal
hasil
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
ContohSegitiga ABC diatas diputar 90o,hitung koordinat hasil dan gambarkan!
Segitiga A(10,20),B(50,20),dan C (10,100)
Penyelesaian
θ=90o
maka,
xa’=xa*cos 90-ya*sin 90=10*0-20*1=-20
ya’=xa*sin 90+ya*cos 90=10*1+20*0=10
xb’=xb*cos 90-yb*sin 90=50*0-20*1=-20
yb’=xb*sin 90+yb*cos 90=50*1+20*0=50
xc ’=xc *cos 90-yc*sin 90=10*0-100*1=-100
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 43
yc’=xc*sin 90+yc*cos 90=10*1+100*0=10
jadi
A’(-20,10),B’(-20,50),C’(-100,10)
Gambar
100
90
80
70
60
50
40
30
20
10
-100 -90 -80 -70 -60 -50 -40 -30 -20 -10 0 10 20 30 40 50
Gambar 5.5 Rotasi
5.5 Pencerminan (Refection)
Refleksi suatu titik (x, y) terhadap sumbu x akan menempatkan titik di (x’,
y’) dengan hubungan
x’ = x
y’= -y
5.6 Pembebanan (Shearing)
Shear terhadap sumbu y dengan faktor s akan menempatkan titik di
(x’,y’) dengan hubungan
x’ = x + y s
y’ = y
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 44
asalhasil
Latihan1. 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.7 Implementasi Transformasi
1. Translasi dan Skala
Rancang Form Sebagai Berikut
Kode Perintah dalam file Headerpublic: // User declarations int x1, y1, x2, y2; int Tx, Ty; float Sx, Sy; __fastcall TForm1(TComponent* Owner); Kode Perintah dalam File Unit//---------------------------------------------------------------------------
#include <vcl.h>#pragma hdrstop
#include "UtranSkal.h"//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner){}//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender){//PaintBox1->Canvas->Pen->Color = clWhite;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 45
//PaintBox1->Canvas->Brush->Color = clWhite;//PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);int Tx;Tx = StrToInt(EditTx->Text);Ty = StrToInt(EditTy->Text);x1 = x1 + Tx; y1 = y1 + Ty;x2 = x2 + Tx; y2 = y2 + Ty;PaintBox1->Canvas->Pen->Color = clRed;PaintBox1->Canvas->Brush->Color = clGreen;PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);
}//---------------------------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender){x1 = 10;x2 = 40;y1 = 10;y2 = 60;PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);}//---------------------------------------------------------------------------void __fastcall TForm1::ButtonSkalaClick(TObject *Sender){PaintBox1->Canvas->Pen->Color = clWhite;PaintBox1->Canvas->Brush->Color = clWhite;PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);Sx = StrToFloat(EditSx->Text);Sy = StrToFloat(EditSy->Text);x1 = int(x1 * Sx); y1=int(y1*Sy);x2 = int(x2*Sx); y2= int(y2*Sy);//PaintBox1->Canvas->Brush->Color = clYellow;PaintBox1->Canvas->Pen->Color = clBlack;PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);
}//---------------------------------------------------------------------------
void __fastcall TForm1::ButtonGambarClick(TObject *Sender){x1 = 10;x2 = 40;y1 = 10;y2 = 60;PaintBox1->Canvas->Pen->Color = clYellow;PaintBox1->Canvas->Brush->Color = clYellow;PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);PaintBox1->Canvas->Pen->Color = clRed;PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 46
PaintBox1->Canvas->Ellipse(x1, y1, x2, y2);}//---------------------------------------------------------------------------void __fastcall TForm1::ButtonKeluarClick(TObject *Sender){Close();}//---------------------------------------------------------------------------
Jika Apilkasi dijalankan
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 47
BAB 6. TRANSFORMASI 2D LANJUT
6.1 Transformasi Komposit dan Sistem Koordinat Homogen
Suatu transformasi adalah merupakan komposisi dari sejumlah
transformasi dasar. Misal rotasi dilakukan pada suatu titik rotasi (pivot point)
yang bukan origin maka transformasi ini dapat dilakukan dengan melakukan
translasi pivot point ke titik origin, lalu melakukan rotasi terhadao titik origin,
lalu hasilnya ditransalasikan kembali ke pivot point. Dalam bentuk
matematisnya itu komputasi transformasi komposit seperti itu memerlukan
komputasi-komputasi masing-masing transformasi dasar tersebut.
Agar dapat dibentuk reperesentasi yang lebih umum untuk digunakan
sistem koordinat komogen. Suatu titik (x, y) di dalam sistem koordinat
homogen ini menjadi suatu matrik kolom [xh yh h]T dengan
0//
≠==
hhyyhxx
h
h
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.
=
11''
333231
232221
131211
yx
mmmmmmmmm
yx
Matriks translasi ),( yx ttT adalah :
=
1001001
),( y
x
yx tt
ttT
Matriks rotasi )(αR adalah:
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 48
−=
1000cossin0sincos
)( αααα
αR
Matriks Skala
=
1000000
),( y
x
yx xs
ssS
Matriks refleksi terhadap sumbu x,Refx, dan matriks refleksi terhadap sumbu
y, Refy, adalah :
−=
100010001
Re xf
−=
100000001
Re yf
Dan, matriks shear terhadap sumbu y dengan faktor shy, shy(s) adalah :
=
10001001 s
Shx
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.
12... MMMM nkomposit =
Contoh transformasi yang merupkana rotasi dari titik ),( rr yx dengan sudut α .
Transformasi ini dapat dipandang sebagai sejumlah transformasi dasar:
Translasi dari ),( rr yx ke titik origin ),( rr yxT −−
Rotasi di titik origin dengan sudut )(αα R→
Translasi dari titik origin ke ),(),( rrrr yxTyx →
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 49
Gambar 6.1 Transformasi Gabungan
Matriks transformasinya adalah
),()(),( rrry yxTRyxTM −−= α
−−
−
=
1001001
1000cossin0sincos
1001001
r
r
r
r
yx
yx
αεαα
+−+−−
=
100cossincossinsincossincos
1001001
αααααααα
rr
rr
r
r
yxyx
yx
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
++−++−−
=100
cossincossinsincossincos
rrr
rrr
yyxxyx
αααααααα
Kemudian memperkalikan setiap titik tersebut dengan matriks ini. Dalam
representasi fungsi transformasi biasa maka setiap titik perlu diperklaikan ke
masing-masing fungsi transformasi dasdarnya secara tidak efisien.
Walaupun secara konseptual dalam sistem koordinat homogen perkalian
matriks dengan titik tersebut adalah perkalian matriks 3x3 dengan matrik 3x1,
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 50
sebagai berikut. Dalam pemrogramannya bisa diefisienkan dengan
menggantikannya dengan perkalian berikut ini.
131211' mymxmx ++=
2321221' mymxmy ++=
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 11. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt
2. Rotasi/Skala
3. Translasi (Xt, Yt)
Latihan Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut
sebesar 60o dengan titik pusat (3,2)
y
D C
2
1 A B
1 3 x
Jawab :
A = (1,1), B = (3,1), C = (3,2), D=(1,2)
Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek
harus ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan
titik pusat (0,0), setelah itu objek diputar sebesar 60o dan kemudian hasil
pemutaran ditranslasikan sebesar(3,2)
1. Translasi sebesar (-3,-2)
A = (1-3,1-2) = (-2, -1)
B = (3-3, 1-2) = (0, -1)
C = (3-3, 2-2) = (0, 0)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 51
D = (1-3, 2-2) =(-2, 0)
2. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan:
X’=x*cos θ -y*sin θ
Y’=x*sin θ + y*cos θ
Xa’ = (-2)*cos 60 –(-1) *sin 60 = 1* 0.5 – 1 * 0.866 = -0.134
Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232
Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660
Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500
Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000
Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000
Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000
Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732
3. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan
A”=(2.866, -0.232)
B”=(3.866, 1.500)
C”=(3.000, 2.000)
D”=(2.000, 0.268)
Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah
y
D C
2 C”
1 A B B”
D”
1 A” 3 x
B. Cara 2
1. Rotasi/Skala, Misal : A’
2. Hitung dx dan dy , dx = Xt-XA’
dy = Yt-YA’
3. Translasi ke dx, dy
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 52
Misal
Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut
sebesar 60o dengan titik pusat (3,2)
y
D C
2
1 A B
1 3 x
Jawab
Aplikasi
Kode program
Jam.h//---------------------------------------------------------------------------
#ifndef jam1H
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 53
#define jam1H//---------------------------------------------------------------------------#include <Classes.hpp>#include <Controls.hpp>#include <StdCtrls.hpp>#include <Forms.hpp>#include <ExtCtrls.hpp>//---------------------------------------------------------------------------class TForm1 : public TForm{__published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender);private: // User declarationspublic: // User declarations __fastcall TForm1(TComponent* Owner);float x1, x2, y1, y2, x,y;float xt1, xt2, yt1, yt2, sudut;float xs1, xs2, ys1, ys2, dx, dy ;float sudut_rad;};//---------------------------------------------------------------------------extern PACKAGE TForm1 *Form1;//---------------------------------------------------------------------------#endif
Jam.cpp//---------------------------------------------------------------------------#include <vcl.h>#include <math.h>#pragma hdrstop#include "jam1.h"//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner){}//---------------------------------------------------------------------------void __fastcall TForm1::PaintBox1Paint(TObject *Sender)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 54
{PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110);PaintBox1->Canvas->Ellipse(0,0,400,400);
PaintBox1->Canvas->MoveTo(200,0);PaintBox1->Canvas->Pen->Width = 3;PaintBox1->Canvas->LineTo(200,25);PaintBox1->Canvas->MoveTo(200,400);PaintBox1->Canvas->LineTo(200,375);PaintBox1->Canvas->MoveTo(0,200);PaintBox1->Canvas->LineTo(25,200);PaintBox1->Canvas->MoveTo(400,200);PaintBox1->Canvas->LineTo(375,200);
PaintBox1->Canvas->MoveTo(200,200);PaintBox1->Canvas->LineTo(200,70);PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);PaintBox1->Canvas->Ellipse(196,196,204,204);x1=200; y1=200; x2=200; y2=70;x=200; y =70;sudut = 0;}//---------------------------------------------------------------------------void __fastcall TForm1::Timer2Timer(TObject *Sender){PaintBox1->Canvas->Pen->Width = 4;PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110);PaintBox1->Canvas->MoveTo(x1,y1);PaintBox1->Canvas->LineTo(x2,y2);PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);PaintBox1->Canvas->Ellipse(196,196,204,204);sudut=-25;xs1=x1 *cos(sudut)-y1*sin(sudut);ys1=x1 *sin(sudut)+y1*cos(sudut);xs2=x2 *cos(sudut)-y2*sin(sudut);ys2=x2 *sin(sudut)+y2*cos(sudut);dx = x1-xs1;dy = y1-ys1;x1= xs1 + dx;y1= ys1 + dy;x2 =xs2 + dx;y2 = ys2 + dy;PaintBox1->Canvas->Pen->Width = 3;PaintBox1->Canvas->Pen->Color = RGB (0, 0,0);PaintBox1->Canvas->MoveTo(x1,y1);PaintBox1->Canvas->LineTo(x2,y2);PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);PaintBox1->Canvas->Ellipse(196,196,204,204);}
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 55
//---------------------------------------------------------------------------
Hasil
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 56
Bab 7.A N I M A S I
Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika
komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer
pada bagian tertentu di layar, menvisualisasi cara kerja suatu alat bantu atau
mekanisme tertentu, menampilkan keluaran program dengan gambar-gambar yang
menarik dibanding hanya sederet angka, serta tak ketinggalan pula untuk program-
program permainan.
Teknik Animasi
1. inbetweening
Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari.
Ide dasar dari teknik ini adalah dengan menentukan posisi awal dan posisi
akhir dari objek, dan kemudian menghitung posisi objek yang baru,
menghapus pada posisi semula dan menggambar objek pada posisi yang
baru, sampai objek berada pada posisi akhir yang dituju.
Contoh
Hiu
Rancangan
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 57
Hiu.H//---------------------------------------------------------------------------
#ifndef sharkH#define sharkH//---------------------------------------------------------------------------#include <Classes.hpp>#include <Controls.hpp>#include <StdCtrls.hpp>#include <Forms.hpp>#include <ExtCtrls.hpp>//---------------------------------------------------------------------------class TForm1 : public TForm{__published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer1Timer(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender);private: // User declarationspublic: // User declarations __fastcall TForm1(TComponent* Owner);int x1, y1, x2,y2,x3,y3;int xk1,yk1, xk2, yk2, xk3, yk3, xk4, yk4;int xl1, yl1, xl2, yl2, xl3, yl3;int xg1, yg1, xg2, yg2;POINT kapal[4];POINT layar[3];};//---------------------------------------------------------------------------extern PACKAGE TForm1 *Form1;//---------------------------------------------------------------------------#endif//---------------------------------------------------------------------------Hiu.Cpp#include <vcl.h>#pragma hdrstop
#include "shark.h"//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner){}//---------------------------------------------------------------------------
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 58
void __fastcall TForm1::PaintBox1Paint(TObject *Sender){PaintBox1->Canvas->Pen->Width=1;PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);PaintBox1->Canvas->Rectangle(0,0, 617,250);PaintBox1->Canvas->Brush->Color=RGB(20,65, 212);PaintBox1->Canvas->Rectangle(0,250, 617,473);xk1=70; yk1=250;xk2=120; yk2=250;xk3=140; yk3=220;xk4=50; yk4=220;
xg1=95; yg1=220;xg2=95; yg2=200;
PaintBox1->Canvas->MoveTo(70,250);
PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);
kapal[0] = Point(70,250);kapal[1] = Point(120,250);kapal[2] = Point(140,220);kapal[3] = Point(50,220);PaintBox1->Canvas->Polygon((TPoint*)kapal,3);PaintBox1->Canvas->MoveTo(95,220);PaintBox1->Canvas->LineTo(95,200);xl1=95;yl1=200;xl2=140; yl2=200;xl3=95; yl3=100;
layar[0] = Point(xl1,yl1);layar[1] = Point(xl2,yl2);layar[2] = Point(xl3,yl3);PaintBox1->Canvas->Polygon((TPoint*)layar,2);PaintBox1->Canvas->MoveTo(617,200);PaintBox1->Canvas->Brush->Color=RGB(172,146, 25);
POINT titik[5];titik[0] = Point(617,200);titik[1] = Point(250,250);titik[2] = Point(500,275);titik[3] = Point(617,300);titik[4] = Point(617,200);PaintBox1->Canvas->Polygon((TPoint*)titik,4);PaintBox1->Canvas->Pen->Color=RGB(126,39, 22);PaintBox1->Canvas->Pen->Width=5;PaintBox1->Canvas->MoveTo(540,260);PaintBox1->Canvas->LineTo(520,150);PaintBox1->Canvas->Pen->Color=RGB(22,126, 88);PaintBox1->Canvas->LineTo(560,150);PaintBox1->Canvas->MoveTo(520,150);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 59
PaintBox1->Canvas->LineTo(545,120);PaintBox1->Canvas->MoveTo(520,150);PaintBox1->Canvas->LineTo(520,120);PaintBox1->Canvas->MoveTo(520,150);PaintBox1->Canvas->LineTo(500,110);PaintBox1->Canvas->MoveTo(520,120);PaintBox1->Canvas->LineTo(530,100);PaintBox1->Canvas->MoveTo(520,150);PaintBox1->Canvas->LineTo(480,110);PaintBox1->Canvas->MoveTo(520,150);PaintBox1->Canvas->LineTo(480,150);PaintBox1->Canvas->MoveTo(520,150);PaintBox1->Canvas->LineTo(490,130);
PaintBox1->Canvas->Pen->Width=1;
x1=20; y1= 400;x2=10; y2= 440;x3=40; y3= 440;PaintBox1->Canvas->MoveTo(x1, y1);PaintBox1->Canvas->Pen->Color=RGB(119,131, 127);PaintBox1->Canvas->Brush->Color=RGB(119,131, 127);POINT titikhiu[4];titikhiu[0] = Point(x1,y1);titikhiu[1] = Point(x2,y2);titikhiu[2] = Point(x3,y3);titikhiu[3] = Point(x1,y1);PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3);}//---------------------------------------------------------------------------void __fastcall TForm1::Timer1Timer(TObject *Sender){PaintBox1->Canvas->Pen->Width = 2;PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);PaintBox1->Canvas->MoveTo(0,250);PaintBox1->Canvas->LineTo(250,250);PaintBox1->Canvas->Pen->Width = 1;PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); //warna latar (laut/biru tua)PaintBox1->Canvas->Pen->Color=RGB(20,65, 212); //warna latar (laut/biru tua)POINT titikhiu[2];titikhiu[0] = Point(x1,y1);titikhiu[1] = Point(x2,y2);titikhiu[2] = Point(x3,y3);PaintBox1->Canvas->Polygon((TPoint*)titikhiu,2);x1=x1+7; y1= 400;x2=x2+7; y2= 440;x3=x3+7; y3= 440;PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); //warna hiuPaintBox1->Canvas->Brush->Color=RGB(119,131, 127); //warna hiutitikhiu[0] = Point(x1,y1);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 60
titikhiu[1] = Point(x2,y2);titikhiu[2] = Point(x3,y3);titikhiu[3] = Point(x1,y1);PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3); if (x2 > 617) Close();
}//---------------------------------------------------------------------------
void __fastcall TForm1::Timer2Timer(TObject *Sender){PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);PaintBox1->Canvas->Pen->Color=RGB(172,243, 246);
PaintBox1->Canvas->MoveTo(70,250);PaintBox1->Canvas->Brush->Color=RGB(172,243, 246);POINT kapal[4];kapal[0] = Point(xk1,yk1);kapal[1] = Point(xk2,yk2);kapal[2] = Point(xk3,yk3);kapal[3] = Point(xk4,yk4);PaintBox1->Canvas->Polygon((TPoint*)kapal,3);PaintBox1->Canvas->MoveTo(xg1,yg1);PaintBox1->Canvas->LineTo(xg2,yg2);
layar[0] = Point(xl1,yl1);layar[1] = Point(xl2,yl2);layar[2] = Point(xl3,yl3);PaintBox1->Canvas->Polygon((TPoint*)layar,2);xk1=xk1+2; yk1=250;xk2=xk2+2; yk2=250;xk3=xk3+2; yk3=220;xk4=xk4+2; yk4=220;xg1=xg1+2; yg1=220;xg2=xg2+2; yg2=200;xl1=xl1+2;yl1=200;xl2=xl2+2; yl2=200;xl3=xl3+2; yl3=100;PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);
PaintBox1->Canvas->MoveTo(xk1,yk1);PaintBox1->Canvas->Brush->Color=RGB(220,129, 178);
kapal[0] = Point(xk1,yk1);kapal[1] = Point(xk2,yk2);kapal[2] = Point(xk3,yk3);kapal[3] = Point(xk4,yk4);PaintBox1->Canvas->Polygon((TPoint*)kapal,3);PaintBox1->Canvas->MoveTo(xg1,yg1);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 61
PaintBox1->Canvas->LineTo(xg2,yg2);POINT layar[3];layar[0] = Point(xl1,yl1);layar[1] = Point(xl2,yl2);layar[2] = Point(xl3,yl3);PaintBox1->Canvas->Polygon((TPoint*)layar,2);
PaintBox1->Canvas->Pen->Width = 2;PaintBox1->Canvas->Pen->Color=RGB(0,0, 0);PaintBox1->Canvas->MoveTo(0,250);PaintBox1->Canvas->LineTo(250,250);
if (xk2 > 250) Timer2->Enabled = false;
}//---------------------------------------------------------------------------
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 62
BAB 8.GRAFIKA 3D
8.1 Pendahuluan Salah satu bentuk perkembangan terakhir penerapan komputer dalam
bidang grafika adalah pada aplikasi simulasi obyek tiga dimensi atau lebih
dikenal dengan sebutan kenyataan semu (virtual reality-VR). Aplikasi ini
dijumpai pada berbagai bidang dari yang sifatnya hiburan, rancang-bangun,
sampai pada simulasi untuk keperluan riset ilmiah.
Untuk mendukung adanya VR selain diperlukan suatu metode untuk
memvisualisasikan obyek 3 dimensi pada layar 2 dimensi juga didukung
perangkat keras berupa monitor yang langsung dipakai seperti memakai
kacamata dan sensor-sensor yang dipakai oleh pemakai.
Pada implementasi yang lebih sederhana dapat digunakan komputer yang
dipakai sehari-hari dengan layar monitor sebagai media penampil dan
berbagai alat input yang umum dipakai misalnya keyboard, mouse, joystick,
dan lain sebagainya.
Untuk menampilkan efek 3 dimensi pada layar 2 dimensi dengan
animasinya dapat digunakan metode analogi kamera sintetis. Dengan
metode ini suatu obyek nyata dapat dipandang dari kamera dari berbagai
jarak dan sudut pandang. Dengan mengubah jarak, sudut, dan arah
pandang akan didapatkan efek gambar dan animasi 3 dimensi di layar
kamera dari suatu obyek.
Pada implementasinya, agar didapatkan kinerja yang optimum, setiap
bagian dari obyek dibagi menjadi poligon-poligon, sehingga titik-titik yang
diproses merupakan titik acuannya saja dan setiap titik dibentuk poligon dan
diberi warna dengan kecerahan sesuai dengan posisi terhadap sumber
cahaya sintetis. Dengan demikian kualitas gambar semakin baik bila
kerapatan poligon persatuan luas semamin tinggi dengan konsekwensi beban
memori menjadi lebih tinggi dan kecepatan proses rendah, sehingga animasi
lebih kasar.
Visualisasi obyek 3 dimensi dengan komputer ini memungkinkan suatu
obyek 3 dimensi dapat dimanipulasi dan hasilnya dapat langsung terlihat
secara visual. Selain itu suatu obyek juga dapat dilihat dari berbagai jarak
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 63
dan sudut pandang serta dapat dilihat pula dalam bentuk kerangka (wire
frame) maupun solid dengan demikian apa yang terlihat lebih mendekati
pada obyek yang sesungguhnya.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 64
Bab 9.Transformasi pada obyek tiga dimensi Pada obyek tiga dimensi dapat dilakukan 3 transformasi pokok yaitu
penggeseran (translation), perputaran (rotasi) , pembesaran (scaling).
Adapun jenis transformasi lain adalah pembebanan (shearing), dan
pencerminan (mirroring). Didalam program, transformasi ini juga dapat
dilakukan dengan mengubah persamaan menjadi operasi matriks 4x4.
Adapun persamaan setiap transformasi adalah sebagai berikut.
1. Penggeseran (translation)
( x’, y’,z’ ) = ( Tx +x, Ty +y, Tz +z)
dengan x’,y’, z’ : koordinat hasil transformasi
x,y,z : koordinat titik awal
Tx,Ty, Tz : faktor penggeseran kearah x, y, z
2. Pembesaran (scaling)
( x’,y’,z’ ) = (Sx *x, Sy *y, Sz *z)
dengan Sx,Sy, Sz : faktor pembesaran kearah x, y, z
3. Perputaran (rotation)
a) terhadap sumbu x
( x’,y’, z’ ) = (x , y *cos θ +z*sinθ, - y *sinθ+z*consθ)
b) terhadap sumbu y
( x’,y’,z’ ) = ( x *cos θ +z*sinθ,y , - x *sinθ+z*consθ)
c) terhadap sumbu z
(x’,y’, z’ ) = ( x *cos θ +y*sinθ, - x*sinθ+y*consθ , z )
dengan θ : sudut putar berlawanan arah jarum jam
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 65
Bab 10.Teknik penampilan obyek 3 dimensi Pada sistem dua dimensi obyek gambar dua dimensi dapat langsung di
aplikasikan pada layar karena memiliki dimensi yang sama, kalaupun ada
perbedaan hanya pada arah sumbunya. Koordinat Cartesian memiliki sumbu
y arah ke atas, sedangkan koordinat layar sumbu y ke arah bawah. Akan
tetapi dengan sedikit modifikasi atau menggunakan fungsi bahasa
pemrograman tertentu misalnya Borland C++ 4.0 keatas dengan fungsi
terpasang, koordinat layar dapat disesuaikan dengan kordinat kartesian
dengan sumbu y ke arah atas.
Pada sistem tiga dimensi setiap titik memiliki 3 koordinat yaitu koordinat
x, y, dan z, sedangkan layar hanya memiliki sumbu x dan y. Oleh karena itu
diperlukan transformasi dari koordinat tiga dimensi atau disebut dengan
koordinat dunia menjadi koordinat dua dimensi.
Beberapa metode untuk menampilkan efek tiga dimensi pada layar dua
dimensi selain metode kamera sintetis yaitu proyeksi paralel, dan proyeksi
perspektif.
a. Proyeksi paralel
Proyeksi paralel merupakan teknik dasar untuk penyajian obyek tiga
dimensi pada layar dua dimensi, yang bertumpu pada 3 sudut pandang.
Pandangan depan, pandangan samping dan pandangan atas. Contoh
proyeksi paralel seperti pada gambar 1.
Untuk menggambarkan proyeksi paralel dalam tiga dimensi
diperlukan beberapa sudut pandang minimal atas, samping dan depan
kemudian di proyeksikan dalam koordinat tiga dimensi sehingga seperti
terlihat pada gambar 1.b.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 66
x
y
z
y
x
y
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
a. Gambar kotak 3 dimensi b. Proyeksi pada bidang xy
Gambar 2. Proyeksi perspektif
Proyeksi perspektif adalah bentuk gambar tiga dimensi seperti
yang dilihat pada kenyataan sesungguhnya seperti yang terlihat oleh
mata manusia ataupun kamera. Teknik ini lebih menggambarkan
keadaan yang sesungguhnya tetapi untuk obyek dalam bentuk gambar
rangka (wire frame) untuk kedalaman tertentu dapat menimbulkan
dualisme gambar. Misalnya bagian yang terkesan didalam kadang-kadang
juga terkesan di luar.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 67
x x
yy
z z
x
y
x
z
c. Kamera sintetis
Metode pendekatan yang telah dibahas dengan teknik proyeksi
diatas masih belum mampu menghasilkan efek 3 dimensi dengan baik.
Pada proyeksi paralel yang terlihat oleh pengamat hanyalah bagian depan
obyek sedang bagian yang lebih jauh untuk posisi x, dan y yang sama tak
terlihat.
Sedangkan pada proyeksi perspektif mata harus terletak pada
sumbu koordinat z, yang berarti bidang pandang harus berimpit dengan
bidang koordinat, misalnya xy. Dengan ketentuan ini maka penyajian
obyek tiga dimensi menjadi terbatas.
Untuk mengatasi hal tersebut sebelum diproyeksikan diperlukan
proses transformasi rotasi sehingga suatu obyek dapat dipandang dari
berbagai posisi, atas, bawah, samping dan lain sebagainya.
Terdapat dua cara yang identik untuk memandang suatu obyek dari
berbagai sisi yakni bidang pandang (view plane) pada posisi tetap, obyek
diputar atau bidang pandang berputar sedangkan obyek tetap.
Bila digunakan cara kedua dengan bidang pandang dianggap
sebagai film dalam kamera, maka suatu obyek dapat di pandang dari
berbagai sisi dengan menggerakkan dan memutar kamera. Metode ini
sering disebut dengan metode kamera sitetis (synthetic camera) seperti
pada gambar 3. Metode ini secar alengkap akan dibahas pada bab-bab
berikutnya
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 68
Bab 11.Metode kamera sintetisPrinsip 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 .
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.1Tahapan Transformasi pada Metode Kamera Sintetis
Langkah-langkah transformasi dari koordinat dunia menjadi koordinat
bidang pandang adalah sebagai berikut :
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 69
N
VUP-arah atas
v
u•
VPN
xx
z
yy
bidang pandang
Titik acuanpandang (VRP)
Jarak pandang
1. Translasikan setiap titik pada koordinat dunia sejauh jarak pandang
(view distance) yaitu jarak antara bidang pandang dengan titik
pandang (view refernce point).
2. Lakukan rotasi sedemikian sehingga sumbu z sama dengan vektor
normal bidang pandang (view plane normal-VPN) atau sumbu n,
sumbu y sama dengan sumbu v , dan sumbu x sama dengan sumbu
u.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 70
xw
zw
yw
V U N
xw
yw
V U N
zw
3. Menentukan vektor “arah atas “ (view-up direction) dari bidang
pandang, dan putar obyek sejauh sudut arah-atas dengan sumbu
vertikal. Arah-atas adalah arah dari sumbu u dari bidang pandang.
4. Lakukan proyeksi paralel atau proyeksi perspektif dari obyek yang
sudah dalam koordinat bidang pandang dan masing-masing titik
memiliki koordinat uvn ke dalam bidang proyeksi uv. Pada proyeksi
paralel, bagian yang jauh dari pengamat ukurannya sama dengan bila
bagian tersebut dekat dengan pengamat, sehingga kesan tiga dimensi
pada layar belum nampak nyata, oleh karena itu untuk membuat kesan
tiga dimensi agar lebih nyata dapat digunakan proyeksi perspektif.
Proyeksi perspektif memiliki minimal satu titik lenyap (vanishing point),
sehingga bagian suatu obyek yang jeuh dari pengamat ukurannya
semakin mengecil. Hal ini sesuai dengan pandangan pada dunia nyata.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 71
xw
zw
yw
V U
N
xw
zw
yw
V U
N
xw
zw
yw
V
U
N
5. Pemotongan (clipping) bagian-bagian yang akan dimunculkan pada
jendela bidang pandang untuk mengalokasikan bagian-bagian dari
obyek yang akan diproses dan tidak.
6. Menghapus bagian-bagian yang tersembunyi sehingga hanya bagian
permukaan yang nampak oleh pengamat saja yang di tampilkan.
7. Menentukan vektor normal tiap poligon yang membentuk bidang
tersebut untuk menetukan intensitas cahaya yang jatuh pada setiap
poligon tersebut
8. Penggambaran obyek dengan warna tiap poligon disesuaikan dengan
intensitas cahaya.
Langkah nomor 1 sampai dengan langkah nomor 5 diatas akan
menghasilkan simulasi tiga dimensi pada layar, akan tetapi hasil yang
nampak masih sulit mengidentifikasi bagian-bagian yang seharusnya
nampak dan tersembunyi, bagian yang jauh dan yang dekat.
Untuk menyempurnakan proses diatas agar efek tiga dimensi
semakin mendekati nyata dilakukan langkah dari nomor 6 dan seterusnya
dengan konsep seperti yang dijabarkan dibawah ini.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 72
BAB 12.PERMUKAAN TERSEMBUNYI (HIDDEN SURFACE)
Salah satu cara untuk menentukan bagian tersembunyi yang dibahas
disini adalah dengan algoritma pelukis (painter’s algorithm) disamping cara
lain misalnya back-face removal, z buffers, dan lain-lain. Cara ini relatif
sederhana, didasarkan pada cara seorang pelukis menggambar suatu obyek
di kanvas. Obyek atau bidang yang terletak lebih jauh di lukis dahulu,
kemudian digambar obyek atau bidang yang lebih dekat dan seterusnya.
Dengan demikian pada lukisan tersebut sebetulnya terjadi
penumpukan berbagai obyek yang memiliki letak sama. Bagian obyek yang
nampak oleh pengamat adalah bagian yang paling dekat dengan pengamat.
Penerapan metode ini pada grafika tiga dimensi digunakan untuk
menunjukkan bagian yang nampak oleh pengamat. Semua poligon yang
membetuk suatu obyek dihitung rata-rata nilai koordinat z-nya. Setelah itu
diurutkan dengan urut naik. Poligon yang memiliki nilai z terkecil di gambar
dulu dan seterusnya sampai pada poligon dengan nilai z rata-rata terbesar.
Gambar 4. Ilustrasi algoritma pelukis
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 73
y
zx
A
B
x
Berdasarkan gambar 4 tersebut bila pengamat terletak pada sumbu z,
maka obyek A yang terletak lebih jauh terhadap obyek B digambar lebih
dulu. Obyek A ini sendiri terdiri atas 6 poligon. Maka poligon yang paling jauh
dari pengamat digambar lebih dahulu begitu seterusnya sehingga hasil dapat
terlihat seperti pada gambar tersebut.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 74
Bab 13.Rendering pada obyek 3 dimensi
Suatu obyek nyata dapat terlihat oleh mata bila obyek tersebut
terkena oleh cahaya dan memantulkan kembali cahaya tersebut ke mata
pengamat. Pada kenyataannya warna yang terlihat pada masing-masing
bagian obyek tersebut oleh mata pengamat tidaklah sama walaupun obyek
atau benda tersebut di cat dengan warna yang sama. Bagian yang
permukaannya tegak lurus dengan cahaya akan memiliki warna yang lebih
terang dibanding bagian lainnya.
Kecerahan warna pada permukaan suatu obyek ditentukan oleh
karakteristik sumber cahaya, karaketeristik permukaan, dan posisi relatif
sumber cahaya terhadap permukaan yang ditinjau seperti ilustrasi gambar 5.
Untuk menentukan intensitas cahaya yang mengenai suatu titik pada
permukaan diperlukan parameter intensitas cahaya (Is), reflektifitas
permukaan (kd), vektor normal (n), dan sudut θ yakni sudut antara vektor
normal dan arah cahaya (i).
Berdasarkan hukum Lambert intensitas cahaya yang sampai pada
suatu titik adalah
I = Is kd cos θ
Cosinus pada sudut θ dapat di wakili dengan dot product dari satuan
vektor n dan i, sehingga persamaan diatas menjadi
I = Is kd (n.i)
Bila terdapat beberapa sumber cahaya yang berpengaruh pada titik
tersebut maka persamaan menjadi
I = Ia + ∑ Ij kd cos θ = Ia + ∑ Ij kd (ij.n)
Dengan Ia kontribusi cahaya dari sekeliling sumber cahaya, dan Ij
adalah intensitas masing-masing sumber cahaya. Intensitas terbesar akan
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 75
terjadi pada titik permukaan yang memiliki sudut vektor i dan vektor n , yaitu
sudut θ bernilai 0 derajat. Pada kondisi ini intensitas cahaya yang jatuh pada
titik tersebut memiliki nilai terbesar. Bila intensitas bernilai negatif maka
bidang atau titik tersebut merupakan titik tersembunyi atau dibalik permukaan
yang tekena cahaya.
Gambar 5. Menentukan intensitas cahaya pada permukaan
Untuk mendapatkan vektor i dapat digunakan persamaan
i = (ai + bj + ck)/sqrt(a2+b2+c2) satuan vektor
dengan a, b, c adalah arah sumber cahaya dari titik yang ditinjau
intensitasnya.
Suatu bidang yang akan ditinjau intensitasnya dapat diwakili oleh tiga titik
pokok misalnya titik A, B, dan C, maka vektor normalnya berupakan cross
product adalah vektor AB dan AC sehingga
n = (AB X AC)/||ABX AC||
Setiap titik pada suatu bidang poligon dapat dihitung nilai rata-rata n
sehingga
nrerata = (∑ ni) / |(∑ ni)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 76
i
i
n
θ
Gambar 1. Arsiran akibat pengaruh cahaya.
Gambar @ memperlihatkan pengaruh cahaya terhadap warna dan arsiran
suatu bagian dengan cahaya berasal dari arah kiri atas.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 77
Bab 14.Pewarnaan
Pewarnaan pada grafika komputer merupakan unsur penting sebagai
upaya untuk menampilkan citra yang mendekati dengan bentuk dan warna
suatu obyek nyata.
Beberapa model pewarnaan yang dikenal yaitu model RGB, model
CMY, dan model HSV. Model RGB menggunakan warna dasar merah (red),
hijau(green), dan biru(blue) , sedangkan model CMY menggunakan warna
cyan, magenta, dan yellow sebagai warna dasar, dan model HSV berbasis
pada hue, saturation, dan value.
Warna-warna lain dapat dibuat merupakan kombinasi dari ketiga warna
tersebut dengan masing-masing intensitas warna dasar yang berbeda. Model
RGB dapat digambarkan dalam ruangan kotak 3 dimensi seperti gambar 6.
Gambar 6. Representasi warna model RGB
dengan koordinat black(0,0,0), white( 1,1,1), red( 0,0,1), green( 1,0,0), yellow(
1,0,1), magenta( 0,1,1), cyan(1,1,0), dan blue(0,1,0).
Berdasarkan model diatas maka suatu warna arsiran akan semakin terang
dengan menambah unsur putih pada setiap warna yang diproses, begitu juga
sebaliknya.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 78
Bila diaplikasikan pada setiap poligon yang membentuk suatu obyek,
maka tingkat kecerahan setiap poligon di sesuaikan dengan intensitas
cahaya pada jatuh pada poligon tersebut.
Bagan pada gambar 7 menunjukkan garis-pipa (pipeline) proses
keseluruhan untuk menampilkan obyek tiga dimensi di layar .
Gambar 7. Garis pipa (pipelaine) proses penampilan tiga dimensi
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 79
Deskripsi obyek tiga dimensi awal
Pemodelan transformasi
Transformasi ke bidang pandang
Operasi pemotongan, hapus bag. tersembunyi,
diarrsir
Pemodelan koordinat
Koordinat dunia
Koordinat pandang
Normalisasi koordinat
proyeksi
Proyeksi perspektif dan Tranformasi ke koordinat
Koordinat layar
x
y
z
u
v
n
u
v
nz
u
v
n
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.
Gambar 8. Pembagian poligon dan parameternya
Koordinat sudut tersebut merupakan koordinat layar hasil transformasi
dari koordinat dunia, sedangkan kecerahan warna tiap poligon sudah
diperhitungkan posisi, dan arah vektor normal poligon terhadap letak sumber
cahaya.
Seperti pada contoh warna meja diatas, warna obyek adalah abu-abu.
Akibat pengaruh cahaya yang terletak pada sisi kiri atas dari meja maka
warna pada bidang bagian atas dengan sudut normal paling kecil adalah
abu-abu syrah, dan seterusnya sehingga bagian meja yang memiliki sudut
vektor paling besar terhadap sumber cahaya memiliki warna abu-abu gel.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 80
X4,y4,z4
X2,y2,z2X1,y1,z1
X3,y3,z3
Warna
poligon
Ψ sumber cahaya
Vektor tegak lurus bidang poligon
Bab 16.Algoritma dan Implementasi Grafis 3D
16.1Visualisasi 3D-Statis
Grafis 3D statis adalah tampilan dengan efek 3D tetapi tidak dapat
dimanipulasi pengguna misal obyek dilihat dari sisi yang berbeda ataupun
obyek yg dilihat berbeda. Hal ini terjadi karena nilai posisi kamera kx,ky,kz
maupun titik fokus (view reference point-VRP) vrp_x,vrp_y,vrp_z dibuat
konstanta.
Pada algoritma ini untuk mengubah posisi kamera maupun
mengubah titik fokus harus mengubah nilai dari konstanta pada variabel
tersebut.
1. Deklarasikan obyek dalam koordinat dunia
Misal obyek berbentuk balok, maka tiap titik sudut harus dideklaraiskan kooridinat dunianya (bisa dengan satuan yang riil misal meter, kilometer dlsb.)
Contoh deklarasi balok sebagai berikut.
Sturtur data:Baris Program : 2-12
Struct {Int x; koordinat x
Int y; kooridnat y
Int z; kooridnat z
}s[20]; titik pokok/sudut ke
deklarasi/deskripsi/penjelasan posisi titik pokok obyek balok:
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 81
s[1].x=0;s[1].y=0;s[1].z=250;//titik ke-1, koordinat x=0,y=0,z=250
s[2].x=250;s[2].y=0;s[2].z=250;
s[3].x=250;s[3].y=250;s[3].z=250;
s[4].x=0;s[4].y=250;s[4].z=250;
s[5].x=0;s[5].y=0;s[5].z=0;
s[6].x=250;s[6].y=0;s[6].z=0;
s[7].x=250;s[7].y=250;s[7].z=0;
s[8].x=0;s[8].y=150;s[8].z=0;
deklarasi tsb untuk menggambarkan bentuk balok sebagai berikut.
S[1].x menunjukkan koordinat x titik sudut 1 S[1].y menunjukkan koordinat y titik sudut 1 S[1].z menunjukkan koordinat z titik sudut 1
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 82
x
z
y
1 2
34
5 6
78
S[2].x menunjukkan koordinat x titik sudut 2, dan seterusnya.
2. Tentukan letak kamera (View Plane Normal-VPN) Baris Program : 17-19Misal :Kx=10;Ky=300;Kz=400; Artinya posisi kamera di koordinat x=10, y=100,z=100
Posisi kamera ini dpaat diatur dengan menggunakan tombol atau
alat input lain
3. Tentukan fokus kamera(VRP-View Refference Point)Baris Program : 27-29Misal :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 prespsktifBaris Program : 33-35
5. Deklarisikan matriks yang diperlukan
Matrks tranlasi obyek sejauh titik fikus dengan posisi kamera
Matriks rotasi, pada ke-3 sumbu (x,y,z)
Matriks proyeksi perpektifBaris Program : 41-76
6. Lakukan operasi perkalian matrixBaris Program : 77-105
7. Transformasikan koord obyek dalam koordinat dunia ke VPN
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 83
Baris Program : 107-111
8. Proyeksi perpektif ke bidang u-vBaris Program : 112-117
9. Membuat nilai 1 pada matriks ordo ke 3Baris Program : 119-122
10.Transformasi koordinat caertesian ke koordinat layar, karena deskripsi
obyek menggunakan koordinat cartesian, sementara penampil koordinat
layarBaris Program : 126-130
11.Penggambaran obyek ke layarBaris Program : 136-184
16.2 Langkah untuk menghasilkan grafis 3D statis model
rangka adalah sebagai berikut.1. Buka C++ Builder
2. Buka Form baru
3. Buat jendela tampilan dengan komponen
PaintBox,Name:PaintBox1 (default)
4. tulis kode dibawah (Bold) pada Event->OnPaint
void __fastcall TForm1::PaintBox1Paint(TObject *Sender){//menentukan tiitk-titik pokok koorrdinat obyek baloks[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 sudutint jumlah_obyek=1;int max_titik=8;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 84
//------------------posisi kamerafloat kx=0;float ky=50;float kz=350;//----------------------------------//menenutkan jarak kamera dengan fokurfloat 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 lurusfloat dxup=0;float dyup=1;float dzup=0;
//titik pusat proyeksifloat xc=0 ;float yc=0 ;float zc=-100;//mennetukan batas bawahint batasbawah=PaintBox1->ClientHeight;//deklarasi matriks proyeksi perpektiffloat 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 zfloat v1=sqrt(dyn*dyn+dzn*dzn);// rotasi sumbu xfloat Rx[4][4]=
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 85
{{1,0,0,0},{0,-dzn/v1,-dyn/v1,0},{0,dyn/v1,-dzn/v1,0},{0,0,0,1}};// rorasu sumbu y;
float Ry[4][4]={{v1,0,-dxn,0},{0,1,0,0},{dxn,0,v1,0},{0,0,0,1}};
// mengalikan matriks Rx * Ry
for (int i=0;i<=3;i++){for (int k=0;k<=3;k++)Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+ Rx[i][3] * Ry[3][k];}
xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);
float Rz[4][4]={{yup_vp/rup,xup_vp/rup,0,0},{-xup_vp/rup,yup_vp/rup,0,0},{0,0,1,0},{0,0,0,1}};
// perklaian matriks dxy * dzfor (int i=0;i<=3;i++){for (int k=0;k<=3;k++)Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+ Rxy[i][3] * Rz[3][k];}
// perkalian matriks T dan Rxyzfor (int i=0;i<=3;i++){for (int k=0;k<=3;k++)TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 86
}//Trxyz : matrik gabungan rotasi ke 3 sumbu dan ttranlasi/matrik transformasi koordina dunia ke koordinat bidang padang// transfoemasi titik obyek ke VPN
for (int i=1;i<=8;i++) // loop poligon{for (int k=0;k<=3;k++) // loop titikvpn_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 perpeksiffor (int i=1;i<=8;i++){for (int k=0;k<=3;k++)vpn_pers[i][k]=vpn_k[i][0] * perspek[0][k] + vpn_k[i][1] * perspek[1][k] + vpn_k[i][2]*perspek[2][k]+ vpn_k[i][3] * perspek[3][k];}
//membuat niali 1 pada matrix padaordo ke-4for (int i=1;i<=max_titik;i++){for (int k=0;k<=3;k++)vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3];}
int tengah=PaintBox1->ClientWidth/2;// trabsformasi ke koordinat layarfor (int i=1;i<=max_titik;i++){vpn_pers[i][0]=vpn_pers[i][0]+tengah;vpn_pers[i][1]=batasbawah-vpn_pers[i][1]-50;}
//mmebuat jendela paint box dengan warna dasa putihPaintBox1->Canvas->Brush->Color=clWhite;PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);//nggambar polyline//poligon 1POINT t1[4]; //deklarasi variabelt1[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);t1[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);t1[2]=Point(vpn_pers[3][0],vpn_pers[3][1]);t1[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);t1[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);PaintBox1->Canvas->Polyline((TPoint*)t1,4);
//poligon 2 belakangPOINT t2[4]; //deklarasi variabel
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 87
t2[0]=Point(vpn_pers[5][0],vpn_pers[5][1]);t2[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);t2[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);t2[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);t2[4]=Point(vpn_pers[5][0],vpn_pers[5][1]);PaintBox1->Canvas->Polyline((TPoint*)t2,4);
//poligon 3 bawahPOINT t3[4]; //deklarasi variabelt3[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);t3[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);t3[2]=Point(vpn_pers[6][0],vpn_pers[6][1]);t3[3]=Point(vpn_pers[5][0],vpn_pers[5][1]);t3[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);PaintBox1->Canvas->Polyline((TPoint*)t3,4);
//poligon 4 atasPOINT t4[4]; //deklarasi variabelt4[0]=Point(vpn_pers[4][0],vpn_pers[4][1]);t4[1]=Point(vpn_pers[3][0],vpn_pers[3][1]);t4[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);t4[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);t4[4]=Point(vpn_pers[4][0],vpn_pers[4][1]);PaintBox1->Canvas->Polyline((TPoint*)t4,4);
//poligon 5 kananPOINT t5[4]; //deklarasi variabelt5[0]=Point(vpn_pers[2][0],vpn_pers[2][1]);t5[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);t5[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);t5[3]=Point(vpn_pers[3][0],vpn_pers[3][1]);t5[4]=Point(vpn_pers[2][0],vpn_pers[2][1]);PaintBox1->Canvas->Polyline((TPoint*)t5,4);
//poligon 6 kiriPOINT t6[4]; //deklarasi variabelt6[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);t6[1]=Point(vpn_pers[5][0],vpn_pers[5][1]);t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t6,4);\
5. Tambahkah kode pada file header (.h) sbb
(yg dicetak Bold ¸cetak regular bawaan C++)
//---------------------------------------------------------------------------#ifndef rangkaH
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 88
#define rangkaH//---------------------------------------------------------------------------#include <Classes.hpp>#include <Controls.hpp>#include <StdCtrls.hpp>#include <Forms.hpp>#include <ExtCtrls.hpp>//---------------------------------------------------------------------------class TForm1 : public TForm{__published: // IDE-managed Components TPaintBox *PaintBox1; void __fastcall PaintBox1Paint(TObject *Sender);private: // User declarationspublic: // User declarations __fastcall TForm1(TComponent* Owner);float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4];float vpn_p[8][4],TRxyz[4][4],vpn_k[8][5];float vpn_pers[8][4];struct titik{ int x; int y; int z; }s[50];
};//---------------------------------------------------------------------extern PACKAGE TForm1 *Form1;//---------------------------------------------------------------------#endif
tambahkan kode pada file .cpp bagian atas (yg dicetak Bold ¸cetak regular bawaan C++)
//---------------------------------------------------------------------------#include <vcl.h>#include <math.h>#pragma hdrstop#include "rangka.h"//-------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//--------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner)
6. jalankan program diatas
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 89
16.3Grafis 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:BitBtn1 2:BitBtn2 3:BitBtn3 4:BitBtn4
2. Tambahkan kode pada tombol BitBtn untuk membuat menggeser
posisi kamera dengan counter sbb
BitBtn1->Click:kamera_y=kamera_y+20;gambar(kamera_x,kamera_y);
BitBtn2->Click:
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 90
11
2
3
4Paint Box
kamera_x=kamera_x-20;gambar(kamera_x,kamera_y);
BitBtn3>Click:kamera_y=kamera_y-20.0;gambar(kamera_x,kamera_y);
BitBtn4->Click:kamera_x=kamera_x+20;gambar(kamera_x,kamera_y);
catatan :
Angka 20 pada counter menunjukkan posisi penggeseran setiap
tombol diklik yang dapat diatur sesuai kebutuhan. Bila
diinginkan pengeseran terasa halus/tahapan pelan maka nilai
diperkecil dan sebaliknya
3. Pindahkan bagian program awal ini (untuk deskripsi obyek dan
penentuan posisi kamera) ke Form1->Activated, sbb
void __fastcall TForm1::FormActivate(TObject *Sender){//deskripsi koordinat dunia dari obyeks[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 kamerakamera_x=50.0;kamera_y=50.0;
/* 8-----------7 ! ! 4-----------3 !
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 91
! 5--!-------6 1---------- 2*/}//---------------------------------------------------------------------------
4. Buatlah fungsi Gambar() pada editor, dan pindahkan kode yang ada
pada PaintBox1 ->Paint ke fungsi gambar() seperti dibawah ini
void _fastcall TForm1::gambar(float kamx,float kamy){//menetukan jujlkah obyek dan jumlkah titik sudutPaintBox1->Canvas->Brush->Color=clWhite;PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);int jumlah_obyek=1;int max_titik=8;
//------------------posisi kamerafloat kx=kamx;float ky=kamy;float kz=800;
//----------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz);float dxn=kx/d;float dyn=ky/d;………………..…………………….. sesuai program sebelumnya……………….t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);PaintBox1->Canvas->Polyline((TPoint*)t6,4);}
5. Tambahkan kode pada file header sbb (yg di ketik Bold)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 92
……………..public: // User declarations __fastcall TForm1(TComponent* Owner); void _fastcall gambar(float,float);float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4], TRxyz[4][4],vpn_k[8][5];float vpn_p[8][4],vpn_pers[8][4];float kamera_x,kamera_y,kamera_z;……………
6. Jalankan aplikasi diatas, cobalah menekan tombol yg ada dan amati
perubahan tampilannya.
16.4 Realitas Visual Grafis 3D(3D Graphics Visual Realism)
Yang dimaksud realitas grafis 3D adalah bagimana membentuk suatu obyek
3D agar sesuai dengan kenyataan suatu obyek yang dilihat sehari-hari.
Sebagian besar obyek nyata bersifat solid atau tidak tembus pandang.
Pada contoh bab sebelumnya obyek yang dibuat masih dalam bentuk rangka
(wireframe). Dalam implementasinya model rangka ini masih banyak dipakai
untuk mengetahui bagian dlaam suatu obyek.
Relaitas grafis 3D dapat dilakukan dengan : mengarsir poligon, rendering,
dan shadowing.
16.5Pewarnaan 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 garisCanvas->Pen->Color=clRed ;//garis warna merah
untuk mewarnai arsiranCanvas->Brush->Color=clRed ;//arsiran warna merah
clRed : merah
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 93
clBlue:biru
clBlack:hitam
clYellow:kuning
dll
2. dengan RGB
RGB merupakan warna yang dihasilkan kombinasi dari Red[R]-
Green[G]-Blue[B], dengan nilai R:0-255 G:0-255 B:0-255, nilai 0
pada masing2 warna adalah hitam , dan 255 adalah warna maksimal
untuk mewarnai garisCanvas->Pen->Color=RGB(100,100,100) ;//garis warna abu2
untuk mewarnai arsiranCanvas->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.6Gaya arsiran (style)Arsiran dari suatu poligon dapat dibentuk dalam beberapa macam dengan
perintah arsiran adalah
Canvas->Brush->Style=arsiran
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 94
Arsiran:
16.6.1bsSolid: arsiran homogen/solid/pejal
bsCross:arsiran kotak-kotak
bsDiagonal: arsiran bergaris diagonal
bsVertical: arsiran bergaris tegak
bsHorisontal: arsiran bergaris mendatar
dll
16.7Mode PenGaris yang membetuk suatu obyek juga dapat dibentuk
Canvas->Pen->Style=bentukBentuk:
psSolid :garis homogen
psDot:garis berbentuk titik-titik
psDash: garis berbentuk garis kecil2
psDashDot: garis berbentuk kombinasi dash dan dot
16.8Membuat arsiran pada grafis 3D1. 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 polygonCanvas->Brush->Color=warna
3. jalankan4. akan terlihat bahwa tampilan gambar belum dapat diidentifikasi
secara jelas –saling tumpang tindih (bentuk belum riil), karena proses penggambaran poligon belum memenuhi kaidah/algoritma pelukis (painter’s algorithm)
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 95
Pen->Color:clBluePen->Style:psDot
Brush->Color:clBlackBrush->Style:csDiagonal
16.9Algoritma pelukis (painter’s algorithm) Algoritma pelukis adalah cara/urutan mengarsir suatu obyek yang saling
menutupi dimulai dari yang terjauh (dari pengamat) dulu.
Maka agar pada grafis 3D poligon yang jauh akan tertutup oleh poligon yang
dekat dengan pengamat, maka setiap poligon harus diurutkan proses
pembuatannya dimulai dari yang terjauh dari pengamat/user (nilai koordinat z
paling kecil)
Untuk mengurutkan poligon , maka nilai koordinat z dari setiap poligon harus
dihitung rata-rata dari ke empat titik yg membetuk poligon.
Berdasarkan z rata-rata setiap poligon ini maka proses penampilan poligon
dimulai dari yg bernilai z terkecil (ditulis paling atas pada program)
Poligon tanpa algoritma pelukis
Poligon dengan algoritma pelukis
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 96
16.10Implementasi Poligon dan Arsiran Untuk membuat suatu obyek menjadi solid maka obyek tersebut harus
tersusun atas poligon-poligon. Poligon ini tidak harus segi empat, tetapi bisa
segitiga, dlsb sesuai dengan keperluan.
Langkah2 poligonisasi sebagai berikut.
1. Identifikasi titik-titik poligon yang membetuk suatu obyek, misal
poligon 1 adalah bagian depan kotak (titik 1, titik 2,tiitk 3, dan titik 4),
poligon 2 bagian belakang kotak (titik 5,titik 6, titik 7, dan titik8) dan
seterusnya.
(Identifikasi ini dilakukan sebelum proses transformasi ke koordinat layar
misal ,mulai nomor program 124 dst)
2. Urutkan posisi poligon tersebut berdasarkan nilai z-nya
(vpn_pers[I][2]), sehingga poligon dengan nilai z paling kecil diletakkan
kapa posisi pertama dst. Hal ini dilakukan agar proses pembuatan
arsiran dimulai dari poligon yang paling jauh (algoritma pelukis-
painter’s algorithm).
3. Bila tidak ada proses pengurutan maka poligon akan saling tumpang-
tindih. Nilai z ini dapat dihitung dari nilai z rata-rata titik-titik yang
membentuk poligon
4. Lakukan transformasi ke koordinat layar
5. Gambar poligon beserta arsiran setiap poligon(brush)
Untuk menggambar poligon maka perintah Polyline diganti menjadi
Polygon, sedangkan untuk mengarsir, sebelum perintah poligon,
perlu diatur arsiran sbb
Canvas ->Brush-> Color=warna arsir
Sampai langkah ini realitas obyek sudah mulai nampak , yakni bagian
yang berada di belakang tidak nampak lagi, akan tetapi realitas ini masih
dapat ditingkatkan yakni dengan efek rendering , yaitu perubahan warna
akibat pencahayaan dari posisi tertentu (tidak di bahas disini, ada di buku-
buku referensi grafika komputer), shadowing, yaitu efek bayangan.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 97
Bila obyek yang akan di proses memilki cakupan yang besar, maka agar
proses komputasi lebih cepat diperlukan clipping atau pemotongan (teori ada
di berbagai buku referensi).
16.11Implementasi Program Untuk menerapkan visual realism dasar dilakukan tahapan sbb
1. Bari aplikasi sebelumnya ubahlah semua kode
……Polyline…. menjadi …Polygon ………misal :
PaintBox1->Canvas->Polyline((TPoint*)t6,4);Diganti menjadi PaintBox1->Canvas->Polygon((TPoint*)t6,4);
2. Tambahkan perintah untuk mengarsir poligon sebelum/diatas perintah
poligon dengan
……… Canvas->Brush->Color=warna..warna, warna arsiran dapat diatur dengan
(i) konstanta, misal biru -> clBluemerah -> clRedkuning->clYellow
misal :
……… Canvas->Brush->Color=clBlue; arsir biru
(ii) kombinasi RGB(Red Green Blue-Merah Hijau Biru)
misal :
……… Canvas->Brush->Color=RGB(200,100,0)artinya nilai Red:100, Green 100, Blue:0
masing-masing warna memiliki range 0-255
misal poligon berwarna merah, maka tambahkan perintah arsir pada
setiap poligon sbb
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 98
…………..PaintBox1->Canvas->Color=clRed; PaintBox1->Canvas->Polygon((TPoint*)t6,4);……………….
3. Jalankan aplikasi, amati yang terjadi ! Mengapa gambar balok belum
seperti yang diharapkan ? artinya wujud balok masih kacau ?
16.12Pengurutan PoligonAgar 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
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 99
Name: Atas
Name: KananName: Kanan
Name: Paintbox1
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 kamerakamera_x=100.0;kamera_y=100;
/* 8-----------7 ! ! 4-----------3 ! ! 5--!-------6 1---------- 2*/}
3. Buat fungsi sendiri misal : fungsi gambar() untuk menampilkan grafis3d
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 100
Name:Auto
Name: Kiri
Name: Bawah
Auto
void _fastcall TForm1::gambar(float kamx,float kamy){//menetukan jujlkah obyek dan jumlkah titik sudutPaintBox2->Canvas->Brush->Color=clWhite;PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);int jumlah_obyek=1;int max_titik=8;int max_poli=6;
//------------------posisi kamerafloat kx=kamx;float ky=kamy;float kz=500;
//----------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz);float dxn=kx/d;float dyn=ky/d;float dzn=kz/d;
//--- fokus kamera atau titik pandang (VRP)float vrp_x=0;float vrp_y=0;float vrp_z=0;//-------------------------------//mengantur kemiringan kamerafloat dxup=0;float dyup=1; //tegakfloat dzup=0;//pusat proyeksifloat xc=0 ;float yc=0 ;float zc=-3000;
//mennetukan batas bawahint batasbawah=PaintBox2->ClientHeight;
// matriks proyeksi perpektiffloat perspek[4][4]=
{//0 1 2 3 {-zc,0,0,0}, //0 {0,-zc,0,0}, //1 {xc,yc,-1,1},//2 {0,0,0,-zc} //3 };
// matriks translasi titik WRC ke VPN
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 101
float T[4][4]={ {1,0,0,0}, {0,1,0,0}, {0,0,1,0},
{-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1}};
// putar sehiongga vektor n sesuai sumbu zfloat v1=sqrt(dyn*dyn+dzn*dzn);// rotasi sumbu x float Rx[4][4]=
{{1,0,0,0},{0,-dzn/v1,-dyn/v1,0},{0,dyn/v1,-dzn/v1,0},{0,0,0,1}
};// rorasu sumbu y;
float Ry[4][4]={
{v1,0,-dxn,0},{0,1,0,0},{dxn,0,v1,0},{0,0,0,1}
};
// mengalikan matriks Rx * Ry
for (int i=0;i<=3;i++){
for (int k=0;k<=3;k++) Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+ Rx[i][3] * Ry[3][k];
}xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);
float Rz[4][4]={
{yup_vp/rup,xup_vp/rup,0,0},{-xup_vp/rup,yup_vp/rup,0,0},{0,0,1,0},{0,0,0,1}
};
// perklaian matriks dxy * dz for (int i=0;i<=3;i++)
{
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 102
for (int k=0;k<=3;k++)Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+ Rxy[i][3] * Rz[3][k];
}
// perkalian matriks T dan Rxyz for (int i=0;i<=3;i++)
{for (int k=0;k<=3;k++) TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+
T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];}
// transfoemasi titik obyek ke VPN
for (int i=1;i<=max_titik;i++) // loop poligon{
for (int k=0;k<=3;k++) // loop titik {vpn_k[i][k]=-s[i].x*TRxyz[0][k] - s[i].y * TRxyz[1][k]-s[i].z* TRxyz[2][k] + 1* TRxyz[3][k]; }vpn_k[i][4]=vpn_k[i][2];//menampung nilai z untuk pengurutan
}
//transfoemasi perpeksif for (int i=1;i<=max_titik;i++) { for (int k=0;k<=3;k++)vpn_k[i][k]=vpn_k[i][0]* perspek[0][k]+vpn_k[i][1]* perspek[1][k]+ vpn_k[i][2]*perspek[2][k]+vpn_k[i][3] * perspek[3][k];
}
//membuat niali 1 pada matrix padaordo ke-4for (int i=1;i<=max_titik;i++) {for (int k=0;k<=3;k++) vpn_k[i][k]=(int) vpn_k[i][k]/vpn_k[i][3]; }
int tengah_x=PaintBox2->ClientWidth/2;// trabsformhasi ke koordinat layarfloat tk_x=(vpn_k[1][0]+vpn_k[2][0])/2;int geser_x=tengah_x-tk_x;
int tengah_y=PaintBox2->ClientHeight/2;// trabsformhasi ke koordinat layar
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 103
float tk_y=(vpn_k[1][1]+vpn_k[4][1])/2;int geser_y=tengah_y-tk_y;
for(int i=1;i<=max_titik;i++) {vpn_k[i][0]=vpn_k[i][0]+geser_x;vpn_k[i][1]=vpn_k[i][1]+geser_y; }
//identifikasi poligon ke memori//poli 1 : depanp[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:belakangp[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:bawahp[3].x[1]=vpn_k[1][0];p[3].y[1]=vpn_k[1][1];p[3].z[1]=vpn_k[1][4];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 104
p[3].x[2]=vpn_k[2][0];p[3].y[2]=vpn_k[2][1];p[3].z[2]=vpn_k[2][4];
p[3].x[3]=vpn_k[6][0];p[3].y[3]=vpn_k[6][1];p[3].z[3]=vpn_k[6][4];
p[3].x[4]=vpn_k[5][0];p[3].y[4]=vpn_k[5][1];p[3].z[4]=vpn_k[5][4];//poli 4:atas depanp[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:kananp[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:kirip[6].x[1]=vpn_k[1][0];p[6].y[1]=vpn_k[1][1];p[6].z[1]=vpn_k[1][4];
p[6].x[2]=vpn_k[5][0];p[6].y[2]=vpn_k[5][1];p[6].z[2]=vpn_k[5][4];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 105
p[6].x[3]=vpn_k[8][0];p[6].y[3]=vpn_k[8][1];p[6].z[3]=vpn_k[8][4];
p[6].x[4]=vpn_k[4][0];p[6].y[4]=vpn_k[4][1];p[6].z[4]=vpn_k[4][4];
//hitung zrata tiap poligonfor (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 zfor (int i=1;i<=max_poli;i++) { for (int j=1;j<=max_poli-i;j++) { if (p[j].zrata>p[j+1].zrata) { int t=p[j+1].zrata; p[j+1].zrata=p[j].zrata; p[j].zrata=t; for (int k=1;k<=4;k++) { int u=p[j+1].x[k]; p[j+1].x[k]=p[j].x[k]; p[j].x[k]=u;
int v=p[j+1].y[k]; p[j+1].y[k]=p[j].y[k]; p[j].y[k]=v; }
}//if } }
//bacground putihPaintBox2->Canvas->Brush->Color=clWhite;PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
//gambar di paint box 2POINT g1[4];g1[0]=Point(p[1].x[1],p[1].y[1]);g1[1]=Point(p[1].x[2],p[1].y[2]);g1[2]=Point(p[1].x[3],p[1].y[3]);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 106
g1[3]=Point(p[1].x[4],p[1].y[4]);g1[4]=Point(p[1].x[1],p[1].y[1]);PaintBox2->Canvas->Brush->Color=clBlue;PaintBox2->Canvas->Polygon((TPoint*)g1,4);
POINT g2[4];g2[0]=Point(p[2].x[1],p[2].y[1]);g2[1]=Point(p[2].x[2],p[2].y[2]);g2[2]=Point(p[2].x[3],p[2].y[3]);g2[3]=Point(p[2].x[4],p[2].y[4]);g2[4]=Point(p[2].x[1],p[2].y[1]);PaintBox2->Canvas->Brush->Color=clGreen;PaintBox2->Canvas->Polygon((TPoint*)g2,4);
POINT g3[4];g3[0]=Point(p[3].x[1],p[3].y[1]);g3[1]=Point(p[3].x[2],p[3].y[2]);g3[2]=Point(p[3].x[3],p[3].y[3]);g3[3]=Point(p[3].x[4],p[3].y[4]);g3[4]=Point(p[3].x[1],p[3].y[1]);PaintBox2->Canvas->Brush->Color=clGray;PaintBox2->Canvas->Polygon((TPoint*)g3,4);
POINT g4[4];g4[0]=Point(p[4].x[1],p[4].y[1]);g4[1]=Point(p[4].x[2],p[4].y[2]);g4[2]=Point(p[4].x[3],p[4].y[3]);g4[3]=Point(p[4].x[4],p[4].y[4]);g4[4]=Point(p[4].x[1],p[4].y[1]);//PaintBox2->Canvas->Brush->Color=clGray;PaintBox2->Canvas->Polygon((TPoint*)g4,4);
POINT g5[4];g5[0]=Point(p[5].x[1],p[5].y[1]);g5[1]=Point(p[5].x[2],p[5].y[2]);g5[2]=Point(p[5].x[3],p[5].y[3]);g5[3]=Point(p[5].x[4],p[5].y[4]);g5[4]=Point(p[5].x[1],p[5].y[1]);PaintBox2->Canvas->Brush->Color=clGreen;PaintBox2->Canvas->Polygon((TPoint*)g5,4);
POINT g6[4];g6[0]=Point(p[6].x[1],p[6].y[1]);g6[1]=Point(p[6].x[2],p[6].y[2]);g6[2]=Point(p[6].x[3],p[6].y[3]);g6[3]=Point(p[6].x[4],p[6].y[4]);g6[4]=Point(p[6].x[1],p[6].y[1]);PaintBox2->Canvas->Brush->Color=RGB(2,100,200);PaintBox2->Canvas->Polygon((TPoint*)g6,4);}
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 107
void __fastcall TForm1::PaintBox1Paint(TObject *Sender){gambar(kamera_x,kamera_y);}//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender){for (int r=-200;r<=200;r++){for(int t=1;t<1000000;t++){}//tundakamera_x+=r;gambar(kamera_x,kamera_y);}for (int r=-200;r<=200;r++){for(int t=1;t<1000000;t++){}//tundakamera_y+=r;gambar(kamera_x,kamera_y);}
}
4. tulis kode event Onclick pada masing-maisng button
misal :
16.13.1Tombol Kanan-OnClick
void __fastcall TForm1::KananClick(TObject *Sender){kamera_x=kamera_x+20.0;gambar(kamera_x,kamera_y);}//---------------------------------------------------------------------------
16.13.2Tombol Kiri-OnClick
void __fastcall TForm1::KiriClick(TObject *Sender){kamera_x=kamera_x-20.0;gambar(kamera_x,kamera_y);}//---------------------------------------------------------------------------
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 108
16.13.3Tombol Atas-OnClick
void __fastcall TForm1::AtasClick(TObject *Sender){kamera_y+=20.0;gambar(kamera_x,kamera_y);}//---------------------------------------------------------------------------
16.13.4Tombol Bawah-OnClick
void __fastcall TForm1::BawahClick(TObject *Sender){kamera_y-=20.0;gambar(kamera_x,kamera_y);}//---------------------------------------------------------------------------
16.13.5Tombol Auto-OnClick
void __fastcall TForm1::AutoClick(TObject *Sender){for (int r=-200;r<=200;r++){for(int t=1;t<1000000;t++){}//tundakamera_x+=r;gambar(kamera_x,kamera_y);}for (int r=-200;r<=200;r++){for(int t=1;t<1000000;t++){}//tundakamera_y+=r;gambar(kamera_x,kamera_y);}
5. Jangan lupa , diklarasikan semua variabel/fungsi yang ada pada file
header#include <StdCtrls.hpp>#include <Forms.hpp>#include <MPlayer.hpp>#include <Buttons.hpp>#include <ExtCtrls.hpp>//---------------------------------------------------------------------------class TForm1 : public TForm{
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 109
__published: // IDE-managed Components TBitBtn *BitBtn1; TBitBtn *BitBtn2; TBitBtn *BitBtn3; TBitBtn *BitBtn4; TPaintBox *PaintBox2; void __fastcall FormActivate(TObject *Sender); void __fastcall BitBtn2Click(TObject *Sender); void __fastcall BitBtn1Click(TObject *Sender); void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall BitBtn3Click(TObject *Sender); void __fastcall BitBtn4Click(TObject *Sender);private: // User declarationspublic: // User declarations __fastcall TForm1(TComponent* Owner);
void _fastcall gambar(float,float);float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4],TRxyz[4][4],vpn_k[12][5];float vpn_p[12][4];float kamera_x,kamera_y,kamera_z;int g[12][5];struct titik{ int x; int y; int z; }s[50];
struct poligon{ int x[4]; int y[4]; int z[4]; int zrata; }p[9];
};//---------------------------------------------------------------------------extern PACKAGE TForm1 *Form1;//---------------------------------------------------------------------------
16.14 More Complex 3D CG Interactive
Grafis 3D yang telah dibuat sebelumnya walaupun sudah nampak lebih riil
(setiap poligon di arsir) dan dapat di kendalikan (interaktif) tetapi bentuk
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 110
masih sangat dasar. Untuk mengembangkan ke bentuk yang lebih komplek,
lakukan langkah sbb
1. Misal akan dibentuk menjadi sebuah kursi duduk seperti dibawah,
modifkasilah program sbb.
(intruksi/var/konstanta yang diubah ber-font Bold)
…….//menetukan jujlkah obyek dan jumlkah titik sudutPaintBox2->Canvas->Brush->Color=clWhite;PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);int jumlah_obyek=1;int max_titik=12;int max_poli=9;
//------------------posisi kamerafloat kx=kamx;float ky=kamy;float kz=500;
//----------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz);float dxn=kx/d;…………………..
2. Modifikasi deklarasi obyek sbbs[1].x=0;s[1].y=0;s[1].z=200;s[2].x=300;s[2].y=0;s[2].z=200;
s[3].x=300;s[3].y=100;s[3].z=200;s[4].x=0;s[4].y=100;s[4].z=200;
s[5].x=0;s[5].y=0;s[5].z=100;s[6].x=300;s[6].y=0;s[6].z=100;
s[7].x=300;s[7].y=100;s[7].z=100;s[8].x=0;s[8].y=100;s[8].z=100;
s[9].x=0;s[9].y=0;s[9].z=0;s[10].x=300;s[10].y=0;s[10].z=0;
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 111
s[11].x=300;s[11].y=200;s[11].z=0;s[12].x=0;s[12].y=200;s[12].z=0;
3. Modifikasilah bagian pembentukan poligon menjadi 9 poligon sbb
//identifikasi poligon ke memori//poli 1 : depanp[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:belakangp[2].x[1]=vpn_k[9][0];p[2].y[1]=vpn_k[9][1];p[2].z[1]=vpn_k[9][4];
p[2].x[2]=vpn_k[10][0];p[2].y[2]=vpn_k[10][1];p[2].z[2]=vpn_k[10][4];
p[2].x[3]=vpn_k[11][0];p[2].y[3]=vpn_k[11][1];p[2].z[3]=vpn_k[11][4];
p[2].x[4]=vpn_k[12][0];p[2].y[4]=vpn_k[12][1];p[2].z[4]=vpn_k[12][4];
//poli 3:bawahp[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];
//poli 6:kiri depanp[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];
//poli 6:atas miringp[7].x[1]=vpn_k[8][0];p[7].y[1]=vpn_k[8][1];p[7].z[1]=vpn_k[8][4];
p[7].x[2]=vpn_k[7][0];p[7].y[2]=vpn_k[7][1];p[7].z[2]=vpn_k[7][4];
p[7].x[3]=vpn_k[11][0];p[7].y[3]=vpn_k[11][1];p[7].z[3]=vpn_k[11][4];
p[7].x[4]=vpn_k[12][0];p[7].y[4]=vpn_k[12][1];p[7].z[4]=vpn_k[12][4];
//poli 8:kiri belakangp[8].x[1]=vpn_k[6][0];p[8].y[1]=vpn_k[6][1];p[8].z[1]=vpn_k[6][4];
p[8].x[2]=vpn_k[10][0];p[8].y[2]=vpn_k[10][1];p[8].z[2]=vpn_k[10][4];
p[8].x[3]=vpn_k[11][0];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 112
p[3].x[3]=vpn_k[10][0];p[3].y[3]=vpn_k[10][1];p[3].z[3]=vpn_k[10][4];
p[3].x[4]=vpn_k[9][0];p[3].y[4]=vpn_k[9][1];p[3].z[4]=vpn_k[9][4];
//poli 4:atas depanp[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 depanp[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];
p[8].y[3]=vpn_k[11][1];p[8].z[3]=vpn_k[11][4];
p[8].x[4]=vpn_k[7][0];p[8].y[4]=vpn_k[7][1];p[8].z[4]=vpn_k[7][4];
//poli 9:kanan belakangp[9].x[1]=vpn_k[9][0];p[9].y[1]=vpn_k[9][1];p[9].z[1]=vpn_k[9][4];
p[9].x[2]=vpn_k[5][0];p[9].y[2]=vpn_k[5][1];p[9].z[2]=vpn_k[5][4];
p[9].x[3]=vpn_k[8][0];p[9].y[3]=vpn_k[8][1];p[9].z[3]=vpn_k[8][4];
p[9].x[4]=vpn_k[12][0];p[9].y[4]=vpn_k[12][1];p[9].z[4]=vpn_k[12][4];
4. Modifikasi bagian penggambaran poligon sbb…POINT g1[4];g1[0]=Point(p[1].x[1],p[1].y[1]);g1[1]=Point(p[1].x[2],p[1].y[2]);g1[2]=Point(p[1].x[3],p[1].y[3]);g1[3]=Point(p[1].x[4],p[1].y[4]);
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 113
g1[4]=Point(p[1].x[1],p[1].y[1]);PaintBox2->Canvas->Brush->Color=clBlue;PaintBox2->Canvas->Polygon((TPoint*)g1,4);
POINT g2[4];g2[0]=Point(p[2].x[1],p[2].y[1]);g2[1]=Point(p[2].x[2],p[2].y[2]);g2[2]=Point(p[2].x[3],p[2].y[3]);g2[3]=Point(p[2].x[4],p[2].y[4]);g2[4]=Point(p[2].x[1],p[2].y[1]);//PaintBox2->Canvas->Brush->Color=clGreen;PaintBox2->Canvas->Polygon((TPoint*)g2,4);
POINT g3[4];g3[0]=Point(p[3].x[1],p[3].y[1]);g3[1]=Point(p[3].x[2],p[3].y[2]);g3[2]=Point(p[3].x[3],p[3].y[3]);g3[3]=Point(p[3].x[4],p[3].y[4]);g3[4]=Point(p[3].x[1],p[3].y[1]);//PaintBox2->Canvas->Brush->Color=clBlue;PaintBox2->Canvas->Polygon((TPoint*)g3,4);
POINT g4[4];g4[0]=Point(p[4].x[1],p[4].y[1]);g4[1]=Point(p[4].x[2],p[4].y[2]);g4[2]=Point(p[4].x[3],p[4].y[3]);g4[3]=Point(p[4].x[4],p[4].y[4]);g4[4]=Point(p[4].x[1],p[4].y[1]);//PaintBox2->Canvas->Brush->Color=clGray;PaintBox2->Canvas->Polygon((TPoint*)g4,4);
POINT g5[4];g5[0]=Point(p[5].x[1],p[5].y[1]);g5[1]=Point(p[5].x[2],p[5].y[2]);g5[2]=Point(p[5].x[3],p[5].y[3]);g5[3]=Point(p[5].x[4],p[5].y[4]);g5[4]=Point(p[5].x[1],p[5].y[1]);//PaintBox2->Canvas->Brush->Color=clGreen;PaintBox2->Canvas->Polygon((TPoint*)g5,4);
POINT g6[4];g6[0]=Point(p[6].x[1],p[6].y[1]);g6[1]=Point(p[6].x[2],p[6].y[2]);g6[2]=Point(p[6].x[3],p[6].y[3]);g6[3]=Point(p[6].x[4],p[6].y[4]);g6[4]=Point(p[6].x[1],p[6].y[1]);//PaintBox2->Canvas->Brush->Color=RGB(2,100,200);PaintBox2->Canvas->Polygon((TPoint*)g6,4);
POINT g7[4];
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 114
g7[0]=Point(p[7].x[1],p[7].y[1]);g7[1]=Point(p[7].x[2],p[7].y[2]);g7[2]=Point(p[7].x[3],p[7].y[3]);g7[3]=Point(p[7].x[4],p[7].y[4]);g7[4]=Point(p[7].x[1],p[7].y[1]);//PaintBox2->Canvas->Brush->Color=RGB(2,100,100);PaintBox2->Canvas->Polygon((TPoint*)g7,4);
POINT g8[4];g8[0]=Point(p[8].x[1],p[8].y[1]);g8[1]=Point(p[8].x[2],p[8].y[2]);g8[2]=Point(p[8].x[3],p[8].y[3]);g8[3]=Point(p[8].x[4],p[8].y[4]);g8[4]=Point(p[8].x[1],p[8].y[1]);//PaintBox2->Canvas->Brush->Color=RGB(2,100,50);PaintBox2->Canvas->Polygon((TPoint*)g8,4);
POINT g9[4];g9[0]=Point(p[9].x[1],p[9].y[1]);g9[1]=Point(p[9].x[2],p[9].y[2]);g9[2]=Point(p[9].x[3],p[9].y[3]);g9[3]=Point(p[9].x[4],p[9].y[4]);g9[4]=Point(p[9].x[1],p[9].y[1]);//PaintBox2->Canvas->Brush->Color=RGB(2,100,20);PaintBox2->Canvas->Polygon((TPoint*)g9,4);}
5. Jalankan !
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 115
Bab 17.PENUTUP Metode kamera sitetis ini sangat fleksibel dalam memandang suatu obyek,
karena suatu obyek dapat dipandang dari berbagai sisi dan jarak. Bila obyek
yang akan divisualisasikan relatif besar misalnya simulasi bangunan
perkotaan, maka dengan mengubah titik VRP dan posisi kamera dengan
perubahan yang otomatis begitu suatu tombol (misal tombol panah pada
keyboard ) maka akan didapatkan animasi 3 dimensi dan pengamat seakan-
akan sedang beraktifitas di alam nyata.
Pada prinsipnya metode kamera sintetis memiliki 4 tahapan utama yakni
representasi obyek dalam koordinat dunia (koordinat x,y,z) , transformasi ke
koordinat bidang pandang (koordinat u,v,n), proyeksi perspektif pada bidang
uv, dan transformasi ke koordinat layar.
Realita visual (visual realism) akan menjadi lebih baik dengan adanya
proyeksi perspektif pada bidang uv karena obyek yang jauh akan nampak
lebih kecil. Selain itu kesan 3 dimensi akan semakin nampak dengan adanya
rendering dan bayangan (shadowing), sehingga suatu obyek walaupun
warnanya homogen tetapi akibat pengaruh pencahayaan dari suatu tempat
maka kecerahan warna berbeda pada setiap titik atau setiap poligon yang
membentuk obyek tersebut selain itu akan muncul bayangan yang akan
mempertajam efek 3 dimensi.
Semakin tinggi kerapatan poligon per satuan luas maka gambar yang
muncul akan semakin halus, dengan konsekwensi beban memori akan
semakin tinggi pula. Melalui penambahan berbagai efek yang sering terjadi
di dunia nyata, sudah dapat dihasilkan kenyataan semu yang dapat
digunakan untuk memvisualkan atau untuk simulasi dalam berbagai hal.
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 116
DAFTAR PUSTAKA
Adams, Lee.1991. Visualization Graphics in C. Mc Graw Hill.
Anand, Vera B. 1993. Computer Graphics and Geometric Modelling for
Engineer. Singapore:John Wiley & Son, Inc.
Foley, James D. 1982. Fundamentals of Interactif Computer Graphics.
Addison-Wesley Publisihing Company.
Harrington, Steve. 1987. Computer Graphics: Programming Approach.
McGraw Hill. 2th edition.
Hearn, Donald dan Bakar, M. Puline.1986.Computer Graphics. Prentice Hall
International
Insap Santoso, Ir., M.Sc. 1994. Grafika Komputer dan Antar Muka Grafis. Andi
Offset . Yogyakarta. Cetakan I.
Newman, William M. & Sproul, Robert F.1984. Principle of Interactif Computer
Graphics. McGraw Hill
Pimentel, Ken dan Teixeira, Kevin.1995.Virtual Reality. Intel/McGrawHill. 2th
edition
Presmann, RogerL.1992.Computer Graphics: Apractitioner’s Approach. Mc.
Graw Hill. Third Edition.
Rimer, Steve.1993.Super VGA Graphics:Programming Secrets.McGraw Hill.
P. Insap Santoso, Ir.1997. Interaksi Manusi dan Komputer. Andi Offset.
Yogyakarta. Edisi Pertama.
Surya Setiawan, MSc. 2000. Diktat Kuliah Grafika Komputer Fakultas
Universitas Indonesia. Jakarta
Paulus Bambangwirawan, Dipl.Inforn. 2004. Grafika Komputer. Penerbit Andi.
Yogykarta.
Edhi Nugroho, 2005. Teori dan Praktek Grafika Komputer. Penerbit Graha
Ilmu. Yogyakarta
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 117
Imam Heryanto, Budi Raharjo. 2006. Pemrograman Borland C++ Builder.
Penerbit Informastika. Bandung
Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 118