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},
                ]
            }
        };
    }
}