Note that there are some explanatory texts on larger screens.

plurals
  1. POFinding the distance between two hexagons
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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