Note that there are some explanatory texts on larger screens.

plurals
  1. POFinding the distance between two hexagons
    text
    copied!<p>I have two hexagons which I am trying to make snap together when the edges hit a certain tolerance.</p> <p>How can I find which edges are the closest?</p> <p><img src="https://i.stack.imgur.com/VObAh.png" alt="Hexagon 1, Side 1 is closest to Hexagon 3, Side 4"></p> <p><img src="https://i.stack.imgur.com/q1Prt.png" alt="Hexagon 1, Side 2 is closest to Hexagon 3, Side 5"></p> <p>Here is the code returning the two closest Hexagons:</p> <pre><code>Canvas.getClosestPiece = function(){ var current = {}; current.x = selection.MidPoint.X; current.y = selection.MidPoint.Y; smallestDistance = null; closestHex = null; hexagons.forEach(function(hexagon){ if(hexagon !== selection){ testPiece = {}; testPiece.x = hexagon.MidPoint.X; testPiece.y = hexagon.MidPoint.Y; if((lineDistance(current, testPiece) &lt; smallestDistance) || smallestDistance === null){ smallestDistance = lineDistance(current, testPiece) closestHex = hexagon hexagons.forEach(function(hexagon){ hexagon.lineColor = 'grey' }) hexagon.lineColor = 'red'; } } }) // console.log(smallestDistance) return [selection, closestHex] } </code></pre> <p>Distance between two hexagon midpoints:</p> <pre><code>function lineDistance( point1, point2 ){ var xs = 0; var ys = 0; xs = point2.x - point1.x; xs = xs * xs; ys = point2.y - point1.y; ys = ys * ys; return Math.sqrt( xs + ys ); } </code></pre> <p>And here is a standard point array for one of the hexagons that getClosestPiece returns:</p> <pre><code>Point {X: 658, Y: 284} Point {X: 704, Y: 304} Point {X: 704, Y: 354} Point {X: 658, Y: 375} Point {X: 613, Y: 354} Point {X: 613, Y: 304} </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload