Saturday Dec 13, 2008

Animal Meets Person: A JavaFX Drama Unfolds

I wanted to figure out how to make two objects in JavaFX interact with each other. Something like this:

For each of these, I created a new custom node because potentially each object would have many of its own distinct properties. For now, the two are very simplistic:

package demo;

import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.CustomNode;

public class Animal extends CustomNode {

    public var posx = 180;

    public override function create(): Node {
        return Group {
            content: [
                Circle {
                    centerX: bind posx,
                    centerY: 100
                    radius: 40
                    fill: Color.YELLOW
                }
            ]
        };
    }

}
package demo;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

public class Person extends CustomNode {

    public var posx = 40;

    public override function create(): Node {
        return Group {
            content: [
                Circle {
                    centerX: bind posx,
                    centerY: 50
                    radius: 40
                    fill: Color.BLACK
                }
            ]
        };
    }
}

So I created two custom nodes, which can now be treated the same way as all the other JavaFX nodes, i.e., just like circles, arcs, rectangles, texts, and so on.

The only interesting thing is that I exposed the X position of each node to the outside world, such that any changes made to it from the outside would change the property in the node.

Finally, in the main JavaFX file, I imported the two nodes, added them to the scene, and changed their exposed properties in the timeline:

package demo;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import java.util.Date;

var animal = Animal{}
var person = Person{}

var date = new Date;

Stage {
    title: "Demo Animation"
    width: 250
    height: 250
    scene: Scene {
        content: [
            person,
            animal
        ]
    }
}

Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true,
    keyFrames: [
        KeyFrame {
            time: 1s
            canSkip: true
            values: [
                animal.posx => 50
                person.posx => 50
            ]
            action: function() {
                if (animal.posx == person.posx){
                   println("Connected at: {date}")
                }
            }
        }
    ]
}.play();

To make the two nodes move at different speeds... simply create two different keyframes in the same timeline. Or you can add a second timeline and change the "time" property of the timelines so that they are different, then change the "values" property so that in the first case, only one node changes, while in the second case the other node changes. (Different keyframes within the same timeline is more interesting than different timelines, because if they're in different keyframes in the same timeline, one object stops while the other is still moving and then suddenly starts again when the other has finally stopped.)

It was pretty cool to be able to learn from the messages I received during all this:

Finally, the whole application looks as follows:

By the way, Gregg Bolinger's space game is very helpful in understanding some of the key concepts.

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« December 2008 »
SunMonTueWedThuFriSat
 
3
7
12
16
17
18
19
21
22
25
26
27
28
29
30
   
       
Today