JavaFX with Passion! Puzzler #2: Animation

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far, including animation.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

Here are the requirements for this second puzzler:

1. As shown in the screenshot above, the JavaFX program must have a Path that resembles a "figure 8" race track.
2. A blue ellipse representing the race car will follow the track when the program begins, with each lap taking 10 seconds.
3. The car will loop infinitely around the track, and will remain perpendicular to the center point of the circle around which it is currently traveling.
4. When the user presses the mouse on the race car (ellipse), the car will pause.
5. When the user presses the mouse on a paused race car, the car will resume moving from its current location.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Have fun with this one!

Regards,
Jim Weaver
JavaFXpert.com

Comments

[adame_30]

sorry, but i have to change the speed of this car wihle it ´s runing on the AnimationPath ??
can u help me please

[Larry Dickson]

/*
* Main.fx
*
* Created on 31-Mar-2009, 5:08:18 PM
*/

package pathtransition;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;

/**
* @author larry
*/

def sceneWidth = 600;
def sceneHeight = sceneWidth;
def radius = sceneWidth * .25;
def duration = 10s;

def path8 = Path {
elements: [
MoveTo {
x: sceneWidth / 2,
y: sceneHeight / 2
}
ArcTo {
x: sceneWidth / 6,
y: sceneWidth / 9,
radiusX: radius
radiusY: radius
}
ArcTo {
x: sceneWidth / 2,
y: sceneHeight / 2
radiusX: radius
radiusY: radius
}
ArcTo {
x: sceneWidth - sceneWidth / 6
y: sceneHeight - sceneHeight / 9
radiusX: radius
radiusY: radius
sweepFlag: true

}
ArcTo {
x: sceneWidth / 2
y: sceneHeight / 2
radiusX: radius
radiusY: radius
sweepFlag: true
}
]
}

var goStop:
Boolean=false on replace{
if (goStop) {
pathTransition.play();
} else {
pathTransition.pause();
}
}

def car: Ellipse=Ellipse {
centerX: sceneWidth / 2
centerY: sceneWidth / 2
radiusX: 20
radiusY: 10
fill: Color.BLUE
onMouseClicked: function( e: MouseEvent ):Void {
goStop=(goStop == false);
}

}

def pathTransition = PathTransition {
duration: duration;
node: car
path: AnimationPath.createFromPath(path8)
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount: Timeline.INDEFINITE
interpolate: Interpolator.LINEAR
autoReverse: false
}

Stage {
title: "PathTransition Puzzler"
scene: Scene {
width: sceneWidth
height: sceneHeight
content: [path8,car]
}
}

[Marc Brideau]

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

var sx: Number = 125;
var sy: Number = 125;
var running: Boolean = false;

def trackPath = [
MoveTo{x: sx y:sy}
ArcTo{x:25 y:25 radiusX:25 radiusY:25 sweepFlag:true }
ArcTo{x:125 y:125 radiusX:25 radiusY:25 sweepFlag:true}
ArcTo{x:225 y: 225 radiusX: -25 radiusY:-25 sweepFlag:false}
ArcTo{x:125 y:125 radiusX: -25 radiusY: -25 sweepFlag:false}
];

def car: Ellipse = Ellipse{
centerX: sx centerY: sy
radiusX:15 radiusY:10
fill: Color.BLUE
onMouseClicked: function(e: MouseEvent):Void{
if (running==true) {
aniTrackPath.pause();
running=false ;
}
else{
aniTrackPath.play();
running=true;
}
//aniTrackPath.rate = if(aniTrackPath.rate==1) 0 else 1;
//aniTrackPath.play();
}
};

var raceTrack: Path = Path{
elements: trackPath
stroke:Color.BLACK
strokeWidth:3
};

var aniTrackPath: PathTransition = PathTransition{
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
rate:1
node:car
path: AnimationPath.createFromPath(Path{elements:trackPath})
repeatCount: Timeline.INDEFINITE
duration:10s
interpolate: Interpolator.LINEAR

};

Stage{
title:"Race Track"
scene: Scene{

width:350
height:350
content:[
Group {
transforms:[Translate{x:50, y:50}]
content:[raceTrack,car]
}
]
}
}
aniTrackPath.play();

[acw1668]

/* PathTransition Puzzler */

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.*;
import javafx.scene.paint.Color;
import javafx.animation.transition.*;
import javafx.animation.Timeline;

var pathTransition: PathTransition;

var path: Path = Path {
translateX: 50
translateY: 50
elements: [
ArcTo { x:100 y: 100 radiusX: 50 radiusY: 50 }
ArcTo { x:200 y: 200 radiusX: 50 radiusY: 50 sweepFlag: true }
ArcTo { x:100 y: 100 radiusX: 50 radiusY: 50 sweepFlag: true }
ArcTo { x:0 y: 0 radiusX: 50 radiusY: 50 }
]
}

var car: Ellipse = Ellipse {
centerX: 50 centerY: 50
radiusX: 20 radiusY: 10
rotate: -45
fill: Color.BLUE
onMouseClicked: function(me): Void {
if (pathTransition.paused) {
pathTransition.play();
} else {
pathTransition.pause();
}
}
}

pathTransition = PathTransition {
duration: 10s
node: car
path: AnimationPath.createFromPath(path)
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount: Timeline.INDEFINITE
}

Stage {
title: "PathTransition Puzzler"
width: 350
height: 350
scene: Scene {
content: [ path, car ]
}
}

pathTransition.play()