BAB VIII

PEMROGRAMAN GRAFIK

8.1. Tranformasi Skala Semesta Ke Layar

8.2. Grafik Garis dan Bidang
8.3. Grafik Fungsi
8.4. Animasi
 Pengertian Grafik
Grafik : lebih diartikan ke makna gambar,
bukan makna grafik (graph) yang sebenarnya.
Fasilitas yang disediakan Borland C++Builder :
1. Graphic Device Interface (GDI)
2. DirectX
3. OpenGL
Pembahasan dibatasi pada GDI : fungsi-fungsi
antarmuka (interface) grafik yang dibungkus
(encapsulated) dalam satu objek VCL, khusus
untuk GDI ada dua kelas yang kelas yang
digunakan, yaitu kelas TCanvas dan kelas
TImage.
 8.1. Tranformasi Skala
Semesta Ke Layar
Y+ (1,1) (0,0)

X+ X+

X+ Y+ Y+
(0,0) (80,25)
(1024, 768)

(a) (b) (c)

(a). Sistem koordinat siku-siku
(b). Monitor modus teks
(c). Monitor SVGA modus grafik
Pada saat akan menampilkan gambar di
monitor terdapat perbedaan mendasar
antara sistem koordinat semesta dengan
sistem koordinat di monitor.
Dilakukan penyesuaian antara sistim
koordinat semesta dengan sistim koordinat
monitor melalui transformasi dan
penskalaan.
Transformasi berkaitan dengan sistem
koordinat, sedangkan penskalaan berkaitan
dengan dimensi objek yang digambar
(kode programnya pada halaman berikut)
void __fastcall TGrafis::FormCreate(TObject *Sender)
{
Gbr.Left=-100;
Gbr.Right=1000;
Gbr.Top=100;
Gbr.Bottom=-100;
}
void TGrafis::Transformasi(void)
{
int Lebar= Gbr.Right-Gbr.Left;
int Tinggi=Gbr.Top-Gbr.Bottom;
SetMapMode(PaintBox1->Canvas->Handle, MM_ANISOTROPIC);
SetWindowExtEx(PaintBox1->Canvas->Handle,
Lebar,Tinggi, NULL);
SetViewportExtEx(PaintBox1->Canvas->Handle,PaintBox1-
>Width, PaintBox1->Height, NULL);
SetWindowOrgEx(PaintBox1->Canvas->Handle,0,0,NULL);
SetViewportOrgEx(PaintBox1->Canvas->Handle,PaintBox1-
>Width*.1, PaintBox1->Height*.5, NULL);
}
 8.2. Grafik Garis dan Bidang
Fasilitas yang terdapat pada objek VCL yang
dimiliki Borland C++Builder untuk
menggambar grafik ada dua kelas, yaitu :
1. Kelas TCanvas
2. Kelas TImage

1. Kelas TCanvas
 Turunan dari Kelas Persistent
 Diletakkan pada file header vcl.h
(diincludekan)
 Bukan merupakan Component
Pallete(Annditonal)
Kelas TCanvas memiliki beberapa properti dan
method yang dapat dimanfaatkan untuk
keperluan menggambar, antara lain :
a. Properti Pen : digunakan untuk menentukan
jenis, warna, dan tebal garis yang dilakukan
untuk proses penggambaran. Properti Pen
memiliki empat properti yaitu Color, Width,
Style, dan Mode.
b. Properti Brush : digunakan untuk mengisi
suatu area tertentu pada Canvas dengan
berbagai jenis warna, gaya arsiran, dan juga
latar yang berbentuk gambar. Properti Brush
memiliki tiga properti, yaitu : Color, Style, dan
Bitmap.
c. ….
c. Properti Font : digunakan untuk menuliskan teks
dengan memodifikasi ukuran dan warna teks. Untuk
keperluan ini, digabung dengan method TextOut.
d. Method MoveTo dan LineTo : digunakan untuk
menggambar garis dari (x1,y1) ke posisi (x2, y2).
Untuk menentukan posisi awal digunakan method
MoveTo(x1,y1) dan untuk menentukan posisi akhir
digunakan method LineTo(x2, y2).
e. Method Rectangle dan RoundRect : digunakan
untuk menggambar segi empat dari dari sudut kiri
atas (x1,y1) ke sudut kanan bawah (x2, y2). Method
Rectangle digunakan mengambar segiempat dengan
titik sudutnya siku-siku, sedangkan method RoudRect
titik sudutnya berbentuk seperempat lingkaran.
f. Method Ellipse : digunakan untuk
menggambar lingkaran atau oval (ellips) dari
sudut kiri atas (x1,y1) ke sudut kanan bawah
(x2, y2).
g. Method Arc, Chord, dan Pie : digunakan
untuk menggambar Busur (Arc), Tembereng
(Chord), dan Juring (Pie) lingkaran dari dari
sudut kiri atas (x1,y1) ke sudut kanan bawah
(x2, y2) dengan ujung kanan (x3, y3) dan ujung
kiri (x4, y4).
h. Method Polygon, dan Polyline : digunakan
untuk menggambar bangun segibanyak
(Polygon) dan menggambar garis-garis yang
saling menyambung (Polyline).
2. Kelas TImage

 Merupakan Turunan dari Kelas Component Pallete

 Diletakkan pada file header vcl.h (diincludekan)
 Dimunculkan pada Component Pallete
 Digunakan untuk menampilkan gambar yang
bertipe Bitmap (BMP), Icon (ICO), dan Metafile
(EMF, dan WMF).

Penempatan gambar dapat dilakukan dengan 2 cara :

1. Melalui properti Picture (file gambar)
2. Memanggil langsung saat aplikasi dijalankan
8.3. Grafik Fungsi
Menggambar grafik fungsi, dapat dilakukan dengan
memanfaatkan properti dan method yang dimiliki
kelas TCanvas, dengan tahap-tahap sebagai berikut
:
1. Transformasi yaitu menyesuaikan sistem
koordinat layar dengan sistem koordinat semesta.
2. Penskalaan yaitu menyesuaikan koordinat
minimum dan maksimum semesta dengan layar.
3. Membuat sumbu koordinat.
4. Menentukan titik koordinat dari fungsi (hitung).
5. Menggambar kurva fungsi dengan
menghubungkan titik-titik koordinat dengan
menggunakan method MoveTo( ) dan LineTo( ).
 8.4. Animasi
Animasi merupakan salah satu bagian dari grafika
komputer yang menyajikan tampilan secara atraktif
dengan gambar seolah-olah bergerak.
Manfaat Animasi :
 Menarik perhatian pemakai komputer
 Memvisualisasikan cara kerja suatu alat atau
mekanisme tertentu
 Menampilkan gambar-gambar yang menarik
 Program permainan
Saat ini sudah banyak software yang khusus untuk
Animasi, mis : Flash MX, 3ds max, EJS, dll.
 Teknik Animasi ada 4 macam, yaitu :

1. Teknik Animasi inbetweening .

2. Teknik Animasi Menggerakkan Citra
3. Teknik Animasi dengan mengubah palet.
4. Teknik Animasi dengan permainan
Halaman
1. Teknik Animasi inbetweening

Langkah-langkahnya :
 Tentukan posisi awal dan posisi akhir
 Gambar objek pada posisi awal
 Tentukan posisi yang baru untuk objek
 Hapus objek pada posisi yang lama
 Gambar objek pada posisi yang baru
 Lakukan hal yang sama sampai objek
berada pada posisi akhir yang dituju.
2. Teknik Animasi
Menggerakkan Citra
Langkah-langkahnya :
Alokasikan peubah dinamis untuk
menyimpan citra (memori).
Simpan citra pada tempat yang sudah
dipesan.
Tempatkan citra pada posisi awal
Pindahkan citra ke lokasi baru.
Lakukan hal yang sama sampai citra berada
pada posisi akhir yang dituju.
Dealokasikan citra dari peubah dinamis.
3. Teknik Animasi dengan
mengubah palet.
Langkah-langkahnya :
Siapkan palet (palette) elektronis sebagai
pencampur warna.
Gambar objek menggunakan palet dengan warna
tertentu.
Hapus objek pada posisi yang lama dengan
mewarnai objek dengan warna latar belakang.
Gambar objek pada posisi yang baru dengan warna
tertentu
Lakukan hal yang sama sampai objek berada pada
posisi akhir yang dituju.
4. Teknik Animasi dengan
permainan Halaman
Langkah-langkahnya :
Gambar masing-masing objek yang dianimasi
pada halaman yang berbeda menurut urutan
animasinya.
Tampilkan masing-masing halaman secara
bergantian menurut urutan animasinya.
Lakukan hal yang sama sampai objek berada
pada posisi akhir yang dituju (urutan animasi
terkhir).
 Tugas (Strip, Crimp, and Test)
Buatlah kabel jaringan RJ45 tipe Strike untuk
menghubungkan komputer ke Hub dengan
susunan kode warna seperti pada gambar: