Académique Documents
Professionnel Documents
Culture Documents
3)
Herman Tulleken
June 7, 2018
Contents
Introduction 2
Credit and Further Reading 2
Changes v.1.3 2
Changes v.1.2 3
Hex Vectors 3
Coordinate System 3
Norms 6
Transformations 8
Trigonometry 9
Products 9
Shapes 10
Lines 10
Halfplanes 12
Polygons 13
Circles 14
Axis-aligned Triangles 14
Axis-aligned Quadrangles, Pentagons, Hexagons and Hexagrams 15
Grid Point Division 18
Definitions 18
Uniform Spatial Partitioning 19
Wrapped Grids 21
Recursive Spatial Partitioning 23
The Gosper Curve 24
Grid Colorings 26
Triangular grids 27
hex grid geometry for game developers (1.3) 2
Introduction
Changes v.1.3
Fixed a typo1 on page 18: “where p, q and r are integers” now reads 1
Thanks to Daniel Toffetti who alerted
“where d, q and r are integers”. me to this.
hex grid geometry for game developers (1.3) 3
Changes v.1.2
This document was first published in June 2015. Version 1.2 is only
a minor revision: it fixes a few typos2 , and the layout is slightly 2
Some of which were pointed out by
different. Because I lost the original source, I had to recreate it, and it “user69513” on Math Stackexchange.
is possible a few errors crept in in the process. If you spot any, please
let me know3 . 3
herman@gamelogic.co.za
Hex Vectors
Coordinate System
By choosing a simple coordinate system, we can get many of the
conveniences of square grids to apply to hex grids, so that we can
deduce geometric information by performing calculations on coordi-
nates. For a rectangular coordinate system:
• and for any point, we can draw parallel lines towards the axes,
• and jot down the two numbers where these parallel lines cross
the axes,
z = − x − y. (1)
This is mostly to make formulas more concise and symmetrical.
This also makes it easier to see certain patterns when comparing
formulas with the square system. The three lines x = 0, y = 0, and
z = 0 are the major axes; the three lines x = y, y = z and z = x are
the minor axes.
We sometimes use special notation for the unit vectors:
hex grid geometry for game developers (1.3) 5
ex = (1, 0) (2)
ey = (0, 1) (3)
ez = (−1, −1). (4)
Vector addition and scalar multiplication. For hex grids, vector addition
and scalar multiplication is the same as for square systems. As an
example of these vectors in action, let’s find the coordinates of the
center of an edge, and of a vertex.
The midpoint of an edge between two hexagons is given by (u +
v)/2, where u and v are the coordinates of the faces of the hexagons.
These points are always in the form (m/2, n/2) where m and n are
integers.
The vertex between three neighboring hexagons is given by (u +
v + w)/3. These are always in the form (m/3, n/3) where m and n are
integers.
Norms
Norms are functions that assign real numbers to vectors that coincide
with our notion of length. They are useful not only for determining
distances between points, but also to write equations for common
shapes.
The Euclidean length is the norm we know from square geometry,
and for hex coordinates is given by:
r
x 2 + y2 + z2
|v| = . (6)
2
hex grid geometry for game developers (1.3) 7
| − v| 5 = |v| 4 . (12)
Transformations
In our normal geometry on a square coordinate system, we can
represent a large class of useful transformations (of points and sets
of points) as multiplication with matrices. The same trick works in
a hex coordinate system, although the matrices we use look slightly
different.
Reflection about x-axis. Reflection about the x-axis can be done using
the following transformation matrix.
!
1 1
Rx = . (20)
0 −1
We can get reflections about other lines through the origin using
rotations
R(−θ ) R x R(θ ). (21)
Trigonometry
When using vectors for doing geometry, it is not very common to
use trigonometry, but it is useful to know how hex coordinates are
related to lengths and angles of the vectors. This is, for example,
helpful in finding equations for certain shapes. Here are a few basic
identities
2r 2π
x = √ sin θ + (22a)
3 3
2r
y = √ sin θ (22b)
3
2r 2π
z = √ sin θ − (22c)
3 3
And
x2 + y2 + z2 = 2r2 (23)
x−z
cot θ = √ (24)
3y
2π 2π
sin θ + + sin θ + sin θ − =0 (25)
3 3
2π 2π 3
sin2 θ + + sin2 θ + sin2 θ − = (26)
3 3 2
Products
The reason why we don’t use trigonometry bso often is that we
can use special products (the dot and perp dot product) to by-step
trigonometric calculations.
For a hex system, we define the dot product as:
u · v = u x v x + uy vy + uz vz . (27)
u × v = u x vy − uy v x . (29)
If it bothers you that z-coordinates are not involved in this defini-
tion, you would be glad to know that the following holds:
u × v = u x vy − uy v x (30a)
= uy vz − uz vy (30b)
= uz v x − u x vz (30c)
(30d)
2u × v
sin α = √ . (31)
3 |u| |v|
Shapes
Lines
Axis-aligned grid lines are described by one of these equations:
x=k (32a)
y=k (32b)
z = k, (32c)
v = p + nex (33a)
v = p + ney (33b)
v = p + nez . (33c)
hex grid geometry for game developers (1.3) 11
where p is any point in the line and n goes through all integers.
It is trivial to determine whether these lines are parallel (they must
have the same equation form), and if not, where they intersect. For
example, the lines y = 3 and x = 5 intersect in the point (5, 3). The
lines y = 3 and z = − x − y = −5 intersect in the point (2, 3).
What about “lines” that look the one in Figure 5?
v = hp + ntqi (35)
where p and q are not necessarily grid points, and n goes through
all integers, and t is a number with which we control the density of
lines. If it is too big, we get holes in the lines and we call them sparse.
If it is too small, we get repeated points, and we call the lines dense.
There is a unique value for t that ensures that the grid line has no
holes and no repeated points, and we call such lines pure.
Unlike real lines, non-parallel grid lines do not always intersect in
a single point, and parallel lines that don’t coincide can intersect.
Finding all the points of intersection can be somewhat tricky. For
non-parallel lines one point of intersection can be found easily: the
grid point closest to the intersection of the associated real lines, and
we know that other intersection points must lie close to this.
• Pure lines that are not parallel always intersect in at least one
point. All points of intersection are distinct.
• Dense lines that are not parallel always intersect in at least one
point. Points of intersection may not be distinct.
• Two parallel grid lines are the same if hpi = hp0 i and
hp + tqi = hp0 + tqi.
Halfplanes
Halfplanes are shapes with all points to the side of the borderline
and including the borderline. They are described with inequalities
with this general form (for real half-planes):
(v − p) × q ≤ 0, (36)
(v − p) × q < 0, (37)
Polygons
P( T; v)0. (39)
Circles
Axis-aligned Triangles
The triangle psuedo-norms we defined earlier can be used to write
equations for axis-aligned triangles. For a down-triangle centered at
p with side length 3r, we have
|v − p| 5 ≤ r (46a)
hex grid geometry for game developers (1.3) 15
|v − p| 4 ≤ r (46b)
t1 = ( p x + r, py + r ) (47a)
t2 = ( p x + r, py − 2r ) (47b)
t3 = ( p x − 2r, py + r ) (47c)
t1 = ( p x − r, py − r ) (48a)
t2 = ( p x − r, py + 2r ) (48b)
t3 = ( p x + 2r, py − r ). (48c)
t1 + t2 + t3
p= . (49)
3
The radius is a third of any of the three sides:
t2 − t1 t − t2 t − t3
r= = 3 = 1 . (50)
3 3 3
max | x − p x |, |y − py | ≤ r (51a)
max {| x − p x |, |z − pz |} ≤ r (51b)
max |y − py |, |z − pz | ≤ r. (51c)
|v − p|h ≤ r. (52)
Regular hexagrams (star shapes) are given by the following equa-
tion:
|v − p|s ≤ r. (53)
hex grid geometry for game developers (1.3) 17
Definitions
This section extends the ideas of division in 1D to 2D
For integers, recall the division algorithm: each integer n can be
written in the form n = qd + r, where d, q and r are integers, and
0 ≤ r < d. It will be useful for us to extend this to real numbers. The
above statement hold if we let n, d and r be any real numbers.
For real numbers, we define
jvk
v div d = (54a)
d
v mod d = v − (v div d)d. (54b)
n = qd + r (55)
q and r given by
q = n div d (56a)
r = n mod d. (56b)
For real numbers, let’s look at what these operations really mean,
so that the 2D version is more intuitive. Let us partition the real line
into half-open segments of length d, with each segment given by
Pq = (qd, (q + 1)d) with q some integer.
Now for any real number n, if n ∈ Pq , then q is given by n div d.
So this operation tells us in which partition the number lies. The
number r = n mod d tells us how “far” into the partition the number
lies. When we view the partitions as being the same, then r is a
useful identifier that we can use to determine if two numbers in
different partitions are the same.
For example, let d = 2π, and let’s view the real number as angles.
Then the partitions are really the same (as each partitions has the
same angles as any other partition). In this case, r = n mod 2π
gives us the canonical angle, and we can use it to determine whether
two angles are really the same. For example, −π mod 2π = π, and
3π mod 2π = π, so we know that −π and 3π are really the same
angle, and moreover, that they are both the same as the angle π.
When it comes to 2D, we want to partition the plane into parallel-
ograms, and we want the mod and div operators to tell us, for any
point in the plane, which partition that point is in, and its position
within that partition. In the following sections we will see how this is
useful for a wide variety of algorithms.
hex grid geometry for game developers (1.3) 19
!
g
Let D = be a 2 × 2 matrix, with g and h two sides of a
h
parallelogram. Then we make the following definitions:
j k
v div D = vD −1 (57a)
where the floor of a matrix can be obtained by flooring all the compo-
nents of the matrix. We can write every vector v in the form
v = mg + nh + r = qD + r, (58)
where q = (m, n) is a grid point, and r is a vector contained in the
parallelogram bounded by g and h, and given by
q = v div D (59a)
and
r = v mod D. (59b)
As in the 1D case, the div operator tells us in which partition a
point lies, and the mod operator tells us where in that parallelogram
that points lies. Let us formalise this a bit. Let P0,0 be the paralel-
logram bounded by vectors g and h. Then if the plane is partitioned
into paralellograms Pi,j = {( x, y) | ( x, y) − ig − jh ∈ P0,0 }, then the div
operator tells us in which parallelogram any points lies, and the mod
operator tells us where inside the parallelogram the point lies.
The following identities are useful for computing these operations:
this gives as the corner of the paralellogram. We can now divide this
by D to find the partition index.
The partition index is given by
Wrapped Grids
Wrapped grids are often used in games. They have some properties
that makes them attractive for game worlds:
where R is the points of our grid (the points for which W (v) = v),
and D is the matrix of parallelogram that describes the repitition
of our wrapping. There are two basic wrappings for hexagons that
corresponds to whether the topological torus is twisted left or right.
When R is a hexagon with sides of length n, two possible values for
each type D are given by
!
2n − 1 1−n
DL = (63a)
n−1 n
and !
2n − 1 −n
DR = . (63b)
n n−1
1. each point is one unit vector away from the previous point,
For hex grids, one type of curve that has this property is called the
hex grid geometry for game developers (1.3) 25
X → X + YF + +YF − FX − − FXFX − YF +
Y → − FX + YFYF + +YF + FX − − FX − Y.
hex grid geometry for game developers (1.3) 26
Grid Colorings
For the remainder of this section, we will only be concerned with
grid points, so we restrict v and D to have only integer components,
which means r will only have integer components too.
In many cases, we will only need r as a label; we don’t actually
care about the values of r. For these cases, we make the following
definition.
Let c(v) be a function that assigns for each grid point within the
parallelogram of D a unique integer between 0 and N − 1, where N is
the number of grid points in the parallelogram, given by
Figure 22: Procedural generation using
a Gosper curve.
N = |g × h|. (66)
We extend this function to arbitrary grid points:
yc = y mod n (69a)
xc = x mod m (69b)
c = yc m + xc . (70)
Regular 3-coloring. This coloring is the only way to color a hex grid
with the smallest number of colors so that no neighbors have the
same color. This coloring is used for hexagonal chess, because it gives
diagonally opposite cells the same colors, and therefor is a visual aid
to movement of bishops, queens and kings. This coloring is used for
representing triangular grids using hex grids (as explained in the
next section).
We simply treat points on the hex grid as points on a tri grid grid.
Figure 26 should explain what I mean:
As you can see, not all hex points correspond to tri points. And
at first glance, it looks like the coordinates do not capture all the
information–when is a triangle up or down? How do we know a
hex is not part of the system? But this information is actually nicely
recovered using the 3-coloring you can see in the image.
Using this scheme, we can do all the geometry using the simple
tools of hex grids.
In triangular grids, the grid lines we think of as important are
parallel to the minor axes. They are either parallel, or intersect in two
grid points. The grid point closest to the intersection of the associated
real lines give you one of these points. The other can be found by
checking all this point’s neighbors.
We can use the same trick for other grids as well: for example,
using appropriate colorings we can also represent rhombille grids
and floret pentagon grids.
hex grid geometry for game developers (1.3) 29