Intro to the Problem
Hi there!
I've been trying to seamlessly tile hexagons on an XY plane-- without spaces in between.
I've currently accomplished this, however:
which as you can tell, isn't seamless or uniform in spacing.
What I'd like answered here is, where in my math have I veered off track, for my result not to match what I desire? Why does the distance between the hexagons vary instead of being constantly zero?
If you can't answer that because I've failed to communicate my process effectively, how would you go about tiling hexagons on an XY plane to achieve the desired result?
The Math Behind the Tiling
In order to tile regular hexagons as in the desired seamless result, I took the approach of stacking hexagons in radial layers.
Starting with a center hexagon (L0), I'd surround it with a layer (L1) of hexagons, then I'd surround L1 with L2 of hexagons, and so on.
My ultimate question regarding said radial stacking approach was: what's the distance and the angle from the center of the starting hexagon (L0) to the center of any other hexagon in the tessellation? Knowing such an angle and distance, I could radially plot each hexagon from the center of the tessellation.
By analyzing the case of circles, finding that the centers of two similar bitangent circles are a distance of twice their radius apart, I figured that the centers of two similar regular hexagons are a distance of twice their radius apart-- only, the radius of a hexagon changes; it isn't constant.
Here's a GeoGebra diagram demonstrating how I found the radius of a hexagon-- or the distance from its center to its perimeter, given an angle: Distance from the center of a hexagon to its perimeter, at angle theta.
Because this radius repeats every PI/3, or TAU/6 radians, the input angle for which to calculate a radius can be modulated by PI/3, such that it becomes (angle MOD PI/3). For a regular polygon with n sides, the input angle with which to find a radius can be modulated by TAU/n radians.
I also graphed my derived equations in Desmos: Desmos graph of n-sided regular polygon. They seem to check out.
Once I'd found the radius of a hexagon at an angle, I postulated that to find the coordinates of the center of another hexagon, say from origin L0 to a hexagon in set L1, I simply had to find the angle between the L0 and the next hexagon, find the radius of that angle as a vector, and multiply that radius vector by the layer index + 1 (layer 1 + 1 = 2). For L0 to L2, I'd multiply said vector by 3, because layer 2 + 1 = 3.
Here's a diagram of said vector multiplication in GeoGebra: Distances between hexagon centers.
Coding the Tessellation
Coding the tessellation of the hexagons in both Python (visualized in Blender) and JavaScript (visualized in P5.js), I achieved these undesirable results: Blender/Python result, P5.js/JavaScript result.
Here's my code in JavaScript:
var m = -sin(TAU/n)/(1 - cos(TAU/n)); //slope between p[0] (1,0) and p[1] (sin(TAU/n), cos(TAU/n)
var n = 6; //number of sides
var spacing = 8; //multiplies radii by an arbitrary constant because this is on a small pixel scale
var numLayers = 1; //number of radial layers to draw
function getRadius(angle) //returns the radius of a polygon at an angle from the x axis
{
let x1 = -1/(tan(angle % (TAU/n)) * (1/m) - 1) ;
let y1 = m * (x1 - 1);
let r1 = sqrt(x1*x1 + y1*y1);
return r1;
}
function drawShapes() //For each layer,
{
for (let layer = 1; layer < numLayers + 1; layer++) //start at L1 because L0 can't be drawn
{
let shapes = n*layer; //There are 6 * current-layer # of hexagons per layer
for(let shape = 0; shape < shapes; shape++)
{
let theta = shape * TAU/shapes; //360 degrees are evenly divided into the # of shapes
let dist = layer * 2*getRadius(theta); //distance from L0 to L[i] is 2r*i
let x = dist * cos(theta); //get the coordinates of the current shape
let y = dist * sin(theta);
polygon(spacing*x, spacing*y, 8, n) //draw a regular polygon (x, y, radius, # of sides)
}
}
}
Where I Think the Issue is
Because the hexagons in my current hexagonal tiling are especially distant around every 60 degrees, I suspect that the modulus of PI/3, which I utilize to evaluate X1 (the x coordinate of a point along a hexagon's perimeter) in my Desmos project is closely linked to my issue of non-uniform spacing.
That's all the information I have to give-- I once again ask, why does the distance between the hexagons vary instead of being constantly zero?
What would you do differently to achieve a seamless or uniformly spaced hexagonal tesselation?