Skip to content

Display multiple animated shapes based off of user input (JavaFX)

I am writing a code that gets a user input for an integer and it will get the number of circles with randomized sizes and positions around the pane. For example, if the user wants 5 circles they enter 5 and the will be 5 circles displayed and animated. The animation part of the program works. The problem is that the circles are now not appearing once I implement them into a for-loop (so I can have multiple circles based on the user’s input. Whenever I press the button to display the animated circles, only one shows up and then the box on the bottom of my IDE gives me random errors. I am unsure of how to fix this issue.

This is my code:

private class buttonEvent implements EventHandler<ActionEvent> {
  @Override
  public void handle(ActionEvent e) {
    String countCircles = numOfCircles.getText();
    int circleCount = Integer.parseInt(countCircles);

    String countDuration = duration.getText();
    int speed = Integer.parseInt(countDuration);


    double widthRand = ((Math.random() * (800 - 0)) + 0);
    double lengthRand = ((Math.random() * (600 - 0)) + 0);
    double radiusRand = Math.floor(Math.random() * (100 - 10 + 1) + 10);


    Circle circle = new Circle(widthRand, lengthRand, radiusRand);
    circle.setFill(Color.color(Math.random(), Math.random(), Math.random()));

    ScaleTransition scaleTr = new ScaleTransition();
    scaleTr.setDuration(Duration.millis(speed));

    scaleTr.setFromX(1);
    scaleTr.setFromY(1);
    scaleTr.setToX(0.001);
    scaleTr.setToY(0.001);

    scaleTr.setCycleCount(3);
    scaleTr.setAutoReverse(true);

    group = new GroupLayout.Group(circle);
    scaleTr.setNode(group);

    scaleTr.play();

    for (int i = 0; i < circleCount; i++) {
        display.getChildren().addAll(group);
    }
  }
}

Answer

The exception is “java.lang.IllegalArgumentException: Children: duplicate children added: parent = Pane@…“. It is because you are adding the same group over and over. Modifying the code as follows solves the problem:

    private ScaleTransition createTransition(int speed) {
        double widthRand = ((Math.random() * (800 - 0)) + 0);
        double lengthRand = ((Math.random() * (600 - 0)) + 0);
        double radiusRand = Math.floor(Math.random() * (100 - 10 + 1) + 10);

        Circle circle = new Circle(widthRand, lengthRand, radiusRand);
        circle.setFill(Color.color(Math.random(), Math.random(), Math.random()));

        ScaleTransition scaleTr = new ScaleTransition();
        scaleTr.setDuration(Duration.millis(speed));

        scaleTr.setFromX(1);
        scaleTr.setFromY(1);
        scaleTr.setToX(0.001);
        scaleTr.setToY(0.001);

        scaleTr.setCycleCount(3);
        scaleTr.setAutoReverse(true);

        group = new Group(circle);
        scaleTr.setNode(group);
        return scaleTr;
    }

    private class buttonEvent implements EventHandler<ActionEvent> {

        @Override
        public void handle(ActionEvent e) {
            String countCircles = numOfCircles.getText();
            int circleCount = Integer.parseInt(countCircles);

            String countDuration = duration.getText();
            int speed = Integer.parseInt(countDuration);

            for( int i = 0; i < circleCount; i++){
                ScaleTransition scaleTr = createTransition(speed);
                display.getChildren().addAll(scaleTr.getNode());
                scaleTr.play();
            }
        }
    }