AnimatingWithJavaFX

Giving Motion with Mouse- Easing Factor

Contributed By; Vaibhav Choudhary


[[{TableOfContentsTitle=TableOfContents} | {TableOfContents title='Table of Contents'}]]

Introduction


New to JavaFX, read this guide on " Getting Started with JavaFX". So, when we write animation code like moving a circle or rotating a cube, we do a bad thing. We write the coordinates according to our ease and later its pain for others to understand the code.

NetBeans JavaFX Sample


For getting some hand into JavaFX code, I was trying to write a constraint code, which I was inspired from NetBeans example, Constraint.fx in the section Best Practices -> Input. And it was all pain to understand that code, because the manipulation was done like a mathematician not like a coder. Anyway, let me first finish this tutorial and then you can compare it yourself.

About Source Code


In the code, you will see 450 - size or 200 + radius. Now, its really tough to guess what this 450 and 200. It came from direct calculation or from addition, multiplication. Sometimes, in our mind we do those mathematical calculation and we put the final value. I have mostly done in all my previous code :-D. Now, there are basically two good thing that code covers, discussed in detail in the following sections.

Part One

How to do easing (there is a separate example of that as well)
Now, when we move the mouse from one position to other, we don't want our ball(say, we are moving a ball) to stick with mouse and keep on moving with mouse. We want it into a form of motion. Like from the last position of mouse to this new position of mouse, the ball slowly moves.

This can be achieved by easing;

onMouseMoved: function( e: MouseEvent ):Void {
    mouseX = e.getX();
    mouseY = e.getY();

Now, if we bind our X and Y(center) of circle with mouseX, mouseY, the look will come ugly :-)( a sticky look). So, we will write an integral code here:

if(Math.abs(mouseX - circleX ) > 0.1 ) {
   circleX += (mouseX - circleX ) * easing;
}
if( Math.abs(mouseY - circleY ) > 0.1 ) {
   circleY += ( mouseY - circleY ) * easing;
}

We are doing something same but in a fashionable style. We are increasing the value of CircleX and CircleY in bits and pieces and the smoothness depends on the value of easing factor which we have multiplied at the end. Lets have a look to this full code, how it works;

package easingcheck;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.input.MouseEvent;

var mouseX: Number;
var mouseY: Number;
var circleX: Number = 250;
var circleY: Number = 250;
var easing = 0.04;

var timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 16ms
            action : function() {
                if( Math.abs(mouseX - circleX ) > 0.1 ) {
                    circleX += (mouseX - circleX ) * easing;
                }
                if( Math.abs(mouseY - circleY ) > 0.1 ) {
                    circleY += ( mouseY - circleY ) * easing;
                }
            }
        }
    ]
}
Frame {
    title: "MyApplication"
    width: 500
    height: 500
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        content: [ 
            Rectangle {
                x: 100, y: 100
                width: 300, height: 300
                fill: Color.BLACK
                onMouseMoved: function( e: MouseEvent ):Void {
                       mouseX = e.getX();
                       mouseY = e.getY();
 
                }
            },
            Circle {
                centerX: bind circleX, centerY: bind circleY
                radius: 20
                fill: Color.RED
 
            }
        ]
    }
}
timeline.start();

We can see a smooth movement of ball(if you want to see ugly look once, then bind centerX and centerY on MouseX and MouseY). Also notice that ball is not coming out of the rectangular box because the OnMouseMoved code has been written inside the box. So, it should not come out of the box. We have to constraint the ball inside the Rectangular box completely, right now half of the ball is coming out of the box. This is 25 percent of the story. We will see how to do this job, which looks easy but not so.

Part Two

Now, we have seen the ball is moving inside the box but not completely, and this is not possible as well because the mouseMove code has been written on the box and mouse can move anywhere in the box.

  • So, the basic thing is to first make one virtual box bigger than target box and the mouseMove code should be written on the outer virtual box rather than the box inside which we want to move our ball.
  • Now the real constraint part, that will be written inside the onMouseMove code;
       onMouseMoved: function( e: MouseEvent ):Void {
                    mouseX = e.getX();
                    mouseY = e.getY();
                    if(mouseX < rect.x + circleRadius ) {
                        mouseX = rect.x + circleRadius
                    };
                    if(mouseX > rect.x + rect.width - circleRadius ) {
                        mouseX = rect.x + rect.width - circleRadius
                    };

                    if(mouseY < rect.y + circleRadius ) {
                        mouseY = rect.y + circleRadius
                    };
                    if( mouseY > rect.y + rect.height - circleRadius ) {
                        mouseY = rect.y + rect.height - circleRadius
                    };
                }

Here, rect is the target box inside which we want the ball to move. So, if mouse position is going out of the boundary, we are pushing it inside the boundary. I am still damn sure, some checking may be missing. Now, this mouseMove will go into the outer bigger circle. Here is the final code;

package constraintcheck;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;
import javafx.scene.transform.Translate;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.geometry.Rectangle;

var mouseX : Number = 100;
var mouseY : Number = 100;
var circleX : Number = 300;
var circleY : Number = 300;
var t : Number = 100;
var easing : Number = 0.05;
var circleRadius : Number = 50;

var timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 16ms
            action : function() {
                if( 
                Math.abs(mouseX - circleX ) > 0.1 ) {
                    circleX += (mouseX - circleX ) * easing;
                }
                if( Math.abs(mouseY - circleY ) > 0.1 ) {
                    circleY += ( mouseY - circleY ) * easing;
                }
            }
        }
    ]
}

Frame {
    title: "Constrain Check"
    width: 700
    height: 700
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    var rect = Rectangle {
        x: 100, y: 100
        width: 400, height: 400
        fill: Color.RED
   }
    stage: Stage {
        content: [ 
            Rectangle {
                x: 0, y: 0
                width: 500, height: 500
                fill: Color.BLACK
                onMouseMoved: function( e: MouseEvent ):Void {
                    mouseX = e.getX(); 
                    mouseY = e.getY();
                    if(mouseX < rect.x + circleRadius ) { 
                        mouseX = rect.x + circleRadius
                    };
                    if(mouseX > rect.x + rect.width - circleRadius ) { 
                        mouseX = rect.x + rect.width - circleRadius
                    };
 
                    if(mouseY < rect.y + circleRadius ) { 
                        mouseY = rect.y + circleRadius
                    };
                    if( mouseY > rect.y + rect.height - circleRadius ) { 
                        mouseY = rect.y + rect.height - circleRadius
                    };
                }
            },rect,
            Circle {
                centerX: bind circleX, centerY: bind circleY
                radius: circleRadius
                fill: Color.GRAY
            }
        ]
        fill: Color.BLACK 
    }
}
timeline.start();
  • It combines both the code, easing part and the constaint part. Virtual box has been made by filling the rectangle same color as of frame.
  • Now, you can play around with the coordinate value and check its working fine or not. Still some condition need to check like the outer box size should be bigger.
  • Now, look at the code of Constraint.fx written in Netbeans 6.1 example and do comparisons, if required.
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo