Friday Apr 17, 2009

Bullet Graph - RIA + JavaFX !

Finally we are able to finish one more article on Data Representation. My special thanks to Stephen Few who has written the concept of Bullet Graph. An awesome way to represent lot of data in one screen. Basically used on Executive Dashboard to compare between predicted value and actual done.

In terms of Animation, this is different in comparison with other Data Rep. Articles. Here the data loading is sequential in nature. Actually if someone is making it for presentation purpose, the best way is to show the animation on Key hit, very similar to what we do in ODP or PPT presentations.Some small code of AppletExtension is also there, which will show you the power of JavaFX API. When you drag this applet out of Browser, you will not see the custom close button.

Feel free to comment or add anything you want in this.

Wednesday Dec 17, 2008

Playing with Color in JavaFX

JavaFX provide a rich API for playing with colors for an image or object. The best depicted in this sample but I will show you very quickly how to change the color of a car on JSlider. I have taken this nice car from Path Animation Sample and on JSlider, I will reproduce lot of Car color like this :

Actually this is very small but some one who want to develop car race required lot of car colors(it can be done at runtime)

Code here :

package carcolors;

import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.ext.swing.SwingSlider;

var hue = 0;
var s = SwingSlider {
                minimum: -100
                maximum: 100
                value: hue
                vertical: false
            };
Stage {
    title: "Application title"
    width: 250
    height: 280
    scene: Scene {
        content: [
            s,
            ImageView {
                x: 100
                y: 100
                image: Image {
                    url: "{__DIR__}car.png"
                }
                effect: ColorAdjust {
                    hue: bind s.value/100.0
                }
            },
         ]

    }
}

Tuesday Dec 09, 2008

3D button Effect in JavaFX

Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:

What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API's of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.

Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :

package lighteff;

import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;

Stage {
    title: "Control Panel"
    width: 290
    height: 180
    style: StageStyle.UNDECORATED
    scene: Scene {
        fill: Color.BLACK
        content: [
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor
                }
                content: [
                    Circle {
                        centerX: 100,
                        centerY: 100
                        radius: 40
                        fill: Color.RED

 
                        onMousePressed: function( e: MouseEvent ):Void {
                            scale = 0.85;
                            factor = 10;
                            scale1 = 1.0;
                            factor1 = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale
                        scaleY: bind scale
                        font: Font {
                            size: 24
                        }
                        x: 71,
                        y: 105
                        content: "Press"
                    }
                ]
            },
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor1
                }
                content: [

                    Circle {
                        centerX: 200
                        centerY: 100
                        radius: 40
                        fill: Color.BLUE
                        onMousePressed: function( e: MouseEvent ):Void {
                            scale1 = 0.85;
                            factor1 = 10;
                            scale = 1.0;
                            factor = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale1
                        scaleY: bind scale1
                        font: Font {
                            size: 24
                        }
                        x: 171,
                        y: 105
                        content: "Press"
                    }
                ]
            }
        ]

    }
}  

Monday Dec 01, 2008

One scene to other - JavaFX

Any middle or big application demands to change one window to other at some point of time. A window type of thing in JavaFX is represented by Scene and its each to switch between scene or to run multiple scenes.

Here is a small application in which clicking on image will put you in another window, written "Hello World" 

package sample6;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

var s_new:Scene;
var s = Scene {
   content: [
       Text {
           font: Font {
               size: 24
           }
           x: 10,
           y: 30
           content: "HelloWorld"
       }
   ]
};

var s1 = Scene {
   content: [
       ImageView {
           image: Image {
               url: "{__DIR__}im2.PNG"
           }
           onMouseClicked: function( e: MouseEvent ):Void {
               s_new = s;
           }
       }
   ]
};

s_new = s1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: bind s_new
} 

So, its simple, on mouse click, I have bind a scene variable with a new scene. That's it !


Friday Nov 28, 2008

Sparkling on glass...

What to achieve: A sparkling glass(beer glasses are clean and shiny before beer get served) like this.

 So, our aim is to make those sparkling effect on glass. Here is the code in JavaFX(things are little hard coded but better for understanding):

  
package sample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Rotate;
import javafx.scene.shape.Polygon;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Circle;
import  javafx.scene.Group;
/\*\*
 \* @author Vaibhav
 \*/

var r = 0.0;
var t = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                r => 360.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t.play();
var op = 1.0;
var t1 = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 3s
            canSkip: true
            values: [
                op => 0.0 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
t1.play();

Stage {
    title: "Sparkling on Glass"
    width: 250
    height: 480
    scene: Scene {
        fill: Color.BLACK
        content: [
            ImageView {
                image: Image {
                    url: "{__DIR__}wineglass.png"
                }
            }
            Polygon {
                rotate: bind r;
                translateX: 130
                translateY: 100
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 130
                translateY: 100
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 50
                translateY: 50
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 50
                translateY: 50
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
            Polygon {
                rotate: bind r;
                translateX: 30

                translateY: 120
                scaleX: 0.5
                scaleY: 0.5
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind op
            },
            Polygon {
                rotate: 45;
                scaleX: 0.25
                scaleY: 0.25
                translateX: 30
                translateY: 120
                points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
                fill: Color.WHITE
                opacity: bind 1 - op
            },
        ]

    }
} 
Same animation in flash is here : http://www.entheosweb.com/Flash/sparkling_effect.asp

Saturday Aug 09, 2008

JavaFX, Constrain check - Next Part !

As we discussed in the last blog, about easing and constraint. 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 funda comes first is to 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 java.lang.Math;
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 = circleX + (mouseX - circleX ) \* easing;
                }
                if( Math.abs(mouseY - circleY ) > 0.1 ) {
                    circleY = 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 :-). Virual 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 :-P.

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 :-)

Tuesday Jul 29, 2008

Boat in an ocean :-) JavaFX !

OK, nothing to laugh. I know my animation sense is little poor. But here I tried to move a ship, in the way they show in movies -D. Nothing like that, I have tried to give a sinusoidal movement of a ship. In the comment section, you can see there is a sea image as well. Animation was looking little ugly with sea, so I removed it :-). But point to note, you can give any animation to a image based on any mathematical methods. And if you have a complex equation, you can fit that in, in place of my simple sin curve. Here is the code:

package move;

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.paint.Color;
import java.lang.Math;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

var time : Number = 0.0;


var timeline : Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE        
    keyFrames : 
        KeyFrame {
            time : 5ms
            action: function() {
                time += 0.02;
            }                
        }
};
Frame {
    title: "MyApplication"
    width: 1200
    height: 500
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        fill: Color.AQUA
        content: [
     /\*       ImageView {
                image: Image {
                url: "http://birdblog.merseyblogs.co.uk/sea21206.jpg"
                 }
            },
     \*/
            ImageView {
                x:bind(100 + time \* 10)
                y:bind(100 + Math.cos(time) \* 10)
                image: Image {
                    url: "http://lal.cas.psu.edu/Research/visualiz/images/boat.gif"
                }
            }
        ]

    }
}
timeline.start(); 

Just 3-4 drags from Netbeans 6.1 FX viewer :

1.  One Timeline and an action inside it.

2. One Frame.

3. One Image.

Thats it ! Set the code logic and rest leave all the work on binding :-). Quite simple, just that I am not able to make some good animation out of it !

Sunday Jun 08, 2008

Starting JavaFX - Animation

From last 5 months or so I was thinking to start posting on JavaFX. It's no doubt a powerful language and off course it should be, because its for designers not for developers. I have written a small code. This code runs (move is a better word) a car on a road :D... both the images are on network. See the number of lines of code you need to write for this. I have written 16 lines of code which includes 3 line in header file addition.


import javafx.ui.\*;
import javafx.ui.canvas.\*;

var scroll_time;
scroll_time = [600..100] dur 4000 linear continue if true;
var h = 50;
var car = ImageView {
    transform: bind translate(scroll_time, 0)
    image: Image { url: "http://blogs.sun.com/vaibhav/resource/car.png"}
};
var road= ImageView {
      image: Image { url: "http://blogs.sun.com/vaibhav/resource/11.PNG"}
};
Canvas {
    content: [road, car]
}

One should be delighted if animation will go so small :D.



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