Moving around a room

Today was a holiday here in Belgium, I suppose in other countries too, so I had a chance to work a bit more with JavaFX. I have created a simple example where a sphere moves around a room. There are few points to notice about this example:

1. How to make an object move around automatically using Timeline and KeyFrame classes.

2. How to control the movement of your object in the x and y axis.

3. How to use colors that are not listed in the Color class.

4. How to create CustomNode.

5. How to make a 2D object look like 3D.

6. Adding effects to an object.

I am sure you can find -if not all- most of this points in other examples but I have put them all together and I hope it is helpful.

Note: You can download the code from JavaFXExamples at google code.
svn checkout http://javafxexamples.googlecode.com/svn/trunk/ javafxexamples-read-only

Update:
The rotate() method in class Ball has changed so the ball goes to the corners of the Frame, also the speed of the ball is almost the same in all directions as suggested by Ruth in the comment.

Here is a picture of the application:

The code of the application follows:

import javafx.scene.*;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.application.*;
import javafx.animation.*;
import javafx.input.*;
import javafx.scene.transform.*;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

/**
 * @author Omer Haderi
 */

var heightPlus: Integer = 35;
var widthPlus: Integer = 9;

var height: Integer = 400 + heightPlus;
var width: Integer = 400 + widthPlus;
var interval: Integer = 1;
var ball: Ball = Ball {}
/*
 * Point 1. How to make an object move around automatically
 * using Timeline and KeyFrame classes.
 */
var timer : Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames :
    KeyFrame {
        time : 15ms
        action : function() : Void {
            ball.rotate(interval);
        }
    }
};

Frame {
    stage: Stage {
        // Point 3. How to use colors that are not listed in the Color class.
        fill: Color.web("#2E2E2E")
        content: [Room {}, ball]
    };
    visible: true
    title: "Moving around room!"
    width: width
    height: height

    closeAction : function() {
        java.lang.System.exit( 0 );
    }
}
timer.start();

//Point 4. How to create CustomNodes + implements create() function.
public class Room extends CustomNode {
    public function create(): Node {
        // Point 5. Using basic shapes you can make 2D object look like 3D
        return Group {
            translateX: 0
            translateY: 0
            content: [
                Polyline {
                    points: [ 0,400, 100,300, 300,300, 400,400]
                    strokeWidth: 1
                    stroke: Color.GRAY
                },
                Line {
                    startX : 100, startY : 0
                    endX : 100 endY : 300
                    stroke : Color.GRAY
                },
                Line {
                    startX : 300, startY : 0
                    endX : 300, endY : 300
                    stroke : Color.GRAY
                }
            ]
        }
    }
}

//Point 4. How to create CustomNodes + implements create() function.
public class Ball extends CustomNode {
    public attribute x : Number = 100;
    public attribute y : Number = 300;
    public attribute radius : Number = 15;
    public attribute color : Color = Color.BLUE;

    /*
     * Point 2. How to control the movement of your object in the x and y axis.
     */
    public function rotate(interval: Number) {
        if (x <= 100 and y < 380 ) {
            y += interval / 2; 
            x -= interval / 2; 
            radius += 0.04;
        }
        if (y == 380 and x  300 and y > 300) {
            y -= interval / 2; 
            x -= interval / 2; 
            radius -= 0.04;
        }
        if (y == 300 and x > 100) {x -= interval;}
    }

    public function create(): Node {
        return Circle {
            centerX: bind x
            centerY: bind y
            radius: bind radius
            // Point 6. Adding effects to an object.
            effect: Reflection {
              fraction: 1
              topOpacity: 0.3
            }
            fill: RadialGradient {
                centerX: 200
                centerY: 350
                radius: 200
                proportional: false
                stops: [
                    Stop {offset: 0.0 color: Color.WHITE},
                    Stop {offset: 0.5 color: bind this.color},
                    Stop {offset: 1.0 color: Color.WHITE},
                ]
            }
        };
    }
}
Advertisements

3 thoughts on “Moving around a room

  1. Simple but interesting demo, very useful for learning. I like the shadows, but I don’t get the purpose of the reflection effect? (The blurry blue circle in the middle, shining through the ball?).
    I was looking for examples for how to express a simple kind of 3D in 2D (your point 5).
    If the ball rolled slower on its way backwards/forwards (or faster sideway), and if you’d move the two front-most turning points a bit further to the left and right (closer to the corners), that would greatly improve the 3D illusion. Also the ball seems to hop when rolling backwards (when scaling).

  2. Hi Ruth,
    There is a lot to improve in this example. However, the purpose was to demonstrate few features of JavaFX as simple as possible and that was all.

    You can modify the example in anyway you want and I will be happy to publish your modifications.
    Enjoy!

  3. Thank you for the code, it shows how easy and powerful can be JavaFX Script. Certainly you saved a lot of code lines in comparison C# or Java :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s