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


Daftar Isi


Daftar Tabel


Daftar Gambar


BAB 1. PENDAHULUAN

Grafika Komputer merupakan sekumpulan alat yang digunakan untuk

membuat gambar dan berinteraksi dengan gambar dengan cara-cara seperti

yang biasa digunakan. Peralatan tersebut dapat berupa perangkat keras

ataupun piranti lunak. Semua peralatan tersebut memberi fasilitas kepada

programmer membuat program-program grafis yang baik. Secara umum

program-program komputer grafis ditujukan untuk memudahkan interaksi

antara manusia dengan komputer.

1.1 Implementasi Grafika Komputer

Aplikasi grafika komputer adalah program komputer yang dirancang

khusus untuk menghasilkan grafis datau representasi visual dari data ke

dalam bentuk gambar, slide dan sebagainya. Ruang lingkup aplikasi grafika

komputer sangat luas mencakup dari sekedar proses interaktif. Selain itu

ruang lingkup aplikasi grafika komputer mulai dari bidang dua dimensi

sampai ke ruang tiga dimensi, mulai dari pemodelan benda sederhana

sampai ke representasi data geografis. Aplikas grafika komputer dapar dibagi

mejadi beberapa kelompok, yaitu :

Aplikasi pengolah Bentuk dan Citra

Presentasi

CAD (Computer Aided Design)

Animasi

Representasi Data

Permainan

1.1.1 Aplikasi Pengolah Bentuk dan Citra

Aplikasi Pengolah bentuk dan Citra merupakan aplikas yang banyak

digunakan oleh Desaigner grafis dan ilustrator.

Aplikasi pengoleh Bentuk ditujukan untukmengolah bentuk (Shape)

yang disusun dari serangkaian garis sedangkan Aplikasi pengolah Citra

ditujukan untuk memanipulasi sekumpulan titik yang membentuk sebuah

gambar (Citra).


Bentuk/Shape

Shape/bentuk tidak akan berubah kehalusannya meskipun diubah

ukurannya

Gambar yang dibuat/direkayasa dari bentuk geometri

Contoh aplikasi Pengolah bentuk antara lain Corel Drow, Adobe

ilustrator, Adobe FreeHand

Citra / raster

Citra akan berubah bentuknya jika diubah ukurannya diberbersar atau

diperkecil. Perubahan bentuk Pada citra terjadi karena ukuran pixel

mengikuti perbandingan perbesaran citra. Sehingga perbesaran

mengakibatkan citra kehilangan ketajaman.

Aplikasi pengolah Citra daoat digunakan untukmemberikan efek khusu

terhadap citra yang diolah, tergantung aplikas yang digunakan dapat

diberkan efek khusu seperti bayangan (shadow), pengkaburan (blur)

dsb.

Contoh aplikas pengolah Citra antara lain Corel PhotoPaint, Adobe

Photoshope

1.1.2 Presentasi

Aplikasi presentasi banyak digunakan oleh kalangan bisnis dalam

mempresentaskan ide-ide ataupun konsep-konsep. Dalam

perkembangannya, aplikas presentas tidak hanya sekedar menampilkan slide

ke layar tetapi juga dilengkapi dengan fasilitas animasi. (contoh aplikasi

presentasi antara lain : Power point, Marcomedia Flash)

1.1.3 CAD (Computer Aided Design)

Aplikasi CAD banyak digunkan dalam bidang Teknik. Dengan

menggunkan CAD seorang perancang teknik tidka lagi menggunakan meja

gambar dan kertas tetapi mengunakan komputer sebagai media. Contoh

Aplikasi CAD . Contoh aplikasi CAD antara lain AutoCad untuk aplika

teknik/rekaya bangunan/mesin, Protel untuk aplikasi rekyasa elektronik,


Home Designer untuk aplikasi design anterior dan NuGraf untuk aplikas

pemodelan benda tiga dimensi.

1.1.4 Animasi

Aplikasi animasi merupakan aplikas yang banyak digunakan dalam

bidang periklanan dan Film. Dengan mengunakan aplikasi animasi, seorang

kreator dapat menciptakan benda-benda maya yang dapat bergerak dalam

dunia nyata. Contoh aplikasi animasi antara lain Autodesk 3D Studio,

Extreme 3D, Animator Pro, Ray Dream Studio.

1.1.5 Representas Data

Representasi data merupakan salah satu cara melihat data dalam

bentuk yang lebih mudah diamati. Aplikasi representas data banyak

digunakan dalam bidang analisa statistik dan geografi. Contoh apliasi untuk

merepresentasikan data geografis antara lain ArcInfor, MapInfo.

1.1.6 Permainan

Saat ini hampir tidak ada aplikas permainan komputer yang tiak

memanfaatkan modus grafik. Aplikasi permainan antara lain aplikasi tembak

dan lari (Shoot adn run), Aplikasi permainan strategi (war games), dll.

1. 3 SISTEM GRAFIKA KOMPUTER Sistem grafika komputer pasif adalah sistem dimana operator tidak

bisa berinteraksi secara langsung dengan gambar yang dibangkitkan.

Sistem Grafika komputer interaktif (interactive Computer Graphics)

adalah sistem yang memungkinkan operator untuk berdialog langsung

dengan apa yang terlihat pada layar komputer.

1.4 KOMPONEN LAYAR PENAMPILPada dasarnya, semua layar penampil dengan kemampuan grafis

punya 3 komponen utama :

- Pengingat digital (frame buffer)


Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai

elemennxm menunjukkan intensitas dari citra grafis yang akan

ditampilkan

- Layar Penampil

- Piranti pengendalian tampilan (Display controller) atau pengolah

tampilann (Display processor)

Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya

untuk ditampilkan ke layar penampil.

Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke

display) dikembangkan tahun 60-an. Pada jenis ini pengingat digital berisi

daftar tampilan (display list) atau tampilkan (display program) yang berisi

perintah pengambaran titik, perintah penggambaran garis, dan perintah

penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan

mengubah data digital menjadi tegangan analog yang dipakai untuk

memancarkan elektron yang bisa mengenal tabung layar tampilan berlapis

fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar.

Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan

atau ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan

minimal 30 kali per detik untuk menghindari adanya kedip (flicker). Proses ini

disebut sebagai penyegaran eletron (electron refreshing).

Tampilan berdasarkan teknologi TV dan disebut raster display.

Dikembangkan tahun 70an. Pada tampilan ini, garis, karakter dan bentuk-

bentuk lain selalu digambar berdasar komponen terkecilnya yaitu titik, dan

biasa disebut sebagai pixel atau pel(picture element). Sebuah titik pada layar

tampilan bisa dihidup matikan dengan mudah dalam pengingat digital karena

0 untuk titik matik dan 1 untuk titik yang menyala.

Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan

sebagai polabit dengan mengubah pola bit (piksel) yang ada dalam pengingat

digital, bisa dibentuk gambar sesuai dengan keinginan. Untuk gambar hitam-

putih, warna hitam disajikan menggunakan bit 1, dan warna putih

menggunakan bit 0. Untuk gambar berwarna pengaturan yaitu lebih rumit.

Yang dimaksud dengan raster atau resolusi layar (screen resolution)

adalah matrix piksel yang menutup seluruh permukaan layar tampilan.


Semakin besar ukuran matrix pikxel yang dibentuk pada suatu layar tampilan,

semakin bagus dan halus pula gambar yang bisa dihasilkan oleh layar

tersebut.


Bab 2.GRAFIS PRIMITIF

2.1 Pengertian Output Primitif

Output/Grafis primitif adalah bentuk geometri dasar yang dapat

digunakan untuk membentuk obyek yang lebih komplek.

Dengan memasukkan output primitif tersebut sebagai stuktur yang lebih

kompleks. Setiap output primitif mempunyai data koordinat dan informasi lain

tentang bagaimana cara object ditampilkan pada layar. Titik dan garis lurus

adalah bentuk geometri paling sederhana dan komponen gambar.

Borland C++ Builder menyediakan Canvas yang dapat digunakan

untuk menampilkan gambar maupun tulisan ke layar. Kelas Canvas pada

umumnya merupakan atribut dari kelas Lain. Beberapa kelas yang

mempuntai atribut Canvas antara lain TPaintBox, TShape.

2.2 Macam-macam Output/Grafis primitif

1. Titik (Pixel)

Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar

titik maka kita dapat menggambar obyek apapun. Termasuk bentuk

geometri dibawah merupakan bentuk –bentuk yang pada dasarnya

berasal dari titik-titik. Operasi titik ini sering digunakan pada pengolahan

citra (Image processing). Setiap titik pada monitor memiliki parameter

:koordinat dan warna.

Kode untuk menggambar titik :

Canvas-> Pixels[x][y] = warna

Dengan x : koordinat mendatar

y : koordinat vertikal

Warna : warna pixel

Contoh :

Canvas->Pixel [100][100] = clRed;


2. Garis (line)

Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier

dari titik awal sampai titik akhir

Kode :

Canvas->MoveTo(x0, y0);

Canvas->MoveTo(x1, y1);

...

Canvas->LineTo(xn, yn)

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

selanjutnya ke (xn,yn).

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)


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


x1,y1

X2,y2

x1,y1

X2,y2

x1,y1

X2,y2

X4,y4

x3,y3

6. Chord / Tembereng


tembereng.

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

7. Pie/Juring


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.


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.


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


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


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


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


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


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


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


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

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

{


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;


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.


Bab 3.KOORDINAT SISTEM DAN LAYAR

3.1 Pendahuluan

Koordinat dapat diartinya sebagai tata keseimbangan yang membantu

kita di dalam menentukan suatu kondisi dengan nilai dan batas dalam konteks

geometri. Pada koordinat kartesius arah vertikal digunakan sebagai sumbu y,

dengan y positif ke atas dan arah ke bawah sebagai y negatif, arah mendatar

digunakan sebagai sumbu x dan x positif ke arah kanan dan x negatif ke arah

kiri. Tetapi layar monitor menggunakan orientasi berbeda. Monitor

mengunakan arah ke bawah sebagai sumbu y positif, disamping itu monitor

juga tidak mengenal nilai negatif.

Pada komputer grafik, ada 3 macam sistem koordinat yang harus kita

perhatikan, yaitu

1. Koordinat Nyata

2. Koordinat Sistem

3. Koordinat Tampilan atau Layar

3.2 Koordinat Nyata (World Coordinat)

Yang dimaksud dengan koordinat nyata adalah koordinat yang pada

saat itu object bersangkutan berada. Dalam bahasa Inggris disebut real

world coordinate untuk menghindari kerancuan dengan istilah world

coordinate yang digunakan untuk GLOBUS.

3.3 Sistem Koordinat

Adalah suatu yang abstrak dan biasanya digunakan untuk perhitungan

data yang hasilnya perlu ditampilkan kembali pada layar atau di atas kertas.

Sistem koordinat sealau dikaitkan dengan dimensi, dimana

0 D , dimensi ke 0

1 D, dimensi ke 1

2 D, dimensi ke 2

3 D, dimensi ke 3


4 D, dimensi ke 4

5 D, dimensi ke 5, dan seterusnya

Sebuah titik secara umum sering disebut dimensi ke 0, garis dimensi

ke 1, bidang dimensi ke 2, kubus dimensi ke 3, dan seterusnya. Untuk

kebutuhan grafik umumnya kita menggunakan dimensi ke 3. Kita mempunyai

sistem koordinat untuk 2 dimensi dan 3 dimensi yang dibedakan dengan

jumlah sumbu koordinat yang dimiliki oleh masing-masing sistem. Sistem 2

Dimensi memiliki 2 sumbu koordinat, yaitu sumbu x dan sumbu y, sedangkan

sistem koordinat 3 dimensi memiliki 3 buah sumbu koordinat, yaitu x, y dan z.

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


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


http://id.wikipedia.org/wiki/Berkas:Cartesian_coordinates_2D.svg

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.


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


3.5.2 Konversi dari koordinat sistem ke layar

Masalah yang penting untuk diperhatikan di sini adalah perbedaan nilai

koordinat antar koordinat sistem dengan koordinat layar, di mana koordinat

sistem bisa memiliki nilai negatif, sedangkan koordinat layar hanya mengenal

nilai positif. Kalau pada koordinat sistem ada salah satu sumbu yang bernilai

negatif maka data tersebut (pixel) tidak akan tampil pada layar. Dengan kata

lain, pixel tampil di luar layar. Lihat contoh pada gambar dibawah ini :

Koordinat Sistem (3) Koordinat Layar

Gambar 3.5 Konversi Koordinta Sistem ke layar

Pada contoh di depan, gambar yang ditampilkan di layar muncul

secara terbalik karena sistem nilai antara koordinat sistem dan layar berbeda.

Agar gambar dapat tampil dengan sempurna, maka jika ada nilai sumbu

koordinat yang negatif, nilai tersebut harus diubah menjadi positif terlebih

dahulu dengan menggeser semua data yang terkait yang sama sementara

nilai sumbu Y dibalik.

Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2 tetap

seperti semula.Untuk mengkonversi koordinat sistem x dan y ke koordinat

dilakukan perhitungan:

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


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

Contoh :

Untuk layar dengan ukuran 400 x 640, maka

Max_x_screen = 400 dan

Max_y_screen = 640

1. Terdapat segitiga dengan sistem koordinat titik A(-10,-10), B(80,-

10), C(35, 70), konversikan ke koordinat layar

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


midx (400,640)

Bab 4.PEMBANGKIT GARIS

4.1 Titik dan Garis

Pembentukan titik dilakukan dengan mengkonversi suatu posisi

koordinat dengan program aplikasi ke dalam suatu operasi tertentu

menggunakan peralatan output. Garis dibuat dengan menentukan posisi titik

diantara titik awal dan akhir dari suatu garis. Kemudian , peralatan output

membuat garis sesuai titik-titik tersebut. Untuk peralatan analog, seperti

plotter dan random –scan display, garis lurus dapat dihasilkan dengan halus.

Sedangkan pada peralatan digital, garis lurus dihasilkan dengan menetapkan

titik diskrit antara titik awal dan akhir. Posisi titik diskrit sepanjang garis lurus

dapat diperhitungkan dari persamaan garis tersebut. Perhitungan titik yang

menghasilkan nilai pecahan, dikonversi menjadi posisi pixel. Pembulatan nilai

koordinat ke integer menghasilkan garis yang ditampilkan pada layar

menyerupai gambar tangga, Kehalusan tampilan pada layar akan tergantung

pada resolusi yang digunakan.

Resolusi dapat diartikan sebagai kepadatan pixel yang terdapat pada

suatu area tertentu. Resolusi 400 x 640 berarti pada layar komputer terdapat

sebanyak 400 pixel per layar dengan masing-masing baris mempunyi 640

pixel. Resolusi juga dapat dibedakan menjadi kasar, medium dan halus.

Resolusi berpengaruh terhadap baik tidaknya tampilan gambar grafik pada

layar komputer. Layar dengan resolusi tinggi (Halus) akan menghasilkan

gambar yang bagus pula. Sebagai ilustrasi, lihat gambar berikut.

Low Resolusion High Resolusion


Gambar 4.1 Perbandingan Resolusi Layar

Pada gambar diatas terlihat bahwa tampilan garis pada layar komputer

tidak sesempurna garis di atas kertas.

Garis dikaterorikan menjadi 4 macam, yaitu horisontal, vertikal,

diagonal dan garis bebas. Untuk menampilkan atau menggambar garis layar

dibutuhkan minimal 2 titik (endpoint), yaitu titik awal dan akhir. Awal garis kita

mulai dengan titik atau pixel pertama, P1, diikuti dengan titik kedua, P2. Untuk

mendapatkan titik-titik selanjutnya sampai ke Pn, perlu dilakukan inkrementasi

atas nilai koordinat sumbu X dan Y pada titik sebelumnya. Perhitungan

inkrementasi untuk masing-masing sumbu adalah berbeda. Garis vertikal,

horisontal, diagonal, dan bebas masing-masing mempunyai ciri khas sendiri

Tabel 4.1 Inkrementasi sumbu

Jenis Sumbu-X Sumbu-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


Lakukan dekrementasi sumbu-X dari titik awal sampai titik akhir

3. Tampilkan garis menggunakan nilai parameter koordinat yang telah

dihitung.

Program gambar garis harisontal

void __fastcall TForm1::Button1Click(TObject *Sender){x1=100; y1=100;x2=200; y2=100;int i; if (x1<x2) for (i=x1;i<=x2;i++) Canvas->Pixels[i][y1]=clRed; else for (i=x1;i>=x2;i--) Canvas->Pixels[i][y1]=clRed;}

4.3 Garis Vertikal

Garis vertikal adalah garis yang membentang paralel dengan sumbu-Y

dengan asumsi kita mulai dengan titik P1 pada koordinat Y1 lebih kecil dari

pada Y2 dari P2, sedangkan x1 dan x2 adalah konstan

Algoritma:



Jika titik akhir < titik awal, lakukan inkrementasi sumbu-y dari titik

awal sampai titik akhir.

Jika tidak, maka

Lakukan dekrementasi sumbu-y dari titik awal sampai titik akhir


dihitung.

Program gambar garis vertikalvoid __fastcall TForm1::Button1Click(TObject *Sender){x1=200; y1=100;x2=200; y2=200;int i;


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

4.4 Garis Diagonal

Garis diagonal adalah garis yang membentang parale dengan 45

derajat dari sumbu-x atau sumbu-y dengan asumsi kita mulai dengan titik P1

dengan koordinat x1 dan y1 lebih kecil dari pada y1 dan y2 dari P2 atau

sebaliknya

Algoritma:



Jika titik akhir < titik awal, lakukan inkrementasi sumbu-x dan

sumbu-y dari titik awal sampai titik akhir.

Jika tidak, maka

Lakukan dekrementasi sumbu-x dan sumbu-y dari titik awal sampai

titik akhir


dihitung.

Program gambar garis vertikal

Program garis 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


{ 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


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


Memutar posisi suatu objek pada titik pusat

Mengubah ukuran suat objek baik memperkecil maupun memperbesar

dari ukuran aslinya.

Menarik objek ke samping kiri atau kanan dan bahkan atas bawah.

Transformasi dasar yaitu translasi, skala dan rotasi. Selain

transformasi tersebut , masih ada transformasi lain yang biasa digunakan

untuk mengubah suatu objek , seperti refleksi, streching/shear. Ilustrasi

Tampak pada gambar dibawah ini

Gambar 5.1 Transformasi

5.2 Perpindahan (iTranslation)

Translasi adalah transformasi terhadap suatu objek dengan

menggesernya dari suatu posisi ke posisi lain.

C’

C

ty tx A’ B’

A B


Gambar 5.2 Translasi (1)

Translasi dilakukan dengan penambahan translasi pada sumbu suatu

titik koordinat dengan translasi vector atau shift vector, yaitu (tx, ty) dimana tx

adalah translasi vector menurut sumbu x, sedangkan ty adalah translasi

vektor menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh

dengan menggunakan rumus

x’ = x + 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


Titik A x’A = xA + tx = 10 + 10 = 20

y'A = yA + ty = 10 + 20 = 30

Hasil translasi titik A’(20, 30)

Titik B x’B = xB + tx = 30 + 10 = 40

y'B = yB + ty = 10 + 20 = 30

Hasil translasi titik B’(40, 30)

Titik C x’C = xC + tx = 10 + 10 = 20

y'C = yC + ty = 30 + 20 = 50

Hasil translasi titik C’(20, 50)

Dengan demikian hasil translasi merupakan segitiga dengan koordinat

A’(20, 30), B’(40, 30), C’(20, 50)

Latihan :

1. Coba Gambarkan proses tranlasi tersebut

2. Geser objek ABC ke kanan 30 pixel

3. Geser objek ABC ke bawah 10 pixel

4. Terdapat segiempat ABCD dengan koodinat sebagai berikut

A(40, 100), B(70, 100), C(70, 70), D(40, 70)

a. Translasikan objek ABCD dengan translasi vektor (15, 30)

b. Geserlah objek ABCD ke kiri 40 pixel

c. Gambarkan Objek ABCD dan kedua proses transalasi A dan B

5.3 Penskalaan (scalling)

Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu

yang mengakibatkan berubahnya ukuran obyek secara keseluruhan.

Perubahan ukuran suatu objek menghasilkan koordinat baru.

Koordinat baru diperoleh dengan melakukan perkalian koordinat dengan

skaling faktor , yaitu (sx, sy), dimana sx adalah scaling factor menurut sumbu

x, sedangkan sy adalah scaling faktor menurut sumbu y. Koordinat baru titik

yang diskala dapat diperoleh dengan rumus

x’ = x . Sx

y’ = y . Sy


Dimana (x, y) adalah koordinat asal suatu objek dan (x’, y’) adalah

koordinat setelah diskala.

Scaling factor sx dan sy dapat diberikan sembarang nilai positif. Nilai

lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil

dari 1, maka objek akan diperkecil. Bila sx dan sy mempunyai nilai sama,

maka skala tersebut uniform scaling. Nilai yang tidak sama dari sx dan sy

menghasilkan differential scaling, yang biasa digunakan pada program

aplikasi.

Contoh skala

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

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

Penyelesaian :

Sx=2, Sy=0,5

Xa’=xa*Sx=10*2=20 ya’=ya*Sy=20*0,5=10

Xb’=xb*Sx=50*2=100 yb’=yb*Sy=20*0,5=10

Xc’ =xc*Sx=10*2=20 yc’=yc*Sy=100*0,5=50

Sehingga A’(20,10),B’(100,10),C’(20,50)

Gambar

100908070605040302010

10 20 30 40 50 60 70 80 90 100 110


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


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


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;


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


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

Jika Apilkasi dijalankan


BAB 6. TRANSFORMASI 2D LANJUT

6.1 Transformasi Komposit dan Sistem Koordinat Homogen

Suatu transformasi adalah merupakan komposisi dari sejumlah

transformasi dasar. Misal rotasi dilakukan pada suatu titik rotasi (pivot point)

yang bukan origin maka transformasi ini dapat dilakukan dengan melakukan

translasi pivot point ke titik origin, lalu melakukan rotasi terhadao titik origin,

lalu hasilnya ditransalasikan kembali ke pivot point. Dalam bentuk

matematisnya itu komputasi transformasi komposit seperti itu memerlukan

komputasi-komputasi masing-masing transformasi dasar tersebut.

Agar dapat dibentuk reperesentasi yang lebih umum untuk digunakan

sistem koordinat komogen. Suatu titik (x, y) di dalam sistem koordinat

homogen ini menjadi suatu matrik kolom [xh yh h]T dengan

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:


−=

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 →


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,


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)


D = (1-3, 2-2) =(-2, 0)

2. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan:

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

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

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

Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232

Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660

Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500

Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000

Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000

Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000

Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732

3. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan

A”=(2.866, -0.232)

B”=(3.866, 1.500)

C”=(3.000, 2.000)

D”=(2.000, 0.268)

Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah

y

D C

2 C”

1 A B B”

D”

1 A” 3 x

B. Cara 2

1. Rotasi/Skala, Misal : A’

2. Hitung dx dan dy , dx = Xt-XA’

dy = Yt-YA’

3. Translasi ke dx, dy


Misal

Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut

sebesar 60o dengan titik pusat (3,2)

y

D C

2

1 A B

1 3 x

Jawab

Aplikasi

Kode program

Jam.h//---------------------------------------------------------------------------

#ifndef jam1H


#define jam1H//---------------------------------------------------------------------------#include <Classes.hpp>#include <Controls.hpp>#include <StdCtrls.hpp>#include <Forms.hpp>#include <ExtCtrls.hpp>//---------------------------------------------------------------------------class TForm1 : public TForm{__published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender);private: // User 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)


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


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

Hasil


Bab 7.A N I M A S I

Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika

komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer

pada bagian tertentu di layar, menvisualisasi cara kerja suatu alat bantu atau

mekanisme tertentu, menampilkan keluaran program dengan gambar-gambar yang

menarik dibanding hanya sederet angka, serta tak ketinggalan pula untuk program-

program permainan.

Teknik Animasi

1. inbetweening

Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari.

Ide dasar dari teknik ini adalah dengan menentukan posisi awal dan posisi

akhir dari objek, dan kemudian menghitung posisi objek yang baru,

menghapus pada posisi semula dan menggambar objek pada posisi yang

baru, sampai objek berada pada posisi akhir yang dituju.

Contoh

Hiu

Rancangan


Hiu.H//---------------------------------------------------------------------------

#ifndef sharkH#define sharkH//---------------------------------------------------------------------------#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){}//---------------------------------------------------------------------------


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


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


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


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;

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


BAB 8.GRAFIKA 3D

8.1 Pendahuluan Salah satu bentuk perkembangan terakhir penerapan komputer dalam

bidang grafika adalah pada aplikasi simulasi obyek tiga dimensi atau lebih

dikenal dengan sebutan kenyataan semu (virtual reality-VR). Aplikasi ini

dijumpai pada berbagai bidang dari yang sifatnya hiburan, rancang-bangun,

sampai pada simulasi untuk keperluan riset ilmiah.

Untuk mendukung adanya VR selain diperlukan suatu metode untuk

memvisualisasikan obyek 3 dimensi pada layar 2 dimensi juga didukung

perangkat keras berupa monitor yang langsung dipakai seperti memakai

kacamata dan sensor-sensor yang dipakai oleh pemakai.

Pada implementasi yang lebih sederhana dapat digunakan komputer yang

dipakai sehari-hari dengan layar monitor sebagai media penampil dan

berbagai alat input yang umum dipakai misalnya keyboard, mouse, joystick,

dan lain sebagainya.

Untuk menampilkan efek 3 dimensi pada layar 2 dimensi dengan

animasinya dapat digunakan metode analogi kamera sintetis. Dengan

metode ini suatu obyek nyata dapat dipandang dari kamera dari berbagai

jarak dan sudut pandang. Dengan mengubah jarak, sudut, dan arah

pandang akan didapatkan efek gambar dan animasi 3 dimensi di layar

kamera dari suatu obyek.

Pada implementasinya, agar didapatkan kinerja yang optimum, setiap

bagian dari obyek dibagi menjadi poligon-poligon, sehingga titik-titik yang

diproses merupakan titik acuannya saja dan setiap titik dibentuk poligon dan

diberi warna dengan kecerahan sesuai dengan posisi terhadap sumber

cahaya sintetis. Dengan demikian kualitas gambar semakin baik bila

kerapatan poligon persatuan luas semamin tinggi dengan konsekwensi beban

memori menjadi lebih tinggi dan kecepatan proses rendah, sehingga animasi

lebih kasar.

Visualisasi obyek 3 dimensi dengan komputer ini memungkinkan suatu

obyek 3 dimensi dapat dimanipulasi dan hasilnya dapat langsung terlihat

secara visual. Selain itu suatu obyek juga dapat dilihat dari berbagai jarak


dan sudut pandang serta dapat dilihat pula dalam bentuk kerangka (wire

frame) maupun solid dengan demikian apa yang terlihat lebih mendekati

pada obyek yang sesungguhnya.


Bab 9.Transformasi pada obyek tiga dimensi Pada obyek tiga dimensi dapat dilakukan 3 transformasi pokok yaitu

penggeseran (translation), perputaran (rotasi) , pembesaran (scaling).

Adapun jenis transformasi lain adalah pembebanan (shearing), dan

pencerminan (mirroring). Didalam program, transformasi ini juga dapat

dilakukan dengan mengubah persamaan menjadi operasi matriks 4x4.

Adapun persamaan setiap transformasi adalah sebagai berikut.

1. Penggeseran (translation)

( x’, y’,z’ ) = ( Tx +x, Ty +y, Tz +z)

dengan x’,y’, z’ : koordinat hasil transformasi

x,y,z : koordinat titik awal

Tx,Ty, Tz : faktor penggeseran kearah x, y, z

2. Pembesaran (scaling)

( x’,y’,z’ ) = (Sx *x, Sy *y, Sz *z)

dengan Sx,Sy, Sz : faktor pembesaran kearah x, y, z

3. Perputaran (rotation)

a) terhadap sumbu x

( x’,y’, z’ ) = (x , y *cos θ +z*sinθ, - y *sinθ+z*consθ)

b) terhadap sumbu y

( x’,y’,z’ ) = ( x *cos θ +z*sinθ,y , - x *sinθ+z*consθ)

c) terhadap sumbu z

(x’,y’, z’ ) = ( x *cos θ +y*sinθ, - x*sinθ+y*consθ , z )

dengan θ : sudut putar berlawanan arah jarum jam


Bab 10.Teknik penampilan obyek 3 dimensi Pada sistem dua dimensi obyek gambar dua dimensi dapat langsung di

aplikasikan pada layar karena memiliki dimensi yang sama, kalaupun ada

perbedaan hanya pada arah sumbunya. Koordinat Cartesian memiliki sumbu

y arah ke atas, sedangkan koordinat layar sumbu y ke arah bawah. Akan

tetapi dengan sedikit modifikasi atau menggunakan fungsi bahasa

pemrograman tertentu misalnya Borland C++ 4.0 keatas dengan fungsi

terpasang, koordinat layar dapat disesuaikan dengan kordinat kartesian

dengan sumbu y ke arah atas.

Pada sistem tiga dimensi setiap titik memiliki 3 koordinat yaitu koordinat

x, y, dan z, sedangkan layar hanya memiliki sumbu x dan y. Oleh karena itu

diperlukan transformasi dari koordinat tiga dimensi atau disebut dengan

koordinat dunia menjadi koordinat dua dimensi.

Beberapa metode untuk menampilkan efek tiga dimensi pada layar dua

dimensi selain metode kamera sintetis yaitu proyeksi paralel, dan proyeksi

perspektif.

a. Proyeksi paralel

Proyeksi paralel merupakan teknik dasar untuk penyajian obyek tiga

dimensi pada layar dua dimensi, yang bertumpu pada 3 sudut pandang.

Pandangan depan, pandangan samping dan pandangan atas. Contoh

proyeksi paralel seperti pada gambar 1.

Untuk menggambarkan proyeksi paralel dalam tiga dimensi

diperlukan beberapa sudut pandang minimal atas, samping dan depan

kemudian di proyeksikan dalam koordinat tiga dimensi sehingga seperti

terlihat pada gambar 1.b.


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.


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


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 :


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.


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.


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.


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


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.


Bab 13.Rendering pada obyek 3 dimensi

Suatu obyek nyata dapat terlihat oleh mata bila obyek tersebut

terkena oleh cahaya dan memantulkan kembali cahaya tersebut ke mata

pengamat. Pada kenyataannya warna yang terlihat pada masing-masing

bagian obyek tersebut oleh mata pengamat tidaklah sama walaupun obyek

atau benda tersebut di cat dengan warna yang sama. Bagian yang

permukaannya tegak lurus dengan cahaya akan memiliki warna yang lebih

terang dibanding bagian lainnya.

Kecerahan warna pada permukaan suatu obyek ditentukan oleh

karakteristik sumber cahaya, karaketeristik permukaan, dan posisi relatif

sumber cahaya terhadap permukaan yang ditinjau seperti ilustrasi gambar 5.

Untuk menentukan intensitas cahaya yang mengenai suatu titik pada

permukaan diperlukan parameter intensitas cahaya (Is), reflektifitas

permukaan (kd), vektor normal (n), dan sudut θ yakni sudut antara vektor

normal dan arah cahaya (i).

Berdasarkan hukum Lambert intensitas cahaya yang sampai pada

suatu titik adalah

I = Is kd cos θ

Cosinus pada sudut θ dapat di wakili dengan dot product dari satuan

vektor n dan i, sehingga persamaan diatas menjadi

I = Is kd (n.i)

Bila terdapat beberapa sumber cahaya yang berpengaruh pada titik

tersebut maka persamaan menjadi

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

Dengan Ia kontribusi cahaya dari sekeliling sumber cahaya, dan Ij

adalah intensitas masing-masing sumber cahaya. Intensitas terbesar akan


terjadi pada titik permukaan yang memiliki sudut vektor i dan vektor n , yaitu

sudut θ bernilai 0 derajat. Pada kondisi ini intensitas cahaya yang jatuh pada

titik tersebut memiliki nilai terbesar. Bila intensitas bernilai negatif maka

bidang atau titik tersebut merupakan titik tersembunyi atau dibalik permukaan

yang tekena cahaya.

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)


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.


Bab 14.Pewarnaan

Pewarnaan pada grafika komputer merupakan unsur penting sebagai

upaya untuk menampilkan citra yang mendekati dengan bentuk dan warna

suatu obyek nyata.

Beberapa model pewarnaan yang dikenal yaitu model RGB, model

CMY, dan model HSV. Model RGB menggunakan warna dasar merah (red),

hijau(green), dan biru(blue) , sedangkan model CMY menggunakan warna

cyan, magenta, dan yellow sebagai warna dasar, dan model HSV berbasis

pada hue, saturation, dan value.

Warna-warna lain dapat dibuat merupakan kombinasi dari ketiga warna

tersebut dengan masing-masing intensitas warna dasar yang berbeda. Model

RGB dapat digambarkan dalam ruangan kotak 3 dimensi seperti gambar 6.

Gambar 6. Representasi warna model RGB

dengan koordinat black(0,0,0), white( 1,1,1), red( 0,0,1), green( 1,0,0), yellow(

1,0,1), magenta( 0,1,1), cyan(1,1,0), dan blue(0,1,0).

Berdasarkan model diatas maka suatu warna arsiran akan semakin terang

dengan menambah unsur putih pada setiap warna yang diproses, begitu juga

sebaliknya.


Bila diaplikasikan pada setiap poligon yang membentuk suatu obyek,

maka tingkat kecerahan setiap poligon di sesuaikan dengan intensitas

cahaya pada jatuh pada poligon tersebut.

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

keseluruhan untuk menampilkan obyek tiga dimensi di layar .

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


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.


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:


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


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


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;


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


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


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


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


#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


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:


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 !


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


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


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


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)


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


16.10Implementasi Poligon dan Arsiran Untuk membuat suatu obyek menjadi solid maka obyek tersebut harus

tersusun atas poligon-poligon. Poligon ini tidak harus segi empat, tetapi bisa

segitiga, dlsb sesuai dengan keperluan.

Langkah2 poligonisasi sebagai berikut.

1. Identifikasi titik-titik poligon yang membetuk suatu obyek, misal

poligon 1 adalah bagian depan kotak (titik 1, titik 2,tiitk 3, dan titik 4),

poligon 2 bagian belakang kotak (titik 5,titik 6, titik 7, dan titik8) dan

seterusnya.

(Identifikasi ini dilakukan sebelum proses transformasi ke koordinat layar

misal ,mulai nomor program 124 dst)

2. Urutkan posisi poligon tersebut berdasarkan nilai z-nya

(vpn_pers[I][2]), sehingga poligon dengan nilai z paling kecil diletakkan

kapa posisi pertama dst. Hal ini dilakukan agar proses pembuatan

arsiran dimulai dari poligon yang paling jauh (algoritma pelukis-

painter’s algorithm).

3. Bila tidak ada proses pengurutan maka poligon akan saling tumpang-

tindih. Nilai z ini dapat dihitung dari nilai z rata-rata titik-titik yang

membentuk poligon

4. Lakukan transformasi ke koordinat layar

5. Gambar poligon beserta arsiran setiap poligon(brush)

Untuk menggambar poligon maka perintah Polyline diganti menjadi

Polygon, sedangkan untuk mengarsir, sebelum perintah poligon,

perlu diatur arsiran sbb

Canvas ->Brush-> Color=warna arsir

Sampai langkah ini realitas obyek sudah mulai nampak , yakni bagian

yang berada di belakang tidak nampak lagi, akan tetapi realitas ini masih

dapat ditingkatkan yakni dengan efek rendering , yaitu perubahan warna

akibat pencahayaan dari posisi tertentu (tidak di bahas disini, ada di buku-

buku referensi grafika komputer), shadowing, yaitu efek bayangan.


Bila obyek yang akan di proses memilki cakupan yang besar, maka agar

proses komputasi lebih cepat diperlukan clipping atau pemotongan (teori ada

di berbagai buku referensi).

16.11Implementasi Program Untuk menerapkan visual realism dasar dilakukan tahapan sbb

1. Bari aplikasi sebelumnya ubahlah semua kode

……Polyline…. menjadi …Polygon ………misal :

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


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


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


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;


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


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

{


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


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



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




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





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


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


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


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{


__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


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;


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


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




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




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


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




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




//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[3]=vpn_k[11][0];




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




//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[8].y[3]=vpn_k[11][1];p[8].z[3]=vpn_k[11][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];




4. Modifikasi bagian penggambaran poligon sbb…POINT g1[4];g1[0]=Point(p[1].x[1],p[1].y[1]);g1[1]=Point(p[1].x[2],p[1].y[2]);g1[2]=Point(p[1].x[3],p[1].y[3]);g1[3]=Point(p[1].x[4],p[1].y[4]);


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


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 !


Bab 17.PENUTUP Metode kamera sitetis ini sangat fleksibel dalam memandang suatu obyek,

karena suatu obyek dapat dipandang dari berbagai sisi dan jarak. Bila obyek

yang akan divisualisasikan relatif besar misalnya simulasi bangunan

perkotaan, maka dengan mengubah titik VRP dan posisi kamera dengan

perubahan yang otomatis begitu suatu tombol (misal tombol panah pada

keyboard ) maka akan didapatkan animasi 3 dimensi dan pengamat seakan-

akan sedang beraktifitas di alam nyata.

Pada prinsipnya metode kamera sintetis memiliki 4 tahapan utama yakni

representasi obyek dalam koordinat dunia (koordinat x,y,z) , transformasi ke

koordinat bidang pandang (koordinat u,v,n), proyeksi perspektif pada bidang

uv, dan transformasi ke koordinat layar.

Realita visual (visual realism) akan menjadi lebih baik dengan adanya

proyeksi perspektif pada bidang uv karena obyek yang jauh akan nampak

lebih kecil. Selain itu kesan 3 dimensi akan semakin nampak dengan adanya

rendering dan bayangan (shadowing), sehingga suatu obyek walaupun

warnanya homogen tetapi akibat pengaruh pencahayaan dari suatu tempat

maka kecerahan warna berbeda pada setiap titik atau setiap poligon yang

membentuk obyek tersebut selain itu akan muncul bayangan yang akan

mempertajam efek 3 dimensi.

Semakin tinggi kerapatan poligon per satuan luas maka gambar yang

muncul akan semakin halus, dengan konsekwensi beban memori akan

semakin tinggi pula. Melalui penambahan berbagai efek yang sering terjadi

di dunia nyata, sudah dapat dihasilkan kenyataan semu yang dapat

digunakan untuk memvisualkan atau untuk simulasi dalam berbagai hal.


DAFTAR PUSTAKA

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

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

Engineer. Singapore:John Wiley & Son, Inc.

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

Addison-Wesley Publisihing Company.

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

McGraw Hill. 2th edition.

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

International

Insap Santoso, Ir., M.Sc. 1994. Grafika Komputer dan Antar Muka Grafis. Andi

Offset . Yogyakarta. Cetakan I.

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

Graphics. McGraw Hill

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

edition

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

Graw Hill. Third Edition.

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

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

Yogyakarta. Edisi Pertama.

Surya Setiawan, MSc. 2000. Diktat Kuliah Grafika Komputer Fakultas

Universitas Indonesia. Jakarta

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

Yogykarta.

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

Ilmu. Yogyakarta


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

Penerbit Informastika. Bandung


Grafika Komputer-In Editing2

Documents

Transcript of Grafika Komputer-In Editing2