53

I am working with a hexagonal grid. I have chosen to use this coordinate system because it is quite elegant.

grid

This question talks about generating the coordinates themselves, and is quite useful. My issue now is in converting these coordinates to and from actual pixel coordinates. I am looking for a simple way to find the center of a hexagon with coordinates x,y,z. Assume (0,0) in pixel coordinates is at (0,0,0) in hex coords, and that each hexagon has an edge of length s. It seems to me like x,y, and z should each move my coordinate a certain distance along an axis, but they are interrelated in an odd way I can't quite wrap my head around it.

Bonus points if you can go the other direction and convert any (x,y) point in pixel coordinates to the hex that point belongs in.

Community
  • 1
  • 1
captncraig
  • 22,118
  • 17
  • 108
  • 151

1 Answers1

49

For clarity, let the "hexagonal" coordinates be (r,g,b) where r, g, and b are the red, green, and blue coordinates, respectively. The coordinates (r,g,b) and (x,y) are related by the following:

y = 3/2 * s * b
b = 2/3 * y / s
x = sqrt(3) * s * ( b/2 + r)
x = - sqrt(3) * s * ( b/2 + g )
r = (sqrt(3)/3 * x - y/3 ) / s
g = -(sqrt(3)/3 * x + y/3 ) / s

r + b + g = 0

Derivation:

  • I first noticed that any horizontal row of hexagons (which should have a constant y-coordinate) had a constant b coordinate, so y depended only on b. Each hexagon can be broken into six equilateral triangles with sides of length s; the centers of the hexagons in one row are one and a half side-lengths above/below the centers in the next row (or, perhaps easier to see, the centers in one row are 3 side lengths above/below the centers two rows away), so for each change of 1 in b, y changes 3/2 * s, giving the first formula. Solving for b in terms of y gives the second formula.

  • The hexagons with a given r coordinate all have centers on a line perpendicular to the r axis at the point on the r axis that is 3/2 * s from the origin (similar to the above derivation of y in terms of b). The r axis has slope -sqrt(3)/3, so a line perpendicular to it has slope sqrt(3); the point on the r axis and on the line has coordinates (3sqrt(3)/4 * s * r, -3/4 * s * r); so an equation in x and y for the line containing the centers of the hexagons with r-coordinate r is y + 3/4 * s * r = sqrt(3) * (x - 3sqrt(3)/4 * s * r). Substituting for y using the first formula and solving for x gives the second formula. (This is not how I actually derived this one, but my derivation was graphical with lots of trial and error and this algebraic method is more concise.)

  • The set of hexagons with a given r coordinate is the horizontal reflection of the set of hexagons with that g coordinate, so whatever the formula is for the x coordinate in terms of r and b, the x coordinate for that formula with g in place of r will be the opposite. This gives the third formula.

  • The fourth and fifth formulas come from substituting the second formula for b and solving for r or g in terms of x and y.

  • The final formula came from observation, verified by algebra with the earlier formulas.

Regexident
  • 29,441
  • 10
  • 93
  • 100
Isaac
  • 10,668
  • 5
  • 59
  • 68
  • Awesome! It appears these work, although I have no real idea why. – captncraig Mar 17 '10 at 02:30
  • 4
    By the way, any two of r, g, and b are sufficient to locate a unique hexagon/point. – Isaac Mar 17 '10 at 02:31
  • @CaptnCraig - edited to add notes on how to get to those formulas. – Isaac Mar 17 '10 at 02:57
  • typo in your formula, you have two "x =", one of them should be a "y=" – Jason S Mar 18 '10 at 11:19
  • 2
    @Jason S: no, there is a formula for y (which depends only on b), but there are two formulas for x, one using b and r and one using b and g. – Isaac Mar 18 '10 at 17:04
  • ah -- never mind, you are correct. Actually there are infinitely many formulae for x and for y, because it uses homogeneous coordinates and the r+g+b=0 identity therefore allows you to add k(r+g+b) to any formula w/o changing the effect. FYI this is similar to Clarke transforms used in motor control. – Jason S Mar 18 '10 at 18:19
  • @Abdel5 I don't know. What are flat topped coordinates? – Isaac Sep 28 '15 at 15:40
  • I have create another similar question relating to flat top title coordinates here http://stackoverflow.com/questions/32827085/flat-topped-hexes-hexagonal-grid-coordinates-to-pixel-coordinates – Abdel5 Sep 28 '15 at 15:57
  • Wait, what the heck is `s` ? You don't mention it, but it appears multiple times... – WDUK Jun 23 '20 at 07:51
  • @WDUK It's from the question "each hexagon has an edge of length s" – AaronLS May 16 '21 at 01:54