BAB 2 DASAR-DASAR GRAFIK 2D

Transkripsi

1 1 BAB 2 DASAR-DASAR GRAFIK 2D 2.1 MENGGAMBAR OBJEK GEOMETRIS SEDERHANA Java 2D API menyediakan beberapa kelas yang mendefinisikan objek geometris umum seperti titik, garis, kurva, dan persegipanjang. Kelas geometri ini adalah bagian dari paket java.awt.geom. Tabel 2.1. Kelas Geometri No Objek Kelas Subkelas Format Contoh 1 Garis Line2D Line2D.Double Line2D.Float 2 Persegipanjang Rectangle2D Rectangle2D.Dou ble Rectangle2D.Flo at 3 Ellips Ellipse2D Ellipse2D.Doubl e Ellipse2D.Float 4 Busur Arc2D Arc2D.Double Arc2D.Float 5 Kurva kuadrat QuadCurve2D QuadCurve2D.Dou ble QuadCurve2D.Flo at Line2D.Double(x1, y1, x2, y2)); Rectangle2D.Doub le(x, y, rectwidth, rectheight)); Ellipse2D.Double (x, y, rectwidth, rectheight)); Arc2D.Double(x, y, rectwidth, rectheight, 90, 135, Arc2D.OPEN)); QuadCurve2D.Doub le(x1, y1, ctrlx, ctrly, x2, y2)); g2.drawline(10 0,100,200,200) ; Rectangle2D.Do uble(50, 25, 100, 50)); Ellipse2D.Doub le(200,50,100, 50)); Arc2D.Double(2 00, 125, 100, 50, 90, 135, Arc2D.OPEN)); QuadCurve2D.Do uble(100,250,1 75,175,300,250 )); 6 Kurva kubik CubicCurve2D CubicCurve2D.Do uble CubicCurve2D.Fl oat g2.draw(c.setcur ve(x1, y1, ctrlx1, ctrly1, ctrlx2, ctrly2, x2, y2)); CubicCurve2D.D ouble(50,300,1 50, 200,200,400,30 0,300)); Catatan: Kelas Arc2D mendefinisikan 3 (tiga) tipe busur, ditunjukkan dengan konstanta yang menyertai dalam kelas ini: OPEN, PIE, dan CHORD.

2 2 Berikut adalah contoh penerapan kelas geometris dalam sebuah program Java. Listing 2.1 KelasGeometri.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; public class KelasGeometri extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("kelas Geometri"); frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new KelasGeometri(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new Panel2D(); getcontentpane().add(panel); class Panel2D extends JPanel{ public Panel2D() { setpreferredsize(new Dimension(500, 400)); setbackground(color.white); public void paintcomponent(graphics g) { super.paintcomponent(g); Graphics2D g2 = (Graphics2D)g; //gambar garis; g2.drawline(100,100,200,200); //gambar persegipanjang Rectangle2D.Double(50, 25, 100, 50)); //gambar elips Ellipse2D.Double(200,50,100,50)); //gambar busur Arc2D.Double(200, 125, 100, 50, 90, 135, Arc2D.OPEN)); //gambar kurva kuadrat

3 3 QuadCurve2D.Double(100,250,175,175,300,250)); //gambar kurva kubik CubicCurve2D.Double(50,300,150, 200,200,400,300,300)); Latihan: Ketiklah kode program diatas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program tersebut? Jelaskan! Jawab: 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. Listing 2.2 AddArea.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.geom.*; public class AddArea extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("constructive Area Geometry");

4 4 frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new AddArea(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new AreaPanel(); getcontentpane().add(panel); class AreaPanel extends JPanel { public AreaPanel() { setpreferredsize(new Dimension(760, 400)); public void paintcomponent(graphics g) { Graphics2D g2 = (Graphics2D)g; //lingkaran pertama. Shape s1 = new Ellipse2D.Double(0, 0, 100, 100); //lingkaran kedua. Shape s2 = new Ellipse2D.Double(60, 0, 100, 100); //area geometri pertama. Area a1 = new Area(s1); //area geometri kedua. Area a2 = new Area(s2); //geser posisi kedua kedua lingkaran dengan x=20 y=50. g2.translate(20, 50); //penentuan ketebalan dan warna garis. BasicStroke bsthickline = new BasicStroke(5.0f); g2.setstroke(bsthickline); g2.setpaint(color.blue); //gambar lingkaran pertama. g2.draw(s1); //gambar lingkaran kedua. g2.draw(s2); //operasi "add". a2.add(a1); //penentuan warna untuk mengisi hasil operasi "add". g2.setpaint(color.green);

5 5 //pewarnaan area hasil operasi "add". g2.fill(a2); Listing 2.3 IntersectArea.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.geom.*; public class IntersectArea extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("geometri Bidang Konstruktif"); frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new IntersectArea(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new AreaPanel(); getcontentpane().add(panel); class AreaPanel extends JPanel { public AreaPanel() { setpreferredsize(new Dimension(760, 400)); public void paintcomponent(graphics g) { Graphics2D g2 = (Graphics2D)g; //lingkaran pertama Shape s1 = new Ellipse2D.Double(0, 0, 100, 100); //lingkaran kedua Shape s2 = new Ellipse2D.Double(60, 0, 100, 100); //area geometri pertama Area a2 = new Area(s2); //pindah posisi kedua kedua lingkaran dengan x=20 y=50 g2.translate(20, 50);

6 6 //gambar lingkaran pertama g2.draw(s1); //gambar lingkaran kedua g2.draw(s2); //area geometri kedua Area a1 = new Area(s1); //operasi "intersect" a1.intersect(a2); //penentuan ketebalan dan warna garis BasicStroke bsthickline = new BasicStroke(5.0f); g2.setstroke(bsthickline); g2.setpaint(color.blue); //gambar bidang hasil operasi "intersect" g2.draw(a1); //penentuan warna untuk mengisi bidang hasil operasi "intersect". g2.setpaint(color.green); //pewarnaan bidang hasil operasi "intersect". g2.fill(a1); Listing 2.4 Subtract.Area.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.geom.*; public class SubtractArea extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("geometri Bidang Konstruktif"); frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new SubtractArea(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new AreaPanel(); getcontentpane().add(panel);

7 7 class AreaPanel extends JPanel { public AreaPanel() { setpreferredsize(new Dimension(760, 400)); public void paintcomponent(graphics g) { Graphics2D g2 = (Graphics2D)g; //lingkaran pertama Shape s1 = new Ellipse2D.Double(0, 0, 100, 100); //lingkaran kedua Shape s2 = new Ellipse2D.Double(60, 0, 100, 100); //area geometri pertama Area a2 = new Area(s2); //pindah posisi kedua kedua lingkaran dengan x=20 y=50 g2.translate(20, 50); //gambar lingkaran pertama g2.draw(s1); //gambar lingkaran kedua g2.draw(s2); //area geometri kedua Area a1 = new Area(s1); //operasi "subtract" a1.subtract(a2); //penentuan ketebalan dan warna garis BasicStroke bsthickline = new BasicStroke(5.0f); g2.setstroke(bsthickline); g2.setpaint(color.blue); //gambar bidang hasil operasi "subtract" g2.draw(a1); //penentuan warna untuk mengisi bidang hasil operasi "subtract". g2.setpaint(color.green); //pewarnaan bidang hasil operasi "subtract". g2.fill(a1); Listing 2.5 exclusiveorarea.java import java.awt.*; import java.awt.event.*;

8 8 import javax.swing.*; import java.awt.geom.*; public class ExclusiveOrArea extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("geometri Bidang Konstruktif"); frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new ExclusiveOrArea(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new AreaPanel(); getcontentpane().add(panel); class AreaPanel extends JPanel { public AreaPanel() { setpreferredsize(new Dimension(760, 400)); public void paintcomponent(graphics g) { Graphics2D g2 = (Graphics2D)g; //lingkaran pertama Shape s1 = new Ellipse2D.Double(0, 0, 100, 100); //lingkaran kedua Shape s2 = new Ellipse2D.Double(60, 0, 100, 100); //area geometri pertama Area a2 = new Area(s2); //pindah posisi kedua kedua lingkaran dengan x=20 y=50 g2.translate(20, 50); //gambar lingkaran pertama g2.draw(s1); //gambar lingkaran kedua g2.draw(s2); //area geometri kedua Area a1 = new Area(s1); //operasi "exclusiveor" a1.exclusiveor(a2);

9 9 //penentuan ketebalan dan warna garis BasicStroke bsthickline = new BasicStroke(5.0f); g2.setstroke(bsthickline); g2.setpaint(color.blue); //gambar bidang hasil operasi "exclusiveor" g2.draw(a1); //penentuan warna untuk mengisi bidang hasil operasi "exclusiveor". g2.setpaint(color.green); //pewarnaan bidang hasil operasi "exclusiveor". g2.fill(a1); Latihan Ketik masing-masing listing program tersebut di atas. Kemudian compile dan jalankan. Apa yang dihasilkan oleh program tersebut? Jelaskan! Jawab: Catatan: Supaya hanya menampilkan bidang hasil operasi add, intersect, subtract, dan, dan exclusiveor, hilangkan instruksi (baris program): //gambar lingkaran pertama g2.draw(s1); //gambar lingkaran kedua g2.draw(s2); pada masing-masing listing program. 2.3 MENGGAMBAR OBJEK GEOMETRIS DENGAN KELAS generalpath Anda telah belajar bagaimana menggambar bentuk-bentuk geometri sederhana dan membuat bentuk dengan mengkombinasikan beberapa bentuk sebelumnya (objek geometri) yang dikenal sebagai geometri area konstruktif (constructive area geometry). Untuk membuat objek geometri yang lebih kompleks, misalnya poligon, segitiga, atau bintang, Anda bisa menggunakan kelas lain dari paket java.awt.geom, yaitu GeneralPath. GeneralPath dimulai dari titik asal, misalnya (0,0). Untuk membuat objek dengan kelas GeneralPath, panggil dengan new GeneralPath() kemudian tambahkan segmen ke bentuk yang akan dibuat dengan menggunakan method-method berikut:

10 10 moveto(float x, float y) Memindahkan titik path sekarang ke titik path yang diinginkan. lineto(float x, float y) menambahkan segmen garis ke path sekarang quadto(float x, float y) menambahkan segmen kurva kuadrat ke path sekarang curveto(float x, float y) menambahkan segmen kurva kubik ke path sekarang closepath() - menutup path. Contoh berikut menjelaskan bagaimana menggambar sebuah polyline menggunakan GeneralPath: Listing 2.6 KelasGeneralPath.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; public class KelasGeneralPath extends JApplet { public static void main(string s[]) { JFrame frame = new JFrame(); frame.settitle("kelas GeneraPath"); frame.setdefaultcloseoperation(jframe.exit_on_close); JApplet applet = new KelasGeneralPath(); applet.init(); frame.getcontentpane().add(applet); frame.pack(); frame.setvisible(true); public void init() { JPanel panel = new Panel2D(); getcontentpane().add(panel); class Panel2D extends JPanel{ public Panel2D() { setpreferredsize(new Dimension(500, 400)); setbackground(color.white); public void paintcomponent(graphics g) { super.paintcomponent(g); Graphics2D g2 = (Graphics2D)g; GeneralPath gp = new GeneralPath(); //Mulai dari sudut depan-bawah mobil.

11 11 gp.moveto(60,120); //bagian bodi bawah-depan gp.lineto(80,120); //roda depan gp.quadto(90,140,100,120); //bagian bodi bawah-tengah gp.lineto(160,120); //roda belakang gp.quadto(170,140,180,120); //bagian bodi bawah-belakang gp.lineto(200,120); //bagian belakang mobil gp.curveto(195,100,200,80,160,80); //atap gp.lineto(110,80); //kaca depan gp.lineto(90,100); //bagian hidung mobil gp.lineto(60,100); //bagian depan mobil gp.lineto(60,120); //menggambar mobil g2.draw(gp); Latihan Ketiklah kode program diatas. Kemudian compile dan jalankan. Menurut Anda gambar apa yang dihasilkan oleh program tersebut? Jelaskan! Jawab:

12 12 Tugas Projek Tahap I Buatlah program untuk menampilkan objek geometri yang terpilih. Lihat screenshot berikut: Gambar 2.1 menu persegipanjang perpilih Gambar 2.1 menu elips perpilih Keterangan: 1. Tampilan di atas hanya merupakan contoh saja. 2. Dalam tahap 1 (pertama) ini program hanya dapat digunakan untuk menampilkan objek geometri saja. Untuk menu atau fungsi yang lain dilanjutkan di tahap-tahap berikutnya. 3. Silahkan membuat program menurut kreativitas masing-masing, misalnya: Untuk membuat menu objek geometri yang akan ditampilkan bisa diganti menggunakan combobox. Ditambah TextField yang digunakan untuk menentukan ukuran objek yang akan

13 13 ditampilkan. Dan lain-lain. 4. Projek pertama (menampilkan objek) diharapkan dapat diselesaikan dalam satu minggu, supaya tidak terbebani dengan tahapan projek berikutnya. 5. Program dinilai berdasarkan: Kompleksitas dari program (kemampuan yang ada dalam program tersebut). Originalitas Desain GUI (graphical user interface) / antarmuka. 6. Selamat berkreativitas, happy coding...!