How can I make a ball move up or down in JavaFX? - javafx

Question

I have javafx gui exercise to do and I have to make the ball move either up or down or right and left. Right now the ball goes randomly anywhere I suppose. Can you guys help me with the code? So that when I press the plus button, a ball will be added and goes up and down or right and left. And any other ball added has to shift either up or down? Any help would be awesome.Thanks.
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.util.Duration;
public class MultipleBounceBall extends Application {
#Override // Override the start method in the Application class
public void start(Stage primaryStage) {
MultipleBallPane ballPane = new MultipleBallPane();
ballPane.setStyle("-fx-border-color: black");
Button btAdd = new Button("+");
Button btSubtract = new Button("-");
HBox hBox = new HBox(10);
hBox.getChildren().addAll(btAdd, btSubtract);
hBox.setAlignment(Pos.CENTER);
// Add or remove a ball
btAdd.setOnAction(e -> ballPane.add());
btSubtract.setOnAction(e -> ballPane.subtract());
// Pause and resume animation
ballPane.setOnMousePressed(e -> ballPane.pause());
ballPane.setOnMouseReleased(e -> ballPane.play());
// Use a scroll bar to control animation speed
ScrollBar sbSpeed = new ScrollBar();
sbSpeed.setMax(20);
sbSpeed.setValue(10);
ballPane.rateProperty().bind(sbSpeed.valueProperty());
BorderPane pane = new BorderPane();
pane.setCenter(ballPane);
pane.setTop(sbSpeed);
pane.setBottom(hBox);
// Create a scene and place the pane in the stage
Scene scene = new Scene(pane, 350, 450);
primaryStage.setTitle("Multiple Bounce Ball"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
private class MultipleBallPane extends Pane {
private Timeline animation;
public MultipleBallPane() {
// Create an animation for moving the ball
animation = new Timeline(
new KeyFrame(Duration.millis(50), e -> moveBall()));
animation.setCycleCount(Timeline.INDEFINITE);
animation.play(); // Start animation
}
public void add() {
Color color = new Color(Math.random(),
Math.random(), Math.random(), 0.5);
getChildren().add(new Ball(30, 30, 20, color));
}
public void subtract() {
if (getChildren().size() > 0) {
getChildren().remove(getChildren().size() - 1);
}
}
public void play() {
animation.play();
}
public void pause() {
animation.pause();
}
public void increaseSpeed() {
animation.setRate(animation.getRate() + 0.1);
}
public void decreaseSpeed() {
animation.setRate(
animation.getRate() > 0 ? animation.getRate() - 0.1 : 0);
}
public DoubleProperty rateProperty() {
return animation.rateProperty();
}
protected void moveBall() {
for (Node node: this.getChildren()) {
Ball ball = (Ball)node;
// Check boundaries
if (ball.getCenterX() < ball.getRadius() ||
ball.getCenterX() > getWidth() - ball.getRadius()) {
ball.dx *= -1; // Change ball move direction
}
if (ball.getCenterY() < ball.getRadius() ||
ball.getCenterY() > getHeight() - ball.getRadius()) {
ball.dy *= -1; // Change ball move direction
}
// Adjust ball position
ball.setCenterX(ball.dx + ball.getCenterX());
ball.setCenterY(ball.dy + ball.getCenterY());
}
}
}
class Ball extends Circle {
private double dx = 1, dy = 1;
Ball(double x, double y, double radius, Color color) {
super(x, y, radius);
setFill(color); // Set ball color
}
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}

Answer 1

The problem is that the displacement elements of the ball movement (dx and dy) are both assigned to 1. Thus the ball moves to both x and y directions i.e. diagonally.
Change the declaration of these variables to:
private double dx = 1, dy = 0; // The ball will move right
private double dx = -1, dy = 0; // The ball will move left
private double dx = 0, dy = 1; // The ball will move down
private double dx = 0, dy = -1; // The ball will move up
If you would like the balls to move in random directions, you can do it for example by changing your Ball class:
class Ball extends Circle {
private double dx;
private double dy;
Ball(double x, double y, double radius, Color color) {
super(x, y, radius);
setFill(color); // Set ball color
switch (ThreadLocalRandom.current().nextInt(0, 4)) {
case 0:
dx = 0;
dy = 1;
break;
case 1:
dx = 0;
dy = -1;
break;
case 2:
dx = 1;
dy = 0;
break;
case 3:
dx = -1;
dy = 0;
break;
}
}
}
And if you would like them to start from random locations, you can do it by changing your MultipleBallPane.add() method:
public void add() {
Color color = new Color(Math.random(),
Math.random(), Math.random(), 0.5);
int radius = 20;
int x = ThreadLocalRandom.current().nextInt(radius, (int) getWidth() - radius);
int y = ThreadLocalRandom.current().nextInt(radius, (int) getHeight() - radius);
getChildren().add(new Ball(x, y, radius, color));
}