Question

I’m using RaphaelJS to draw a set of shapes at random positions on the paper, using this code:

http://jsbin.com/ixiqiy/2/edit

What I’m trying to do now is find the outermost set of positions, so that I can draw a border around the whole group. For example:

Can anyone help? Thanks.

Answer 1

OK, so using the Jarvis March algorithm and this python implementation I’ve managed to put together my own JS/RaphaelJS solution, which can be found here: http://jsbin.com/ixiqiy/12/edit.

Just in case that ever disappears, here’s the code:

(function() {

    function cmp(x, y) {  
        if (x > y) {
            return 1;
        } else if (x < y) {
            return -1;
        } else {
            return 0;
        }
    } 
    function turn(p, q, r) {
        return cmp((q[0] - p[0]) * (r[1] - p[1]) - (r[0] - p[0]) * (q[1] - p[1]), 0);
    }
    function dist(p, q) {
        var dx = q[0] - p[0];
        var dy = q[1] - p[1];
        return dx * dx + dy * dy;
    }
    function next_hull_pt(points, p) {
        var q = p,
            r,
            t;
        for (var i = 0; i < points.length; i++) {
            r = points[i];
            t = turn(p, q, r);
            if (t == -1 || t == 0 && dist(p, r) > dist(p, q)) {
                q = r;
            }
        }
        return q;
    }
    function convex_hull(points) {
        var left,
            point;
        for (var i = 0; i < points.length; i++) {
            point = points[i];
            if (!left || point[0] < left[0]) {
                left = point;
            }
        }
        var hull = [left],
            p,
            q;
        for (var i = 0; i < hull.length; i++) {
            p = hull[i];
            q = next_hull_pt(points, p);
            if (q[0] != hull[0][0] || q[1] != hull[0][1]) {
                hull.push(q);
            }
        }
        hull.push(left);
        return hull;
    }

    var paper   = Raphael(0, 0, 800, 800),
        set     = paper.set(),
        points  = [],
        point;

    for (var i = 0; i < 20; i++) {
        points[i] = [
            Math.round(Math.random() * 500) + 100,
            Math.round(Math.random() * 500) + 100
        ];
    }

    for (var i = 0; i < points.length; i++) {
        point = points[i];
        set.push(paper.circle(point[0], point[1], 5));
    }

    set.attr('fill', '#ff0000');
    set.attr('stroke', '#ffffff'); 

    var outline     = convex_hull(points),
        previous    = [0, 0],
        path        = 'M';
    for (var i = 0; i < outline.length; i++) {
        point = outline[i];
        path = path + (i == 0 ? 'M' : 'L') + point[0] + ',' + point[1] + ' ';
    }

    var path = paper.path(path);
    path.attr('stroke', '#0000ff'); 

})();