  ## Hexagonal Grids!

Posted by (twitter: @theupgradezone)
November 12th, 2014 5:10 am

So, I did the maths on how to draw a perfect hexagon. Now, using the same logic from that
tutorial, in this tutorial I will show you how to make a hexagonal grid!

Maths:
Let’s say we have a hexagon with width a and height b.
(If you used the last tutorial, then the value of a from the last tutorial becomes twice that
value in this tutorial) Now we generate a bunch of hexagons to fill up the screen area.
For this example the point of reference is in the center of the hexagon.

Each hexagon will be 3/4*a to the side of the last one, and b above or below: Remember to keep a and b as whole numbers!

So the screen should look like this: (grey = hexagon, dark grey = overlap) But we need every 2nd column to go up a bit, so that the hexagons interconnect properly.
So we use this equation, where x and y are the coordinates of the center of each hexagon: Now your screen will look like this: Excellent!

Now we can code it!

Pseudo Code:

Initialize:
width = (width of hexagon)
height = (height of hexagon)

Creation Loop:
create hexagon
x = x + (3*width)/4
if edge of screen is reached {
go back to starting edge of screen
y = y + height
}

Creation code for each hexagon:
y = y + mod(sin((90*(x/width))*height/2)

And there you have a hexagonal grid!

And this is the last of my little group of tutorials :3
Thanks for the comments on how to refine the logic and code of previous tutorials Tags: ,

### 2 Responses to “Hexagonal Grids!”

1. torcado194 says:

This is really informative!
one question: Why did you chose to move every other column UP instead of DOWN? Is that the more common way to do it?

• r2d2upgrade says:

I just chose to do it that way. If you want the columns to go DOWN, then change the y + to y -.

[cache: storing page]