I am trying to get an object to move along a sin path in JavaFX. I found a few ways of generating the sin graph, but each of these used extra features and just ended up creating a window separate from the one the ball object generates in.

I thought instead I could create a series of circles, and I was able to set a ball to orbit one of them, but whenever I tried to change to the next circle it just replaced the previous path entirely - even if I used an if loop. I also couldn't seem to get the ball to start from the left most position. Is there any way to get the object to detect it's position in orbit and move onto a different orbit in the opposite direction? Or else any other way to get the ball to move in simple sin and cosine paths that can be set back to start at the end?

Here the code example of that attempt:

package orbitingCircle;

 import javafx.animation.Interpolator;
 import javafx.animation.PathTransition;
 import javafx.animation.Timeline;
 import javafx.application.Application;
 import javafx.scene.Scene;
 import javafx.scene.layout.Pane;
 import javafx.scene.shape.Circle;
 import javafx.stage.Stage;
 import javafx.util.Duration;

 public class Main extends Application 
 {

@Override
public void start(Stage primaryStage) {
    Pane p = new Pane();

    Circle circlePath = new Circle(50, 100, 50);
    Circle circlePath2 = new Circle(150, 100, 50);
    Circle circlePath3 = new Circle(250, 100, 50);
    Circle circlePath4 = new Circle(350, 100, 50);
    Circle circlePath5 = new Circle(450, 100, 50);
    Circle circlePath6 = new Circle(550, 100, 50);
    Circle orbitingDot = new Circle(100, 50, 5);

    circlePath.setStyle("-fx-stroke: black; -fx-fill: white");
    circlePath2.setStyle("-fx-stroke: black; -fx-fill: white");
    circlePath3.setStyle("-fx-stroke: black; -fx-fill: white");
    circlePath4.setStyle("-fx-stroke: black; -fx-fill: white");
    circlePath5.setStyle("-fx-stroke: black; -fx-fill: white");
    circlePath6.setStyle("-fx-stroke: black; -fx-fill: white");
    orbitingDot.setStyle("-fx-stroke: red; -fx-fill: red");

    // Add nodes to the pane
    p.getChildren().addAll(circlePath, circlePath2, circlePath3, circlePath4, circlePath5, circlePath6, orbitingDot);

    // Create the path transition
    PathTransition pt = new PathTransition(Duration.millis(4000), circlePath, orbitingDot);
    pt.setInterpolator(Interpolator.LINEAR);
    pt.setOrientation(PathTransition.OrientationType.NONE);
    pt.setCycleCount(Timeline.INDEFINITE);
    pt.setAutoReverse(false);
    pt.play();

    p.setOnMousePressed(e -> pt.pause());
    p.setOnMouseReleased(e -> pt.play());

    primaryStage.setTitle(" ");
    primaryStage.setScene(new Scene(p, 600, 175));
    primaryStage.show();
}
public static void main(String[] args) 
{
    launch(args);
}

Edited 1 Year Ago by Elliander_1

I made progress with cubics. The ball follows the sin wave path and starts over after. However, I can't seem to add additional segments for a longer path. I also don't know how to get the proportions of the sin wave to reflect an actual equation.

    Pane p = new Pane();

    CubicCurve cubic = new CubicCurve();
    cubic.setStartX(0.0f);
    cubic.setStartY(100.0f);
    cubic.setControlX1(50.0f);
    cubic.setControlY1(0.0f);
    cubic.setControlX2(150.0f);
    cubic.setControlY2(200.0f);
    cubic.setEndX(200.0f);
    cubic.setEndY(100.0f);

    Circle orbitingDot = new Circle(100, 50, 5);
    orbitingDot.setStyle("-fx-stroke: red; -fx-fill: red");


    // Add nodes to the pane
    p.getChildren().addAll(cubic, orbitingDot);
This article has been dead for over six months. Start a new discussion instead.