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.

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: code, tutorial