JavaFX Example Code | SwirlingSquares

Swirling Squares: Shaped Windows and Animation

By Josh Marinacci, September 22, 2008

Swirling Squares is a graphical toy that shows pulsing, swirling squares directly on your desktop, outside of a normal window. Click on the red square to quit the program.

Understanding the Code

Though it looks complex, the actual code for this sample is very simple. The code in Figure 1 creates a transparent frame that contains a group. The group contents are 10 rectangles rotated around a center point. The angle of the rotation for each square is bound to a single angle variable. Each square's distance from the center is also bound to the angle.

Finally, a timeline makes the angle variable oscillate between 360 and -360 degrees. Because the squares' locations and angles are bound to the angle variable, all of the squares will move when angle variable is animated.

Source Code

var angle = 0.0;

Frame {
    windowStyle: WindowStyle.TRANSPARENT  visible: true
    width: 400 height: 400
    scene: Scene {
        fill: null
        content: Group {
            translateX: 100 translateY: 100
            content: for(i in [0..10]) {
                // here is the magic with binding
                Rectangle {
                    fill: Color.rgb(25*i,0,0, i/10.0)
                    width: 100 height: 100 arcHeight: 10 arcWidth: 10
                    stroke: Color.BLACK strokeWidth: 5
                    transforms: bind [ 
                        // the rotate and translate are bound to 'angle'
                        Transform.rotate(-i*36+angle/2,50,50),
                        Transform.translate(angle/4,0),
                    ]
                }
            }
            onMousePressed: function(e:MouseEvent):Void { System.exit(0); }
        }
    }
}

var anim = Timeline { keyFrames: [
        KeyFrame { time: 0s values: angle => -360 tween Interpolator.EASEBOTH },
        KeyFrame { time: 2s values: angle => 360 tween Interpolator.EASEBOTH },
    ]
    autoReverse: true
    repeatCount: Timeline.INDEFINITE
};
anim.start();

Figure 1: Creating Swirling Squares

FX

Profile

Swirling Squares: Shaped Windows and Animation

Understanding the Code