Timeline animation JavaFX

Question

I would like to know why my screen is not clearing after every move of my chart. Thats my code :

MainClass, i would like to remove from there "time" and put it into lambda expresion in Drawing method updateScene, but dont know yet how to do that :/

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;


public class MainClass extends Application{
    private Drawing draw;
    private double time = 0;
    public static void main(String[] args) {
        launch(args);
    }
       @Override
        public void start(final Stage stage) {
           Group root = new Group();
           root.setStyle("-fx-background-color: rgb(35, 39, 50);"); 
           stage.setScene(new Scene(root, 1000, 1000,  Color.rgb(35, 39, 50))); 

        while(time < 2 ) {
               draw = new Drawing(root, time);
               time+=0.1;

               draw.updateScene();
               stage.show();     
           }
       }
}

Axes class describing how should draw axes :

import javafx.beans.binding.Bindings;
import javafx.geometry.Side;
import javafx.scene.chart.NumberAxis;
import javafx.scene.layout.Pane;

public class Axes extends Pane{
    private NumberAxis xAxis;
    private NumberAxis yAxis;

    public Axes(int width, int height, 
            double xMin, double xMax, double xTickUnit, 
            double yMin, double yMax, double yTickUnit) {
        setMinSize(Pane.USE_PREF_SIZE, Pane.USE_PREF_SIZE);
        setPrefSize(width, height);
        setMaxSize(Pane.USE_PREF_SIZE, Pane.USE_PREF_SIZE);

        xAxis = new NumberAxis(xMin, xMax, xTickUnit);
        xAxis.setSide(Side.BOTTOM);
        xAxis.setMinorTickVisible(false);
        xAxis.setPrefWidth(width);
        xAxis.setLayoutY(height/2);

        yAxis = new NumberAxis(yMin, yMax, yTickUnit);
        yAxis.setSide(Side.LEFT);
        yAxis.setMinorTickVisible(false);
        yAxis.setPrefHeight(height);
        yAxis.layoutXProperty().bind(Bindings.subtract((width / 2) + 1, yAxis.widthProperty()));

        getChildren().setAll(xAxis, yAxis);
    }

    public NumberAxis getXAxis() {
        return xAxis;
    }

    public NumberAxis getYAxis() {
        return yAxis;
    }

}

Scaling and drawing everything what i need in chart.

import java.util.function.Function;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;

public class Chart extends Pane {

    public Chart(Function<Double, Double> f,
            double xMin, double xMax, double xInc,
            Axes axes ) {
        Path path = new Path();
        path.setStroke(Color.ORANGE.deriveColor(0, 1, 1,0.5));
        path.setStrokeWidth(1);
        path.setClip(new Rectangle(0, 0, axes.getPrefWidth(), axes.getPrefHeight()));


        double x = xMin;
        double y = f.apply(x);


        path.getElements().add(new MoveTo(
                mapX(x, axes), mapY(y, axes)
                ));
        x+=xInc;

        while(x < xMax) {
            if(x == xMax) { 
                x = xMin;
                y = f.apply(x);
                path.getElements().add(new MoveTo(
                        mapX(x, axes), mapY(y, axes)
                        ));
            }
            y = f.apply(x);
            path.getElements().add(new LineTo(
                    mapX(x, axes), mapY(y, axes)
                    ));
            x+=xInc;

        }

         setMinSize(Pane.USE_PREF_SIZE, Pane.USE_PREF_SIZE);
         setPrefSize(axes.getPrefWidth(), axes.getPrefHeight());
         setMaxSize(Pane.USE_PREF_SIZE, Pane.USE_PREF_SIZE);

         getChildren().setAll(axes, path);
    }



    private double mapX(double x, Axes axes) {
        double fx = axes.getPrefWidth() / 2;
        double sx = axes.getPrefWidth() / 
                (axes.getXAxis().getUpperBound() - axes.getXAxis().getLowerBound());

        return x * fx + sx;
    }

    private double mapY(double y, Axes axes) {
        double fy = axes.getPrefHeight() / 2;
        double sy = axes.getPrefHeight() / 
                (axes.getYAxis().getUpperBound() - axes.getYAxis().getLowerBound());

        return -y * sy + fy;
    }

}

Drawing class responsible for making animation and drawing exactly which chart from which pattern i want to.

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.Group;
import javafx.util.Duration;

public class Drawing {
    private double t = 0;
    private double l = 1;
    private Group root;

    public Drawing(final Group root, double t) {
        this.root = root;
        this.t = t;
    }

    public void updateScene() {

        final Chart chart = new Chart(x -> Math.exp(-(Math.pow((x-t), 2)))*Math.cos((2*Math.PI*(x-t))/l),
                -1, 1, 0.01, new Axes(1000, 1000,
                        -1, 1, 0.1, -1, 1, 0.1)
                );
        Timeline timeLine = new Timeline(Timeline.INDEFINITE, 
                new KeyFrame(new Duration(1000),
                x -> {          
                    root.getChildren().add(chart);
                }));    
        timeLine.setAutoReverse(true);
        timeLine.play();

    }   
}

Screen showing what i got after compilation. Like my question from up, dunno what causes not cleaning after each timeline stage.

Answer 1

1. If you want a reasonable answer to your question, you should not throw all your code on us but instead boil down your code to what is essential to reproduce your problem.
2. The overall concept of your program looks horribly wrong to me. If you want to move your chart then just move it but do not constantly create a new one.
3. Why do you call stage.show() in a loop?
4. Without having the time to really look at all your code I'd say your problem is the constant recreation of your charts.