We Keep Coding

Displacement of an object around a sphere with JavaFX

I have an object, like a box in this example.
I want this box to move in a sine to the left on the sphere when the Z-axis is rotated. But after the box has made a curve, i.e. the rotation of the Z-axis is back to 0. The sphere no longer rotates downwards as it did at the start, but upwards to the right.
import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.shape.Sphere;
import javafx.scene.transform.*;
import javafx.stage.Stage;
import org.joml.Matrix4f;
import org.joml.Quaternionf;
import java.util.ArrayList;
public class TestFX extends Application {
public static final float WIDTH = 1400;
public static final float HEIGHT = 1000;
private final ArrayList<String> input = new ArrayList<>();
private final Sphere sphere = new Sphere(500);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
Flugzeug flieger = new Flugzeug(30, 30, 50);
flieger.setMaterial(new PhongMaterial(Color.GREEN));
flieger.setTranslateZ(330);
flieger.getTransforms().add(new Rotate(20, Rotate.X_AXIS));
sphere.translateZProperty().set(710);
sphere.translateYProperty().set(420);
PhongMaterial phongMaterial = new PhongMaterial();
phongMaterial.setDiffuseMap(new Image(getClass().getResourceAsStream("Earth_diffuse_8k.png")));
sphere.setMaterial(phongMaterial);
PerspectiveCamera camera = new PerspectiveCamera(true);
camera.setFarClip(40000);
Group root = new Group(flieger, sphere);
Scene scene = new Scene(root, WIDTH, HEIGHT, true);
scene.setCamera(camera);
primaryStage.setTitle("FliegenFX");
primaryStage.setScene(scene);
primaryStage.show();
new AnimationTimer() {
#Override
public void handle(long now) {
initGameLogic(flieger);
dreheErde(flieger, sphere);
}
}.start();
scene.setOnKeyPressed(event -> {
String code = event.getCode().toString();
if (!input.contains(code))
input.add(code);
});
scene.setOnKeyReleased(event -> {
String code = event.getCode().toString();
input.remove(code);
});
}
// TODO Erddrehung nach Drehung beibehalten
private void dreheErde(Flugzeug flieger, Sphere erde) {
double rotationFactor = 0.005;
double drehung = flieger.getDrehung() * rotationFactor;
double amplitude = 2;
double frequency = 0.001;
float angle = (float) (Math.sin(drehung * frequency) * amplitude);
Quaternionf quat = new Quaternionf();
Matrix4f matrix4f = new Matrix4f();
Affine affine = new Affine();
quat.rotateY(angle);
quat.rotateZ(angle);
quat.rotateX(-0.001f);
quat.normalize();
quat.get(matrix4f);
float[] matrixArray = new float[16];
matrix4f.get(matrixArray);
double[] matrix = new double[16];
for (int i = 0 ; i < matrixArray.length; i++)
{
matrix[i] = matrixArray[i];
}
affine.append(matrix, MatrixType.MT_3D_4x4, 0);
erde.getTransforms().add(affine);
}
private void initGameLogic(Flugzeug flieger) {
if (input.contains("LEFT")) {
flieger.rotateByZ(-0.5);
}
if (input.contains("RIGHT")) {
flieger.rotateByZ(0.5);
}
}
private class Flugzeug extends Box{
private double drehung = 0;
private Rotate r;
private Transform t = new Rotate();
public Flugzeug(double width, double height, double depth){
super(width, height, depth);
}
public void rotateByZ(double ang){
drehung += ang;
r = new Rotate(ang, Rotate.Z_AXIS);
t = t.createConcatenation(r);
getTransforms().clear();
getTransforms().addAll(t);
}
public double getDrehung() {
return drehung;
}
}
}
I have tried many different ways with trigonometry but they have not been successful. This was for example to move the X-axis of the sphere also according to the sine or to subtract the movements of the Y and Z axis of the sphere as cosine.
I think it has to be transformed in a Rotation Matrix, but i‘ve never had matrix calculation.

Rotating a Group inside another Group in 3d scene
In this approach Box instance doesn't seem to move 'cause it's moving with the camera . Camera and box are moving together because is it's Group parent who is rotating with keyboard event . The Sphere node is in another group and is not affected . Sphere itself is rotating in Y axis
App.java
public class App extends Application {
#Override
public void start(Stage stage) {
Shape3D sphere = new Sphere(10);
PhongMaterial mat = new PhongMaterial();
mat.setDiffuseMap(new Image("https://www.h-schmidt.net/map/map.jpg"));
sphere.setMaterial(mat);
RotateTransition sphereRotation = new RotateTransition(Duration.seconds(40), sphere);
sphereRotation.setAxis(Rotate.Y_AXIS);
sphereRotation.setToAngle(360);
sphereRotation.setInterpolator(Interpolator.LINEAR);
sphereRotation.setCycleCount(Animation.INDEFINITE);
sphereRotation.play();
Shape3D box = new Box(2, 2, 2);
box.setMaterial(new PhongMaterial(Color.ORANGE));
box.setTranslateZ(-11);
PerspectiveCamera camera = new PerspectiveCamera(true);
camera.setTranslateZ(-30);
var planeGroup = new Group(box, camera);
Group sphereGroup = new Group(sphere);
Group group3d = new Group(planeGroup, sphereGroup);
Scene scene = new Scene(group3d, 640, 480, true, SceneAntialiasing.BALANCED);
scene.setOnKeyPressed((t) -> {
if (t.getCode() == KeyCode.UP) {
Rotate r = new Rotate(-2);
r.setAxis(Rotate.X_AXIS);
planeGroup.getTransforms().add(r);
}
if (t.getCode() == KeyCode.LEFT) {
Rotate r = new Rotate(2);
r.setAxis(Rotate.Y_AXIS);
planeGroup.getTransforms().add(r);
}
if (t.getCode() == KeyCode.RIGHT) {
Rotate r = new Rotate(-2);
r.setAxis(Rotate.Y_AXIS);
planeGroup.getTransforms().add(r);
}
if (t.getCode() == KeyCode.DOWN) {
Rotate r = new Rotate(2);
r.setAxis(Rotate.X_AXIS);
planeGroup.getTransforms().add(r);
}
});
scene.setCamera(camera);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}

How to create a new ball every 5 seconds (5000 milliseconds) in JavaFX?

I am new to JavaFX and I am creating a simple program. What I'm trying to achieve is to create a ball every 5 seconds that bounces off the walls and all balls should move every tens times per second (10 milliseconds). Also, feel free to leave other suggestions about my code.
Here's the source code:
public class Main extends Application {
#Override
public void start(Stage stage) {
//Sets the title, adds a group, and background color
BorderPane canvas = new BorderPane();
Scene scene = new Scene(canvas, 640, 480, Color.WHITE);
Circle ball = new Circle(10, Color.RED);
ball.relocate(0, 10);
canvas.getChildren().add(ball);
stage.setTitle("Title");
stage.setScene(scene);
stage.show();
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(20), new EventHandler<ActionEvent>() {
double dx = 5; //Step on x or velocity
double dy = 3; //Step on y
#Override
public void handle(ActionEvent t) {
//move the ball
ball.setLayoutX(ball.getLayoutX() + dx);
ball.setLayoutY(ball.getLayoutY() + dy);
Bounds bounds = canvas.getBoundsInLocal();
//If the ball reaches the left or right border make the step negative
if(ball.getLayoutX() <= (bounds.getMinX() + ball.getRadius()) ||
ball.getLayoutX() >= (bounds.getMaxX() - ball.getRadius()) ){
dx = -dx;
}
//If the ball reaches the bottom or top border make the step negative
if((ball.getLayoutY() >= (bounds.getMaxY() - ball.getRadius())) ||
(ball.getLayoutY() <= (bounds.getMinY() + ball.getRadius()))){
dy = -dy;
}
}
}));
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();
}
public static void main(String[] args) {
launch(args);
}
}

Here is one way to do it as suggested in comments:
Create a custom object that holds the ball and its orientation information.
Add the newly created object in the list and the ball in canvas.
Loop through all balls and position them based on their orientation information.
When your desired time is reached add a new ball.
To keep it simple, you don't need any concurrent related stuff. Maybe using them will improve the implementation (but I am not touching that now). :-)
Here is a demo of using the points I mentioned.
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.security.SecureRandom;
import java.util.ArrayList;
import java.util.List;
public class CanvasBallCreation_Demo extends Application {
List<Ball> balls = new ArrayList<>();
BorderPane canvas;
double dx = 5; //Step on x or velocity
double dy = 3; //Step on y
double refresh = 20;//ms
double addBallDuration = 5000;//ms
double temp = 0;
SecureRandom rnd = new SecureRandom();
#Override
public void start(Stage stage) {
canvas = new BorderPane();
Scene scene = new Scene(canvas, 640, 480, Color.WHITE);
addBall();
stage.setTitle("Title");
stage.setScene(scene);
stage.show();
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(refresh), e->moveBalls()));
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();
}
private void addBall(){
Ball ball = new Ball();
balls.add(ball);
canvas.getChildren().add(ball.getBall());
}
private void moveBalls() {
temp = temp + refresh;
if(temp>addBallDuration){
temp = 0;
addBall();
}
Bounds bounds = canvas.getBoundsInLocal();
balls.forEach(obj -> {
Circle ball = obj.getBall();
double tx = obj.getTx();
double ty = obj.getTy();
ball.setLayoutX(ball.getLayoutX() + dx*tx);
ball.setLayoutY(ball.getLayoutY() + dy*ty);
//If the ball reaches the left or right border make the step negative
if (ball.getLayoutX() <= (bounds.getMinX() + ball.getRadius()) ||
ball.getLayoutX() >= (bounds.getMaxX() - ball.getRadius())) {
obj.setTx(-tx);
}
//If the ball reaches the bottom or top border make the step negative
if ((ball.getLayoutY() >= (bounds.getMaxY() - ball.getRadius())) ||
(ball.getLayoutY() <= (bounds.getMinY() + ball.getRadius()))) {
obj.setTy(-ty);
}
});
}
class Ball {
Circle ball = new Circle(10, Color.RED);
double tx = 1;
double ty = 1;
public Ball(){
// Placing the ball at a random location between 0,0 and 10,10 to generate random paths
ball.relocate(rnd.nextInt(10), rnd.nextInt(10));
}
public Circle getBall() {
return ball;
}
public double getTx() {
return tx;
}
public void setTx(double tx) {
this.tx = tx;
}
public double getTy() {
return ty;
}
public void setTy(double ty) {
this.ty = ty;
}
}
}

There are a few options, java.util.concurrent.TimeUnit or Thread.sleep.
You may want to look at both, and if you need two operations going at once (creating new balls, balls moving) I would look into using a new thread for each ball.
You can read more about using threads by using these articles, and your simple program actually seems like a great use case for learning about them.
https://www.geeksforgeeks.org/multithreading-in-java/
https://www.tutorialspoint.com/java/java_multithreading.htm
https://docs.oracle.com/javase/7/docs/api/java/lang/Thread.html

Animation using images in javafx application does not work

I am doing Animation of array of Images using Timeline Animation. The array is 299 images. It iterates once from 0 to 298 images and then animation stops.
It should continuously animate but does not work. I am using opacityProperty() for each imageview using timeline animation. Once one image animation is complete then it goes to next image. But I cannot loop continously when it reaches 298 image. The variable x should become 0 and then again start the animation.
public class Animation_Program_version3 extends Application {
Timeline timeline = null;
Group rootGroup = null;
int x = 0;
Image [] images = new Image[299];;
ArrayList imageview = null;
public Animation_Program_version3() {
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
rootGroup = new Group();
final Scene scene = new Scene(rootGroup, 800, 400, Color.BEIGE);
imageview = new ArrayList();
int y = 0;
for(int x = -50; x < 100; x=x+1){
images[y] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y]));
y = y+1;
}
int y1 = 150;
for(int x = 99; x > -50; x=x-1){
images[y1] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y1]));
y1 = y1+1;
}
rootGroup.getChildren().addAll(imageview);
int x = 0;
timeline = new Timeline();
doAnimation();
primaryStage.setScene(scene);
`primaryStage.show(); `
}
<code>
public void doAnimation(){
KeyFrame[] kf = new KeyFrame[images.length];
ImageView im = (ImageView)imageview.get(x);
<code>
im.setImage(images[x]);
kf[x] = new KeyFrame(Duration.millis(1), new KeyValue(im.opacityProperty(), 0));
timeline.getKeyFrames().add(kf[x]);
// When timeline animation is finished it executes the seetOnFinished Event
timeline.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if( x == 298){
System.out.println("VALUE OF x:"+x);
x=0; -------> This is where code does not work When it reaches end of array and x initialize to 0 then animation stops.
Collections.reverse(imageview);
doAnimation();
}
/* This if loop works fine animation iterates through 0 to 298 images. */
if( x < 298){
x++;
doAnimation();
}
}
});
timeline.play();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
I have corrected my program and now I am not getting this error java.lang.IllegalArgumentException: Children: duplicate children.
But still the problem is I do not see program running on the screen. I have added root Group in scene but I see nothing on screen. My new Program:
public class Animation_Program_version3 extends Application {
Timeline timeline = null;
Group rootGroup = null;
int x = 0;
Image [] images = new Image[299];;
ArrayList imageview = null;
ImageView im = new ImageView();
public Animation_Program_version3() {
// this.imageview = new TreeSet();
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
rootGroup = new Group();
final Scene scene =
new Scene(rootGroup, 800, 400, Color.BEIGE);
//
// final Scene scene =
// new Scene(rootGroup, 800, 400, Color.BEIGE);
// int x = 0;
//Image [] images =
imageview = new ArrayList();
int y = 0;
for(int x = -50; x < 100; x=x+1){
images[y] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y]));
y = y+1;
}
int y1 = 150;
for(int x = 99; x > -50; x=x-1){
images[y1] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y1]));
// imageview[y1] = new ImageView(images[y1]);
y1 = y1+1;
}
//for (int i = 0; i < 299; i++) {
// rootGroup.getChildren().addAll(imageview);
//}
int x = 0;
timeline = new Timeline();
doAnimation();
primaryStage.setScene(scene);
primaryStage.show();
}
public void doAnimation(){
KeyFrame[] kf = new KeyFrame[images.length];
// im = (ImageView)imageview.get(x);
im.setImage(images[x]);
rootGroup.getChildren().setAll(im);
kf[x] = new KeyFrame(Duration.millis(1), new KeyValue(im.opacityProperty(), 0));
timeline.getKeyFrames().add(kf[x]);
timeline.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
// timeline = null;
if( x == 298){
System.out.println("VALUE OF x:"+x);
x=0;
// Collections.reverse(imageview);
// rootGroup.getChildren().setAll(imageview);
//
doAnimation();
}
if( x < 298){
System.out.println("Inside 298 OF x:"+x);
x++;
// Animation_Program_version3.rootGroup = null;
// Animation_Program_version3.rootGroup = new Group();
doAnimation();
}
}
});
timeline.play();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

kf[x] = new KeyFrame(Duration.millis(10), new KeyValue(im.opacityProperty(), 1));
This piece of code does all the work. Here opacity goes from im.opacityProperty() which is 1 and goes to 1. So there is no fading out.
doAnimation() is recursive method and loops. We have used timeline animation to make animation smooth or else if i had used for loop then animation would flicker. This took me almost the month to make it work as I am no expert of animation used in JavaFx api.
The animation that i have done is similar to animated gif where you have series of images which when run one after another gives an animated effect.
The code still needs some work. In doAnimation() method, I have created array of KeyFrame: KeyFrame[] kf = new KeyFrame[images.length]; which i feel is not required.
Also there is no need to use Group class. I have used HBox to include ImageView. ImageView is being animated.
public class Animation_Program_version3 extends Application {
Timeline timeline = null;
Group rootGroup = null;
int x = 0;
Image [] images = new Image[299];;
ArrayList imageview = null;
ImageView im = new ImageView();
public Animation_Program_version3() {
// this.imageview = new TreeSet();
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
rootGroup = new Group();
//
// final Scene scene =
// new Scene(rootGroup, 800, 400, Color.BEIGE);
// int x = 0;
//Image [] images =
imageview = new ArrayList();
int y = 0;
for(int x = -50; x < 100; x=x+1){
images[y] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y]));
y = y+1;
}
int y1 = 150;
for(int x = 99; x > -50; x=x-1){
images[y1] = new Image("/Image"+x+".jpg", true);
imageview.add(new ImageView(images[y1]));
// imageview[y1] = new ImageView(images[y1]);
y1 = y1+1;
}
//for (int i = 0; i < 299; i++) {
// rootGroup.getChildren().addAll(imageview);
//}
HBox layout2 = new HBox();
layout2.getChildren().add(im);
Scene scene =
new Scene(layout2, 800, 400);
int x = 0;
timeline = new Timeline();
primaryStage.setScene(scene);
primaryStage.show();
doAnimation();
}
public void doAnimation(){
KeyFrame[] kf = new KeyFrame[images.length];
// im = (ImageView)imageview.get(x);
System.out.println("WHAT IS THE VALUE OF:"+x);
im.setImage(images[x]);
System.out.println(images[x]);
// rootGroup.getChildren().setAll(im);
kf[x] = new KeyFrame(Duration.millis(10), new KeyValue(im.opacityProperty(), 1));
timeline.getKeyFrames().add(kf[x]);
timeline.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
// timeline = null;
if( x == 298){
System.out.println("VALUE OF x:"+x);
x=0;
// Collections.reverse(imageview);
// rootGroup.getChildren().setAll(imageview);
//
doAnimation();
}
if( x < 298){
System.out.println("Inside 298 OF x:"+x);
x++;
// im.setImage(images[x]);
// Animation_Program_version3.rootGroup = null;
// Animation_Program_version3.rootGroup = new Group();
doAnimation();
}
}
});
timeline.play();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

JavaFx Application lags after time

in my Application below, red blocks are falling from the top of the screen. My problem is, that after 3-5 minutes the animation begins to lag and I can't figure out why.
I used a profiler and found out, that it's not a memory leak but it must be a resource leak, I am pretty sure because the Cpu Load increases over time.
If you want to, you can just implement the necessary classes and compile and run the code, then you should probably see the problem. (after 3-5 minutes)
Thanks for your help and have a great day! :)
public class RBYDebug extends Application {
Group root = new Group();
ArrayList<Rectangle> entities = new ArrayList<>();
Random random = new Random();
int sW = 1600; //screen Width
int sH = 980; //screen Height
int dy = 4; //vertical move speed
public static void main(String[] args){
Application.launch(args);
}
public void start(Stage primaryStage){
//Setup Entities
for (int i = 0; i < 40; i++){
double x = random.nextDouble() * sW;
double y = i * 50;
Rectangle rect = new Rectangle(x, -y -50, 50, 50);
rect.setFill(Color.RED);
entities.add(rect);
}
//Root-Group setup
root.getChildren().setAll(entities);
//Setup Scene
Scene scene = new Scene(root, sW, sH, Color.BLACK);
//Stage setup
primaryStage.setTitle("RBY Debug");
primaryStage.setScene(scene);
primaryStage.setResizable(false);
primaryStage.show();
//Setup Timer
AnimationTimer timer = new AnimationTimer(){
public void handle(long now){
update();
}
};
timer.start();
}
public void update(){
for (Rectangle i : entities){
if (i.getY() <= sH){
i.setY(i.getY() + dy);
}
else {
i.setY(-i.getHeight());
}
}
root.getChildren().setAll(entities);
}
}

Display 2d array as grid in JavaFX

for my Java coursework I have to create a grid based animation. Basically I currently have a 2d array containing certain values, which change each time the program is run. For example it could be a 20x20 2d array, or a 32x32 etc. Inside the array certain values are stored, chars represent animals, and numbers represent food. The animals smell the food and then move towards the food after each cycle of the program, hence their position in the array change after each cycle. How the program works isn't really relevant to the question I'm asking.
Basically I now have to implement this in JavaFX (it currently works in the console, displaying the array as a grid each cycle). I was just wondering which control would be best to use in JavaFX to display a 2d array, or if perhaps someone could point me in the right direction of how to start coding this?
I'm new to java (and JavaFX) so am not sure of which controls to use...

I wouldn't use a control. I'd rather create a node for each of the items in the array and put them on the scene. Something like this:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
// create node
MyNode node = new MyNode( "Item " + i + "/" + j, i * gridWidth, j * gridHeight, gridWidth, gridHeight);
// add node to group
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
public static class MyNode extends StackPane {
public MyNode( String name, double x, double y, double width, double height) {
// create rectangle
Rectangle rectangle = new Rectangle( width, height);
rectangle.setStroke(Color.BLACK);
rectangle.setFill(Color.LIGHTBLUE);
// create label
Label label = new Label( name);
// set position
setTranslateX( x);
setTranslateY( y);
getChildren().addAll( rectangle, label);
}
}
}
This way you can create animated movement of the nodes easily with a PathTransition. Like this shuffle mechanism:
import java.util.Random;
import javafx.animation.Animation.Status;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
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;
import javafx.stage.Stage;
import javafx.util.Duration;
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
// create node
MyNode node = new MyNode( "Item " + i + "/" + j, i * gridWidth, j * gridHeight, gridWidth, gridHeight);
// add node to group
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
animate();
}
private void animate() {
Random random = new Random();
int ai = random.nextInt(n);
int aj = random.nextInt(m);
int bi = random.nextInt(n);
int bj = random.nextInt(m);
// make sure that A and B are never the same
if( ai == bi && aj == bj) {
ai++;
if( ai >= n)
ai = 0;
}
MyNode nodeA = playfield[ai][aj];
nodeA.toFront();
MyNode nodeB = playfield[bi][bj];
nodeB.toFront();
// swap on array to keep array consistent
playfield[ai][aj] = nodeB;
playfield[bi][bj] = nodeA;
// A -> B
Path pathA = new Path();
pathA.getElements().add (new MoveTo ( nodeA.getTranslateX() + nodeA.getBoundsInParent().getWidth() / 2.0, nodeA.getTranslateY() + nodeA.getBoundsInParent().getHeight() / 2.0));
pathA.getElements().add (new LineTo( nodeB.getTranslateX() + nodeB.getBoundsInParent().getWidth() / 2.0, nodeB.getTranslateY() + nodeB.getBoundsInParent().getHeight() / 2.0));
PathTransition pathTransitionA = new PathTransition();
pathTransitionA.setDuration(Duration.millis(1000));
pathTransitionA.setNode( nodeA);
pathTransitionA.setPath(pathA);
pathTransitionA.play();
// B -> A
Path pathB = new Path();
pathB.getElements().add (new MoveTo ( nodeB.getTranslateX() + nodeB.getBoundsInParent().getWidth() / 2.0, nodeB.getTranslateY() + nodeB.getBoundsInParent().getHeight() / 2.0));
pathB.getElements().add (new LineTo( nodeA.getTranslateX() + nodeA.getBoundsInParent().getWidth() / 2.0, nodeA.getTranslateY() + nodeA.getBoundsInParent().getHeight() / 2.0));
PathTransition pathTransitionB = new PathTransition();
pathTransitionB.setDuration(Duration.millis(1000));
pathTransitionB.setNode( nodeB);
pathTransitionB.setPath(pathB);
pathTransitionB.play();
pathTransitionA.setOnFinished( new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if( pathTransitionB.getStatus() == Status.RUNNING)
return;
animate();
}
});
pathTransitionB.setOnFinished( new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if( pathTransitionA.getStatus() == Status.RUNNING)
return;
animate();
}
});
}
public static void main(String[] args) {
launch(args);
}
public static class MyNode extends StackPane {
public MyNode( String name, double x, double y, double width, double height) {
// create rectangle
Rectangle rectangle = new Rectangle( width, height);
rectangle.setStroke(Color.BLACK);
rectangle.setFill(Color.LIGHTBLUE);
// create label
Label label = new Label( name);
// set position
setTranslateX( x);
setTranslateY( y);
getChildren().addAll( rectangle, label);
}
}
}
And here's an example about how you could handle the cells via subclassing. But that's just one way to do it:
public class NodeDemo extends Application {
private double sceneWidth = 1024;
private double sceneHeight = 768;
private int n = 10;
private int m = 10;
double gridWidth = sceneWidth / n;
double gridHeight = sceneHeight / m;
MyNode[][] playfield = new MyNode[n][m];
#Override
public void start(Stage primaryStage) {
Group root = new Group();
// initialize playfield
for( int i=0; i < n; i++) {
for( int j=0; j < m; j++) {
MyNode node = null;
// create bug
if( i == 0 && j == 0) {
node = new Bug( "Bug", Color.ORANGE, i, j);
}
// create food
else if( i == 5 && j == 5) {
node = new Food( "Food", Color.GREEN, i, j);
}
// create obstacle
else if( i == 3 && j == 3) {
node = new Obstacle( "Obstacle", Color.GRAY, i, j);
}
// add node to group
if( node != null) {
root.getChildren().add( node);
// add to playfield for further reference using an array
playfield[i][j] = node;
}
}
}
Scene scene = new Scene( root, sceneWidth, sceneHeight);
primaryStage.setScene( scene);
primaryStage.show();
// move bugs
animate();
}
private void animate() {
// TODO
}
public static void main(String[] args) {
launch(args);
}
private class Food extends MyNode {
public Food(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class Obstacle extends MyNode {
public Obstacle(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class Bug extends MyNode {
public Bug(String name, Color color, double x, double y) {
super(name, color, x, y);
}
}
private class MyNode extends StackPane {
public MyNode( String name, Color color, double x, double y) {
// create rectangle
Rectangle rectangle = new Rectangle( gridWidth, gridHeight);
rectangle.setStroke( color);
rectangle.setFill( color.deriveColor(1, 1, 1, 0.7));
// create label
Label label = new Label( name);
// set position
setTranslateX( x * gridWidth);
setTranslateY( y * gridHeight);
getChildren().addAll( rectangle, label);
}
}
}

You can start looking at the "Getting Started" section at the documentation. Focus on the simple examples like the HelloWorld and LoginForm sample programs.
For you structure you'll probably want to use a GridPane.