JavaFX 8 3D animation

Question

I am making a little JavaFX 8 project. I need some advices how to do the animation correctly. Something about the project. It's a program which animates the flow of a charged particle through magnetic field. All the needed values are taken from GUI where user puts them into textFields. After button click we are transfered to 3D scene where my point is shown as Sphere, all values are set up. And the field line is printed in it's directory.

The question is how to do the propper animation. I was trying to work with my Sphere X Y Z coordinates, but couldn't find any way to set those. The motion in Z plane should be linear with the same speed. And motion in XY planees should be circular. Can I do it with Path Transition?

My vision is to create the tick animation which draws the Spheres through the path. Whith a further tick the next sphere will be drew with new coordinates calculated by translation vector.

Answer 1

Is this possible using a PathTransition? No, paths are 2 dimensional in javafx, but you need a 3D movement.

Note that sphere coordinates not a good coordinate system to discribe such a movement either, since the calculation of the angles is a bit complex.

A coordinate system better suited would be cylinder coordinates.

You could use several transforms and animate those using a Timeline animation to achieve this kind of movement though:

private static void animateSphere(Sphere sphere) {
    Rotate rot = new Rotate();
    Translate radiusTranslate = new Translate(50, 0, 0);
    Translate zMovement = new Translate();

    sphere.getTransforms().setAll(zMovement, rot, radiusTranslate);
    Timeline tl = new Timeline(
            new KeyFrame(Duration.ZERO,
                         new KeyValue(zMovement.zProperty(), 0d),
                         new KeyValue(rot.angleProperty(), 0d)),
            new KeyFrame(Duration.seconds(4),
                         new KeyValue(zMovement.zProperty(), 900d, Interpolator.LINEAR),
                         new KeyValue(rot.angleProperty(), 720, Interpolator.LINEAR))
    );
    tl.setCycleCount(Timeline.INDEFINITE);
    tl.play();
}

@Override
public void start(Stage primaryStage) {
    Sphere sphere = new Sphere(30);

    Pane root = new Pane(sphere);

    Scene scene = new Scene(root, 400, 400, true);
    PerspectiveCamera camera = new PerspectiveCamera();
    camera.setTranslateZ(-10);
    camera.setTranslateX(-500);
    camera.setTranslateY(-200);
    camera.setRotationAxis(new Point3D(0, 1, 0));
    camera.setRotate(45);
    scene.setCamera(camera);

    animateSphere(sphere);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Your movement is a spiral movement and therefore the following combination of transformations will move the Sphere appropritately:

1. translate by radius (z component 0)
2. rotate to appropriate angle
3. translate in z direction

Note: Transforms are applied in reverse order in which they occur in the transforms list.

---

Alternatively you could write a helper that can be used with cylinder coordinate parameters and write the appropriate x, y and z values:

public class CylinderCoordinateAdapter {

    private final DoubleProperty theta = new SimpleDoubleProperty();
    private final DoubleProperty radius = new SimpleDoubleProperty();
    private final DoubleProperty h = new SimpleDoubleProperty();

    private static final Point3D DEFAULT_AXIS = new Point3D(0, 0, 1);
    private Point3D axis2;
    private Point3D axis3;

    private final ObjectProperty<Point3D> axis = new SimpleObjectProperty<Point3D>() {

        @Override
        public void set(Point3D newValue) {
            newValue = (newValue == null || newValue.equals(Point3D.ZERO)) ? DEFAULT_AXIS : newValue.normalize();

            // find first value ortogonal to axis with z = 0
            axis2 = newValue.getX() == 0 && newValue.getY() == 0 ? new Point3D(1, 0, 0) : new Point3D(-newValue.getY(), newValue.getX(), 0).normalize();

            // find axis ortogonal to the other 2
            axis3 = newValue.crossProduct(axis2);
            super.set(newValue);
        }
    };

    public CylinderCoordinateAdapter(WritableValue<Number> x, WritableValue<Number> y, WritableValue<Number> z) {
        Objects.requireNonNull(x);
        Objects.requireNonNull(y);
        Objects.requireNonNull(z);
        axis.set(DEFAULT_AXIS);
        InvalidationListener listener = o -> {
            Point3D ax = axis.get();
            double h = getH();
            double theta = getTheta();
            double r = getRadius();

            Point3D endPoint = ax.multiply(h).add(axis2.multiply(Math.cos(theta) * r)).add(axis3.multiply(Math.sin(theta) * r));

            x.setValue(endPoint.getX());
            y.setValue(endPoint.getY());
            z.setValue(endPoint.getZ());
        };
        theta.addListener(listener);
        radius.addListener(listener);
        h.addListener(listener);
        axis.addListener(listener);

        listener.invalidated(null);
    }

    public final Point3D getAxis() {
        return this.axis.get();
    }

    public final void setAxis(Point3D value) {
        this.axis.set(value);
    }

    public final ObjectProperty<Point3D> axisProperty() {
        return this.axis;
    }

    public final double getH() {
        return this.h.get();
    }

    public final void setH(double value) {
        this.h.set(value);
    }

    public final DoubleProperty hProperty() {
        return this.h;
    }

    public final double getRadius() {
        return this.radius.get();
    }

    public final void setRadius(double value) {
        this.radius.set(value);
    }

    public final DoubleProperty radiusProperty() {
        return this.radius;
    }

    public final double getTheta() {
        return this.theta.get();
    }

    public final void setTheta(double value) {
        this.theta.set(value);
    }

    public final DoubleProperty thetaProperty() {
        return this.theta;
    }

}

private static void animateSphere(Sphere sphere) {
     CylinderCoordinateAdapter adapter = new CylinderCoordinateAdapter(
            sphere.translateXProperty(),
            sphere.translateYProperty(),
            sphere.translateZProperty());

    adapter.setRadius(50);

    Timeline tl = new Timeline(
            new KeyFrame(Duration.ZERO,
                         new KeyValue(adapter.hProperty(), 0d),
                         new KeyValue(adapter.thetaProperty(), 0d)),
            new KeyFrame(Duration.seconds(4),
                         new KeyValue(adapter.hProperty(), 900d, Interpolator.LINEAR),
                         new KeyValue(adapter.thetaProperty(), Math.PI * 4, Interpolator.LINEAR))
    );
    tl.setCycleCount(Timeline.INDEFINITE);
    tl.play();
}