Drop the Checkered Flag: Solution to JavaFX Puzzler #2

Yesterday I challenged the readers of this blog with JavaFX Puzzler #2, which calls for creating a "figure 8" track around which a race car travels.  Please take a look at that post for the requirements, as well as the selection criteria for the winners.

I am pleased to announce that the winners of this JavaFX Puzzler are Fei Cheng and Marc Brideau, and that they each will receive a coupon with which they can get the Pro JavaFX early access eBook for free.  Here is the screenshot and code for the example solution:

package javafxpassionpuzzler2;

import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.scene.Scene;
import javafx.scene.input.*;
import javafx.scene.shape.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

var ellipse: Ellipse;
var path: Path = Path {
  elements: [
    MoveTo {
      x: 200
      y: 200
    },
    ArcTo {
      x: 100
      y: 100
      radiusX: 50
      radiusY: 50
      sweepFlag: false
    },
    ArcTo {
      x: 200
      y: 200
      radiusX: 50
      radiusY: 50
      sweepFlag: false
    },
    ArcTo {
      x: 300
      y: 300
      radiusX: 50
      radiusY: 50
      sweepFlag: true
    },
    ArcTo {
      x: 200
      y: 200
      radiusX: 50
      radiusY: 50
      sweepFlag: true
    },
  ]
}

var anim = PathTransition {
  duration: 10s
  node: bind ellipse
  path: AnimationPath.createFromPath(path)
  orientation: OrientationType.ORTHOGONAL_TO_TANGENT
  interpolate: Interpolator.LINEAR
  repeatCount: Timeline.INDEFINITE
};

Stage {
  title: "PathTransition Puzzler"
  scene: Scene {
    width: 400
    height: 400
    content: [
      path,
      ellipse = Ellipse {
        centerX: 200
        centerY: 200
        radiusX: 20
        radiusY: 10
        fill: Color.BLUE
        onMousePressed: function(me:MouseEvent):Void {
          if (anim.paused) {
            anim.play();
          }
          else {
            anim.pause();
          }
        }
      }
    ]
  }
}
anim.playFromStart();

Please leave a comment if you have any questions about this solution. Congratulations to Fei Cheng and Marc Brideau!

Regards,
Jim Weaver
JavaFXpert.com

Comments

[Jim Weaver]

acw1668,

I used the bind because the instance of the Ellipse doesn't yet exist at the time that the PathTransition is created. If I'd have created the Ellipse instance prior to creating the PathTransition instance (as I suspect you did), then the bind wouldn't have been necessary. It is a good practice to avoid unnecessary binds, so I prefer your approach.

Thanks,
Jim Weaver

[acw1668]

Congratulations to the winners.

Jim, would you mind explaining why it is necessary to bind the ellipse in PathTransition? As I find that the results look like the same with and without the binding.