Ball that fades away as it goes to the right

My task is to write a program that makes a circle ball that gradually fades away as the ball moves to the right. But it's not working, I can make the ball move when the mouse is dragged but the opacity is the same. Can you guys help me? I don't know how to convert the opacity value into double

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.scene.paint.Color;

public class Project3 extends Application
{
   public static void main(String[] args) {
      launch(args);
   }
   public void start(Stage primaryStage) {
      Pane root = createRootPane();
      Scene scene1 = new Scene(root);
      primaryStage.setScene(scene1);
      primaryStage.setTitle(" Hai Vo ");
      primaryStage.show();
   }
   public Pane createRootPane()
   {
      Circle ball = new Circle (100,50,25);
      Pane root = new Pane(ball);
      root.setMinSize(300,300); 
      root.setOnMouseDragged (
       event ->
       {
         double x = event.getX();
         ball.setCenterX(event.getX());
         ball.setCenterY(event.getY());
         ball.opacityProperty().bind(ball.centerXProperty());
         double opacity = ball.opacityProperty();
         ball.setOpacity(opacity);
       } );
       return root;   
   }
}

First, move the binding out of the event handler. The binding will ensure the opacity is always updated when the centerX property updates.

Second, don't set bound values; the last two lines of the event handler just set the opacity to its current value anyway.

Third, the opacity should be between 0 and 1. You want it to be 1 when centerX is 0 and 0 when centerX is 300 (or, generally, the width of the pane).

What you need is (in pseudocode)

<!-- language: none -->

opacity = 1 - ball.centerX / root.width
        = (ball.centerX / root.width) * (-1) + 1

which you can express in bindings with

ball.centerXProperty()
    .divide(root.widthProperty())
    .multiply(-1)
    .add(1)

So put together, you need:

public Pane createRootPane() {
   Circle ball = new Circle (100,50,25);
   Pane root = new Pane(ball);
   ball.opacityProperty().bind(
       ball.centerXProperty()
           .divide(root.widthProperty())
           .multiply(-1)
           .add(1)
   );
   root.setMinSize(300,300); 
   root.setOnMouseDragged (
    event ->
    {
      ball.setCenterX(event.getX());
      ball.setCenterY(event.getY());
    } );
    return root;   
 }