Issue with Generating Stable Hexagonal Grids

Question

showcase in pyglet

I have been attempting to solve a problem for a few weeks now. I want to create a hexagonal grid. Initially, I began with Pygame and now I am trying with Pyglet. Unfortunately, I have been unable to create an exact grid with either library.

In the example below, I am simply moving this grid for demonstration purposes. However, I have noticed that the shape of the hexagons is not consistent; they are constantly shifting and changing. In Pygame, the issue is even more pronounced, and I have been unable to find a solution for it.

Here is the code snippet I have been working with:

import pyglet
from pyglet import shapes

window = pyglet.window.Window(1500, 1000)
batch = pyglet.graphics.Batch()

def calc_points(size: tuple[int,int], coord: tuple[int,int]=(0,0)) -> list[tuple[float,float]]:
    b, a = size
    a, b = 1/4*a, 1/2*b
    
    x0, y0 = coord

    x1, y1 = x0+b, y0+a
    x2, y2 = x1+b, y1+a
    y3     =       y2+a
    y4     =       y3+a
    
    return [
        (x0, y1),
        (x1, y0),
        (x2, y1),
        (x2, y3),
        (x1, y4),
        (x0, y3),
        (x0, y1)
    ]

def hex_mul(size: tuple[float,float], pos: tuple[float,float]) -> tuple[float,float]:
    """given size of hexagon and position in hexagon grid, outputs real coord"""
    x, y = pos
    b, a = size
    a, b = 1/2*a, 1/2*b

    coord = (x * 2 * b + y % 2 * b,
             y * 3 / 2 * a )

    return coord

from math import sqrt

size = 20.0
border = 2.0

size = (sqrt(3)/2*size,size)
border = (sqrt(3)/2*border,border)

reduced_size = (size[0] - border[0], size[1] - border[1])

hexagons = []
p = calc_points(reduced_size)

for y in range(200):
    for x in range(200):
        coord = hex_mul(size, (x,y))
        r_coord = (coord[0] + border[0] / 2, coord[1] + border[1] / 2)

        shape = shapes.Polygon(*p, color=(180,170,160,255), batch=batch)
        shape.position = r_coord
        hexagons.append(
            shape
        )

@window.event
def on_draw():
    for s in hexagons:
        x, y = s.position
        s.position = (x+0.8, y+0.7)
    window.clear()
    batch.draw()

pyglet.app.run()

1. Adjusting the parameters for hexagonal grid generation in both Pygame and Pyglet.
2. Experimenting with various rendering and updating techniques.

Expected Outcome:

I expected to create a stable hexagonal grid that remains consistent and does not distort or shift during movement and or persistent gaps between hexagons. However, despite my attempts, I have not been able to achieve the desired stability using either Pygame or Pyglet.

(If possible i would rather use pygame, since i have got more used to it.)

after aplying qsrt approx in pygame

Answer 1

A likely reason for your hexagons to appear wonky is that you're using the "real" sqrt(3) to determine their size. That's an irrational number (or at least the closest float approximation to one), so each hexagon will be at a different offset relative to the pixels on the screen. You'll likely get better results you choose a rational approximation so that many of your hexagons fall on the same subpixel offsets.

Try something like this:

size = 20.0
border = 2.0

sqrt3_approx = 1.75  # try out different approximations to see what looks best

size = (sqrt3_approx/2*size,size)
border = (sqrt3_approx/2*border,border)

Answer 2

i fixed my problems by moving some point dimensions by one pixel "by hand".. this gives me a proper hexagon with pygame.draw.polygon, but i am also ashamed.

polytop = [[radius + radius * math.sin(2 * math.pi * i / 6), radius + radius * math.cos(2 * math.pi * i / 6)] for i in range(6)]
polytop[4][1] += 1
polytop[1][0] += 1
polytop[2][0] += 1
if radius % 2:
    polytop[2][1] += 1