Alexey Ushakov
Bezier Curve Animation
JavaFX has comprehensive rendering capabilities provided by the underlying Java 2D API, including support for a wide variety of graphics primitives. For example, cubic and quadratic bezier curves can be easily included in the application scene.
Understanding the Code
Cubic and quadratic bezier curves differ by the smoothness they provide and the flexibility they have. The cubic curve is more visually appealing, whereas the quadratic curve provides better performance. The curves have two control points and one control point, respectively. The curves can be set up as shown in Figure 1.
...
var cubicCurve =
CubicCurve {
startX : bind p[0] startY : bind p[1]
controlX1 : bind p[2] controlY1 : bind p[3]
controlX2 : bind p[4] controlY2 : bind p[5]
endX : bind p[6] endY : bind p[7]
stroke: bind strokeColor fill: bind fillColor
strokeWidth: bind strokeWidth.value
strokeDashArray: bind strokeDashGroupValue
strokeLineCap: bind strokeLineCapGroupValue
};
var quadCurve =
QuadCurve {
startX : bind p[0] startY : bind p[1]
controlX : bind p[2] controlY : bind p[3]
endX : bind p[4] endY : bind p[5]
stroke: bind strokeColor fill: bind fillColor
strokeWidth: bind strokeWidth.value
strokeDashArray: bind strokeDashGroupValue
strokeLineCap: bind strokeLineCapGroupValue
};
...
Figure 1: Setting Up the Bezier Curves
It is easy to add animation to the graphics primitives by using javafx.animation.Timeline and binding it to the control points, as shown in Figure 1 and Figure 2.
...
var clip = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames:
KeyFrame {
time: 40ms
action: function () : Void {
for (i in [0..7][n | indexof n < nCoords]) {
var np = p[i] + v[i];
if (((i mod 2) == 0 and (np > w-r or np < r)) or
((i mod 2) == 1 and (np > h-r or np < r))) {
v[i] = -v[i]
}
p[i] += v[i];
}
}
}
}
...
Figure 2: Adding Animation