Modul Grafkom 1-5 PDF
Modul Grafkom 1-5 PDF
PENDAHULUAN
1.1. Bahasa Pemrograman Java
Java memiliki dua fasilitas untuk pemrograman GUI: AWT dan Swing. Versi awal Java memberikan dukungan grafik
yang terbatas. Hanya fitur-fitur grafik minimal yang telah dimasukkan dalam JDK 1.x. Dukungan Antarmuka Grafis
(GUI) dan fitur untuk menggambar grafis telah disediakan dalam paket Abstract Window Toolkit (AWT). Komponen
GUI dalam AWT sangat berat dimapkan ke dalam komponen native sistem operasi. Disamping sekumpulan fiturnya
yang sederhana untuk membuat elemen-elemen GUI, AWT memberikan kemampuan untuk mengatur atribut
rendering, seperti menggambar dengan warna dan menggambar grafik sederhana, misalnya garis, persegipanjang,
dan oval. Juga ada beberapa dukungan untuk gambar (image). Tetapi, fitur-fitur ini terbatas. Contohnya, tidak ada cara
untuk mengatur tebal dari garis yang digambar. Karena keterbatasannya, Java versi awal tidak menyediakan dukungan
yang cukup untuk pemrograman grafika komputer modern. Paket Swing adalah desain ulang pemrograman GUI
termasuk API dalam platform Java 2. Kebanyakan komponen Swing tidak berat tidak diimplementasikan sebagai
komponen asal. Dukungan grafis dalam Java 2 juga lebih ditingkatkan lagi.
public AWTDemo() {
setTitle("AWT Demo");
// create menu
MenuBar mb = new MenuBar();
setMenuBar(mb);
Menu menu = new Menu("File");
mb.add(menu);
MenuItem mi = new MenuItem("Exit");
mi.addActionListener(this);
menu.add(mi);
// end program when window is closed
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent ev) {
System.exit(0);
}
};
this.addWindowListener(l);
// mouse event handler
MouseListener mouseListener = new MouseAdapter() {
public void mouseClicked(MouseEvent ev) {
x = ev.getX();
y = ev.getY();
repaint();
}
};
addMouseListener(mouseListener);
}
Ketik kode Java di atas, kemudian compile dan jalankan. Apa yang dihasilkan oleh program tersebut?
Program tersebut adalah sebuah aplkasi GUI menggunakan AWT. Program itu mempunyai sebuah jendela (window)
utama dengan sebuah menu dan sebuah lingkaran. Menunya hanya berisi sebuah item, Exit, yang digunakan untuk
menutup jendela (window) ketika dipilih. Penggambaran grafik merespon hasil klik mouse dengan menggambar objek
pada lokasi mouse ketika di-klik.
Kelas AWTDemo didefinisikan menjadi sebuah subkelas Frame (Bingkai). Kelas tersebut mendefinisikan windows
(jendela) program utama. Menu dalam frame (bingkai) dibuat dengan objek dari Kelas MenuBar, Menu, dan
MenuItem. Kelas AWTDemo mengimplementasikan interface ActionListener untuk memproses ActionEvent yang
dibangkitkan oleh pilihan menu. Method actionPerformed yang didefinisikan dalam interface adalah kendali (handler)
untuk kejadian (event). Ketika item menu Exit dipilih, program keluar dengan memanggil method System.exit(0).
Dua pengendali kejadian (event handler) lainnya didefinisikan dalam konstruktor kelas AWTDemo. Sebuah
WindowListener didefinisikan sebagai sebuah kelas anonim dari WindowAdapter. Kelas ini akan menjalankan method
windowClosing untuk menghentikan program ketika menerima kejadian (event) penutupan (closing) untuk jendela
(window). Listener lainnya adalah sebuah MouseListener, diturunkan dari kelas MouseAdapter. Methode
mouseClicked digunakan untuk menangani kejadian klik-mouse (event mouse-click). Dalam method mouseClicked,
lokasi mouse-nya disimpan kedalam variabel x dan y, dan sebuah panggilan terhadap method repaint dibuat untuk
penggambaran kembali dan memindahkan objek ke lokasi yang baru.
Method paint menggambar sebuah lingkaran beradius 50 dengan method drawOval dalam objek Graphics. Titik
tengah lingkaran ditentukan dengan variabel x dan y.
Method utama (main method) membuat dan menampilkan sebuah instance AWTDemo. Bingkainya (frame)
ditentukan dengan ukuran 640 x 480.
Java 2D
Platform Java memberikan sekumpulan API (application programming interface) yang komprehensif. Java API
mencakup pekerjaan dan aplikasi yang luas: I/O file, grafika, multimedia, database, jaringan, keamanan, dan
sebagainya.
Java 2 membawa kemajuan yang signifikan dalam kemampuan grafik dengan memperkenalkan Swing dan API Java
2D dan 3D. API yang didesain dengan baik memberikan dukungan komprehensif untuk grafika komputer. Bersamasama dengan keuntungan unik yang dapat diperoleh dari bahasa pemrograman Java, mereka telah mengkombinasikan
Java dengan Java 2D dan 3D; sebuah pilihan yang sangat baik untuk pemrograman grafika dan belajar grafika
komputer.
Di bawah ini sebuah contoh yang mendemonstrasikan fitur grafika Java 2D. Kode dalam demo ini menggunakan
kemampuan Java 2D seperti, transparansi, pewarnaan gradien, transformasi, dan pemilihan jenis huruf yang tidak
tersedia dalam Java AWT.
Untuk mencoba kemampuan Java 2D di komputer Anda lakukan tahapan-tahapan berikut:
1.
2.
3.
4.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.awt.font.*;
import java.awt.geom.*;
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
// draw an ellipse
Shape ellipse = new Ellipse2D.Double(150, 100, 200, 200);
GradientPaint paint =
new GradientPaint(100,100, Color.white, 400, 400, Color.gray);
g2.setPaint(paint);
g2.fill(ellipse);
// set transparency
AlphaComposite ac =
AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.4f);
g2.setComposite(ac);
g2.setColor(Color.blue);
Nama kelas komponen Swing secara khusus mempunyai awalan J. Kelas Panel2D extends kelas JPanel dan
overrides method paintComponent. Parameter Grafik dalam method adalah cast to Graphics2D untuk mengambil
manfaat fungsi yang dikembangkan dalam Java 2D. Sebuah lingkaran digambar dengan warna gradien yang merubah
warnanya berdasarkan lokasi. Kemudian composite rule diatur untuk mencapai derajat transparansi. Huruf glyph
untuk string text 2D diambil dan garis tepinya (outline) digunakan sebagai bentuk geometri. Bentuk string 2D
diputar 30 derajat (p/6).
Program Java sering dapat ditulis sebagai applet atau aplikasi. Program di atas sebuah contoh program dual
purpose. Kelas Demo2D adalah subkelas dari JApplet dan dapat dijalankan sebagai applet. Tetapi, dalam program
ini juga terdapat method utama (main method) sehingga juga dapat dijalankan sebagai aplikasi. Method utama (main
method) membuat sebuah instance Jframe dan menambah sebuah instance Demo2D ke bingkai (frame). Hasil dari
program aplikasi dan aplet hampir mirip.
BAB 2
DASAR-DASAR GRAFIK 2D
Subkelas
Format
Contoh
Garis
Line2D
Line2D.Double
Line2D.Float
g2.draw(new
Line2D.Double(x1, y1,
x2, y2));
g2.drawLine(100,100
,200,200);
Persegipanjang
Rectangle2D
Rectangle2D.Double
Rectangle2D.Float
g2.draw(new
Rectangle2D.Double(x,
y, rectwidth,
rectheight));
g2.draw(new
Rectangle2D.Double(
50, 25, 100, 50));
Ellips
Ellipse2D
Ellipse2D.Double
Ellipse2D.Float
g2.draw(new
Ellipse2D.Double(x, y,
rectwidth, rectheight));
g2.draw(new
Ellipse2D.Double(20
0,50,100,50));
Busur
Arc2D
Arc2D.Double
Arc2D.Float
g2.draw(new
Arc2D.Double(x, y,
rectwidth, rectheight, 90,
135, Arc2D.OPEN));
g2.draw(new
Arc2D.Double(200,
125, 100, 50, 90, 135,
Arc2D.OPEN));
Kurva kuadrat
QuadCurve2D
QuadCurve2D.Dou
ble
QuadCurve2D.Floa
t
g2.draw(new
QuadCurve2D.Double(x
1, y1, ctrlx, ctrly, x2,
y2));
g2.draw(new
QuadCurve2D.Doubl
e(100,250,175,175,30
0,250));
Kurva kubik
CubicCurve2D
CubicCurve2D.Doubl g2.draw(new
e
CubicCurve2D.Double(
CubicCurve2D.Float 50,300,150,
200,200,400,300,300));
g2.draw(c.setCurve(x
1, y1, ctrlx1, ctrly1,
ctrlx2, ctrly2, x2,
y2));
Catatan:
Kelas Arc2D mendefinisikan 3 (tiga) tipe busur, ditunjukkan dengan konstanta yang menyertai dalam
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
2.2 GEOMETRI BIDANG KONSTRUKTIF
Satu cara untuk membuat bentuk lebih kompleks adalah dengan mengkombinasikan beberapa bentuk sebelumnya
(objek geometri). Cara ini dikenal sebagai geometri area konstruktif (constructive area geometry). Kelas Area
didesain untuk menghasilkan geometri area konstruktif. Empat operasi yang didukung adalah: union, interseksi,
pertidaksamaan, pertidaksamaan geometris. Operasi ini dilakukan pada wilayah dua bidang, menghasilkan bidang
baru. Objek Area dapat dibangun dari semua objek Shape menggunakan konstruktor berikut::
void add(Area a)
void intersect(Area a)
void subtract(Area a)
void exclusiveOr(Area a)
Listing berikut menunjukkan sebuah program yang mendemonstrasikan efek dari empat operasi geometri area
konstruktif. Dua bentuk dikombinasikan menggunakan empat operasi untuk menghasilkan empat bentuk baru.
10
11
12
13
14
15
16
17
Latihan
ketik masing-masing listing program tersebut di atas. Kemudian compile dan jalankan.
Catatan:
Supaya hanya menampilkan bidang hasil operasi add, intersect, subtract, dan, dan exclusiveOr, hilangkan instruksi
(baris program):
//gambar lingkaran pertama
g2.draw(s1);
18
19
20
21
22
Latihan
Ketiklah kode program diatas. Kemudian compile dan jalankan. Menurut Anda gambar apa yang
dihasilkan oleh program tersebut? Jelaskan!
Tugas Projek
Tahap II
Lengkapilah program yang sudah Anda buat sebelumnya dengan menu yang digunakan untuk pengaturan garis pada
objek geometri yang terpilih untuk ditampilkan. Lihat screenshot berikut:
23
Gambar 3.1 Menu (objek) persegipanjang dan (tipe garis) putus-putus terpilih
Gambar 3.1 Menu (objek) elips dan (tipe garis) tebal terpilih
Keterangan:
1.
2.
Dalam tahap II (kedua) program ditambah kemampuan untuk menentukan tipe garis (stroke) yang digunakan
24
Untuk membuat menu tipe garis yang akan ditampilkan bisa diganti menggunakan radioButton.
Ditambah TextField yang digunakan untuk menentukan ketebalan garis.
1.
Dan lain-lain.
2.
Penambahan menu tipe garis diharapkan dapat diselesaikan dalam satu minggu, supaya tidak terbebani
25
BAB 3
MODEL GARIS
Anda telah mempelajari bagaimana membuat objek geometri sederhana dan bentuk-bentuk kompleks lainnya. Dalam
modul berikutnya akan dibahas tentang pengaturan tipe-tipe garis pada grafik. Materi yang dipelajari meliputi
pemilihan model garis/outline (stroking) yang diterapkan dalam pembuatan objek geometri.
BasicStroke()
BasicStroke(float width)
BasicStroke(float width, int cap, int join, float miterlimit, float[] dash, float dashphase)
Parameter width mendefinisikan lebar dari garis yang digambar. Parameter cap mengatur bentuk akhir garis dan dapat
menggunakan nilai:
CAP_BUTT
CAP_ROUND
CAP_SQUARE
JOIN_BEVEL
JOIN_MITER
JOIN_ROUND
miterlimit mengatur batasan untuk untuk JOIN_MITER untuk menanggulangi bentuk gabungan dua garis yang sangat
panjang ketika sudut antara kedua garis kecil.
Array dash mendefinisikan pola garis putus-putus dengan mengatur panjang segment ON/OF. Dasphase
mendefinisikan bentuk titik awal dalam pola garis putus-putus.
Listing berikut mempertunjukkan efek grafik yang menggambar garis dengan tipe garis (stroke) yang berbeda-beda.
26
27
28
29
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
30
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
Berikut adalah contoh penerapan kelas BasicStroke dalam sebuah program yang digunakan untuk
menggambar objek geometri sederhana.
31
32
33
34
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
35
36
37
38
39
Latihan:
Ketiklah kode program diatas. Kemudian compile dan
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
40
BAB 4
PEWARNAAN
Anda telah mempelajari bagaimana membuat objek geometri sederhana dan bentuk-bentuk kompleks lainnya serta
cara menentukan tipe-tipe garis (stroke) pada grafik. Dalam modul berikutnya akan dibahas tentang cara
menambahkan beberapa warna. Materi yang dipelajari meliputi pengisian warna (filling) yang diterapkan dalam
pembuatan objek geometri.
4.1 WARNA
Ketika objek geometri dibangun, objek tersebut dapat digambar dengan method fill(Shape) atau draw(Shape) dalam
Graphics2D. Untuk menentukan warna yang diganakan untuk menggambar objek, method dari kelas Graphics berikut
bisa digunakan:
void setColor(Color c)
Objek Color mendefinisikan sebuah warna. Kelas Color secara default menggunakan rentang warna RGB, sebagai
rentang warna standard. Warna yang terdiri dari Merah (Red), Hijau(Green), Biru(Blue) dan komponen Alfa (Alpha).
Komponen alpha mendefinisikan tingkat transparansi warna tersebut. Kelas Color mendefinisikan nilai warna
konstanta(constant) berikut::
black
blue
cyan
darkGray
gray
green
lightGray
magenta
orange
pink
red
white
yellow
41
Nama tersebut tidak mengikuti konvensi(convention) penamaan Java, yang mengatur bahwa konstanta harus dalam
huruf kapital. Sejak JDK 1.4, Anda bisa juga menggunakan konstanta baru: BLACK, BLUE, CYAN,
Versi pertama untuk menentukan ketiga komponen warna menggunakan nilai int dengan rentang 0-255. Versi kedua
mirip dengan yang pertama, tetapi ketiga nilainya dijadikan di-paket-kan dalam satu nilai int. Versi ketiga
menggunakan nilai float di rentang 0.0 1.0 untuk mendefinisikan komponen warnanya.
Konstruktor lain dari kelas Color mengijikan spesifikasi ruang warna.
Berikut adalah potongan program untuk menggambar tiga bujursangkar dengan warna berbeda:
Berikut listing lengkap dari program di atas. Listing tersebut menunjukkan sebuah program yang mendemonstrasikan
gambar sebuah objek geometris dengan warna garis yang berbeda-beda.
42
43
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
Berikut listing lengkap dari program yang mendemonstrasikan gambar sebuah objek geometris dengan warna garis
yang berbeda dengan warna area bidang-nya.
44
45
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
46
GradientPaint(float x1, float y1, Color c1, float x2, float y2, Color c2, boolean);
Berikut adalah contoh penerapan kelas GradientPaint dalam sebuah program Java.
47
48
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
49
____________________________________________________________________________________
____________________________________________________________________________________
Berikut contoh penerapan kelas GradientPaint lainnya dalam sebuah program Java.
50
51
Latihan:
Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program
tersebut? Jelaskan!
Jawab:
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
52
BAB 5
TEKS DAN FONT
Dalam grafika komputer, teks manggambarkan tipe khusus dari objek geometri. Serangkaian teks secara terpadu
digambarkan dengan sederet karakter dengan pola pengkodean standar, seperti ASCII dan Unicode. Penggambaran
bentuk yang sebenarnya dari karakter ditentukan oleh font standar. Geometri yang menggambarkan bentuk karakter
ini dikenal sebagai glyph. Font merupakan kumpulan dari glyph untuk seluruh abjad.
Java 2D menawarkan kumpulan font dan fitur manipulasi yang banyak. Yang paling tinggi tingkat penggunaannya
adalah pembuatan objek Font dan memanggil metode setFont dan drawString dalam Graphics2D.
Objek font dapat dibuat dengan konstruktor berikut:
Nama parameter menentukan nama font atau nama font yang logis. Sebuah font diidentifikasi dengan nama font (juga
disebut dengan nama font), seperti "Times New Roman." Font yang tersedia di lingkungan tergantung pada platform.
Java juga mendukung font logis untuk meningkatkan portabilitas. Sebuah font logis dipetakan ke font fisik pada
sistem tertentu. Misalnya, font logis "SansSerif" dipetakan ke "Arial" di sistem Windows. Lima keluarga font logis
yang selalu didukung di Jawa.
Serif
SanSerif
Monospaced
Dialog
DialogInput
Parameter style adalah digunakan untuk memilih bentuk font. Tiga bit didefinisikan dalam huruf, dan mereka dapat
dikombinasikan dengan bitwise ATAU "|" operator:
PLAIN
ITALIC
BOLD
53
Font akan menyebabkan efek panggilan subsequent ke method selanjutnya untuk membentuk teks:
Void drawString(String s, int x, int y)
void drawString(String s, float x, float y)
Selain menerapkan font yang ada di sistem, juga memungkinkan untuk mendapatkan font baru dari font yang sudah
ada dengan memodifikasi atribut tertentu. Berikut metode di kelas Font untuk menghasilkan font turunan:
54
55