JavaFx Fireworks

ini adalah posting pertama saya untuk membahas javaFx. Sebenarnya saya juga baru saja belajar javaFx, jadi jangan sungkan untuk mengkoreksi saya jika saya salah menjelaskan.

daripada membuat hallo world, dengan satu stage dan satu baris code hello world, mendingan kita merayakan awal belajar kita dengan membuat sebuah animasi kembang api (fireworks). salah satu cara termudah untuk belajar bahasa pemrograman adalah dengan langsung praktek / coding (tentu setelah membaca, meski secara sekilas, semua aturan tata bahasa pemrograman itu). oleh karena itu, tanpa basa – basi lagi, mari kita lihat source code programnya dan kemudian kita pelajari bersama – sama.

/*
 * Main.fx
 *
 * Created on 02 Mar 09, 20:24:06
 */
package fireworks;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import java.util.Random;

/**
 * @author Hakim
 */
def random = Random {}
class Fireworks extends CustomNode {
  var color: Color;
  def timer = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
      KeyFrame {
        time: 0s
        values: opacity => 0.0
        action: function() {
          // circle color definition, random range [0 - 255]
          def r =  255 * random.nextFloat();
          def g =  255 * random.nextFloat();
          def b =  255 * random.nextFloat();
          color = Color.rgb(r, g, b);
          translateX = 50 + random.nextFloat() * (scene.width  - 100);
          translateY = 50 + random.nextFloat() * (scene.height - 100);
        }
      }
      // detik pertama op = 1
      KeyFrame {
        time: 1s * random.nextFloat()
        values: opacity => 1.0 tween Interpolator.DISCRETE
      }
      // opacity terus turun, semakin transparan
      KeyFrame {
        time: 3s + 1s * random.nextFloat()
        values: opacity => 0.0
      }
      // hilang, end frame
      KeyFrame {
        time: 4s
      }
    ]
  }
  // buat circle, selama program masih jalan
  override function create() {
    timer.play();
    Group {
      content: for (index in [1..18]) {
        def length = 50 + 10 * random.nextFloat();
        def radius =  2 +  2 * random.nextFloat();
        for (delta in [1.0, 0.8, 0.6]) Circle {
          fill: bind color
          radius: delta * radius
          centerX: bind delta * length * (1 - opacity)
          transforms: Rotate {
            angle: 20 * (index + random.nextFloat())
          }
        }
      }
    }
  }
}

Stage {
  title: "Firework (JavaFX sample)"
  scene: Scene {
    fill: Color.BLACK
    width: 480
    height: 320
    content: for (index in [1..21]) Fireworks {
    }
  }
}

kalau program tersebut di run di handphone (yang support javafx) dan sebagai desktop apps, menghasilkan tampilan animasi seperti berikut:

sekarang mari kita pelajari
Pertama, kita mendefinisikan sebuah kelas Fireworks yang diturunkan dari kelas CustomNode, jadi kelas ini merupakan Node. kelas tersebut mengoverride fungsi create() yang akan selalu dipanggil saat create class, dan mengisinya dengan perintah membuat lingkaran.

override function create() {
    timer.play();
    Group {
      content: for (index in [1..18]) {
        def length = 50 + 10 * random.nextFloat();
        def radius =  2 +  2 * random.nextFloat();
        for (delta in [1.0, 0.8, 0.6]) Circle {
          fill: bind color
          radius: delta * radius
          centerX: bind delta * length * (1 - opacity)
          transforms: Rotate {
            angle: 20 * (index + random.nextFloat())
          }
        }
      }
    }
  }

warna dari lingkaran kita bind (tahu konsep data binding kan, sama di C# 3.0 ke atas dengan javafx, maupun bahasa pemrograman lain) dari atribut color yang di set sesuai dengan timer dan penentuannya secara random, oleh karena itu warna lingkaran akan terus acak. pada timer juga kita definisikan keyframe untuk mengatur animasi (frame based animation), yang dianimate atribute opacity/transparansi-nya dan tentunya posisinya dengan cara transformasi.

“panggung utama” dari program ini adalah pada Stage. kelas Stage merupakan akar dari semua scene / tampilan isi pada javafx, jadi jika membuat antarmuka pasti kita butuh kelas ini sebagai starting point (kalau C# kita pakai winforms atau windows di wpf).

Stage {
  title: "Firework (JavaFX sample)"
  scene: Scene {
    fill: Color.BLACK
    width: 480
    height: 320
    content: for (index in [1..21]) Fireworks {
    }
  }
}

Stage ini kita set dengan ukuran 480×320 dengan backgroun hitam, isinya adalah fireworks yang telah kita definisikan sebanyak 21 buah instance.

well done, gitu saja.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

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