KuliahGrafiKomTI_part1

PENDAHULUAN

PENGERTIAN

Grafika/grafis (graphics) Gambar yang dibuat/direkayasa dari bentuk geometri

Grafika Komputer (computer graphics)Gambar yang dibuat/direkayasa dari bentuk geometri dengan bantuan komputer

Image/Citra

Gambar yang diambil dari obyek nyata

Image prosesing (pengolahan citra) merupakan teknik untuk memodifikasi atau menginterpretasi

gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah

:

Meningkatkan kualitas gambar

Memberikan persepsi dari informasi visual, seperti pada robotic

Untuk melakukan pengolahan citra, pertama-tama membuat digitalisasi dari foto atau

membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi

gambar sehingga mendapat kualitas yang baik. Selain itu, gambar dapat dihasilkan merupakan

kombinasi dari beberapa gambar.

Uraian GK ImageSumber Dibuat/rekayasa Dari obyek nyataUkuran Memori Kecil BesarElemen yg diproses Titik-titik pokok Semua titikKecepatan proses Tinggi LambanDimensi 2D,3D 2DElemen gambar Bentuk geometri PixelDetail Kasar HalusObyek yg dimanipulasi Tiap bentuk geometri Tiap titik/pixel

Grafika Komputer

Grafika Komputer pada dasarnya adalahSuatu bidang ilmu komputer yang mempelajari tentang cara-cara untuk meningkatkan dan memudahkan komunikasi antara manusia dengan mesin (komputer) dengan jalan membangkitkan menyimpan dan memanipulasi gambar model suatu objek menggunakan komputer. Grafika komputer memungkinkan kita untuk berkomunikasi lewat gambar-gambar, bagan-bagan dan diagram-diagram.

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.

PENERAPAN GRAFIKA KOMPUTER

• Pemakaian dalam bidang sains, teknologi dan bisnis

Bahan Ajar Grafika Komputer /Hal. 1

Dalam bidang ini bentuk grafik dua dimensi (2D) dan tga dimensi (3D) banyak dimanfaatkan untuk menunjukkan suatu fungsi matematik, fenomena fisis, fungsi ekonomi, histogram, diagram batang, pie chat, diagram penjadwalan pekerjaan, diagram produksi dll.

• KartografiDalam bidang ini, grafika komputer banyak digunakan untuk menyajikan informasi geografis dan fenomena alamiah lain. Contoh : peta geografi, peta relief, peta eksplorasi minyak dan pertambangan, peta cuaca, peta kepadatan penduduk dll

• Simulasi dan animasiContoh : film starwars, armageddon, titanic dllContoh kelompok simulai : simulasi reaksi nuklir dan kimia, aliran hidrodinamis, perubahan struktur (deformasi) dari suatu benda yang diberi beban melebihi kekuatannya

• Computer Aided Design and DraftingDalam CAD, grafika computer biasa digunakan untuk merancang komponen dari sistem mekanis, elektris, elektromekanis, piranti elektronis maupun piranti lain.Termasuk dalam kelompok ini adalah struktur bangunan, reaktor kimia, badan mobil, pesawat terbang, kapal lengkap dengan ruang-ruang yang aa, jaringan komputer.Dalam bidang ini tekanan untama dari pemakaian grafika komputer adalah untuk memproduksi gambar dengan ketelitian yang sangat tinggi.

• Seni dan Komersial Dalam bidang ini, grafika komputer banyak dimanfaatkan untuk pembuatan ulang (reproduksi) gambar yang memiliki nilai historis tinggi dan penting untuk dilestarikan, seperti gambar-gambar dari pelukis terkenal. Juga digunakan untuk pembuatan iklan / logo dari suatu produk

• Antarmuka grafis (Graphical User Interfaces GUI)Dalam bidang ini grafika computer seolah-olah menyediakan suatu bahasa antarmuka pemakai (user interfaces) yang baru, karena ”dialog” antara pemakai dan komputer tidak lagi diketikkan dari keyboard, tetapi pemakai cukup memiliki suatu simbol / icon yang tersedia pada layar dengan menggunakan mouse, lightpen dll.

KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER

Ada beberapa criteria yang dapat digunakan untuk mengelompokkan penerapan grafika computer pada

bidang-bidang diatas

1. Kriteria Pertama adalah ”tipe dari objek dari gambar yang dihasilkan”.

Terapan yang termasuk di dalam kriteria ini antara lain :

Gambar-gambar garis dari objek dua dimensi (2D) dan 3D (Sering disebut Wired-frame

picture), misal: garis-garis yang menunjukkan struktur suatu bangunan, gambar garis untuk

objek 3D dengan bagian tertentu yang tidak nampak dihilangkan, gambar 2D dengan grayscale

yang berbeda, gambar 3D yang memperhatikan efek pencahayaan/bayangan dan terapan lain

yang sejenis.

2. Kriteria Kedua didasarkan atas ”jenis interaksi dan derajat pengendalian objek / gambar

dalam layar”.

a. Dalam offline plotting, gambar bisa dibentuk dari sekumpulan data yang diketahui atau

diambil dari satu basis data, sehingga gambar yang dihasilkan tidak bisa diubah kecuali

dengan mengubah basis data yang diketahui.


b. Dalam interactive plotting, operator bisa berinteraksi dengan gambar, sehingga

operator bisa mengubah gambar yang tertampil pada layar dengan menggunakan piranti

yang tersedia.

c. Dalam interactive design, operator bisa menggambarkan suatu bentuk tertentu dimulai

dari layar dalam keadaan kosong, kemudian ditambahkan sejumlah objek dimana

operator dengan mudah dan bebas bisa mengubah gambar yang telah terbentuk.

Operator juga bisa memperbesar atau memperkecil gambar jika perlu melihat bagian-

bagian tertentu secara lebih rinci.

3. Kriteria ketiga adalah ”role of the picture” atau bagaimana gambar yang tertampil punya

arti operator atau siapa saja yang melihatnya.

Dalam bidang tertentu seperti kartografi, gambar yang dihasilkan merupakan produk utama,

sedang pada bidang lain gambar yang dihasilkan hanya merupakan visualisasi dari suatu objek

atau fenomena yang ingin diamati.

4. Kriteria keempat adalah hubungan antara objek dan gambar yang tertampil. Dalam hal ini

operator bisa menampilkan sebuah gambar dalam sekali tampil, sekelompok gambar yang

saling berhubungan, atau dengan teknik lain.

KOMPONEN LAYAR PENAMPIL

Pada dasarnya, semua layar penampil dengan kemampuan grafis punya 3 komponen utama :

- Pengingat digital (frame buffer)

Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai elemennxm menunjukkan

intensitas dari citra grafis yang akan ditampilkan

- Layar Penampil

- Piranti pengendalian tampilan (Display controller) atau pengolah tampilann (Display

processor)

Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk ditampilkan ke layar

penampil.

Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke display) dikembangkan

tahun 60-an. Pada jenis ini pengingat digital berisi daftar tampilan (display list) atau tampilkan

(display program) yang berisi perintah pengambaran titik, perintah penggambaran garis, dan

perintah penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan mengubah

data digital menjadi tegangan analog yang dipakai untuk memancarkan elektron yang bisa

mengenal tabung layar tampilan berlapis fosfor akan menyebabkan fosfor tersebut berpendar dan

terlihat ada gambar. Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan atau

ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan minimal 30 kali per detik

untuk menghindari adanya kedip (flicker). Proses ini disebut sebagai penyegaran eletron (electron

refreshing).

Tampilan berdasarkan teknologi TV dan disebut raster display. Dikembangkan tahun 70an. Pada

tampilan ini, garis, karakter dan bentuk-bentuk lain selalu digambar berdasar komponen


terkecilnya yaitu titik, dan biasa disebut sebagai pixel atau pel(picture element). Sebuah titik pada

layar tampilan bisa dihidup matikan dengan mudah dalam pengingat digital karena 0 untuk titik

matik dan 1 untuk titik yang menyala.

Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan sebagai polabit dengan

mengubah pola bit (piksel) yang ada dalam pengingat digital, bisa dibentuk gambar sesuai dengan

keinginan. Untuk gambar hitam-putih, warna hitam disajikan menggunakan bit 1, dan warna putih

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

Yang dimaksud dengan raster atau resolusi layar (screen resolution) adalah matrix piksel yang

menutup seluruh permukaan layar tampilan. Semakin besar ukuran matrix pikxel yang dibentuk

pada suatu layar tampilan, semakin bagus dan halus pula gambar yang bisa dihasilkan oleh layar

tersebut.

Teknologi Tampilan / Display Dan Sistem Grafika

Output Primitif

Pengertian Output/Grafis 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.

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.


Tampilan

Vector Raster

Storage tube

Refresh CRT

Color CRT

Flat Panel

Electro Luminescant

Gas Plasma

Liquid Crystal

Kode untuk menggambar titik :

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

Dengan x : koordinat mendatar y : koordinat vertikal

Warna : warna pixel (dibahas pada bab berikutnya)

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->LineTo(x1,y1)…..Canvas->LineTo(xn,yn)

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

3. Kotak (Box)

Kotak merupakan siklus tertutup minimal memiliki 2 titik pokok

Keterangan :

X1,y1:koordinat kotak awal

X2,y2:koordinat kotak akhir (diagonal)

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

4. Lingkaran/Elip (Circle/Ellipse)

Lingkaran adalah kumpulan titik yang melingkar dengan garis tengah mendatar dan vertikal sama,

sedangkan untuk elip, garis tengahnya berbeda.

Lingkaran Elip


X0,y0X0,y0

X1,y1

X2,y2

Xn,yn

X1,y1

X2,y2

X1,y1

X2,y2

X1,y1

X2,y2

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,x3,x4,y4);

6. Chord / Tembereng

Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat

tembereng.

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

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

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


X1,y1

X2,y2

X3,y3

X4,y4

X1,y1

X2,y2

X3,y3

X4,y4

X1,y1X3,y3

X4,y4

8. Poligon (Polygon)

Method Poligon digunakan untuk mengambar segi banyak

POINT var[n]; //deklarasi variabelvar[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); bTitik[2]=POINT(150,100);c

Titik[3]=POINT(50,150);d

Titik[4]=POINT(0,50); e

Canvas->Polygon((Tpoint*) titik,4);

Hasil:

9. Polyline

Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari suatu koordinat ke

koordinat lainnya.

POINT var[n]; //deklarasi variabelvar[0]=Point(x,y);var[1]=Point(x,y);


a b

c

d

e

X2,y2

….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); aTitik[1]=POINT(100,10); bTitik[2]=POINT(150,100);cTitik[3]=POINT(50,150);dTitik[4]=POINT(0,50); eCANVAS->POLYLINE((Tpoint*) titik,4);

Hasil:

Atribut Output Primitif

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

dengan parameter atribut.

1. Atribut Garis

Atribut dasar untuk garis lurus adalah style (tipe garis), width (tebal) dan color(warna).

Dalam beberapa paket aplikasi grafik, garis dapat ditampilkan dengan mengunakan Pen.

2. Atribut Kurva

Parameter untuk atribut kurva sama dengan atribut segmen garis. Kurva dapat ditampilkan

dengan berbagai warna, tebal, dot-dash(Style garis) dan pilihan pen atau brush. Selain itu untuk

pengisian suatu bidang tertentu termasuk memilih warna antara solid dan pattern tertentu dan

memilih warna pattern yang ada.

3. Atribut Karakter


a b

c

d

e

Membuat Aplikasi

1. Mengenal Pen

Langkah 1

Rancanglah Form Dengan Nama untuk File Unit adalah Upen.cpp dan Nama file project

adalah Pen.bpr

Langkah 2

Buat menu dengan komponen TMainMenu terdiri dari Pen dan sub menu Pen adalah ”Style”,

”Color” ,”Width”

Langkah 3

Buka File Upen.h (ctrl-F6) dan deklarasikan fungsi-fungsi berikut pada bagian public

void _fastcall BersihkanCanvas();

void _fastcall SetDefault();

Langkah 4

Buka File Upen.cpp dan definisikan fungsi-fungsi tersebut pada bagain akhir kode program

dengan menggunakan sintak berikut

void _fastcall TForm1::BersihkanCanvas(){ Canvas->Brush->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]; //menentukan koordinat awal Canvas->MoveTo(100, posisiY); //menggambar garis dari posisi awal sampai ke posisi ...


// (Lebar layar - 10, posisiY) Canvas->LineTo(ClientWidth-10, posisiY); posisiY +=20; }

//Menuliskan teks ke layar pada koordinat tertentu Canvas->TextOut(1, 10, "psSolid "); Canvas->TextOut(1, 30, "psDash "); Canvas->TextOut(1, 50, "psDot "); Canvas->TextOut(1, 70, "psDashDot "); Canvas->TextOut(1, 90, "psDashDotDot "); Canvas->TextOut(1, 110, "psClear "); Canvas->TextOut(1, 130, "psInsideFrame ");}//---------------------------------------------------------------------------

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

berikut

Langkah 6

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

MainMenu1

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


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

Langkah 7

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

void __fastcall TForm1::Width1Click(TObject *Sender){ int posisiY = 20; BersihkanCanvas(); SetDefault(); for (int i=0; i<10; i++) { Canvas->TextOut(10,posisiY, "Width = " + AnsiString(i)); Canvas->Pen->Width = i; Canvas->MoveTo(80, posisiY + 8); Canvas->LineTo(ClientWidth -10, posisiY + 8); posisiY +=20; }}//---------------------------------------------------------------------------

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

2. Mengenal Brush


Langkah 1

Buat aplikasi baru simpan untuk File Unit dengan nama Ubrush.cpp dan untuk File Project

Brush.bpr. Kemudian menu dari komponen TmainMenu tambahan Menu dengan Caption

”&Brush” dan submenu dengan Caption ”Style”

Langkah 2

Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada Bagian Public

void _fastcall BersihkanCanvas();

Selanjutnya deklarasikan fungsi BersihkanCanvas() pada File Ubrush.cpp sebagai berikut

void _fastcall TForm1::BersihkanCanvas(){ Canvas->Brush->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;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


KOORDINAT SISTEM DAN LAYAR

Koordinat

Koordinat dapat diartinya sebagai tata keseimbangan yang membantu kita di dalam

menentukan suatu kondisi dengan nilai dan batas dalam konteks geometri.

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

1. Koordinat Nyata

2. Koordinat Sistem

3. Koordinat Tampilan atau Layar

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

2. Dimensi

Dalam penggunaan umum, dimensi berarti parameter atau pengukuran yang dibutuhkan

untuk mendefinisikan sifat-sifat suatu objek—yaitu panjang, lebar, dan tinggi atau

ukuran dan bentuk. Dalam matematika, dimensi adalah parameter yang dibutuhkan untuk

menggambarkan posisi dan sifat-sifat objek dalam suatu ruang. Dalam konteks khusus,

satuan ukur dapat pula disebut "dimensi"—meter atau inci dalam model geografi, atau

biaya dan harga dalam model ekonomi.

Sebagai contoh, untuk menggambarkan suatu titik pada bidang (misalnya sebuah kota

pada peta) dibutuhkan dua parameter— lintang dan bujur. Dengan demikian, ruang

bersangkutan dikatakan berdimensi dua, dan ruang itu disebut sebagai bersifat dua

dimensi.

Menggambarkan posisi pesawat terbang (relatif terhadap bumi) membutuhkan sebuah

dimensi tambahan (ketinggian), maka posisi pesawat terbang tersebut dikatakan berada

dalam ruang tiga dimensi (sering ditulis 3D). Jika waktu ditambahkan sebagai dimensi

ke-4, "kecepatan" pesawat terbang tersebut dapat dihitung dengan membandingkan waktu

pada dua sembarang posisi.


http://id.wikipedia.org/wiki/Kecepatan

http://id.wikipedia.org/wiki/Waktu

http://id.wikipedia.org/wiki/3D

http://id.wikipedia.org/wiki/Ketinggian

http://id.wikipedia.org/wiki/Pesawat_terbang

http://id.wikipedia.org/wiki/Bujur

http://id.wikipedia.org/wiki/Lintang

http://id.wikipedia.org/wiki/Peta

http://id.wikipedia.org/wiki/Kota

http://id.wikipedia.org/w/index.php?title=Bidang&action=edit

http://id.wikipedia.org/w/index.php?title=Titik&action=edit

http://id.wikipedia.org/wiki/Ekonomi

http://id.wikipedia.org/w/index.php?title=Harga&action=edit

http://id.wikipedia.org/w/index.php?title=Biaya&action=edit

http://id.wikipedia.org/wiki/Geografi

http://id.wikipedia.org/wiki/Inci

http://id.wikipedia.org/wiki/Meter

http://id.wikipedia.org/wiki/Satuan_ukur

http://id.wikipedia.org/wiki/Matematika

http://id.wikipedia.org/w/index.php?title=Bentuk&action=edit

http://id.wikipedia.org/w/index.php?title=Ukuran&action=edit

http://id.wikipedia.org/wiki/Tinggi

http://id.wikipedia.org/wiki/Lebar

http://id.wikipedia.org/wiki/Panjang

2. Sistem Koordinat

Adalah suatu yang abstrak dan biasanya digunakan untuk perhitungan data yang

hasilnya perlu ditampilkan kembali pada layar atau di atas kertas.

Sistem koordinat sealau dikaitkan dengan dimensi, dimana

0 D , dimensi ke 0

1 D, dimensi ke 1

2 D, dimensi ke 2

3 D, dimensi ke 3

4 D, dimensi ke 4

5 D, dimensi ke 5, dan seterusnya

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

dimensi ke 2, kubus dimensi ke 3, dan seterusnya. Untuk kebutuhan grafik umumnya

kita menggunakan dimensi ke 3. Kita mempunyai sistem koordinat untuk 2 dimensi

dan 3 dimensi yang dibedakan dengan jumlah sumbu koordinat yang dimiliki oleh

masing-masing sistem.

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

sedangkan sistem koordinat 3 dimensi memiliki 3 buah sumbu koordinat, yaitu x, y

dan z.

Sistem koordinat 2D Sistem Koordinat 3D

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

Bahan Ajar Grafika Komputer /Hal.

y

x

y

xz

15

Titik pertemuan antara kedua sumbu, titik asal, umumnya diberi label 0. Setiap sumbu

juga mempunyai besaran panjang unit, dan setiap panjang tersebut diberi tanda dan

ini membentuk semacam grid. Untuk mendeskripsikan suatu titik tertentu dalam

sistem koordinat dua dimensi, nilai x ditulis (absis), lalu diikuti dengan nilai y

(ordinat). Dengan demikian, format yang dipakai selalu (x,y) dan urutannya tidak

dibalik-balik.

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

Kuadran nilai x nilai y


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

I > 0 > 0II < 0 > 0III < 0 < 0IV > 0 < 0

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

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.

Konversi Koordinat

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.


(0,0)

Y

X

17

Real Worl Koordinat sistem (1)

Koordinat Sistem (2) Koordinat Sistem (3)

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.

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

Pada contoh di depan, gambar yang ditampilkan di layar muncul secara terbalik

karena sistem nilai antara koordinat sistem dan layar berbeda. Agar gambar dapat

tampil dengan sempurna, maka jika ada nilai sumbu koordinat yang negatif, nilai

tersebut harus diubah menjadi positif terlebih dahulu dengan menggeser semua

data yang terkait yang sama sementara nilai sumbu Y dibalik.

Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2 tetap seperti semula.

Untuk mengkonversi koordinat sistem x dan y ke koordinat dilakukan

perhitungan:

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

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

Contoh :

Untuk layar dengan ukuran 400 x 640, maka

Max_x_screen = 400 dan

Max_y_screen = 640

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

70), konversikan ke koordinat layar

C

A B

Solusi


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

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

Sehingga

midx = 400/2 = 200; midy = 640/2 = 320

A’x = x + midx = -10 + 200 = 190A’y = midy –y = 320 –(-10) = 330 B’x = x + midx = 80 + 200 = 280B’y = midy –y = 320 –(-10) = 330 C’x = x + midx = 35 + 200 = 235C’y = midy –y = 320 –(70) = 250

Hasil : A’(190, 330) B’(280,330) C’(235, 250)

(0,0)

midy

midx (400,640)

LATIHAN


PEMROGRAMAN GARIS

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

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 Inkrementasi sumbu

Jenis Sumbu-X Sumbu-YHorisontal Gerak(X=X+1) KonstanVertikal Konstan Gerak(Y=Y+1)Diagonal Gerak(X=X+1) Gerak(Y=Y+1)Bebas Gerak(X=X+n) Gerak(Y=Y+m)

n dan m adalah nilai inkrementasi

1. Garis Horisontal

Garis horisontal adalah garis yang membentang secara paralel dengan sumbu-X

dengan asumsi titik P1 pada koordinat x1 lebih kecil daripada x2 dari P2,

sedangkan y1 dan y2 konstan.

Algoritma

1. Menentukan titik awal (P1) dan titik akhir (P2)

2. Periksa posisi sumbu (koordinat) :

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

sampai titik akhir.

Jika tidak, maka

Lakukan dekrementasi sumbu-X dari titik awal sampai titik akhir

3. Tampilkan garis menggunakan nilai parameter koordinat yang telah dihitung.

Program gambar garis harisontal

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


2. 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; if (y1<y2) for (i=y1;i<=y2;i++) Canvas->Pixels[x1][i]=clBlue; else for (i=y1;i>=y2;i--) Canvas->Pixels[x1][i]=clBlue;}

3. Garis Diagonal

Garis diagonal adalah garis yang membentang parale dengan 45 derajat dari

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

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

Algoritma:

1. Menentukan titik awal (P1) dan titik akhir (P2)2. Periksa posisi sumbu (koordinat) :

Jika titik akhir < titik awal, lakukan inkrementasi sumbu-x dan sumbu-y dari titik awal sampai titik akhir.Jika tidak, maka Lakukan dekrementasi sumbu-x dan sumbu-y dari titik awal sampai titik akhir

3. Tampilkan garis menggunakan nilai parameter koordinat yang telah dihitung.Program gambar garis vertikal

Program garis diagonal

void __fastcall TForm1::Button1Click(TObject *Sender){x1=50; y1=100;x2=200; y2=200;int i; if ((x1<x2) && (y1<y2))


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

4. 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-x04. Hitung jarak mendatar ke 2 titik (dy)

Dy=y1-y05. Tentukan faktor pembagi (mencari yg lebih panjang)

Apakah dx>dy,bila yaStep=dx

Bila tidakStep=dy

6. Hitung faktor penambah ke koordinat mendatar dan vertikal titik berikut (x_tambah,y_tambah)

X_tambah=dx/stepY_tambah=dy/step

7. Buat loop mulai titik ke 1 sampai titik ke stepFor k=1 to step

8. Hitung koodinat titik berikutnyaX=x+x_tambahY=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

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

Transformasi 2D


Transformasi

Gambar dan grafik dapat dibuat berdasarkan prosedur dan atribut output primitif.

Dalam aplikasi grafik diperlukan perubahan bentuk, ukuran dan posisi suatu gambar yang

disebut dengan manipulasi. Perubahan gambar dengan mengubah koordinat dan ukuran

suatu objek disebut transformasi geometri. Kata transformasi berarti berubah bentuk.

Transformasi diperlukan untuk

mengubah (transform) posisi suatu objek dari suatu tempat asal ke posisi

elemen grafik.

Memindahkan suatu objek dari suatu tempat ke tempat lain

Memutar posisi suatu objek pada titik pusat

Mengubah ukuran suat objek baik memperkecil maupun memperbesar dari

ukuran aslinya.

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

Transformasi dasar yaitu translasi, skala dan rotasi. Selain transformasi tersebut , masih

ada transformasi lain yang biasa digunakan untuk mengubah suatu objek , seperti refleksi,

streching/shear.

1. Translasi

Translasi adalah transformasi terhadap suatu objek dengan menggesernya dari suatu

posisi ke posisi lain.

C’

C

ty tx A’ B’

A B

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)

Contoh translasi

Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan sistem

koordinat A(10, 10), B(30, 10) dan C(10, 30) dengan translasi vektor (10, 20),

pertama-tama dihitung hasil translasi satu demi satu.

Penyelesaian

Titik Ax’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

Kadang-kadang transformasi dinyataan dengan bentuk matriks, sehingga matriks

transformasi untuk translasi dapat dinyatakan sebagai berikut

=

21

xx

p

=

2'1'

'xx

p

=

txtx

T

Dengan demikian translasi dua dimensi dapat ditulis dalam bentuk matriks

P’ = P + T

2. SKALA

Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu yang

mengakibatkan berubahnya ukuran obyek secara keseluruhan.

Perubahan ukuran suatu objek menghasilkan koordinat baru. Koordinat baru

diperoleh dengan melakukan perkalian koordinat dengan skaling faktor , yaitu (sx,

sy), dimana sx adalah scaling factor menurut sumbu x, sedangkan sy adalah scaling


faktor menurut sumbu y. Koordinat baru titik yang diskala dapat diperoleh dengan

rumus

x’ = x . Sx

y’ = y . Sy

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

diskala.

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

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

akan diperkecil. Bila sx dan sy mempunyai nilai sama, maka skala tersebut uniform

scaling. Nilai yang tidak sama dari sx dan sy menghasilkan differential scaling, yang

biasa digunakan pada program aplikasi.

Contoh skala

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

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

Penyelesaian :

Sx=2, Sy=0,5

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

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

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

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

Gambar100908070605040302010

10 20 30 40 50 60 70 80 90 100 110


asal

hasil

29

3. ROTASI

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-persamaan transformasi dalam teori grafika komputer diasumsikan titik pusat di 0,0

Persamaan

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

Dengan θ:adalah sudut putar

Matriks

R=

ContohSegitiga ABC diatas diputar 90o,hitung koordinat hasil dan gambarkan!Segitiga A(10,20),B(50,20),dan C (10,100)Penyelesaianθ=90o

maka,xa’=xa*cos 90-ya*sin 90=10*0-20*1=-20ya’=xa*sin 90+ya*cos 90=10*1+20*0=10

xb’=xb*cos 90-yb*sin 90=50*0-20*1=-20yb’=xb*sin 90+yb*cos 90=50*1+20*0=50

xc ’=xc *cos 90-yc*sin 90=10*0-100*1=-100yc’=xc*sin 90+yc*cos 90=10*1+100*0=10jadiA’(-20,10),B’(-20,50),C’(-100,10)

Gambar10090807060


Cos θ sin θ 0

-sin θ cos θ 0

0 0 1

asalhasil

30

5040302010

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

Aplikasi dengan Proses Transformasi

1. Translasi dan Skala

Rancang Form Sebagai Berikut

Kode Perintah dalam file Header

public: // User declarations

int x1, y1, x2, y2;

int Tx, Ty;

float Sx, Sy;

__fastcall TForm1(TComponent* Owner);

Kode Perintah dalam File Unit

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

#include <vcl.h>

#pragma hdrstop


Latihan1. Terdapat segiempat A(10,10),B(100,10),C(100,100),dan D(10,100)

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

hasil !

31

#include "UtranSkal.h"

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

#pragma package(smart_init)

#pragma resource "*.dfm"

TForm1 *Form1;

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

__fastcall TForm1::TForm1(TComponent* Owner)

: TForm(Owner)

{

}

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

void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender)

{

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

//PaintBox1->Canvas->Brush->Color = clWhite;

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

int Tx;

Tx = StrToInt(EditTx->Text);

Ty = StrToInt(EditTy->Text);

x1 = x1 + Tx; y1 = y1 + Ty;

x2 = x2 + Tx; y2 = y2 + Ty;

PaintBox1->Canvas->Pen->Color = clRed;

PaintBox1->Canvas->Brush->Color = clGreen;

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

}

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

void __fastcall TForm1::FormPaint(TObject *Sender)

{

x1 = 10;

x2 = 40;

y1 = 10;

y2 = 60;

PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height);



}

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

void __fastcall TForm1::ButtonSkalaClick(TObject *Sender)

{

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

PaintBox1->Canvas->Brush->Color = clWhite;


Sx = StrToFloat(EditSx->Text);

Sy = StrToFloat(EditSy->Text);

x1 = int(x1 * Sx); y1=int(y1*Sy);

x2 = int(x2*Sx); y2= int(y2*Sy);

//PaintBox1->Canvas->Brush->Color = clYellow;

PaintBox1->Canvas->Pen->Color = clBlack;


}

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

void __fastcall TForm1::ButtonGambarClick(TObject *Sender)

{

x1 = 10;

x2 = 40;

y1 = 10;

y2 = 60;

PaintBox1->Canvas->Pen->Color = clYellow;

PaintBox1->Canvas->Brush->Color = clYellow;


PaintBox1->Canvas->Pen->Color = clRed;


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

}

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

void __fastcall TForm1::ButtonKeluarClick(TObject *Sender)

{

Close();

}

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

Jika Apilkasi dijalankan



Pertemuan 7

Transformasi 2D

Skala atau rotasi menggunakan sembarang titik pusat

Seperti telah dijelaskan sebelumnya, skala dan rotasi menggunakan titik (0,0) sebagai

titik pusat transformasi. Agar kita dapat menggunakan sembarang titik pusat (Xt, Yt)

sebagai titik pusat transformasi dilakukan dengan urutan:

A. Cara 1

1. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt

2. Rotasi/Skala

3. Translasi (Xt, Yt)

Latihan

Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o

dengan titik pusat (3,2)

y

D C

2

1 A B

1 3 x

Jawab :

A = (1,1), B = (3,1), C = (3,2), D=(1,2)

Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek harus

ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan titik pusat (0,0),

setelah itu objek diputar sebesar 60o dan kemudian hasil pemutaran ditranslasikan

sebesar(3,2)

1. Translasi sebesar (-3,-2)

A = (1-3,1-2) = (-2, -1)

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

C = (3-3, 2-2) = (0, 0)

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

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


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

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

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


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

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

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

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

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

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

A”=(2.866, -0.232)

B”=(3.866, 1.500)

C”=(3.000, 2.000)

D”=(2.000, 0.268)

Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah

y

D C

2 C”

1 A B B”

D”

1 A” 3 x

B. Cara 2

1. Rotasi/Skala, Misal : A’

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

dy = Yt-YA’

3. Translasi ke dx, dy

Misal



y

D C

2

1 A B

1 3 x

Jawab

Aplikasi


Kode programJam.h//---------------------------------------------------------------------------

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


#endif

Jam.cpp

//---------------------------------------------------------------------------#include <vcl.h>#include <math.h>#pragma hdrstop#include "jam1.h"//---------------------------------------------------------------------------#pragma package(smart_init)#pragma resource "*.dfm"TForm1 *Form1;//---------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner){}//---------------------------------------------------------------------------void __fastcall TForm1::PaintBox1Paint(TObject *Sender){PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110);PaintBox1->Canvas->Ellipse(0,0,400,400);

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

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


dy = y1-ys1;x1= xs1 + dx;y1= ys1 + dy;x2 =xs2 + dx;y2 = ys2 + dy;PaintBox1->Canvas->Pen->Width = 3;PaintBox1->Canvas->Pen->Color = RGB (0, 0,0);PaintBox1->Canvas->MoveTo(x1,y1);PaintBox1->Canvas->LineTo(x2,y2);PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10);PaintBox1->Canvas->Ellipse(196,196,204,204);}//---------------------------------------------------------------------------

Hasil

Transformasi 2D


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

4. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt

5. Rotasi/Skala

6. Translasi (Xt, Yt)

Latihan



y

D C

2

1 A B

1 3 x

Jawab :

A = (1,1), B = (3,1), C = (3,2), D=(1,2)

Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek harus

ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan titik pusat (0,0),

setelah itu objek diputar sebesar 60o dan kemudian hasil pemutaran ditranslasikan

sebesar(3,2)

4. Translasi sebesar (-3,-2)

A = (1-3,1-2) = (-2, -1)

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

C = (3-3, 2-2) = (0, 0)

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

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


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

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

A”=(2.866, -0.232)

B”=(3.866, 1.500)

C”=(3.000, 2.000)

D”=(2.000, 0.268)

Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah

y

D C

2 C”

1 A B B”

D”

1 A” 3 x

B. Cara 2

4. Rotasi/Skala, Misal : A’

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

dy = Yt-YA’

6. Translasi ke dx, dy

Misal



y

D C

2

1 A B

1 3 x

Jawab

Aplikasi


Kode program

Jam.h

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

#ifndef jam1H

#define jam1H

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

#include <Classes.hpp>

#include <Controls.hpp>

#include <StdCtrls.hpp>

#include <Forms.hpp>

#include <ExtCtrls.hpp>

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

class TForm1 : public TForm

{

__published: // IDE-managed Components

TPaintBox *PaintBox1;

TTimer *Timer1;

TTimer *Timer2;

void __fastcall PaintBox1Paint(TObject *Sender);

void __fastcall Timer2Timer(TObject *Sender);

private: // User declarations




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

float xt1, xt2, yt1, yt2, sudut;

float xs1, xs2, ys1, ys2, dx, dy ;

float sudut_rad;

};

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

extern PACKAGE TForm1 *Form1;

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

#endif

Jam.cpp

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

#include <vcl.h>

#include <math.h>

#pragma hdrstop

#include "jam1.h"

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



TForm1 *Form1;

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


: TForm(Owner)

{

}

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

void __fastcall TForm1::PaintBox1Paint(TObject *Sender)

{

PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110);

PaintBox1->Canvas->Ellipse(0,0,400,400);

PaintBox1->Canvas->MoveTo(200,0);

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

PaintBox1->Canvas->LineTo(200,25);












x1=200; y1=200; x2=200; y2=70;

x=200; y =70;

sudut = 0;

}

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

void __fastcall TForm1::Timer2Timer(TObject *Sender)

{


PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110);

PaintBox1->Canvas->MoveTo(x1,y1);

PaintBox1->Canvas->LineTo(x2,y2);



sudut=-25;

xs1=x1 *cos(sudut)-y1*sin(sudut);

ys1=x1 *sin(sudut)+y1*cos(sudut);

xs2=x2 *cos(sudut)-y2*sin(sudut);

ys2=x2 *sin(sudut)+y2*cos(sudut);

dx = x1-xs1;

dy = y1-ys1;

x1= xs1 + dx;

y1= ys1 + dy;

x2 =xs2 + dx;

y2 = ys2 + dy;


PaintBox1->Canvas->Pen->Color = RGB (0, 0,0);

PaintBox1->Canvas->MoveTo(x1,y1);

PaintBox1->Canvas->LineTo(x2,y2);



}


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

Hasil

ANIMASI

Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika

komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer pada

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

tertentu, menampilkan keluaran program dengan gambar-gambar yang menarik dibanding

hanya sederet angka, serta tak ketinggalan pula untuk program-program permainan.

Teknik Animasi

1. inbetweening

Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari. Ide

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

objek, dan kemudian menghitung posisi objek yang baru, menghapus pada posisi

semula dan menggambar objek pada posisi yang baru, sampai objek berada pada

posisi akhir yang dituju.

Contoh

Hiu

Rancangan


Hiu.H

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

#ifndef sharkH

#define sharkH

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

#include <Classes.hpp>

#include <Controls.hpp>

#include <StdCtrls.hpp>

#include <Forms.hpp>

#include <ExtCtrls.hpp>

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

class TForm1 : public TForm

{

__published: // IDE-managed Components

TPaintBox *PaintBox1;

TTimer *Timer1;

TTimer *Timer2;

void __fastcall PaintBox1Paint(TObject *Sender);



private: // User declarations



int x1, y1, x2,y2,x3,y3;

int xk1,yk1, xk2, yk2, xk3, yk3, xk4, yk4;

int xl1, yl1, xl2, yl2, xl3, yl3;

int xg1, yg1, xg2, yg2;


POINT kapal[4];

POINT layar[3];

};

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

extern PACKAGE TForm1 *Form1;

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

#endif

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

Hiu.Cpp

#include <vcl.h>

#pragma hdrstop

#include "shark.h"

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



TForm1 *Form1;

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


: TForm(Owner)

{

}

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

void __fastcall TForm1::PaintBox1Paint(TObject *Sender)

{

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

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

PaintBox1->Canvas->Rectangle(0,0, 617,250);


PaintBox1->Canvas->Rectangle(0,250, 617,473);

xk1=70; yk1=250;

xk2=120; yk2=250;

xk3=140; yk3=220;

xk4=50; yk4=220;

xg1=95; yg1=220;

xg2=95; yg2=200;




kapal[0] = Point(70,250);

kapal[1] = Point(120,250);

kapal[2] = Point(140,220);

kapal[3] = Point(50,220);

PaintBox1->Canvas->Polygon((TPoint*)kapal,3);



xl1=95;yl1=200;

xl2=140; yl2=200;

xl3=95; yl3=100;

layar[0] = Point(xl1,yl1);



PaintBox1->Canvas->Polygon((TPoint*)layar,2);



POINT titik[5];

titik[0] = Point(617,200);

titik[1] = Point(250,250);

titik[2] = Point(500,275);

titik[3] = Point(617,300);

titik[4] = Point(617,200);

PaintBox1->Canvas->Polygon((TPoint*)titik,4);

PaintBox1->Canvas->Pen->Color=RGB(126,39, 22);






















x1=20; y1= 400;

x2=10; y2= 440;

x3=40; y3= 440;

PaintBox1->Canvas->MoveTo(x1, y1);



POINT titikhiu[4];

titikhiu[0] = Point(x1,y1);




PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3);

}

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


{






PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); //warna latar (laut/biru tua)


PaintBox1->Canvas->Pen->Color=RGB(20,65, 212); //warna latar (laut/biru tua)

POINT titikhiu[2];





x1=x1+7; y1= 400;

x2=x2+7; y2= 440;

x3=x3+7; y3= 440;

PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); //warna hiu

PaintBox1->Canvas->Brush->Color=RGB(119,131, 127); //warna hiu






if (x2 > 617)

Close();

}

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


{





POINT kapal[4];

kapal[0] = Point(xk1,yk1);





PaintBox1->Canvas->MoveTo(xg1,yg1);

PaintBox1->Canvas->LineTo(xg2,yg2);






xk1=xk1+2; yk1=250;

xk2=xk2+2; yk2=250;

xk3=xk3+2; yk3=220;

xk4=xk4+2; yk4=220;

xg1=xg1+2; yg1=220;

xg2=xg2+2; yg2=200;

xl1=xl1+2;yl1=200;

xl2=xl2+2; yl2=200;

xl3=xl3+2; yl3=100;



PaintBox1->Canvas->MoveTo(xk1,yk1);







PaintBox1->Canvas->MoveTo(xg1,yg1);

PaintBox1->Canvas->LineTo(xg2,yg2);

POINT layar[3];









if (xk2 > 250)


Timer2->Enabled = false;

}

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


Documents

KuliahGrafiKomTI_part1