title: outline around group of hexagons
body: <p>I have a group of hexagons in my hexagonal grid, which I'd like outline with a border. </p>
  
  <p>This is how it looks like so far: </p>
  
  <p><a href="https://i.stack.imgur.com/ELBmg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ELBmg.png" alt="enter image description here"></a></p>
  
  <p><strong>desired output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zJIEB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zJIEB.png" alt="enter image description here"></a></p>
  
  <p>I have stored all the cotrner points of each hexagon from that group. I suppose these points can be used to calculate the border around the group later on.  </p>
  
  <pre><code>[[{"x":123.39745962155612,"y":260},{"x":101.74682452694516,"y":272.5},{"x":80.0961894323342,"y":260},{"x":80.0961894323342,"y":235},{"x":101.74682452694516,"y":222.5},{"x":123.39745962155612,"y":235}],[{"x":145.0480947161671,"y":222.5},{"x":123.39745962155614,"y":235},{"x":101.74682452694518,"y":222.5},{"x":101.74682452694518,"y":197.5},{"x":123.39745962155614,"y":185},{"x":145.0480947161671,"y":197.5}],[{"x":166.69872981077808,"y":260},{"x":145.0480947161671,"y":272.5},{"x":123.39745962155612,"y":260},{"x":123.39745962155612,"y":235},{"x":145.0480947161671,"y":222.5},{"x":166.69872981077805,"y":235}],[{"x":188.34936490538905,"y":297.5},{"x":166.69872981077808,"y":310},{"x":145.0480947161671,"y":297.5},{"x":145.0480947161671,"y":272.5},{"x":166.69872981077808,"y":260},{"x":188.34936490538902,"y":272.5}],[{"x":188.34936490538905,"y":222.5},{"x":166.69872981077808,"y":235},{"x":145.0480947161671,"y":222.5},{"x":145.0480947161671,"y":197.5},{"x":166.69872981077808,"y":185},{"x":188.34936490538902,"y":197.5}],[{"x":210,"y":260},{"x":188.34936490538902,"y":272.5},{"x":166.69872981077805,"y":260},{"x":166.69872981077805,"y":235},{"x":188.34936490538902,"y":222.5},{"x":209.99999999999997,"y":235}],[{"x":231.65063509461098,"y":297.5},{"x":210,"y":310},{"x":188.34936490538902,"y":297.5},{"x":188.34936490538902,"y":272.5},{"x":210,"y":260},{"x":231.65063509461095,"y":272.5}]]
  </code></pre>
  
  <p>Also added a live <a href="https://jsfiddle.net/nL5afr35/" rel="nofollow noreferrer">example</a> to see how the grid works so far.</p>
  
  <p>And now I'm trying to figure out how exactly do I determine how the border will be generated. </p>
  
  <p>Now how do I exactly generate the border? 
  Should I just find the center of this group, and then 
  find all the points with the greater distance, and 
  then connect them?</p>
  
  <p>As advised by someone in discussion below, I tried sorting the points by their [X,Y] coordinates and also removed all duplicate coordinates, but it turned into this disaster :/. </p>
  
  <p><a href="https://i.stack.imgur.com/ZQ1Je.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQ1Je.png" alt="enter image description here"></a></p>
  
  <p>Or is there any other technique to achieve this? </p>