I want to create a hull around images created with KineticJS.

1 - I save all vertices of the images in an array with [x,y]:

var points = [[0, 0], [0,350], [170, 0], [170, 300], [135, 135] , [135, 435], [305, 135], [305, 435]];

2 - I want to create a convex hull around the points

3 - after, I want to set the distance of the hull a little bit higher, so all objects can be in the hull.

I found a javascript implementation for creating a convex hull online and tried to bind this in my KineticJS Script.

But I get an error: Uncaught RangeError: Maximum call stack size exceeded in the buildConvexHull function:

allBaseLines.push(baseLine)

My code is in a fiddle but it doesn't work... /

I want to create a hull around images created with KineticJS.

1 - I save all vertices of the images in an array with [x,y]:

var points = [[0, 0], [0,350], [170, 0], [170, 300], [135, 135] , [135, 435], [305, 135], [305, 435]];

2 - I want to create a convex hull around the points

3 - after, I want to set the distance of the hull a little bit higher, so all objects can be in the hull.

I found a javascript implementation for creating a convex hull online and tried to bind this in my KineticJS Script.

But I get an error: Uncaught RangeError: Maximum call stack size exceeded in the buildConvexHull function:

allBaseLines.push(baseLine)

My code is in a fiddle but it doesn't work... http://jsfiddle/gvFrd/5/

• javascript
• kineticjs
• convex-hull

• It may be that the convex hull algorithm expects a list of pairs in points. You have first the list of x and then the list of y coordinates. – Lutz Lehmann Commented Mar 1, 2014 at 21:46
• I changed the structure to var points = [[0, 0], [0,350], [170, 0], [170, 300], [135, 135] , [135, 435], [305, 135], [305, 435]]; But the error doesn't disappear. – sumisu Commented Mar 1, 2014 at 21:51
• The for loop seems strange. Try to bine both lines, for( var pt in points). But then maybe I do not know enough about JS. – Lutz Lehmann Commented Mar 1, 2014 at 21:57
• Thanks, that was not the fault, but so I recognized that I'm too stupid for copy and paste...The function was the same as getConvexHull... I updated all, but the error is that the baseline is not defined... – sumisu Commented Mar 1, 2014 at 22:08

2 Answers 2

Hull.js looks like the answer you are looking for. After making a convex hull it can also push the edges inward and generate more segments to get what looks like a pretty accurate outline.

https://www.npmjs./package/hull.js

A simple algorithm is to divide the set of points into 2 half sets and find the 3 farthest points and triangulate the points. Each point inside the triangle is then in the convex hull. Then repeat the steps for the other points. Search for the quick hull algorithm. You can also use a delaunay triangulation. You can download my convex hull class @ phpclasses. It uses a delaunay triangulation.