Grafika Komputer-in Editing2

Untuk kalangan sendiri Untuk Kalangan sendiri

Handouts Grafika Komputer Handouts

Grafika Komputer Edisi I

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 1

Kata Pengantar

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 2

Daftar Isi

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 3

Daftar Tabel

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 4

Daftar Gambar

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 5

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

1.1 Implementasi Grafika Komputer Aplikasi grafika komputer adalah program komputer yang dirancang khusus untuk menghasilkan grafis datau representasi visual dari data ke dalam bentuk gambar, slide dan sebagainya. Ruang lingkup aplikasi grafika komputer sangat luas mencakup dari sekedar proses interaktif. Selain itu ruang lingkup aplikasi grafika komputer

mulai dari bidang dua dimensi

sampai ke ruang tiga dimensi, mulai dari pemodelan benda sederhana sampai ke representasi data geografis. Aplikas grafika komputer dapar dibagi mejadi beberapa kelompok, yaitu : 

Aplikasi pengolah Bentuk dan Citra



Presentasi



CAD (Computer Aided Design)



Animasi



Representasi Data



Permainan

1.1.1 Aplikasi Pengolah Bentuk dan Citra Aplikasi Pengolah bentuk dan Citra merupakan aplikas yang banyak digunakan oleh Desaigner grafis dan ilustrator. Aplikasi pengoleh Bentuk ditujukan untukmengolah bentuk (Shape) yang disusun dari serangkaian garis sedangkan Aplikasi pengolah Citra ditujukan untuk memanipulasi sekumpulan titik yang membentuk sebuah gambar (Citra). Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 6

Bentuk/Shape  Shape/bentuk tidak akan berubah kehalusannya meskipun diubah ukurannya  Gambar yang dibuat/direkayasa dari bentuk geometri  Contoh aplikasi Pengolah bentuk

antara lain Corel Drow, Adobe

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

1.1.2 Presentasi Aplikasi presentasi banyak digunakan oleh kalangan bisnis dalam mempresentaskan

ide-ide

ataupun

konsep-konsep.

Dalam

perkembangannya, aplikas presentas tidak hanya sekedar menampilkan slide ke layar tetapi juga dilengkapi dengan fasilitas animasi.

(contoh aplikasi

presentasi antara lain : Power point, Marcomedia Flash)

1.1.3 CAD (Computer Aided Design) Aplikasi CAD banyak digunkan dalam bidang Teknik. Dengan menggunkan CAD seorang perancang teknik tidka lagi menggunakan meja gambar dan kertas tetapi mengunakan komputer sebagai media.

Contoh

Aplikasi CAD . Contoh aplikasi CAD antara lain AutoCad untuk aplika teknik/rekaya bangunan/mesin, Protel untuk aplikasi rekyasa elektronik, Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 7

Home Designer

untuk aplikasi design anterior dan NuGraf untuk aplikas

pemodelan benda tiga dimensi.

1.1.4 Animasi Aplikasi animasi merupakan aplikas yang banyak digunakan dalam bidang periklanan dan Film. Dengan mengunakan aplikasi animasi, seorang kreator dapat menciptakan benda-benda maya yang dapat bergerak dalam dunia nyata.

Contoh aplikasi animasi antara lain Autodesk 3D Studio,

Extreme 3D, Animator Pro, Ray Dream Studio.

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

1.1.6 Permainan Saat ini hampir tidak ada aplikas permainan komputer yang tiak memanfaatkan modus grafik. Aplikasi permainan antara lain aplikasi tembak dan lari (Shoot adn run), Aplikasi permainan strategi (war games), dll. 1. 3 SISTEM GRAFIKA KOMPUTER  Sistem grafika komputer pasif adalah sistem dimana operator tidak bisa berinteraksi secara langsung dengan gambar yang dibangkitkan.  Sistem Grafika komputer interaktif (interactive Computer Graphics) adalah sistem yang memungkinkan operator untuk berdialog langsung dengan apa yang terlihat pada layar komputer. 1.4 KOMPONEN LAYAR PENAMPIL Pada dasarnya, semua layar penampil dengan kemampuan grafis punya 3 komponen utama : -

Pengingat digital (frame buffer)

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 8

Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai elemennxm menunjukkan intensitas dari citra grafis yang akan ditampilkan -

Layar Penampil

-

Piranti pengendalian tampilan (Display controller) atau pengolah tampilann (Display processor) Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk ditampilkan ke layar penampil. Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke

display) dikembangkan tahun 60-an. Pada jenis ini pengingat digital berisi daftar tampilan (display list) atau tampilkan (display program) yang berisi perintah pengambaran titik, perintah penggambaran garis, dan perintah penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan mengubah data digital menjadi tegangan analog yang dipakai untuk memancarkan elektron yang bisa mengenal tabung layar tampilan berlapis fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar. Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan atau ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan minimal 30 kali per detik untuk menghindari adanya kedip (flicker). Proses ini disebut sebagai penyegaran eletron (electron refreshing). Tampilan berdasarkan teknologi TV dan disebut raster display. Dikembangkan tahun 70an. Pada tampilan ini, garis, karakter dan bentukbentuk 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 hitamputih, warna hitam disajikan menggunakan bit 1, dan warna putih menggunakan bit 0. Untuk gambar berwarna pengaturan yaitu lebih rumit. Yang dimaksud dengan raster atau resolusi layar (screen resolution) adalah matrix piksel yang menutup seluruh permukaan layar tampilan. Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 9

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 10

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

2.2 Macam-macam Output/Grafis primitif 1. Titik (Pixel) Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar titik maka kita dapat menggambar obyek apapun. Termasuk bentuk geometri dibawah merupakan bentuk –bentuk yang pada dasarnya berasal dari titik-titik. Operasi titik ini sering digunakan pada pengolahan citra (Image processing). Setiap titik pada monitor memiliki parameter :koordinat dan warna. Kode untuk menggambar titik : Canvas-> Pixels[x][y] = warna Dengan x

: koordinat mendatar

y

: koordinat vertikal

Warna : warna pixel Contoh : Canvas->Pixel [100][100] = clRed;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 11

2. Garis (line) Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier dari titik awal sampai titik akhir Kode : Canvas->MoveTo(x0, y0); Canvas->MoveTo(x1, y1); ... Canvas->LineTo(xn, yn) Garis ini berawal dari titik koordinat (x0,y0) sampai ke (x1,y1) dan selanjutnya ke (xn,yn).

X0,y0

X2,y2 Xn,yn

X1,y1

Contoh

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

X2,y2

Keterangan : X1,y1:koordinat kotak awal X2,y2:koordinat kotak akhir (diagonal) Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 12

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

4. Lingkaran/Elip (Circle/Ellipse) Lingkaran adalah kumpulan titik yang melingkar dengan garis tengah mendatar dan vertikal sama, sedangkan untuk elip, garis tengahnya berbeda. x1,y1

x1,y1

X2,y2

X2,y2

Lingkaran

Elip

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

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

X4,y4

X2,y2

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 13

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

X4,y4

X2,y2

7. Pie/Juring Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat Juring. Canvas->Pie(x1, y1, x2, y2, x3, y3, x4, y4);

X3,y3 X1,y1

X4,y4

X2,y2

8. Poligon (Polygon)  Method Poligon digunakan untuk mengambar segi banyak Gambar yang terbentuk adalah kurva tertutup. Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 14

POINT Var[n[; Var[0] = point(x, y); Var[1] = point(x, y); ... Var[n] = point(x, y); Canvas->Polygon((TPOint*)Var, n); Dengan var : variabel n : jumlah titik yang membentuk poligon - 1 Contoh : POINT titik[4] Titik[0]=POINT(10,10);  a Titik[1]=POINT(100,10); b Titik[2]=POINT(150,100);c Titik[3]=POINT(50,150);d Titik[4]=POINT(0,50); e Canvas->Polygon((Tpoint*) titik,4);

Hasil: a

b

e

c d

9. Polyline  Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari suatu koordinat ke koordinat lainnya. Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 15

Gambar yang terbentuk adalah kurva terbuka. POINT var[n];

//deklarasi variabel

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

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

Hasil: a

b

e

c d

2.3 Atribut Output Primitif

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 16

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 17

2.3 Implementasi 2.3.1 Membuat Bentuk dengan dari Objek Geometri

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

__fastcall

TForm1::FormPaint(TObject *Sender) { Canvas->Brush->Color = clYellow; Canvas->Rectangle(0,0,650,300); Canvas->Brush->Color = clGray; Canvas->Rectangle(0,300,650,500); Canvas->MoveTo(200,200); Canvas->Brush->Color = clBlue; POINT

Titik[13];

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 18

Titik[1]=Point(520,170); Titik[2]=Point(560,350); Titik[3]=Point(520,350); Titik[4]=Point(500,310); Titik[5]=Point(460,310); Titik[6]=Point(440,350); Titik[7]=Point(300,350); Titik[8]=Point(280,310); Titik[9]=Point(240,310); Titik[10]=Point(220,350); Titik[11]=Point(160,350); Titik[12]=Point(180,250); Titik[13]=Point(240,250); Canvas->Polygon((TPoint*) Titik,13); Canvas->Brush->Color = clBlack; Canvas->Pen->Width = 14; Canvas->Brush->Style = bsCross; Canvas->Ellipse(450,315, 510, 390); Canvas->Ellipse(230,315, 290, 390); Canvas->Brush->Color = clRed; Canvas->Brush->Style = bsSolid; Canvas->Pen->Width = 5; POINT

Jendela[3];

Jendela[0]=Point(250,250); Jendela[1]=Point(265,180); Jendela[2]=Point(515,180); Jendela[3]=Point(530,250); Canvas->Polygon((TPoint*) Jendela,3); Canvas->MoveTo(330,180); Canvas->LineTo(330,250); Canvas->MoveTo(400,180); Canvas->LineTo(400,250); Canvas->MoveTo(470,180); Canvas->LineTo(470,250); } //--------------------------------------------------------------------------

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 19

Langkah 2 Buat menu dengan komponen TMainMenu terdiri dari Pen dan sub menu Pen adalah ”Style”, ”Color” ,”Width” Langkah 3 Buka File Upen.h (ctrl-F6) dan deklarasikan fungsi-fungsi berikut pada bagian public void _fastcall BersihkanCanvas(); void _fastcall SetDefault(); Langkah 4 Buka File Upen.cpp dan definisikan fungsi-fungsi tersebut pada bagain akhir kode program dengan menggunakan sintak berikut void _fastcall TForm1::BersihkanCanvas() { Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clWhite; Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight)); } //-------------------------------------------------------------------------void _fastcall TForm1::SetDefault() { Canvas->Pen->Width = 1; Canvas->Pen->Mode = pmCopy; Canvas->Pen->Style = psSolid; Canvas->Pen->Color = clBlack; } Langkah 5 Isikan

sintak

berikut

pada

event

OnClick

pada

item

“Style”

dari

komponen MainMenu1. void __fastcall TForm1::Style1Click(TObject *Sender) { //membuat 7 element array dari tipe TPenStyle TPenStyle JENIS[7] = { psSolid, psDash, psDot, psDashDot, psDashDotDot, psClear, psInsideFrame }; int posisiY = 20; //deklarasi posisiY dengan nilai awal 20 BersihkanCanvas(); //Memanggil Fungsi bersihkanCanvas() SetDefault();//memanggil Fungsi SetDefault() for (int j=0; j<7; j++) { Canvas->Pen->Style = JENIS[j];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 20

//menentukan koordinat awal Canvas->MoveTo(100, posisiY); //menggambar garis dari posisi awal sampai ke posisi ... // (Lebar layar - 10, posisiY) Canvas->LineTo(ClientWidth-10, posisiY); posisiY +=20; } //Menuliskan teks ke layar pada koordinat tertentu Canvas->TextOut(1, 10, "psSolid "); Canvas->TextOut(1, 30, "psDash "); Canvas->TextOut(1, 50, "psDot "); Canvas->TextOut(1, 70, "psDashDot "); Canvas->TextOut(1, 90, "psDashDotDot "); Canvas->TextOut(1, 110, "psClear "); Canvas->TextOut(1, 130, "psInsideFrame "); } //--------------------------------------------------------------------------

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

Langkah 6 Selanjutnya isikan sintak berikut pada event OnClick pada item ”Color” dari komponen MainMenu1 void __fastcall TForm1::Color1Click(TObject *Sender) { BersihkanCanvas(); SetDefault();

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 21

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

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

Langkah 7 Isikan Sintak dibawah ini untuk Event Onclick pada item ”Width” dari Komponen MainMenu1 void __fastcall TForm1::Width1Click(TObject *Sender) { int posisiY = 20; BersihkanCanvas(); SetDefault(); for (int i=0; i<10; i++) { Canvas->TextOut(10,posisiY, "Width = " + AnsiString(i)); Canvas->Pen->Width = i; Canvas->MoveTo(80, posisiY + 8); Canvas->LineTo(ClientWidth -10, posisiY + 8); posisiY +=20;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 22

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

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

2. Mengenal Brush Langkah 1 Buat aplikasi baru simpan untuk File Unit dengan nama Ubrush.cpp dan untuk File Project Brush.bpr. Kemudian menu dari komponen TmainMenu tambahan Menu dengan Caption ”&Brush” dan submenu dengan Caption ”Style” Langkah 2 Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada Bagian Public void _fastcall BersihkanCanvas(); Selanjutnya

deklarasikan

fungsi

BersihkanCanvas()

pada

File

Ubrush.cpp sebagai berikut void _fastcall TForm1::BersihkanCanvas() {

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 23

Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clWhite; Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight)); } //--------------------------------------------------------------------------Langkah 3 Isikan sintak berikut untuk event OnClick pada item ”Style” dari komponen MainMenu1 sebagai berikut //-------------------------------------------------------------------------void __fastcall TForm1::Style1Click(TObject *Sender) { BersihkanCanvas(); Canvas->TextOut(10,110, "bsClear"); Canvas->TextOut(120,110, "bsSolid"); Canvas->TextOut(240,110, "bsCrosh"); Canvas->TextOut(360,110, "bsBDiagonal"); Canvas->TextOut(10,250, "bsFDiagonal"); Canvas->TextOut(120,250, "bsDiagCross"); Canvas->TextOut(240,250, "bsHorizantal"); Canvas->TextOut(360,250, "bsVertical"); Canvas->Brush->Style = bsClear; Canvas->Rectangle(10,10,100,100); Canvas->Brush->Color = clRed; Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clBlue; Canvas->Rectangle(120, 10, 220, 100); Canvas->Brush->Style = bsCross; Canvas->Brush->Color = clGreen; Canvas->Rectangle(240, 10, 340, 100);

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 24

Canvas->Rectangle(10, 140, 100, 240); Canvas->Brush->Style = bsDiagCross; Canvas->Brush->Color = clBlue; Canvas->Rectangle(120, 140, 220, 240); Canvas->Brush->Style = bsHorizontal; Canvas->Brush->Color = clGreen; Canvas->Rectangle(240, 140, 340, 240); Canvas->Brush->Style = bsVertical; Canvas->Brush->Color = clRed; Canvas->Rectangle(360, 140, 460, 240);

} Jalankan

aplikasi pilih menu Style, akan mendapat hasil sebagai

berikut

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 25

Bab 3.KOORDINAT SISTEM DAN LAYAR 3.1 Pendahuluan Koordinat dapat diartinya sebagai tata keseimbangan yang membantu kita di dalam menentukan suatu kondisi dengan nilai dan batas dalam konteks geometri. Pada koordinat kartesius arah vertikal digunakan sebagai sumbu y, dengan y positif ke atas dan arah ke bawah sebagai y negatif, arah mendatar digunakan sebagai sumbu x dan x positif ke arah kanan dan x negatif ke arah kiri.

Tetapi

layar

monitor

menggunakan

orientasi

berbeda.

Monitor

mengunakan arah ke bawah sebagai sumbu y positif, disamping itu monitor juga tidak mengenal nilai negatif. Pada komputer grafik, ada 3 macam sistem koordinat yang harus kita perhatikan, yaitu 1. Koordinat Nyata 2. Koordinat Sistem 3. Koordinat Tampilan atau Layar

3.2 Koordinat Nyata (World Coordinat) Yang dimaksud dengan koordinat nyata adalah koordinat yang pada saat itu object bersangkutan berada.

Dalam bahasa Inggris disebut real

world coordinate untuk menghindari

kerancuan dengan istilah world

coordinate yang digunakan untuk GLOBUS.

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

dimensi ke 1

2 D,

dimensi ke 2

3 D,

dimensi ke 3

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 26

4 D,

dimensi ke 4

5 D,

dimensi ke 5, dan seterusnya

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

x

z

x Sistem koordinat 2D

Sistem Koordinat 3D

Gambar 3.1 Dimensi Sistem Koordinat

3.4 Sistem koordinat dua dimensi Sistem koordinat Kartesius dalam dua dimensi umumnya didefinisikan dengan dua sumbu yang saling bertegak lurus antar satu dengan yang lain, yang keduanya terletak pada satu bidang (bidang xy). Sumbu horizontal diberi label x, dan sumbu vertikal diberi label y. Pada sistem koordinat tiga dimensi, ditambahkan sumbu yang lain yang sering diberi label z. Sumbu-sumbu tersebut ortogonal antar satu dengan yang lain. (Satu sumbu dengan sumbu lain bertegak lurus.) Titik pertemuan antara kedua sumbu, titik asal, umumnya diberi label 0. Setiap sumbu juga mempunyai besaran panjang unit, dan setiap panjang tersebut

diberi

tanda

dan

ini

membentuk

semacam

grid.

Untuk

mendeskripsikan suatu titik tertentu dalam sistem koordinat dua dimensi, nilai

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 27

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 28

Tabel 3. 1 Tabel Kuadran Sistem Koordinat Kartesius Kuadran I II III IV

Nilai

nilai

x >0 <0 <0 >0

y >0 >0 <0 <0

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

(0,0)

Y Gambar 3.3 Sistem Koordinat Layar Perbedaan koordinat layar dengan sistem koordinat yang lain adalah posisi nilai 0 untuk sumbu x dan Y. Ada yang menempatkan sumbu (0,0) pada kiri atas dan ada juga yang meletakkan pada kiri bawah.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 29

3.5 Konversi Koordinat 3.5.1 Konversi dari koordinat Nyata ke Sistem Konversi

dari

koordinat

nyata

ke

sistem

dilakukan

dengan

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

Real World

Koordinat sistem (1)

Koordinat Sistem (2)

Koordinat Sistem (3)

Gambar 3.4 Koordinat Sistem Contoh di atas menunjukkan bahwa ada banyak kemungkinan untuk konversi nilai koordinat nyata ke koordinat sistem.

Masing-masing posisi

memiliki kelemahan dan kelebihan untuk proses selanjutnya. Dengan demikian

untuk

menentukan

nilai

sistem

koordinat

juga

perlu

mempertimbangkan bagaimana langkah selanjutnya. Jika kita sudah menentukan nilainya, langkah selanjutnya adalah memproses nilai tersebut untuk sistem koordinat. Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 30

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

Koordinat Sistem (3)

Koordinat Layar

Gambar 3.5 Konversi Koordinta Sistem ke layar Pada contoh di depan, gambar yang ditampilkan di layar muncul secara terbalik karena sistem nilai antara koordinat sistem dan layar berbeda. Agar gambar dapat tampil dengan sempurna, maka jika ada nilai sumbu koordinat yang negatif, nilai tersebut harus diubah menjadi positif terlebih dahulu dengan menggeser semua data yang terkait yang sama sementara nilai sumbu Y dibalik. Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2

tetap

seperti semula.Untuk mengkonversi koordinat sistem x dan y ke koordinat dilakukan perhitungan: Scr_x = x + midx, dimana midx = max_x_screen/2

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 31

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

C

A

B

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

midy Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 32

midx

(400,640)

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

High Resolusion

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 33

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

Sumbu-Y Konstan Gerak(Y=Y+1) Gerak(Y=Y+1) Gerak(Y=Y+m)

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

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

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 35

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 36

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

4.5 Garis Bebas Garis bebas berbeda dengan garis horisontal, vertikal dan diagonal yang telah kita kenal. Untuk penayangannya pada layar tidak begitu sulit dan bentuk garis yang ditampilkan cukup sempurna. Garis bebas mempunyai ciri, yaitu antara 2 titik, P1 dan P2, selalu membentuk suatu sudut yang besarnya sangat bervariasi. Sudut ini lah yang menentukan kemiringan suatu garis atau disebut juga gradasi. Pengambaran

garis

bebas

salah

satunya

adalah

dengan

menggunakan algoritma Digital Differential Analyzer(DDA) adalah algoritma pembentukan garis berdasarkan berhitungan dx maupun dy, menggunakan rumus dy = m.dx. Algoritma DDA 1. Tentukan koordinat awal garis (x0,y0) 2. tentukan koordinat akhir garis (x1,y1) 3. Hitung jarak mendatar ke 2 titik (dx) Dx=x1-x0

4. Hitung jarak mendatar ke 2 titik (dy) Dy=y1-y0

5. Tentukan faktor pembagi (mencari yg lebih panjang) Apakah dx>dy,bila ya Step=dx

Bila tidak Step=dy

6. Hitung faktor penambah ke koordinat mendatar dan vertikal titik berikut (x_tambah,y_tambah) X_tambah=dx/step Y_tambah=dy/step

7. Buat loop mulai titik ke 1 sampai titik ke step Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 37

For k=1 to step

8. Hitung koodinat titik berikutnya X=x+x_tambah Y=y+y_tambah

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

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

BAB 5.TRANSFORMASI 2D 5.1 Transformasi Gambar dan grafik dapat dibuat berdasarkan prosedur dan atribut output primitif. Dalam aplikasi grafik diperlukan perubahan bentuk, ukuran dan posisi suatu gambar yang disebut dengan manipulasi. Perubahan gambar dengan mengubah koordinat dan ukuran suatu objek disebut transformasi geometri. Kata transformasi berarti berubah bentuk. Transformasi diperlukan untuk  mengubah (transform) posisi suatu objek dari suatu

tempat asal ke

posisi elemen grafik.  Memindahkan suatu objek dari suatu tempat ke tempat lain Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 38

 Memutar posisi suatu objek pada titik pusat  Mengubah ukuran suat objek baik memperkecil maupun memperbesar dari ukuran aslinya.  Menarik objek ke samping kiri atau kanan dan bahkan atas bawah. Transformasi

dasar

yaitu

translasi,

skala

dan

rotasi.

Selain

transformasi tersebut , masih ada transformasi lain yang biasa digunakan untuk mengubah suatu objek , seperti refleksi, streching/shear.

Ilustrasi

Tampak pada gambar dibawah ini

Gambar 5.1 Transformasi

5.2 Perpindahan (iTranslation) Translasi

adalah

transformasi

terhadap

suatu

objek

dengan

menggesernya dari suatu posisi ke posisi lain. C’ C ty tx A

A’

B’

B

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 39

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

P(x,y)

P1(x+tx, y)

P3(x+(-tx),y)

P4(x, y-ty) Gambar 5.3 Translasi (2) Contoh translasi Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan sistem koordinat

A(10, 10), B(30, 10) dan C(10, 30) dengan translasi

vektor (10, 20), pertama-tama dihitung hasil translasi satu demi satu. Penyelesaian

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 40

Titik A x’A = xA + tx = 10 + 10 = 20 y'A = yA + ty = 10 + 20 = 30 Hasil translasi titik A’(20, 30) Titik B x’B = xB + tx = 30 + 10 = 40 y'B = yB + ty = 10 + 20 = 30 Hasil translasi titik B’(40, 30) Titik C x’C = xC + tx = 10 + 10 = 20 y'C = yC + ty = 30 + 20 = 50 Hasil translasi titik C’(20, 50) Dengan demikian hasil translasi merupakan segitiga dengan koordinat A’(20, 30), B’(40, 30), C’(20, 50) Latihan : 1. Coba Gambarkan proses tranlasi tersebut 2. Geser objek ABC ke kanan 30 pixel 3. Geser objek ABC ke bawah 10 pixel 4. Terdapat segiempat ABCD dengan koodinat sebagai berikut A(40, 100), B(70, 100), C(70, 70), D(40, 70) a. Translasikan objek ABCD dengan translasi vektor (15, 30) b. Geserlah objek ABCD ke kiri 40 pixel c. Gambarkan Objek ABCD dan kedua proses transalasi A dan B

5.3 Penskalaan (scalling) Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu yang mengakibatkan berubahnya ukuran obyek secara keseluruhan. Perubahan ukuran suatu objek menghasilkan

koordinat baru.

Koordinat baru diperoleh dengan melakukan perkalian koordinat dengan skaling faktor , yaitu (sx, sy), dimana sx adalah scaling factor menurut sumbu x, sedangkan sy adalah scaling faktor menurut sumbu y. Koordinat baru titik yang diskala dapat diperoleh dengan rumus x’ = x . Sx y’ = y . Sy

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 41

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

digunakan pada program

aplikasi.

Contoh skala Segitiga

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

dan vertikal 0,5 kali.Hitung hasil transformasi dan gambarkan hasil. Penyelesaian : Sx=2, Sy=0,5 Xa’=xa*Sx=10*2=20

ya’=ya*Sy=20*0,5=10

Xb’=xb*Sx=50*2=100

yb’=yb*Sy=20*0,5=10

Xc’ =xc*Sx=10*2=20

yc’=yc*Sy=100*0,5=50

Sehingga A’(20,10),B’(100,10),C’(20,50) Gambar 100 90 80 70 60 50 40 30 20 10

asal

hasil

10 20 30 40 50 60 70 80 90 100 110

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 42

Gambar 5.4 Skala

5.4 Perputaran (Rotation) Rotasi dapat diartikan sebagai aksi perputaran suatu objek sebuah sudut θ dari posisi asal pada titik rotasi (r = Rotasion point). Yang berputar adalah titik objek tersebut. Rotasi dua dimensi pada suatu objek akan memindahkan objek tersebut menurut garis melingkar. Pada bidang xy. Untuk melakukan rotasi diperlukan sudut rotasi θ dan pivot point (xp, yp) atau rotation point dimana objek di rotasi. Nilai positif

dari sudut rotasi menentukan arah rotasi berlawanan

dengan jarum jam, dan sebaliknya nilai negatif akan memutar objek searah jarum jam. Persamaan X’=x*cos θ -y*sin θ Y’=x*sin θ + y*cos θ Dengan θ:adalah sudut putar Contoh Segitiga ABC diatas diputar 90o,hitung koordinat hasil dan gambarkan! Segitiga A(10,20),B(50,20),dan C (10,100) Penyelesaian θ=90o maka, xa’=xa*cos 90-ya*sin 90=10*0-20*1=-20 ya’=xa*sin 90+ya*cos 90=10*1+20*0=10 xb’=xb*cos 90-yb*sin 90=50*0-20*1=-20 yb’=xb*sin 90+yb*cos 90=50*1+20*0=50 xc ’=xc *cos 90-yc*sin 90=10*0-100*1=-100 Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 43

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

asal

60

hasil

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

Latihan 1. Terdapat

segiempat

A(10,10),B(100,10),C(100,100),dan

D(10,100)

diperbesar 2x hitung dan gambar hasil! 2. terdapat garis A(0,0) dan B(100,100) diputar –90o.hitung dan gambar hasil !

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 44

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

Kode Perintah dalam file Header public:

// User declarations

int x1, y1, x2, y2; int Tx, Ty; float Sx, Sy; __fastcall TForm1(TComponent* Owner); Kode Perintah dalam File Unit //--------------------------------------------------------------------------#include #pragma hdrstop #include "UtranSkal.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender) { //PaintBox1->Canvas->Pen->Color = clWhite;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 45

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 46

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

Jika Apilkasi dijalankan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 47

BAB 6. TRANSFORMASI 2D LANJUT 6.1 Transformasi Komposit dan Sistem Koordinat Homogen Suatu

transformasi

adalah

merupakan

komposisi

dari

sejumlah

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

m12 m22 m32

m13   x  m23   y  m33   1 

Matriks translasi T (t x , t y ) adalah :  1 0 tx  T (t x , t y ) =  0 1 t y   0 0 1  Matriks rotasi R (α ) adalah:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 48

 cos α R (α ) =  sin α  0

− sin α cos α 0

0 0 1

 sx  Matriks Skala S ( s x , s y ) =  0  0

0 xy 0

0 0 1

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

 − 1 0 0 Re f y =  0 0 0  0 0 1

Dan, matriks shear terhadap sumbu y dengan faktor shy, shy(s) adalah :  1 s 0 Shx =  0 1 0  0 0 1 Karena suatu transformasi komposit pada sutu titik itu dapat dipandang sebagai sejumlah transformasi dasar yang terjadi pada titik tersebut. Maka matriks dari dari transformasi komposit adalah hasil perkalian dari matriksmatriks transformasi dasar yang bersangkutan. M komposit = M n ...M 2 M 1 Contoh transformasi yang merupkana rotasi dari titik ( x r , y r ) dengan sudut α . Transformasi ini dapat dipandang sebagai sejumlah transformasi dasar: Translasi dari ( x r , y r ) ke titik origin  T (− x r ,− y r ) Rotasi di titik origin dengan sudut α → R (α ) Translasi dari titik origin ke ( x r , y r ) → T ( x r , y r )

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 49

Gambar 6.1 Transformasi Gabungan Matriks transformasinya adalah M = T ( x y , y r ) R(α )T (− x r ,− y r ) 1 0 =  0 1  0 0

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

− sin α cos α 0

0  1 0 − x r  0  0 1 − y r  1  0 0 1 

1 0 =  0 1  0 0

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

− sin α cos α 0

− x r cos α + y r sin α − x r sin α + y r cos α 1

   

Dalam aplikasi di grafika komputer kita mungkin akan mentrasformasikan sejumlah besar titik dengan transformasi yang sama. Demikian representasu koordinat homogen serta matriks transformasi ini maka transformasi komposit dapat dilakukan dengan menghitung matriks transformasi terlebih dahulu  cos α =  sin α  0

− sin α cos α 0

− x r cos α + y r sin α + x r  − x r sin α + y r cos α + y r   1

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 50

sebagai

berikut.

Dalam

pemrogramannya

bisa

diefisienkan

dengan

menggantikannya dengan perkalian berikut ini. x' = m11 x + m12 y + m13 y ' = m21 x + m212 y + m23

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

C

A

B

2 1

1

3

x

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

D = (1-3, 2-2) =(-2, 0) 2. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan: X’=x*cos θ -y*sin θ Y’=x*sin θ + y*cos θ Xa’ = (-2)*cos 60 –(-1) *sin 60 = 1* 0.5 – 1 * 0.866 = -0.134 Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232 Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660 Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500 Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000 Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000 Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000 Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732 3. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan A”=(2.866, -0.232) B”=(3.866, 1.500) C”=(3.000, 2.000) D”=(2.000, 0.268) Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah y D

C

2 1

C” A

B

B”

D” 1

A” 3

x

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 52

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

C

A

B

2 1

1

3

x

Jawab Aplikasi

Kode program

Jam.h //--------------------------------------------------------------------------#ifndef jam1H

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 53

#define jam1H //--------------------------------------------------------------------------#include #include #include <StdCtrls.hpp> #include #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published:

// IDE-managed Components

TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender); private:

// User declarations

public:

// User declarations __fastcall TForm1(TComponent* Owner);

float x1, x2, y1, y2, x,y; float xt1, xt2,

yt1, yt2, sudut;

float xs1, xs2,

ys1, ys2, dx, dy ;

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 54

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 55

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

Hasil

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 56

Bab 7.A N I M A S I

Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer pada bagian tertentu di layar, menvisualisasi cara kerja suatu alat bantu atau mekanisme tertentu, menampilkan keluaran program dengan gambar-gambar yang menarik dibanding hanya sederet angka, serta tak ketinggalan pula untuk programprogram permainan. Teknik Animasi 1. inbetweening Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari. Ide dasar dari teknik ini adalah dengan menentukan posisi awal dan posisi akhir dari objek, dan kemudian menghitung posisi objek yang baru, menghapus pada posisi semula dan menggambar objek pada posisi yang baru, sampai objek berada pada posisi akhir yang dituju.

Contoh Hiu Rancangan

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 57

Hiu.H //--------------------------------------------------------------------------#ifndef sharkH #define sharkH //--------------------------------------------------------------------------#include #include #include <StdCtrls.hpp> #include #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published:

// IDE-managed Components

TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer1Timer(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender); private:

// User declarations

public:

// User declarations __fastcall TForm1(TComponent* Owner);

int x1, y1, x2,y2,x3,y3; int xk1,yk1, xk2, yk2, xk3, yk3, xk4, yk4; int xl1, yl1, xl2, yl2, xl3, yl3; int xg1, yg1, xg2, yg2; POINT kapal[4]; POINT layar[3]; }; //--------------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------#endif //--------------------------------------------------------------------------Hiu.Cpp #include #pragma hdrstop #include "shark.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //---------------------------------------------------------------------------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 58

void __fastcall TForm1::PaintBox1Paint(TObject *Sender) { PaintBox1->Canvas->Pen->Width=1; PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); PaintBox1->Canvas->Rectangle(0,0, 617,250); PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); PaintBox1->Canvas->Rectangle(0,250, 617,473); xk1=70; yk1=250; xk2=120; yk2=250; xk3=140; yk3=220; xk4=50; yk4=220; xg1=95; yg1=220; xg2=95; yg2=200; PaintBox1->Canvas->MoveTo(70,250); PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); kapal[0] = Point(70,250); kapal[1] = Point(120,250); kapal[2] = Point(140,220); kapal[3] = Point(50,220); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(95,220); PaintBox1->Canvas->LineTo(95,200); xl1=95;yl1=200; xl2=140; yl2=200; xl3=95; yl3=100; layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); PaintBox1->Canvas->MoveTo(617,200); PaintBox1->Canvas->Brush->Color=RGB(172,146, 25); POINT titik[5]; titik[0] = Point(617,200); titik[1] = Point(250,250); titik[2] = Point(500,275); titik[3] = Point(617,300); titik[4] = Point(617,200); PaintBox1->Canvas->Polygon((TPoint*)titik,4); PaintBox1->Canvas->Pen->Color=RGB(126,39, 22); PaintBox1->Canvas->Pen->Width=5; PaintBox1->Canvas->MoveTo(540,260); PaintBox1->Canvas->LineTo(520,150); PaintBox1->Canvas->Pen->Color=RGB(22,126, 88); PaintBox1->Canvas->LineTo(560,150); PaintBox1->Canvas->MoveTo(520,150);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 59

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

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

//warna latar (laut/biru tua)

POINT titikhiu[2]; titikhiu[0] = Point(x1,y1); titikhiu[1] = Point(x2,y2); titikhiu[2] = Point(x3,y3); PaintBox1->Canvas->Polygon((TPoint*)titikhiu,2); x1=x1+7; y1= 400; x2=x2+7; y2= 440; x3=x3+7; y3= 440; PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); //warna hiu PaintBox1->Canvas->Brush->Color=RGB(119,131, 127); //warna hiu titikhiu[0] = Point(x1,y1);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 60

titikhiu[1] = Point(x2,y2); titikhiu[2] = Point(x3,y3); titikhiu[3] = Point(x1,y1); PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3); if (x2 > 617) Close(); } //--------------------------------------------------------------------------void __fastcall TForm1::Timer2Timer(TObject *Sender) { PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); PaintBox1->Canvas->Pen->Color=RGB(172,243, 246); PaintBox1->Canvas->MoveTo(70,250); PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); POINT kapal[4]; kapal[0] = Point(xk1,yk1); kapal[1] = Point(xk2,yk2); kapal[2] = Point(xk3,yk3); kapal[3] = Point(xk4,yk4); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(xg1,yg1); PaintBox1->Canvas->LineTo(xg2,yg2); layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); xk1=xk1+2; yk1=250; xk2=xk2+2; yk2=250; xk3=xk3+2; yk3=220; xk4=xk4+2; yk4=220; xg1=xg1+2; yg1=220; xg2=xg2+2; yg2=200; xl1=xl1+2;yl1=200; xl2=xl2+2; yl2=200; xl3=xl3+2; yl3=100; PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); PaintBox1->Canvas->Pen->Color=RGB(0,0, 0); PaintBox1->Canvas->MoveTo(xk1,yk1); PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); kapal[0] = Point(xk1,yk1); kapal[1] = Point(xk2,yk2); kapal[2] = Point(xk3,yk3); kapal[3] = Point(xk4,yk4); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(xg1,yg1);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 61

PaintBox1->Canvas->LineTo(xg2,yg2); POINT layar[3]; layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); PaintBox1->Canvas->Pen->Width = 2; PaintBox1->Canvas->Pen->Color=RGB(0,0, 0); PaintBox1->Canvas->MoveTo(0,250); PaintBox1->Canvas->LineTo(250,250); if (xk2 > 250) Timer2->Enabled = false; } //--------------------------------------------------------------------------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 62

BAB 8.GRAFIKA 3D 8.1 Pendahuluan Salah satu bentuk perkembangan terakhir penerapan komputer dalam bidang grafika adalah pada aplikasi simulasi obyek tiga dimensi atau lebih dikenal dengan sebutan kenyataan semu (virtual reality-VR).

Aplikasi ini

dijumpai pada berbagai bidang dari yang sifatnya hiburan, rancang-bangun, sampai pada simulasi untuk keperluan riset ilmiah. Untuk mendukung adanya VR selain diperlukan suatu metode untuk memvisualisasikan obyek 3 dimensi pada layar 2 dimensi juga didukung perangkat keras

berupa monitor yang langsung dipakai seperti memakai

kacamata dan sensor-sensor yang dipakai oleh pemakai. Pada implementasi yang lebih sederhana dapat digunakan komputer yang dipakai sehari-hari

dengan layar monitor sebagai media penampil dan

berbagai alat input yang umum dipakai misalnya keyboard, mouse, joystick, dan lain sebagainya. Untuk menampilkan efek 3 dimensi pada layar 2 dimensi dengan animasinya dapat digunakan

metode analogi kamera sintetis. Dengan

metode ini suatu obyek nyata dapat dipandang dari kamera dari berbagai jarak dan sudut pandang. Dengan pandang kamera

mengubah

jarak,

sudut, dan arah

akan didapatkan efek gambar dan animasi 3 dimensi di layar dari suatu obyek.

Pada implementasinya, agar didapatkan kinerja yang optimum, setiap bagian dari obyek dibagi menjadi poligon-poligon, sehingga

titik-titik yang

diproses merupakan titik acuannya saja dan setiap titik dibentuk poligon dan diberi warna dengan kecerahan sesuai dengan

posisi terhadap sumber

cahaya sintetis. Dengan demikian kualitas gambar semakin baik bila kerapatan poligon persatuan luas semamin tinggi dengan konsekwensi beban memori menjadi lebih tinggi dan kecepatan proses rendah, sehingga animasi lebih kasar. Visualisasi obyek 3 dimensi dengan komputer ini memungkinkan suatu obyek 3 dimensi dapat dimanipulasi

dan hasilnya dapat langsung terlihat

secara visual. Selain itu suatu obyek juga dapat dilihat dari berbagai jarak Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 63

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 64

Bab 9.Transformasi pada obyek tiga dimensi Pada obyek tiga dimensi dapat dilakukan

3 transformasi pokok yaitu

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 65

Bab 10.Teknik penampilan obyek 3 dimensi Pada sistem dua dimensi obyek gambar dua dimensi dapat langsung di aplikasikan pada layar karena memiliki dimensi yang sama, kalaupun ada perbedaan hanya pada arah sumbunya. Koordinat Cartesian memiliki sumbu y arah ke atas, sedangkan koordinat layar sumbu y ke arah bawah. Akan tetapi dengan sedikit modifikasi pemrograman

atau menggunakan fungsi

tertentu misalnya Borland C++ 4.0 keatas

bahasa

dengan fungsi

terpasang, koordinat layar dapat disesuaikan dengan kordinat

kartesian

dengan sumbu y ke arah atas. Pada sistem tiga dimensi setiap titik memiliki 3 koordinat yaitu koordinat x, y, dan z, sedangkan layar hanya memiliki sumbu x dan y. Oleh karena itu diperlukan transformasi

dari koordinat tiga dimensi atau disebut dengan

koordinat dunia menjadi koordinat dua dimensi. Beberapa metode untuk menampilkan efek

tiga dimensi pada layar dua

dimensi selain metode kamera sintetis yaitu proyeksi paralel, dan proyeksi perspektif. a. Proyeksi paralel Proyeksi paralel merupakan teknik dasar untuk penyajian obyek tiga dimensi pada layar dua dimensi, yang bertumpu pada 3 sudut pandang. Pandangan depan, pandangan samping dan pandangan atas. Contoh proyeksi paralel seperti pada gambar 1. Untuk

menggambarkan

proyeksi

paralel

dalam

tiga

dimensi

diperlukan beberapa sudut pandang minimal atas, samping dan depan kemudian di proyeksikan dalam koordinat tiga dimensi sehingga seperti y

terlihat pada gambar 1.b.

y

x

z

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 66 y x

a. Bentuk obyek dalam tiga dimensi

b. Proyeksi pada bidang xy, pengamat terletak pada sumbu z Gambar 1. Proyeksi paralel ortogonal tiga dimensi Proyeksi parallel merupakan teknik yang relatif sederhana tetapi gambar yang ditampilkan masih sulit untuk dibayangkan sebagai image tiga dimensi, seperti pada gambar 1. Untuk itu dikembangkan cara lain yaitu dengan teknik proyeksi perspektif seperti pada gambar 2. b. Proyeksi perspektif y

y

y

z

z x

x

z

x

x

a. Gambar kotak 3 dimensi

b. Proyeksi pada bidang xy

Gambar 2. Proyeksi perspektif

Proyeksi perspektif yang dilihat

adalah

bentuk gambar tiga dimensi

seperti

pada kenyataan sesungguhnya seperti yang terlihat oleh

mata manusia ataupun kamera.

Teknik ini lebih menggambarkan

keadaan yang sesungguhnya tetapi untuk obyek dalam bentuk gambar rangka (wire frame)

untuk kedalaman tertentu

dapat menimbulkan

dualisme gambar. Misalnya bagian yang terkesan didalam kadang-kadang juga terkesan di luar.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 67

c. Kamera sintetis Metode pendekatan yang telah dibahas dengan teknik proyeksi diatas masih belum mampu menghasilkan efek 3 dimensi dengan baik. Pada proyeksi paralel yang terlihat oleh pengamat hanyalah bagian depan obyek sedang bagian yang lebih jauh untuk posisi x, dan y yang sama tak terlihat. Sedangkan pada proyeksi perspektif mata harus terletak pada sumbu koordinat z, yang berarti bidang pandang harus berimpit dengan bidang koordinat, misalnya xy.

Dengan ketentuan ini maka penyajian

obyek tiga dimensi menjadi terbatas. Untuk mengatasi hal tersebut

sebelum diproyeksikan diperlukan

proses transformasi rotasi sehingga suatu obyek dapat dipandang dari berbagai posisi, atas, bawah, samping dan lain sebagainya. Terdapat dua cara yang identik untuk memandang suatu obyek dari berbagai sisi yakni bidang pandang (view plane) pada posisi tetap, obyek diputar atau bidang pandang berputar sedangkan obyek tetap. Bila digunakan cara kedua dengan bidang pandang dianggap sebagai film dalam kamera, maka suatu obyek dapat di pandang dari berbagai sisi dengan menggerakkan dan memutar kamera. Metode ini sering disebut dengan metode kamera sitetis (synthetic camera) seperti pada gambar 3. Metode ini secar alengkap akan dibahas pada bab-bab berikutnya

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 68

Bab 11.Metode kamera sintetis Prinsip dengan metode kamera sitetis adalah sebagian obyek

mata akan melihat

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 .

yy

v VUP-arah atas Jarak pandang

u

VPN

•

N

x

bidang pandang z Titik acuanpandang (VRP)

Gambar 3. Sistem koordinat pandang dengan VRP adalah titik acuan pandang (view reference point), r = (rx,ry,rz), VPN adalah normal bidang pandang

( view-plane normal), N=

(nx,ny,nz). Untuk menentukan arah kamera diperlukan 3 komponen yaitu VRP, VPN, dan verktor v. Vektor r dan n dapat ditentukan secara bebas, sehingga vektor v dapat ditentukan dengan menggunakan sembarang vektor.

11.1 Tahapan Transformasi pada Metode Kamera Sintetis Langkah-langkah transformasi dari koordinat dunia menjadi koordinat bidang pandang adalah sebagai berikut : Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 69

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

yw V

U

N

V

U

N

xw xw zw

zw

2. Lakukan rotasi sedemikian sehingga sumbu z sama dengan vektor normal bidang

pandang (view plane

normal-VPN) atau sumbu n,

sumbu y sama dengan sumbu v , dan sumbu x sama dengan sumbu u.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 70

yw

yw V

V

U

U xw

xw

N

N zw

zw

yw

V U

xw

N zw

3. Menentukan

vektor

“arah atas “ (view-up direction)

pandang, dan putar obyek sejauh sudut

dari bidang

arah-atas dengan sumbu

vertikal. Arah-atas adalah arah dari sumbu u dari bidang pandang. 4. Lakukan proyeksi

paralel

atau proyeksi perspektif dari obyek yang

sudah dalam koordinat bidang pandang

dan masing-masing titik

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 71

5. Pemotongan (clipping) bagian-bagian yang akan dimunculkan pada jendela bidang pandang untuk mengalokasikan bagian-bagian dari obyek yang akan diproses dan tidak. 6. Menghapus bagian-bagian yang tersembunyi sehingga hanya bagian permukaan yang nampak oleh pengamat saja yang di tampilkan. 7. Menentukan vektor normal tiap poligon yang membentuk bidang tersebut untuk menetukan intensitas cahaya yang jatuh pada setiap poligon tersebut 8. Penggambaran obyek dengan warna tiap poligon disesuaikan dengan intensitas cahaya. Langkah nomor 1 sampai dengan langkah nomor 5 diatas akan menghasilkan simulasi tiga dimensi pada layar, akan tetapi

hasil yang

nampak masih sulit mengidentifikasi bagian-bagian yang seharusnya nampak dan tersembunyi, bagian yang jauh dan yang dekat. Untuk menyempurnakan proses diatas agar efek tiga dimensi semakin mendekati nyata dilakukan langkah dari nomor 6 dan seterusnya dengan konsep seperti yang dijabarkan dibawah ini.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 72

BAB 12.PERMUKAAN TERSEMBUNYI (HIDDEN SURFACE) Salah satu cara untuk menentukan bagian tersembunyi yang dibahas disini adalah dengan algoritma pelukis (painter’s algorithm) disamping cara lain misalnya back-face removal, z buffers, dan lain-lain.

Cara ini relatif

sederhana, didasarkan pada cara seorang pelukis menggambar suatu obyek di

kanvas.

Obyek atau bidang yang

terletak lebih jauh di lukis dahulu,

kemudian digambar obyek atau bidang yang lebih dekat dan seterusnya. Dengan

demikian

pada

lukisan

tersebut

sebetulnya

terjadi

penumpukan berbagai obyek yang memiliki letak sama. Bagian obyek yang nampak oleh pengamat adalah bagian yang paling dekat dengan pengamat. Penerapan metode ini pada grafika tiga dimensi digunakan untuk menunjukkan bagian yang nampak oleh pengamat. Semua poligon yang membetuk suatu obyek dihitung rata-rata nilai koordinat z-nya. Setelah itu diurutkan dengan urut naik. Poligon yang memiliki nilai z terkecil di gambar dulu dan seterusnya sampai pada poligon dengan nilai z rata-rata terbesar.

y

x

A B zx Gambar 4. Ilustrasi algoritma pelukis

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 73

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 74

Bab 13.Rendering pada obyek 3 dimensi Suatu

obyek

nyata dapat terlihat oleh mata

bila obyek tersebut

terkena oleh cahaya dan memantulkan kembali cahaya tersebut ke mata pengamat.

Pada kenyataannya warna yang terlihat pada masing-masing

bagian obyek tersebut oleh mata pengamat tidaklah sama walaupun obyek atau benda tersebut di cat dengan warna yang sama. Bagian yang permukaannya tegak lurus dengan cahaya akan memiliki warna yang lebih terang dibanding bagian lainnya. Kecerahan warna pada permukaan suatu obyek

ditentukan oleh

karakteristik sumber cahaya, karaketeristik permukaan, dan posisi relatif sumber cahaya terhadap permukaan yang ditinjau seperti ilustrasi gambar 5. Untuk menentukan intensitas cahaya yang mengenai suatu titik pada permukaan

diperlukan

parameter

intensitas

cahaya

(Is),

reflektifitas

permukaan (kd), vektor normal (n), dan sudut θ yakni sudut antara vektor normal dan arah cahaya (i). Berdasarkan hukum Lambert intensitas cahaya yang sampai pada suatu titik adalah I = Is kd cos θ Cosinus pada sudut θ dapat di wakili dengan dot product dari satuan vektor n dan i, sehingga persamaan diatas menjadi I = Is kd (n.i) Bila terdapat beberapa sumber cahaya yang berpengaruh pada titik tersebut maka persamaan menjadi I = Ia + ∑ Ij kd cos θ = Ia + ∑ Ij kd (ij.n) Dengan Ia

kontribusi cahaya dari sekeliling sumber cahaya, dan Ij

adalah intensitas masing-masing sumber cahaya. Intensitas terbesar akan Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 75

terjadi pada titik permukaan yang memiliki sudut vektor i dan vektor n , yaitu sudut θ bernilai 0 derajat. Pada kondisi ini intensitas cahaya yang jatuh pada titik tersebut

memiliki nilai terbesar. Bila intensitas bernilai negatif maka

bidang atau titik tersebut merupakan titik tersembunyi atau dibalik permukaan yang tekena cahaya.

i

n θ

i

Gambar 5. Menentukan intensitas cahaya pada permukaan

Untuk mendapatkan vektor i dapat digunakan persamaan i = (ai + bj + ck)/sqrt(a2+b2+c2) satuan vektor dengan a, b, c adalah arah sumber cahaya dari titik yang ditinjau intensitasnya. Suatu bidang yang akan ditinjau intensitasnya dapat diwakili oleh tiga titik pokok misalnya titik A, B, dan C, maka vektor normalnya berupakan cross product adalah vektor AB dan AC sehingga n = (AB X AC)/||ABX AC|| Setiap titik

pada

suatu bidang poligon dapat

dihitung nilai rata-rata n

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 76

Gambar 1. Arsiran akibat pengaruh cahaya. Gambar @ memperlihatkan pengaruh cahaya terhadap warna dan arsiran suatu bagian dengan cahaya berasal dari arah kiri atas.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 77

Bab 14.Pewarnaan Pewarnaan pada grafika komputer merupakan unsur penting sebagai upaya untuk menampilkan citra yang mendekati dengan bentuk dan warna suatu obyek nyata. Beberapa model pewarnaan yang dikenal yaitu model RGB, model CMY, dan model HSV. Model RGB menggunakan warna dasar merah (red), hijau(green), dan biru(blue) , sedangkan model CMY menggunakan warna cyan, magenta, dan yellow sebagai warna dasar, dan model HSV berbasis pada hue, saturation, dan value. Warna-warna lain dapat dibuat merupakan kombinasi dari ketiga warna tersebut dengan masing-masing intensitas warna dasar yang berbeda. Model RGB dapat digambarkan dalam ruangan kotak 3 dimensi seperti gambar 6.

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 78

Bila diaplikasikan pada setiap poligon yang membentuk suatu obyek, maka tingkat kecerahan setiap poligon

di sesuaikan dengan intensitas

cahaya pada jatuh pada poligon tersebut. Bagan pada gambar

7 menunjukkan garis-pipa (pipeline)

proses

keseluruhan untuk menampilkan obyek tiga dimensi di layar .

y

Deskripsi obyek tiga dimensi awal Pemodelan

x

koordinat z Pemodelan

v

transformasi Koordinat dunia u nz Transformasi ke

v

bidang pandang u

Koordinat pandang n

Operasi pemotongan, hapus bag. tersembunyi, diarrsir Normalisasi koordinat

v

proyeksi u Proyeksi perspektif dan Tranformasi ke koordinat

n

Koordinat layar

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 79

Bab 15.Parameter Obyek 3 dimensi Suatu obyek yang merupakan salah satu unsur keseluruhan obyek yang divisualisasikan dapat dibagi menjadi beberapa poligon.

Setiap poligon

memiliki parameter : x1, y1, x2, y2, x3, y3, x4, y4, dan warna, dan intensitas cahaya seperti pada ilustrasi gambar 8.

Ψ

sumber cahaya Warna

Vektor tegak lurus

X1,y1,z1

X2,y2,z2

bidang poligon X4,y4,z4 X3,y3,z3 poligon

Gambar 8. Pembagian poligon dan parameternya Koordinat sudut tersebut merupakan koordinat layar hasil transformasi dari koordinat dunia, sedangkan kecerahan warna tiap poligon sudah diperhitungkan posisi, dan arah vektor normal poligon terhadap letak sumber cahaya. Seperti pada contoh warna meja diatas, warna obyek adalah abu-abu. Akibat pengaruh cahaya yang terletak pada sisi kiri atas dari meja maka warna pada bidang bagian atas dengan sudut normal paling kecil adalah abu-abu syrah, dan seterusnya

sehingga bagian meja yang memiliki sudut

vektor paling besar terhadap sumber cahaya memiliki warna abu-abu gel.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 80

Bab 16.Algoritma dan Implementasi Grafis 3D 16.1 Visualisasi 3D-Statis Grafis 3D statis adalah tampilan dengan efek 3D tetapi tidak dapat dimanipulasi pengguna misal obyek dilihat dari sisi yang berbeda ataupun obyek yg dilihat berbeda. Hal ini terjadi karena nilai posisi kamera kx,ky,kz maupun titik fokus (view reference point-VRP) vrp_x,vrp_y,vrp_z

dibuat

konstanta. Pada algoritma ini

untuk mengubah posisi kamera maupun

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

1. Deklarasikan obyek dalam koordinat dunia  Misal

obyek

berbentuk

balok,

maka

tiap

titik

sudut

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

sebagai berikut.

Sturtur data: Baris Program : 2-12 Struct { Int x; koordinat x Int y; kooridnat y Int z;  kooridnat z }s[20]; titik pokok/sudut ke deklarasi/deskripsi/penjelasan posisi titik pokok obyek balok:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 81

s[1].x=0;s[1].y=0;s[1].z=250;//titik ke-1, koordinat x=0,y=0,z=250 s[2].x=250;s[2].y=0;s[2].z=250; s[3].x=250;s[3].y=250;s[3].z=250; s[4].x=0;s[4].y=250;s[4].z=250; s[5].x=0;s[5].y=0;s[5].z=0; s[6].x=250;s[6].y=0;s[6].z=0; s[7].x=250;s[7].y=250;s[7].z=0; s[8].x=0;s[8].y=150;s[8].z=0;

deklarasi tsb untuk menggambarkan bentuk balok sebagai berikut. y 7

8

4

3 5

1

6

x

2

z

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 82

S[2].x menunjukkan koordinat x titik sudut 2, dan seterusnya. 2. Tentukan letak kamera (View Plane Normal-VPN) Baris Program : 17-19 Misal : Kx=10; Ky=300; Kz=400; Artinya posisi kamera di koordinat x=10, y=100,z=100 Posisi kamera ini dpaat diatur dengan menggunakan tombol atau alat input lain 3. Tentukan fokus kamera(VRP-View Refference Point) Baris Program : 27-29 Misal : Vrp_X=50;vrp_y=50;vrp_z=50; Artinya titik fokus pandang di koordinat x=50,y=50,z=50 Posisi fokus ini dpaat diatur dengan menggunakan tombol atau alat input lain

4. Tentukan pusat proyeksi prespsktif Baris Program : 33-35 5. Deklarisikan matriks yang diperlukan  Matrks tranlasi obyek sejauh titik fikus dengan posisi kamera  Matriks rotasi, pada ke-3 sumbu (x,y,z)  Matriks proyeksi perpektif Baris Program : 41-76 6. Lakukan operasi perkalian matrix Baris Program : 77-105 7. Transformasikan koord obyek dalam koordinat dunia ke VPN Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 83

Baris Program : 107-111 8. Proyeksi perpektif ke bidang u-v Baris Program : 112-117 9. Membuat nilai 1 pada matriks ordo ke 3 Baris Program : 119-122 10. Transformasi koordinat caertesian ke koordinat layar, karena deskripsi obyek menggunakan koordinat cartesian, sementara penampil koordinat layar Baris Program : 126-130 11. Penggambaran obyek ke layar Baris Program : 136-184

16.2 Langkah untuk menghasilkan grafis 3D statis model rangka adalah sebagai berikut. 1. Buka C++ Builder 2. Buka Form baru 3. Buat

jendela

tampilan

dengan

komponen

PaintBox,Name:PaintBox1 (default) 4. tulis kode dibawah (Bold) pada Event->OnPaint void __fastcall TForm1::PaintBox1Paint(TObject *Sender) { //menentukan tiitk-titik pokok koorrdinat obyek balok s[1].x=0;s[1].y=0;s[1].z=250; s[2].x=250;s[2].y=0;s[2].z=250; s[3].x=125;s[3].y=500;s[3].z=125; s[4].x=125;s[4].y=500;s[4].z=125; s[5].x=0;s[5].y=0;s[5].z=0; s[6].x=250;s[6].y=0;s[6].z=0; s[7].x=125;s[7].y=500;s[7].z=125; s[8].x=125;s[8].y=500;s[8].z=125; //menentukan jumla obyek dan jumlkah titik sudut int jumlah_obyek=1; int max_titik=8;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 84

//------------------posisi kamera float kx=0; float ky=50; float kz=350; //---------------------------------//menenutkan jarak kamera dengan fokur float d=sqrt(kx*kx+ky*ky+kz*kz); float dxn=kx/d; float dyn=ky/d; float dzn=kz/d; //- fokus kamera atau titik pandang (VRP) float vrp_x=0; float vrp_y=0; float vrp_z=0; //------------------------------//vektor kemiringan kamera,asumsi kamera tegak lurus float dxup=0; float dyup=1; float dzup=0; //titik pusat proyeksi float xc=0

;

float yc=0

;

float zc=-100; //mennetukan batas bawah int batasbawah=PaintBox1->ClientHeight; //deklarasi

matriks proyeksi perpektif

float perspek[4][4]= { //0

1 2 3

{-zc,0,0,0},

//0

{0,-zc,0,0},

//1

{xc,yc,-1,1}, //2 {0,0,0,-zc}

//3

}; // matriks translasi titik koord. Cartesian (world coordinat) ke VPN float T[4][4]= { {1,0,0,0}, {0,1,0,0}, {0,0,1,0}, {-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1} }; // putar sehiongga vektor n sesuai sumbu z float v1=sqrt(dyn*dyn+dzn*dzn); // rotasi sumbu x float Rx[4][4]=

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 85

{ {1,0,0,0}, {0,-dzn/v1,-dyn/v1,0}, {0,dyn/v1,-dzn/v1,0}, {0,0,0,1} }; // rorasu sumbu y; float Ry[4][4]= { {v1,0,-dxn,0}, {0,1,0,0}, {dxn,0,v1,0}, {0,0,0,1} }; // mengalikan matriks Rx * Ry for (int i=0;i<=3;i++) { for (int k=0;k<=3;k++) Rxy[i][k]=Rx[i][0]

*

Ry[0][k]

+

Rx[i][1]

*

Ry[1][k]+

Rx[i][2]

*

Ry[2][k]+

Rx[i][3] * Ry[3][k]; } xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0]; yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1]; rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp); float Rz[4][4]= { {yup_vp/rup,xup_vp/rup,0,0}, {-xup_vp/rup,yup_vp/rup,0,0}, {0,0,1,0}, {0,0,0,1} }; // perklaian matriks dxy * dz for (int i=0;i<=3;i++) { for (int k=0;k<=3;k++) Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+ Rxy[i][3] * Rz[3][k]; } // perkalian matriks T dan Rxyz for (int i=0;i<=3;i++) { for (int k=0;k<=3;k++) TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+ T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 86

} //Trxyz : matrik gabungan rotasi ke 3 sumbu dan ttranlasi/matrik transformasi koordina dunia ke koordinat bidang padang // transfoemasi titik obyek ke VPN for (int i=1;i<=8;i++) // loop poligon { for (int k=0;k<=3;k++) // loop titik vpn_k[i][k]=s[i].x*TRxyz[0][k] + s[i].y * TRxyz[1][k]+s[i].z* TRxyz[2][k] + 1* TRxyz[3][k]; } //transfoemasi perpeksif for (int i=1;i<=8;i++) { for (int k=0;k<=3;k++) vpn_pers[i][k]=vpn_k[i][0]

*

perspek[0][k]

+

vpn_k[i][1]

*

perspek[1][k]

+

vpn_k[i][2] *perspek[2][k]+ vpn_k[i][3] * perspek[3][k]; } //membuat niali 1 pada matrix padaordo ke-4 for (int i=1;i<=max_titik;i++) { for (int k=0;k<=3;k++) vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3]; } int tengah=PaintBox1->ClientWidth/2; // trabsformasi ke koordinat layar for (int i=1;i<=max_titik;i++) { vpn_pers[i][0]=vpn_pers[i][0]+tengah; vpn_pers[i][1]=batasbawah-vpn_pers[i][1]-50; } //mmebuat jendela paint box dengan warna dasa putih PaintBox1->Canvas->Brush->Color=clWhite; PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1); //nggambar polyline //poligon 1 POINT t1[4];

//deklarasi variabel

t1[0]=Point(vpn_pers[1][0],vpn_pers[1][1]); t1[1]=Point(vpn_pers[2][0],vpn_pers[2][1]); t1[2]=Point(vpn_pers[3][0],vpn_pers[3][1]); t1[3]=Point(vpn_pers[4][0],vpn_pers[4][1]); t1[4]=Point(vpn_pers[1][0],vpn_pers[1][1]); PaintBox1->Canvas->Polyline((TPoint*)t1,4); //poligon 2 belakang POINT t2[4];

//deklarasi variabel

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 87

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

//deklarasi variabel

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

//deklarasi variabel

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

//poligon 5 kanan POINT t5[4];

//deklarasi variabel

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

//deklarasi variabel

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

5. Tambahkah kode pada file header (.h) sbb (yg dicetak Bold ¸cetak regular bawaan C++) //--------------------------------------------------------------------------#ifndef rangkaH

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 88

#define rangkaH //--------------------------------------------------------------------------#include #include #include <StdCtrls.hpp> #include #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published:

// IDE-managed Components

TPaintBox *PaintBox1; void __fastcall PaintBox1Paint(TObject *Sender); private:

// User declarations

public:

// User declarations __fastcall TForm1(TComponent* Owner);

float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4]; float vpn_p[8][4],TRxyz[4][4],vpn_k[8][5]; float vpn_pers[8][4]; struct titik{ int x; int y; int z; }s[50]; }; //---------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //---------------------------------------------------------------------#endif tambahkan kode pada file .cpp bagian atas (yg dicetak

Bold ¸cetak regular

bawaan C++)

//-------------------------------------------------------------------------#include #include <math.h>

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

6. jalankan program diatas

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 89

16.3 Grafis 3D dinamis/interactive Algoritma dan kode yang sudah dibahas pada bab-bab terdahulu masih bersifat dasar, yakni obyek masih statis dalam arti sudut, jarak pandang dan fokus pandang masih berupa konstanta. Dengan sedikit modifikasi maka 1. Sudut dan jarak pandang dapat diubah misal dikendalikan dengan tombol dengan mengatur nilai koordinat posisi kamera kx,ky, dan kz. 2. Titik fokus kamera dapat diubah untuk menentukan bagian obyek yang dapat dilihat dengan mengatur vrp_x,vrp_y, dan vrp_z. Untuk menampilkan grafis 3D dinamis model rangka maka program yang telah ada dimodifikasi dengan langkah sbb. 1. Buatlah tombol untuk mengggerakkan kamera pada form dengan contoh sbb

1 1

4 Paint Box 2 3

1:BitBtn1

2:BitBtn2 3:BitBtn3 4:BitBtn4

2. Tambahkan kode pada tombol BitBtn untuk membuat menggeser posisi kamera dengan counter sbb BitBtn1->Click: kamera_y=kamera_y+20; gambar(kamera_x,kamera_y); BitBtn2->Click:

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 90

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

catatan : Angka 20 pada counter menunjukkan posisi penggeseran setiap tombol diklik yang dapat diatur sesuai kebutuhan. Bila diinginkan pengeseran terasa halus/tahapan pelan maka nilai diperkecil dan sebaliknya 3. Pindahkan bagian program awal ini (untuk deskripsi obyek dan penentuan posisi kamera) ke Form1->Activated, sbb void __fastcall TForm1::FormActivate(TObject *Sender) { //deskripsi koordinat dunia dari obyek s[1].x=0;s[1].y=0;s[1].z=400; s[2].x=300;s[2].y=0;s[2].z=400; s[3].x=300;s[3].y=200;s[3].z=400; s[4].x=0;s[4].y=200;s[4].z=400; s[5].x=0;s[5].y=0;s[5].z=0; s[6].x=300;s[6].y=0;s[6].z=0; s[7].x=300;s[7].y=200;s[7].z=0; s[8].x=0;s[8].y=200;s[8].z=0; //posisi awal kamera kamera_x=50.0; kamera_y=50.0; /* 8-----------7 ! 4-----------3

! !

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 91

!

5--!-------6

1---------- 2 */ } //--------------------------------------------------------------------------

4. Buatlah fungsi Gambar() pada editor, dan pindahkan kode yang ada pada PaintBox1 ->Paint ke fungsi gambar() seperti dibawah ini void _fastcall TForm1::gambar(float kamx,float kamy) { //menetukan jujlkah obyek dan jumlkah titik sudut PaintBox1->Canvas->Brush->Color=clWhite; PaintBox1->Canvas->Rectangle(1,1,ClientWidth1,ClientHeight-1); int jumlah_obyek=1; int max_titik=8; //------------------posisi kamera float kx=kamx; float ky=kamy; float kz=800; //---------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz); float dxn=kx/d; float dyn=ky/d; ……………….. ……………………..

sesuai program sebelumnya

………………. t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]); t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]); t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]); PaintBox1->Canvas->Polyline((TPoint*)t6,4); }

5. Tambahkan kode pada file header sbb (yg di ketik Bold) Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 92

……………..

public:

// User declarations __fastcall TForm1(TComponent* Owner);

void _fastcall gambar(float,float); float

Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4],

TRxyz[4][4],vpn_k[8][5]; float vpn_p[8][4],vpn_pers[8][4]; float kamera_x,kamera_y,kamera_z; ……………

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

16.4 Realitas Visual Grafis 3D(3D Graphics Visual Realism) Yang dimaksud realitas grafis 3D adalah bagimana membentuk suatu obyek 3D agar sesuai dengan

kenyataan suatu obyek yang dilihat sehari-hari.

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

16.5 Pewarnaan dan Arsiran (brush) Terdapat 3 metode pewarnaan dalam grafis baik untuk mewarnai garis (Pen) maupun mengarsir poligon (Brush) 1. dengan variabel default (bawaan C++ Builder). Biasanya digunakan untuk warna2 dasar untuk mewarnai garis Canvas->Pen->Color=clRed ;//garis warna merah untuk mewarnai arsiran Canvas->Brush->Color=clRed ;//arsiran warna merah

clRed : merah Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 93

clBlue:biru clBlack:hitam clYellow:kuning dll 2. dengan RGB RGB merupakan warna yang dihasilkan kombinasi dari Red[R]Green[G]-Blue[B], dengan nilai R:0-255

G:0-255

B:0-255, nilai 0

pada masing2 warna adalah hitam , dan 255 adalah warna maksimal untuk mewarnai garis Canvas->Pen->Color=RGB(100,100,100)

;//garis

warna

;//arsiran

warna

abu2 untuk mewarnai arsiran Canvas->Brush->Color=RGB(0,255,0) hijau  kombinasi warna dapat dilihat di custom color Msword 3. dengan CMY CMY seperti haknya RGB meruppakan warna yang dikombinasikan Cyan[C],Magenta[M], Yellow[Y] tidak dibahas disini 4. dengan HSL HSL seperti haknya RGB meruppakan warna yang dikombinasikan Hue[H],Saturation[S], Lamp[LY] tidak dibahas disini

16.6 Gaya arsiran (style) Arsiran dari suatu poligon dapat dibentuk dalam beberapa macam dengan perintah arsiran adalah Canvas->Brush->Style=arsiran Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 94

Arsiran:

16.6.1bsSolid: arsiran homogen/solid/pejal

Pen->Color:clBlue

bsCross:arsiran kotak-kotak

Pen->Style:psDot

bsDiagonal: arsiran bergaris diagonal bsVertical: arsiran bergaris tegak bsHorisontal: arsiran bergaris mendatar dll Brush->Color:clBlack

16.7 Mode Pen

Brush->Style:csDiagonal

Garis yang membetuk suatu obyek juga dapat dibentuk Canvas->Pen->Style=bentuk Bentuk: psSolid :garis homogen psDot:garis berbentuk titik-titik psDash: garis berbentuk garis kecil2 psDashDot: garis berbentuk kombinasi dash dan dot

16.8 Membuat arsiran pada grafis 3D 1.

Ubah perintah Polyline (membentuk bagan sisi banyak ->2- tetapi berbentuk rangka/kawat (wireframe) menjadi Polygon (dapat diarsir/di blok)

2.

tulis perintah untuk membuat arsir sebelum masing-masing polygon Canvas->Brush->Color=warna

3.

jalankan

4.

akan terlihat bahwa tampilan gambar belum dapat diidentifikasi secara jelas –saling tumpang tindih (bentuk belum riil), karena proses

penggambaran

poligon

belum

memenuhi

kaidah/algoritma pelukis (painter’s algorithm) Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 95

16.9 Algoritma pelukis (painter’s algorithm) Algoritma pelukis adalah cara/urutan mengarsir suatu obyek yang saling menutupi dimulai dari yang terjauh (dari pengamat) dulu. Maka agar pada grafis 3D poligon yang jauh akan tertutup oleh poligon yang dekat dengan pengamat, maka setiap poligon harus diurutkan proses pembuatannya dimulai dari yang terjauh dari pengamat/user (nilai koordinat z paling kecil) Untuk mengurutkan poligon , maka nilai koordinat z dari setiap poligon harus dihitung rata-rata dari ke empat titik yg membetuk poligon. Berdasarkan z rata-rata setiap poligon ini maka proses penampilan poligon dimulai dari yg bernilai z terkecil (ditulis paling atas pada program)

Poligon tanpa algoritma pelukis

Poligon dengan algoritma pelukis

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 96

16.10Implementasi Poligon dan Arsiran Untuk membuat suatu obyek menjadi solid maka obyek tersebut harus tersusun atas poligon-poligon. Poligon ini tidak harus segi empat, tetapi bisa segitiga, dlsb sesuai dengan keperluan. Langkah2 poligonisasi sebagai berikut. 1. Identifikasi titik-titik

poligon yang membetuk suatu obyek, misal

poligon 1 adalah bagian depan kotak (titik 1, titik 2,tiitk 3, dan titik 4), poligon 2 bagian belakang kotak (titik 5,titik 6, titik 7, dan titik8) dan seterusnya. (Identifikasi ini dilakukan sebelum proses transformasi ke koordinat layar misal ,mulai nomor program 124 dst) 2. Urutkan

posisi

poligon

tersebut

berdasarkan

nilai

z-nya

(vpn_pers[I][2]), sehingga poligon dengan nilai z paling kecil diletakkan kapa posisi pertama dst. Hal ini dilakukan agar proses pembuatan arsiran dimulai dari poligon yang paling jauh (algoritma pelukispainter’s algorithm). 3. Bila tidak ada proses pengurutan maka poligon akan saling tumpangtindih. 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 bukubuku referensi grafika komputer), shadowing, yaitu efek bayangan.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 97

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

16.11Implementasi Program Untuk menerapkan visual realism dasar dilakukan tahapan sbb 1. Bari aplikasi sebelumnya ubahlah semua kode ……Polyline…. menjadi …Polygon ……… misal : PaintBox1->Canvas->Polyline((TPoint*)t6,4);

Diganti menjadi PaintBox1->Canvas->Polygon((TPoint*)t6,4);

2. Tambahkan perintah untuk mengarsir poligon sebelum/diatas perintah poligon dengan ……… Canvas->Brush->Color=warna.. warna, warna arsiran dapat diatur dengan (i) konstanta, misal

biru -> clBlue merah -> clRed kuning->clYellow

misal : ……… Canvas->Brush->Color=clBlue; arsir biru

(ii) kombinasi RGB(Red Green Blue-Merah Hijau Biru) misal : ……… Canvas->Brush->Color=RGB(200,100,0) artinya nilai Red:100, Green 100, Blue:0 masing-masing warna memiliki range 0-255 misal poligon berwarna merah, maka tambahkan perintah arsir pada setiap poligon sbb Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 98

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

……………….

3. Jalankan aplikasi, amati yang terjadi ! Mengapa gambar balok belum seperti yang diharapkan ? artinya wujud balok masih kacau ?

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

16.133D Graphics Interactive Grafis 3D yang telah dibuat sebelumnya masih bersifat statis, artinya grafis belum dapat dikendalikan/dimanipulasi. Agar grafis dapat dikendalikan maka sekurang-kurangnya parameter untuk posisi kamera dapat diatur, misalnya menggunakan tombol

untuk menggerakkan ke:kiri,kanan,atas,bawah,

sehingga program yang ada di modifikasi menjadi sbb. 1. Buatlah form sbb Form1 Name: Paintbox1

Name: Name:Kanan Kanan Name: Atas

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 99

Name: Kiri Name: Bawah

Auto Name:Auto

2. Buatlah fungsi tersendiri untuk menampilkan grafis, sementara progtram untuk nilai awal (identifikasi obyek dalam koordina dunia) dimasukkan dalam event Form-Active sbb void __fastcall TForm1::FormActivate(TObject *Sender) { //deskripsi koordinat dunia dari obyek s[1].x=0;s[1].y=0;s[1].z=200; s[2].x=300;s[2].y=0;s[2].z=200; s[3].x=300;s[3].y=100;s[3].z=200; s[4].x=0;s[4].y=100;s[4].z=200; s[5].x=0;s[5].y=0;s[5].z=100; s[6].x=300;s[6].y=0;s[6].z=100; s[7].x=300;s[7].y=100;s[7].z=100; s[8].x=0;s[8].y=100;s[8].z=100; s[9].x=0;s[9].y=0;s[9].z=0; s[10].x=300;s[10].y=0;s[10].z=0; s[11].x=300;s[11].y=200;s[11].z=0; s[12].x=0;s[12].y=200;s[12].z=0; //posisi awal kamera kamera_x=100.0;kamera_y=100; /* 8-----------7 !

!

4-----------3 !

!

5--!-------6

1---------- 2 */ }

3. Buat fungsi sendiri misal : fungsi gambar() untuk menampilkan grafis3d Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 100

void _fastcall TForm1::gambar(float kamx,float kamy) { //menetukan jujlkah obyek dan jumlkah titik sudut PaintBox2->Canvas->Brush->Color=clWhite; PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1); int jumlah_obyek=1; int max_titik=8; int max_poli=6; //------------------posisi kamera float kx=kamx; float ky=kamy; float kz=500; //---------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz); float dxn=kx/d; float dyn=ky/d; float dzn=kz/d; //--- fokus kamera atau titik pandang (VRP) float vrp_x=0; float vrp_y=0; float vrp_z=0; //------------------------------//mengantur kemiringan kamera float dxup=0; float dyup=1; //tegak float dzup=0; //pusat proyeksi float xc=0

;

float yc=0

;

float zc=-3000; //mennetukan batas bawah int batasbawah=PaintBox2->ClientHeight;

// matriks proyeksi perpektif float perspek[4][4]= { //0

1 2 3

{-zc,0,0,0},

//0

{0,-zc,0,0},

//1

{xc,yc,-1,1},//2 {0,0,0,-zc}

//3

}; // matriks translasi titik WRC ke VPN

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 101

float T[4][4]= { {1,0,0,0}, {0,1,0,0}, {0,0,1,0}, {-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1} }; // putar sehiongga vektor n sesuai sumbu z float v1=sqrt(dyn*dyn+dzn*dzn); // rotasi sumbu x float Rx[4][4]= { {1,0,0,0}, {0,-dzn/v1,-dyn/v1,0}, {0,dyn/v1,-dzn/v1,0}, {0,0,0,1} }; // rorasu sumbu y; float Ry[4][4]= { {v1,0,-dxn,0}, {0,1,0,0}, {dxn,0,v1,0}, {0,0,0,1} }; // mengalikan matriks Rx * Ry for (int i=0;i<=3;i++) { for (int k=0;k<=3;k++) Rxy[i][k]=Rx[i][0]

*

Ry[0][k]

+

Rx[i][1]

*

Ry[1][k]+

Rx[i][2]

*

Ry[2][k]+

Rx[i][3] * Ry[3][k]; } xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0]; yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1]; rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp); float Rz[4][4]= { {yup_vp/rup,xup_vp/rup,0,0}, {-xup_vp/rup,yup_vp/rup,0,0}, {0,0,1,0}, {0,0,0,1} };

// perklaian matriks dxy * dz for (int i=0;i<=3;i++) {

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 102

for (int k=0;k<=3;k++) Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+ Rxy[i][3] * Rz[3][k]; } // perkalian matriks T dan Rxyz for (int i=0;i<=3;i++) { for (int k=0;k<=3;k++) TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+ T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k]; } // transfoemasi titik obyek ke VPN for (int i=1;i<=max_titik;i++) // loop poligon { for (int k=0;k<=3;k++) // loop titik { vpn_k[i][k]=-s[i].x*TRxyz[0][k] - s[i].y * TRxyz[1][k]-s[i].z* TRxyz[2][k] + 1* TRxyz[3][k]; } vpn_k[i][4]=vpn_k[i][2];//menampung nilai z untuk pengurutan } //transfoemasi perpeksif for (int i=1;i<=max_titik;i++) { for (int k=0;k<=3;k++) vpn_k[i][k]=vpn_k[i][0]* perspek[0][k] +vpn_k[i][1]* perspek[1][k] + vpn_k[i][2]*perspek[2][k] +vpn_k[i][3] * perspek[3][k]; } //membuat niali 1 pada matrix padaordo ke-4 for (int i=1;i<=max_titik;i++) { for (int k=0;k<=3;k++) vpn_k[i][k]=(int) vpn_k[i][k]/vpn_k[i][3]; }

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 103

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

for(int i=1;i<=max_titik;i++) { vpn_k[i][0]=vpn_k[i][0]+geser_x; vpn_k[i][1]=vpn_k[i][1]+geser_y; } //identifikasi poligon ke memori //poli 1 : depan p[1].x[1]=vpn_k[1][0]; p[1].y[1]=vpn_k[1][1]; p[1].z[1]=vpn_k[1][4]; p[1].x[2]=vpn_k[2][0]; p[1].y[2]=vpn_k[2][1]; p[1].z[2]=vpn_k[2][4]; p[1].x[3]=vpn_k[3][0]; p[1].y[3]=vpn_k[3][1]; p[1].z[3]=vpn_k[3][4]; p[1].x[4]=vpn_k[4][0]; p[1].y[4]=vpn_k[4][1]; p[1].z[4]=vpn_k[4][4]; //poli 2:belakang p[2].x[1]=vpn_k[5][0]; p[2].y[1]=vpn_k[5][1]; p[2].z[1]=vpn_k[5][4]; p[2].x[2]=vpn_k[6][0]; p[2].y[2]=vpn_k[6][1]; p[2].z[2]=vpn_k[6][4]; p[2].x[3]=vpn_k[7][0]; p[2].y[3]=vpn_k[7][1]; p[2].z[3]=vpn_k[7][4]; p[2].x[4]=vpn_k[8][0]; p[2].y[4]=vpn_k[8][1]; p[2].z[4]=vpn_k[8][4]; //poli 3:bawah p[3].x[1]=vpn_k[1][0]; p[3].y[1]=vpn_k[1][1]; p[3].z[1]=vpn_k[1][4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 104

p[3].x[2]=vpn_k[2][0]; p[3].y[2]=vpn_k[2][1]; p[3].z[2]=vpn_k[2][4]; p[3].x[3]=vpn_k[6][0]; p[3].y[3]=vpn_k[6][1]; p[3].z[3]=vpn_k[6][4]; p[3].x[4]=vpn_k[5][0]; p[3].y[4]=vpn_k[5][1]; p[3].z[4]=vpn_k[5][4]; //poli 4:atas depan p[4].x[1]=vpn_k[4][0]; p[4].y[1]=vpn_k[4][1]; p[4].z[1]=vpn_k[4][4]; p[4].x[2]=vpn_k[3][0]; p[4].y[2]=vpn_k[3][1]; p[4].z[2]=vpn_k[3][4]; p[4].x[3]=vpn_k[7][0]; p[4].y[3]=vpn_k[7][1]; p[4].z[3]=vpn_k[7][4]; p[4].x[4]=vpn_k[8][0]; p[4].y[4]=vpn_k[8][1]; p[4].z[4]=vpn_k[8][4]; //poli 5:kanan p[5].x[1]=vpn_k[2][0]; p[5].y[1]=vpn_k[2][1]; p[5].z[1]=vpn_k[2][4]; p[5].x[2]=vpn_k[6][0]; p[5].y[2]=vpn_k[6][1]; p[5].z[2]=vpn_k[6][4]; p[5].x[3]=vpn_k[7][0]; p[5].y[3]=vpn_k[7][1]; p[5].z[3]=vpn_k[7][4]; p[5].x[4]=vpn_k[3][0]; p[5].y[4]=vpn_k[3][1]; p[5].z[4]=vpn_k[3][4]; //poli 6:kiri p[6].x[1]=vpn_k[1][0]; p[6].y[1]=vpn_k[1][1]; p[6].z[1]=vpn_k[1][4]; p[6].x[2]=vpn_k[5][0]; p[6].y[2]=vpn_k[5][1]; p[6].z[2]=vpn_k[5][4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 105

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

//hitung zrata tiap poligon for (int i=1;i<=max_poli;i++) { p[i].zrata=(int) (p[i].z[1]+p[i].z[2]+p[i].z[3]+p[i].z[4])/4; } //pengurutan poligon sesaui nilai z for (int i=1;i<=max_poli;i++) { for (int j=1;j<=max_poli-i;j++) { if (p[j].zrata>p[j+1].zrata) { int t=p[j+1].zrata; p[j+1].zrata=p[j].zrata; p[j].zrata=t; for (int k=1;k<=4;k++) { int u=p[j+1].x[k]; p[j+1].x[k]=p[j].x[k]; p[j].x[k]=u; int v=p[j+1].y[k]; p[j+1].y[k]=p[j].y[k]; p[j].y[k]=v; } }//if } }

//bacground putih PaintBox2->Canvas->Brush->Color=clWhite; PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1); //gambar di paint box 2 POINT g1[4]; g1[0]=Point(p[1].x[1],p[1].y[1]); g1[1]=Point(p[1].x[2],p[1].y[2]); g1[2]=Point(p[1].x[3],p[1].y[3]);

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 106

g1[3]=Point(p[1].x[4],p[1].y[4]); g1[4]=Point(p[1].x[1],p[1].y[1]); PaintBox2->Canvas->Brush->Color=clBlue; PaintBox2->Canvas->Polygon((TPoint*)g1,4); POINT g2[4]; g2[0]=Point(p[2].x[1],p[2].y[1]); g2[1]=Point(p[2].x[2],p[2].y[2]); g2[2]=Point(p[2].x[3],p[2].y[3]); g2[3]=Point(p[2].x[4],p[2].y[4]); g2[4]=Point(p[2].x[1],p[2].y[1]); PaintBox2->Canvas->Brush->Color=clGreen; PaintBox2->Canvas->Polygon((TPoint*)g2,4); POINT g3[4]; g3[0]=Point(p[3].x[1],p[3].y[1]); g3[1]=Point(p[3].x[2],p[3].y[2]); g3[2]=Point(p[3].x[3],p[3].y[3]); g3[3]=Point(p[3].x[4],p[3].y[4]); g3[4]=Point(p[3].x[1],p[3].y[1]); PaintBox2->Canvas->Brush->Color=clGray; PaintBox2->Canvas->Polygon((TPoint*)g3,4); POINT g4[4]; g4[0]=Point(p[4].x[1],p[4].y[1]); g4[1]=Point(p[4].x[2],p[4].y[2]); g4[2]=Point(p[4].x[3],p[4].y[3]); g4[3]=Point(p[4].x[4],p[4].y[4]); g4[4]=Point(p[4].x[1],p[4].y[1]); //PaintBox2->Canvas->Brush->Color=clGray; PaintBox2->Canvas->Polygon((TPoint*)g4,4); POINT g5[4]; g5[0]=Point(p[5].x[1],p[5].y[1]); g5[1]=Point(p[5].x[2],p[5].y[2]); g5[2]=Point(p[5].x[3],p[5].y[3]); g5[3]=Point(p[5].x[4],p[5].y[4]); g5[4]=Point(p[5].x[1],p[5].y[1]); PaintBox2->Canvas->Brush->Color=clGreen; PaintBox2->Canvas->Polygon((TPoint*)g5,4); POINT g6[4]; g6[0]=Point(p[6].x[1],p[6].y[1]); g6[1]=Point(p[6].x[2],p[6].y[2]); g6[2]=Point(p[6].x[3],p[6].y[3]); g6[3]=Point(p[6].x[4],p[6].y[4]); g6[4]=Point(p[6].x[1],p[6].y[1]); PaintBox2->Canvas->Brush->Color=RGB(2,100,200); PaintBox2->Canvas->Polygon((TPoint*)g6,4); }

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 107

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

void __fastcall TForm1::Button1Click(TObject *Sender) { for (int r=-200;r<=200;r++){ for(int t=1;t<1000000;t++){}//tunda kamera_x+=r; gambar(kamera_x,kamera_y); } for (int r=-200;r<=200;r++){ for(int t=1;t<1000000;t++){}//tunda kamera_y+=r; gambar(kamera_x,kamera_y); } }

4. tulis kode event Onclick pada masing-maisng button misal :

16.13.1Tombol Kanan-OnClick void __fastcall TForm1::KananClick(TObject *Sender) { kamera_x=kamera_x+20.0; gambar(kamera_x,kamera_y); } //---------------------------------------------------------------------------

16.13.2Tombol Kiri-OnClick void __fastcall TForm1::KiriClick(TObject *Sender) { kamera_x=kamera_x-20.0; gambar(kamera_x,kamera_y); } //---------------------------------------------------------------------------

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 108

16.13.3Tombol Atas-OnClick void __fastcall TForm1::AtasClick(TObject *Sender) { kamera_y+=20.0; gambar(kamera_x,kamera_y); } //---------------------------------------------------------------------------

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

16.13.5Tombol Auto-OnClick void __fastcall TForm1::AutoClick(TObject *Sender) { for (int r=-200;r<=200;r++){ for(int t=1;t<1000000;t++){}//tunda kamera_x+=r; gambar(kamera_x,kamera_y); } for (int r=-200;r<=200;r++){ for(int t=1;t<1000000;t++){}//tunda kamera_y+=r; gambar(kamera_x,kamera_y); }

5.

Jangan lupa , diklarasikan semua variabel/fungsi yang ada pada file header #include <StdCtrls.hpp> #include #include <MPlayer.hpp> #include <Buttons.hpp> #include <ExtCtrls.hpp> //-------------------------------------------------------------------------class TForm1 : public TForm {

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 109

__published:

// IDE-managed Components

TBitBtn *BitBtn1; TBitBtn *BitBtn2; TBitBtn *BitBtn3; TBitBtn *BitBtn4; TPaintBox *PaintBox2; void __fastcall FormActivate(TObject *Sender); void __fastcall BitBtn2Click(TObject *Sender); void __fastcall BitBtn1Click(TObject *Sender); void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall BitBtn3Click(TObject *Sender); void __fastcall BitBtn4Click(TObject *Sender); private:

// User declarations

public:

// User declarations __fastcall TForm1(TComponent* Owner);

void _fastcall gambar(float,float); float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4],TRxyz[4][4],vpn_k[12][5 ]; float vpn_p[12][4]; float kamera_x,kamera_y,kamera_z; int g[12][5]; struct titik{ int x; int y; int z; }s[50]; struct poligon{ int x[4]; int y[4]; int z[4]; int zrata; }p[9]; }; //-------------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 110

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

……. //menetukan jujlkah obyek dan jumlkah titik sudut PaintBox2->Canvas->Brush->Color=clWhite; PaintBox2->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1); int jumlah_obyek=1; int max_titik=12; int max_poli=9; //------------------posisi kamera float kx=kamx; float ky=kamy; float kz=500; //---------------------------------float d=sqrt(kx*kx+ky*ky+kz*kz); float dxn=kx/d; …………………..

2. Modifikasi deklarasi obyek sbb s[1].x=0;s[1].y=0;s[1].z=200; s[2].x=300;s[2].y=0;s[2].z=200; s[3].x=300;s[3].y=100;s[3].z=200; s[4].x=0;s[4].y=100;s[4].z=200; s[5].x=0;s[5].y=0;s[5].z=100; s[6].x=300;s[6].y=0;s[6].z=100; s[7].x=300;s[7].y=100;s[7].z=100; s[8].x=0;s[8].y=100;s[8].z=100; s[9].x=0;s[9].y=0;s[9].z=0; s[10].x=300;s[10].y=0;s[10].z=0;

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 111

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

3. Modifikasilah bagian pembentukan poligon menjadi 9 poligon sbb //identifikasi poligon ke

//poli 6:kiri depan

memori

p[6].x[1]=vpn_k[1][0];

//poli 1 : depan

p[6].y[1]=vpn_k[1][1];

p[1].x[1]=vpn_k[1][0];

p[6].z[1]=vpn_k[1][4];

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

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

p[1].x[2]=vpn_k[2][0];

p[6].z[2]=vpn_k[5][4];

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

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

p[1].x[3]=vpn_k[3][0];

p[6].z[3]=vpn_k[8][4];

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

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

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

p[6].z[4]=vpn_k[4][4];

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

//poli 6:atas miring p[7].x[1]=vpn_k[8][0];

//poli 2:belakang

p[7].y[1]=vpn_k[8][1];

p[2].x[1]=vpn_k[9][0];

p[7].z[1]=vpn_k[8][4];

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

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

p[2].x[2]=vpn_k[10][0];

p[7].z[2]=vpn_k[7][4];

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

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

p[2].x[3]=vpn_k[11][0];

p[7].z[3]=vpn_k[11][4];

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

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

p[2].x[4]=vpn_k[12][0];

p[7].z[4]=vpn_k[12][4];

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

//poli 8:kiri belakang p[8].x[1]=vpn_k[6][0];

//poli 3:bawah

p[8].y[1]=vpn_k[6][1];

p[3].x[1]=vpn_k[1][0];

p[8].z[1]=vpn_k[6][4];

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

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

p[3].x[2]=vpn_k[2][0];

p[8].z[2]=vpn_k[10][4];

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

p[8].x[3]=vpn_k[11][0];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 112

p[8].y[3]=vpn_k[11][1]; p[3].x[3]=vpn_k[10][0];

p[8].z[3]=vpn_k[11][4];

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

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

p[3].x[4]=vpn_k[9][0];

p[8].z[4]=vpn_k[7][4];

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

//poli 9:kanan belakang p[9].x[1]=vpn_k[9][0];

//poli 4:atas depan

p[9].y[1]=vpn_k[9][1];

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

p[9].z[1]=vpn_k[9][4];

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

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

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

p[9].z[2]=vpn_k[5][4];

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

p[9].x[3]=vpn_k[8][0]; p[9].y[3]=vpn_k[8][1];

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

p[9].z[3]=vpn_k[8][4];

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

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

p[4].x[4]=vpn_k[8][0];

p[9].z[4]=vpn_k[12][4];

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

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 113

g1[4]=Point(p[1].x[1],p[1].y[1]); PaintBox2->Canvas->Brush->Color=clBlue; PaintBox2->Canvas->Polygon((TPoint*)g1,4); POINT g2[4]; g2[0]=Point(p[2].x[1],p[2].y[1]); g2[1]=Point(p[2].x[2],p[2].y[2]); g2[2]=Point(p[2].x[3],p[2].y[3]); g2[3]=Point(p[2].x[4],p[2].y[4]); g2[4]=Point(p[2].x[1],p[2].y[1]); //PaintBox2->Canvas->Brush->Color=clGreen; PaintBox2->Canvas->Polygon((TPoint*)g2,4); POINT g3[4]; g3[0]=Point(p[3].x[1],p[3].y[1]); g3[1]=Point(p[3].x[2],p[3].y[2]); g3[2]=Point(p[3].x[3],p[3].y[3]); g3[3]=Point(p[3].x[4],p[3].y[4]); g3[4]=Point(p[3].x[1],p[3].y[1]); //PaintBox2->Canvas->Brush->Color=clBlue; PaintBox2->Canvas->Polygon((TPoint*)g3,4); POINT g4[4]; g4[0]=Point(p[4].x[1],p[4].y[1]); g4[1]=Point(p[4].x[2],p[4].y[2]); g4[2]=Point(p[4].x[3],p[4].y[3]); g4[3]=Point(p[4].x[4],p[4].y[4]); g4[4]=Point(p[4].x[1],p[4].y[1]); //PaintBox2->Canvas->Brush->Color=clGray; PaintBox2->Canvas->Polygon((TPoint*)g4,4); POINT g5[4]; g5[0]=Point(p[5].x[1],p[5].y[1]); g5[1]=Point(p[5].x[2],p[5].y[2]); g5[2]=Point(p[5].x[3],p[5].y[3]); g5[3]=Point(p[5].x[4],p[5].y[4]); g5[4]=Point(p[5].x[1],p[5].y[1]); //PaintBox2->Canvas->Brush->Color=clGreen; PaintBox2->Canvas->Polygon((TPoint*)g5,4); POINT g6[4]; g6[0]=Point(p[6].x[1],p[6].y[1]); g6[1]=Point(p[6].x[2],p[6].y[2]); g6[2]=Point(p[6].x[3],p[6].y[3]); g6[3]=Point(p[6].x[4],p[6].y[4]); g6[4]=Point(p[6].x[1],p[6].y[1]); //PaintBox2->Canvas->Brush->Color=RGB(2,100,200); PaintBox2->Canvas->Polygon((TPoint*)g6,4);

POINT g7[4];

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 114

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

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

5. Jalankan !

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 115

Bab 17.PENUTUP Metode kamera sitetis ini sangat fleksibel dalam memandang suatu obyek, karena suatu obyek dapat dipandang dari berbagai sisi dan jarak. Bila obyek yang akan divisualisasikan relatif besar misalnya simulasi bangunan perkotaan, maka dengan mengubah titik VRP dan posisi kamera dengan perubahan yang otomatis begitu suatu tombol (misal tombol panah pada keyboard ) maka akan didapatkan animasi 3 dimensi dan pengamat seakanakan sedang beraktifitas di alam nyata. Pada prinsipnya metode kamera sintetis memiliki 4 tahapan utama yakni representasi obyek dalam koordinat dunia (koordinat x,y,z) , transformasi ke koordinat bidang pandang (koordinat u,v,n), proyeksi perspektif pada bidang uv, dan transformasi ke koordinat layar. Realita visual (visual realism) akan menjadi lebih baik dengan

adanya

proyeksi perspektif pada bidang uv karena obyek yang jauh akan nampak lebih kecil. Selain itu kesan 3 dimensi akan semakin nampak dengan adanya rendering

dan bayangan (shadowing), sehingga suatu obyek walaupun

warnanya homogen tetapi akibat pengaruh pencahayaan dari suatu tempat maka kecerahan warna berbeda pada setiap titik atau setiap poligon yang membentuk obyek tersebut selain itu akan muncul bayangan yang akan mempertajam efek 3 dimensi. Semakin

tinggi kerapatan poligon per satuan luas maka gambar yang

muncul akan semakin halus, dengan konsekwensi

beban memori akan

semakin tinggi pula. Melalui penambahan berbagai efek yang sering terjadi di dunia nyata,

sudah dapat dihasilkan kenyataan semu

yang dapat

digunakan untuk memvisualkan atau untuk simulasi dalam berbagai hal.

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 116

DAFTAR PUSTAKA Adams, Lee.1991. Visualization Graphics in C. Mc Graw Hill. Anand, Vera B. 1993. Computer Graphics and Geometric Modelling for

Engineer. Singapore:John Wiley & Son, Inc. Foley, James D. 1982. Fundamentals of Interactif Computer Graphics. Addison-Wesley Publisihing Company. Harrington, Steve. 1987. Computer Graphics: Programming

Approach.

McGraw Hill. 2th edition. Hearn, Donald dan Bakar, M. Puline.1986.Computer Graphics. Prentice Hall International Insap Santoso, Ir., M.Sc. 1994. Grafika Komputer dan Antar Muka Grafis. Andi Offset . Yogyakarta. Cetakan I. Newman, William M. & Sproul, Robert F.1984. Principle of Interactif Computer

Graphics. McGraw Hill Pimentel, Ken dan Teixeira, Kevin.1995.Virtual Reality. Intel/McGrawHill. 2th edition Presmann, RogerL.1992.Computer Graphics: Apractitioner’s Approach. Mc. Graw Hill. Third Edition. Rimer, Steve.1993.Super VGA Graphics:Programming Secrets.McGraw Hill. P. Insap Santoso, Ir.1997. Interaksi Manusi dan Komputer. Andi Offset. Yogyakarta. Edisi Pertama. Surya Setiawan, MSc. 2000. Diktat Kuliah Grafika Komputer Fakultas Universitas Indonesia. Jakarta Paulus Bambangwirawan, Dipl.Inforn. 2004. Grafika Komputer. Penerbit Andi. Yogykarta. Edhi Nugroho, 2005. Teori dan Praktek Grafika Komputer. Penerbit Graha Ilmu. Yogyakarta

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 117

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

Handouts Grafika Komputer STMIK AKAKOM Edisi I hal 118