Polygons in a javascript canvas

Question

I have problems adjusting the polygon calculation here to javascript.

I'm using kinetic and have three basic problems:

How to calculate a random point in a polygon where I have an array of given points, e.g. [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]?
I'm calculating the polygons randomly (as they should reflect clusters of objects). How would I know where in my canvas is free space to place a polygon?
How could I add some diffusion to this? Meaning, slight overlaps and every now and then bigger overlaps are welcome and the point calculated in 1. may as well overlap every now and then out of the polygon.

Could you describe your problem a little bit more specific? Is it a plain old cluster algorithm your after? — Jonke, Dec 11 '12 at 08:03
I want to visualize how a city evolves. The polygons are clusters of for example industry areas. Hence, I want to place industry nearby other industry. They do not have to be exactly on that polygon but nearby or on it. I want as well that new areas are getting populated, if they are free. — shredding, Dec 11 '12 at 10:14
This is usually called K-means clustering. see http://stackoverflow.com/questions/5452576/k-means-algorithm-variation-with-equal-cluster-size — Jonke, Dec 11 '12 at 12:24
I'm not sure, if I know how to implement this in js, but I try. — shredding, Dec 11 '12 at 13:41
http://stackoverflow.com/questions/7370785/k-means-clustering-implementation-in-javascript — Jonke, Dec 11 '12 at 14:53

score 0 · Answer 1 · answered Dec 10 '12 at 22:46

To answer #1, here's a not-so-great way to find a random point in a path: http://jsfiddle.net/Aj7Rw/

var points = [[73, 192], 
              [73, 160], 
              [340, 23], 
              [500, 109], 
              [499, 139], 
              [342, 93]],
    minX,maxX,minY,maxY;

// find min and max values
for (var i = 0; i < points.length; i++){
    var point = points[i];

    if (minX == undefined || point[0] < minX)
        minX = point[0];

    if (maxX == undefined || point[0] > maxX)
        maxX = point[0];

    if (minY == undefined || point[1] < minY)
        minY = point[1];

    if (maxY == undefined || point[1] > maxY)
        maxY = point[1];        
}

// draw the path so we can use isPointInPath
var can = document.getElementById("test"),
    ctx = can.getContext('2d');

ctx.beginPath();
ctx.moveTo(points[0][0],points[0][1]);

for (var i = 1; i < points.length; i++)
    ctx.lineTo(points[i][0],points[i][1]);

ctx.closePath();
ctx.stroke();

// generate some random points. 
for (var i = 0; i < 250; i++){
    var found = false, iterations = 0;
    while(!found){
        iterations++;

        var x = Math.floor(Math.random()*(maxX-minX)+minX);
        var y = Math.floor(Math.random()*(maxY-minY)+minY);

        if (ctx.isPointInPath(x,y)){
            found = true;
            ctx.fillRect(x-3,y-3,6,6);
            console.log(x,y, iterations); // I'm logging the number of iterations it took to generate a point within the poly so you can get an idea of the lack of efficiency.
        }
    }
}

Thanks, I have a similar solution thats centered around a while loop, but it's kind of counterintuitive to me. I'll do some tests with it anyway. — shredding, Dec 11 '12 at 10:19

Polygons in a javascript canvas

1 Answers1