Skip to main content

Creating a Hexagonal Grid of Points and Outlines

Point category icon

Hexagonal grids are a common and visually appealing pattern found in nature and design. The Point class in Bitbybit provides a powerful method, hexGridScaledToFit(), to generate such grids. This tutorial demonstrates how to:

  1. Generate a hexagonal grid: Using point.hexGridScaledToFit(), specifying dimensions and counts.
  2. Extract data from the result: The method returns an object containing both the centers of the hexagons and the hexagons themselves (as lists of corner points).
  3. Visualize the grid: Draw the center points and create polylines for the hexagon outlines.

We'll explore this using Rete (visual nodes), Blockly (visual blocks), and TypeScript (code). All examples will generate a hexagonal grid, draw its center points, and draw the outlines of each hexagon.

For detailed information on the hex grid functions, please refer to the Point API Documentation.

The Core Idea: Scaled Hexagonal Grids​

The point.hexGridScaledToFit() method is designed to create a grid of hexagons that precisely fits within a specified width and height, given a desired number of hexagons in width (nrHexagonsInWidth) and height (nrHexagonsInHeight).

Key aspects of this method:

  • Output Structure: It returns an object (a JSON-like structure) containing:
    • centers: A list of 3D points representing the center of each hexagon in the grid.
    • hexagons: A list, where each item is another list of 6 points representing the vertices (corners) of a single hexagon.
    • It also includes shortestDistEdge, longestDistEdge, and maxFilletRadius for the generated hexagons.
  • Parameters: You can control various aspects like whether the hexagons are flatTop, if the grid should be centerGrid (centered at the origin [0,0,0]), and if the points should be projected onto the ground plane (pointsOnGround, i.e., Z=0 for centers and Y=0 for vertices if originally on XY).
  • Visualization: To see the grid, we'll:
    1. Extract the centers and draw them directly.
    2. Iterate through the hexagons list. For each list of 6 corner points, create a closed Polyline and then draw these polylines.
JSON Handling

Since hexGridScaledToFit() returns an object, we'll use JSON utility functions (like JSON Get Value on Prop) to extract the centers and hexagons arrays from the result in the Rete and Blockly examples.

Live Examples​

Click through the tabs below to see the implementation. Each example will generate and display a hexagonal grid.

Bitbybit Platform

Point Hex Grid Example

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "7729fd4f544e72fc": {
      "id": "7729fd4f544e72fc",
      "name": "bitbybit.point.hexGridScaledToFit",
      "customName": "hex grid scaled to fit",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "width": 20,
        "height": 10,
        "nrHexagonsInWidth": 10,
        "nrHexagonsInHeight": 10,
        "flatTop": false,
        "extendTop": false,
        "extendBottom": false,
        "extendLeft": false,
        "extendRight": false,
        "centerGrid": true,
        "pointsOnGround": false
      },
      "inputs": {},
      "position": [
        608.7164842348694,
        1018.0652542973968
      ]
    },
    "4fca946a7b216f6c": {
      "id": "4fca946a7b216f6c",
      "name": "bitbybit.json.getValueOnProp",
      "customName": "get value on prop",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "property": "centers"
      },
      "inputs": {
        "json": {
          "connections": [
            {
              "node": "7729fd4f544e72fc",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1081.1659092469044,
        810.2335976865959
      ]
    },
    "4026d981aa5027a5": {
      "id": "4026d981aa5027a5",
      "name": "bitbybit.json.getValueOnProp",
      "customName": "get value on prop",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "property": "hexagons"
      },
      "inputs": {
        "json": {
          "connections": [
            {
              "node": "7729fd4f544e72fc",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1088.8870485676737,
        1234.010004531764
      ]
    },
    "a510eab4a87374e4": {
      "id": "a510eab4a87374e4",
      "name": "bitbybit.draw.drawAnyAsync",
      "customName": "draw any async",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        }
      },
      "inputs": {
        "entity": {
          "connections": [
            {
              "node": "4fca946a7b216f6c",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1451.9911428758057,
        804.930108808127
      ]
    },
    "16c7925dd6061a88": {
      "id": "16c7925dd6061a88",
      "name": "bitbybit.polyline.create",
      "customName": "polyline",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "isClosed": true
      },
      "inputs": {
        "points": {
          "connections": [
            {
              "node": "2a4323a3364861cb",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1838.5998037327245,
        1232.8246930600817
      ]
    },
    "2a4323a3364861cb": {
      "id": "2a4323a3364861cb",
      "name": "bitbybit.lists.flatten",
      "customName": "flatten",
      "data": {
        "nrLevels": 1
      },
      "inputs": {
        "list": {
          "connections": [
            {
              "node": "4026d981aa5027a5",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1469.4576764247172,
        1271.430759087884
      ]
    }
  }
}

Conclusion​

The point.hexGridScaledToFit() method provides a flexible way to generate complex hexagonal grid patterns. By extracting the centers and hexagons data from its result, you can easily visualize the grid or use these points and outlines for further geometric operations, such as creating 3D hexagonal prisms or tiling surfaces.

Experiment with the various parameters of hexGridScaledToFit() like flatTop, extend options, and pointsOnGround to create different grid configurations!