Sunday work - Tracing in FX and Blog Change :-)

 I did some fine tuning in my blog page after long time :-). I have added two more link in Links section, which can be helpful in :

1. Telling which JRE's are there on your machine(blog readers) machine.

2. And second will install the latest JRE(It will start installation directly, so careful :-D)

Alright, So now again one post for JavaFX. Finally I am able to write tracing path code in JavaFX. I have seen this in lot of Physics Motions where they show motion with tracing effect. Have a look at the output :

Here the ball is moving in a cosine fashion and so the trace. Easiest way to achieve this is to write code in update method. Have a look on the code, its small:

package tracemotion;

import javafx.scene.Node;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.geometry.\*;
import javafx.scene.effect.\*;
import javafx.scene.paint.\*;

import java.lang.System;
import java.lang.Math;

var t : Number = 0.0;

Frame {
    var input : TracingBall = TracingBall {};
    stage : Stage {
        fill: Color.BLACK;
        content : bind [
            input
        ]
    }
 
    visible : true
    title : "Tracing Ball"
    width : 600
    height : 600
    closeAction : function() { java.lang.System.exit( 0 ); }
}

class TracingBall extends CustomNode {

    attribute tracingballs : Circle[];
    attribute length : Integer = 600;
    attribute timer : Timeline = Timeline {
        repeatCount: Timeline.INDEFINITE
        keyFrames :
            KeyFrame {
                time : 100ms
                action : function() {
                    update();
                    t = t+0.3;
                }
            }
    }
 public function update() : Void {
        for( i in [0..length - 30] ) {
            tracingballs[i].centerX = tracingballs[i+30].centerX;
            tracingballs[i].centerY = tracingballs[i+30].centerY;
            tracingballs[i].radius = tracingballs[i+30].radius;
            tracingballs[i].opacity=0.4;
        }
        tracingballs[length] = Circle {
           centerX : bind(100 + t \* 30), 
           centerY : (300 + Math.cos(t) \* 100), 
           radius : 30, 
           fill : bind LinearGradient {
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.RED },
                        Stop { offset: 1.0 color: Color.GAINSBORO },
                    ]
                },
           opacity : 1.0 
 
        };
 }
 public function create(): Node {
        return Group {
            content : bind[tracingballs]   
        };
 }
 init {
        for( i in [0..length] ) {
            insert Circle { fill : bind LinearGradient {
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.RED },
                        Stop { offset: 1.0 color: Color.GAINSBORO },
                    ]
                },
                } into tracingballs;
 
        }   
        timer.start();
    }        
}
Some lines in code are filling those fancy colors in ball(some lines are hard coded as well).I am a real bad guy in filling nice catchy colors(this color looks like a sun and a moon combination). Any comments/improvements are welcome !
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