Создайте шестиугольное поле с плоскими плитками с помощью JavaFX

Этот пример кода отлично работает с заостренными плитками:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;

public class UISolution extends Application {

    private final static int WINDOW_WIDTH = 800;
    private final static int WINDOW_HEIGHT = 600;

    private final static double r= 20; // the inner radius from hexagon center to outer corner
    private final static double n= Math.sqrt(r * r * 0.75); // the inner radius from hexagon center to middle of the axis
    private final static double TILE_HEIGHT = 2 * r;
    private final static double TILE_WIDTH = 2 * n;

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        AnchorPane tileMap = new AnchorPane();
        Scene content = new Scene(tileMap, WINDOW_WIDTH, WINDOW_HEIGHT);
        primaryStage.setScene(content);

        int rowCount = 4; // how many rows of tiles should be created
        int tilesPerRow = 6; // the amount of tiles that are contained in each row
        int xStartOffset = 40; // offsets the entire field to the right
        int yStartOffset = 40; // offsets the entire fiels downwards

        for (int x = 0; x < tilesPerRow; x++) {
            for (int y = 0; y < rowCount; y++) {
                double xCoord = x * TILE_WIDTH + (y % 2) * n + xStartOffset;
                double yCoord = y * TILE_HEIGHT * 0.75 + yStartOffset;
                
                Polygon tile = new Tile(xCoord, yCoord);
                tileMap.getChildren().add(tile);
            }
        }
        primaryStage.show();
    }

    private class Tile extends Polygon {
        Tile(double x, double y) {
            // creates the polygon using the corner coordinates
            getPoints().addAll(
                    x, y,
                    x, y + r,
                    x + n, y + r * 1.5,
                    x + TILE_WIDTH, y + r,
                    x + TILE_WIDTH, y,
                    x + n, y - r * 0.5
            );

            // set up the visuals and a click listener for the tile
            setFill(Color.ANTIQUEWHITE);
            setStrokeWidth(1);
            setStroke(Color.BLACK);
            setOnMouseClicked(e -> System.out.println("Clicked: " + this));
        }
    }
}

Я думаю, что мне нужно только изменить часть здесь:

     getPoints().addAll(
         x, y,
         x, y + r,
         x + n, y + r * 1.5,
         x + TILE_WIDTH, y + r,
         x + TILE_WIDTH, y,
         x + n, y - r * 0.5
     );

но я изо всех сил пытаюсь иметь правильную форму и положение для своих плиток. И если я делаю:

  getPoints().addAll(x, y,
     x + n * 0.5, y + r,
     x + n * 1.5, y + r,
     x + TILE_WIDTH, y,
     x + n * 1.5, y - r,
     x + n * 0.5, y - r
  );

плитки имеют правильную плоскую форму, но неправильно расположены друг относительно друга. Я думаю, что на этот раз я должен изменить следующий код:

     double xCoord = x * TILE_WIDTH + (y % 2) * n + xStartOffset;
     double yCoord = y * TILE_HEIGHT * 0.75 + yStartOffset;

Пример заостренных плиток, получаемых с помощью этого кода: