{"author_name":"r2d2upgrade","cat":"LD #31","comments":[{"author_name":"torcado194","time":"December 1, 2014 12:55 pm","epoch":1417456500,"text":"This is really informative!
\n one question: Why did you chose to move every other column UP instead of DOWN? Is that the more common way to do it?","spam":"N"}],"epoch":1415787000,"likes":22,"metadata":{"p_key":"26040","p_author":"r2d2upgrade","p_authorkey":"32730","p_urlkey":"61463","p_title":"Hexagonal Grids!","p_cat":"LD #31","p_event":"LD31","p_time":"1415787000","p_likes":"22","p_comments":"1","p_status":"UPD5","us_key":"32730","us_name":"r2d2upgrade","us_username":"r2d2upgrade","event_start":"1417737600","event_key":"26","event_name":"LD31"},"text":"

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

Maths:<\/strong>
\n Let’s say we have a hexagon with width a<\/strong> and height b<\/strong>.
\n (If you used the last tutorial, then the value of a<\/strong> from the last tutorial becomes twice that
\n value in this tutorial)<\/p>\n

\"HexGrid_001\"<\/a><\/p>\n

Now we generate a bunch of hexagons to fill up the screen area.
\n For this example the point of reference is in the center of the hexagon.<\/p>\n

Each hexagon will be 3\/4*a<\/strong> to the side of the last one, and b<\/strong> above or below:<\/div>\n

\"HexGrid_002\"<\/a><\/p>\n

Remember to keep a<\/strong> and b<\/strong> as whole numbers!<\/p>\n

So the screen should look like this: (grey = hexagon, dark grey = overlap)<\/p>\n

\"HexGrid_003\"<\/a><\/p>\n

But we need every 2nd column to go up a bit, so that the hexagons interconnect properly.
\n So we use this equation, where x<\/strong> and y<\/strong> are the coordinates of the center of each hexagon:<\/p>\n

\"HexGrid_004\"<\/a><\/p>\n

Now your screen will look like this:<\/p>\n

\"HexGrid_005\"<\/a><\/p>\n

Excellent!<\/p>\n

Now we can code it!<\/p>\n

Pseudo Code:<\/strong><\/p>\n

Initialize:<\/strong><\/em>
\n width = (width of hexagon)
\n height = (height of hexagon)<\/p>\n

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

Creation code for each hexagon:<\/strong><\/em>
\n y = y + mod(sin((90*(x\/width))*height\/2)<\/p>\n

 <\/p>\n

 <\/p>\n

And there you have a hexagonal grid!<\/p>\n

And this is the last of my little group of tutorials :3
\n Thanks for the comments on how to refine the logic and code of previous tutorials \":)\"<\/p>\n \n

Tags: code<\/a>, tutorial<\/a><\/p>","time":"November 12th, 2014 5:10 am","title":"Hexagonal Grids!"}