Sunday work - Tracing in FX and Blog Change :-)
Sunday Sep 07, 2008
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 ! 
