JavaFX and giving motion with mouse - Easing factor

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. 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. And this is how I got the Netbeans JavaFX sample example. For getting some hand into JavaFX code, I was trying to write a constraint code, which I was inspired from NB 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 blog and then you can compare it yourself.

Two good thing that code covers :-

1. 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  :

Have a look:

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 = circleX + (mouseX - circleX ) \* easing;
}
if( Math.abs(mouseY - circleY ) > 0.1 ) {
   circleY = 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 work :

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 java.lang.Math;
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 = circleX + (mouseX - circleX ) \* easing;
                }
                if( Math.abs(mouseY - circleY ) > 0.1 ) {
                    circleY = 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. Keeping mind of blog size, I am continue into next blog :-)

Comments:

Hi,

My name is Varun Nischal and I'm the NetBeans Community Docs Contribution Coordinator. Your blog entry would make a fantastic tutorial for our Community Docs wiki (http://wiki.netbeans.org/CommunityDocs).

Would you be willing to contribute it? If you need any help or have any questions, please contact me at nvarun@netbeans.org

I look forward to hear from you.

Thanks,
Varun Nischal
http://nb-community-docs.blogspot.com/
--
"You must do the things you think you cannot do."

Posted by Varun on August 19, 2008 at 03:43 AM IST #

Sure Varun. Please go ahead ! What else it can be if lot many people share our knowledge.

Posted by Vaibhav Choudhary on August 19, 2008 at 04:23 AM IST #

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Alanna

http://www.craigslistsimplified.info

Posted by Alanna on March 10, 2009 at 01:02 PM IST #

thanks again !

Posted by Vaibhav on March 12, 2009 at 02:14 AM IST #

it is really nice code... sir m doing duke golf...so pls tell me how to move the ball in different region... pls reply

dhiraj singh

Posted by dhiraj singh on April 11, 2009 at 04:55 AM IST #

its really good code... sir m doing duke golf..so pls tell me ball movement in golf... pls reply
thank you
dhiraj singh

Posted by dhiraj singh on April 11, 2009 at 04:57 AM IST #

thanks ! What do you mean by ball movement..can you please explain in detail .. ? ball will move with timeline variable bind on centerX or centerY of circle.

Posted by Vaibhav Choudhary on April 11, 2009 at 08:00 AM IST #

Post a Comment:
Comments are closed for this entry.
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today