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!

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:



Now we can code it!

Pseudo Code:

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?

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]