Menggambar Di Canvas Dengan GfxBuilder


Salah satu ‘pelajaran’ yang paling saya senangi adalah computer graphics.  Berkat pelajaran ini, saya jadi tertarik dengan matematika.  Sungguh tercengang melihat bagaimana setiap pola-pola indah yang tergambar ternyata adalah visualisasi rumus matematika atau algoritma.   Bahasa yang saya pakai saat masih belajar  C++ dan OpenGL.  Sekarang, setelah mengenal Java dan Groovy, saya pikir sudah ada cara gampangnya.

Saya akan mencoba menggambar bebas dengan menggunakan GfxBuilder.  Builder yang satu ini akan menyederhanakan kode program saya dimana saya tidak perlu terlalu sering memanggil “g” (variabel yang umum dipakai untuk graphics context di Java 2D).  Untuk memakai GfxBuilder, saya akan meng-install plugin terlebih dahulu:

griffon install-plugin gfx-builder

Lalu, saya akan memberikan kode program seperti berikut ini di view:

private drawTree(int x, int y, double angle, int depth) {
    if (depth == 0) return;
    int x2 = x + Math.cos(Math.toRadians(angle)) * depth * 5.0
    int y2 = y + Math.sin(Math.toRadians(angle)) * depth * 5.0
    line(x1: x, y1: y, x2: x2, y2: y2, bc:
            color(r: Math.min(255, 82 + depth * 7), g: Math.max(0, 255 - depth * 7), b: Math.min(255, 82 + depth * 7))) {
        basicStroke(width: depth)
    }
    Random random = new Random()
    drawTree(x2, y2, angle - random.nextInt(50), depth - 1)
    drawTree(x2, y2, angle + random.nextInt(50), depth - 1)
}

application(title: 'latihan',
        preferredSize: [500, 350],
        pack: true,
        locationByPlatform: true,
        iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    borderLayout()
    canvas(size: [500, 400], id: "canvas") {
        group() {
            antialias true
            background(color: color('black'))
            drawTree(400, 230, -90, 7)
            drawTree(150, 270, -90, 9)

        }
    }

}

Bila saya menjalankan program tersebut, saya akan memperoleh hasil seperti yang terlihat pada gambar berikut ini:

Tampilan Pohon Fractal

Tampilan Pohon Fractal

Fractal adalah himpunan dimana di isinya akan memiliki pola yang sama.  Jenis fractal yang sering dijumpai dalam pelajaran computer graphics adalah Mandelbrot set, Koch snowflake, dan Sierpinski triangle.   Tampilan pohon di atas juga bisa dibilang adalah salah satu bentuk fractal.

Untuk membuat fractal pohon di atas, saya memakai algoritma yang sangat sederhana dan mudah dimengerti.  Saya mulai dari sebuah cabang tegak lurus (-90).  Lalu dari cabang tersebut, saya memecahnya menjadi 2 cabang dengan kemiringan yang di-acak (random.nextInt(50)).   Masing-masing dari 2 cabang tersebut kemudian dipecah lagi menjadi 2 cabang, dan begitu seterusnya.  Semakin jauh dari cabang utama, maka panjang cabang yang terbentuk akan semakin pendek.  Selain itu, saya memberikan perbedaan gradasi warna dimana semakin ujung sebuah cabang akan semakin terang warna hijaunya.

GfxBuilder berhasil membuat kode program terlihat sangat sederhana.  Akan tetapi, ada satu permasalahan yang sangat menganggu disini:  setelah gambar dibuat, saya tidak menemukan cara untuk mengubah gambar tersebut!  GfxBuilder memang mendukung transformasi (shearing, scaling, dsb) pada gambar yang sudah jadi.  Tetapi saya tidak menemukan sebuah cara dimana saya bisa menggambar ulang isi node canvas() dari awal.  Sebagai contoh, saya tidak bisa membuat animasi pohon mulai dari nilai depth = 1 perlahan-lahan meningkat hingga nilai depth = 10 (tumbuh mekar!) dengan GfxBuilder.  Operasi yang dimungkinkan adalah  menggeser, memutar, men-zoom pohon yang sudah dibuat; sementara saya perlu menggambar ulang dari awal.

Perihal Solid Snake
I'm nothing...

One Response to Menggambar Di Canvas Dengan GfxBuilder

  1. Ping-balik: Membuat Animasi Di Swing Dengan Trident « The Solid Snake

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: