D3 Examples - Voronoi

xxxxxxxxxx
 
<html>
<head>
</head>
<body>
<h2>Euclidean</h2>
<div id="euclidean"></div>
<h2>Manhattan</h2>
<div id="manhattan"></div>
<h2>Minkowski 3</h2>
<div id="minkowski_3"></div>
<script>
Voronoi = function(opts) {
    var my = {
        container: opts.container || "voronoi",
        distance_function: opts.distance_function,
        x: opts.x || 800,
        y: opts.y || 600,
        num_verticies: opts.num_vericies || 8,
        voronoi_map: [],
        verticies: [],
        verbose: opts.verbose || 0,
    };
    var that = {};
​
    var initRandomVerticies = function() {
        for(var i = 0; i < my.num_verticies; i++) {
            my.verticies.push({
                x: Math.floor(Math.random()*my.x),
                y: Math.floor(Math.random()*my.y),
                r: Math.floor((Math.random()*255)+1),
                g: Math.floor((Math.random()*255)+1),
                b: Math.floor((Math.random()*255)+1),
            });
        }
        if(my.verbose) { console.log(my.verticies);}
    
    };
​
​
    var voronoi = function(distance_function) {
        for(var y = 0; y < my.y; y++) {
            for(var x = 0; x < my.x; x++) {
                var dmin = distance_function(my.x,my.y);
                var j = -1;
                for(var i = 0; i < my.verticies.length; i++ ) {
                    var cell = my.verticies[i];
                    var d = distance_function(cell.x -x, cell.y - y);
                    if(d < dmin) { dmin = d; j = i; }
                    my.voronoi_map[y] = my.voronoi_map[y] || [];
                };
                my.voronoi_map[y][x] = {
                    r: my.verticies[j].r,
                    g: my.verticies[j].g,
                    b: my.verticies[j].b,
                };
                if(my.verbose) { console.log(x + "," + y + " is closest to " + my.verticies[j].x + "," + my.verticies[j].y + " with a dmin of " + dmin);}
            }
        }
    };
​
​
    var draw = function() {
        var content = "<table id='voronoi_table'>";
        for(var y =0; y < my.y; y++) {
            content += "<tr>";
            for(var x = 0; x < my.x; x++) {
                var cell = my.voronoi_map[y][x];    
                content += "<td style='background-color:rgb(" + cell.r + "," + cell.g + "," + cell.b + ")'</td>";
            }
            content += "</tr>";
        }       
        content += "</table>";
        document.getElementById(my.container).innerHTML = content;
    };
​
    
    // Creates random rgb data for testing draw method
    var initRandom = function() {
        for(var y = 0; y < my.y; y++) {
            for(var x = 0; x < my.x; x++) {
                var cell = {
                    r: Math.floor((Math.random()*255)+1),
                    g: Math.floor((Math.random()*255)+1),
                    b: Math.floor((Math.random()*255)+1),
                };
                my.voronoi_map[y] = my.voronoi_map[y] || [];
                my.voronoi_map[y][x] = cell;
            }
    
        }
    };
​
    initRandomVerticies();
    voronoi(my.distance_function); 
    draw();
};
​
// Set up various distance functions
distance_functions = {
    euclidean: function(delta_x, delta_y) {
        return Math.sqrt(delta_x * delta_x + delta_y * delta_y);
    },
    manhattan: function(delta_x,delta_y) {
        return Math.abs(delta_x) + Math.abs(delta_y);
    },
    minkowski_3: function(delta_x, delta_y) {
        return 0.33 * ( Math.pow(Math.abs(delta_x), 3) + 
                Math.pow(Math.abs(delta_y), 3));
    },
};
​
euclidean = new Voronoi({
    container: "euclidean",
    x: 80,
    y: 60, 
    distance_function: distance_functions.euclidean,
});
manhattan = new Voronoi({
    container: "manhattan",
    x: 80,
    y: 60, 
    distance_function: distance_functions.manhattan,
});
minkowski_3 = new Voronoi({
    container: "minkowski_3",
    x: 80,
    y: 60, 
    distance_function: distance_functions.minkowski_3,
});
</script>
</body>
</html>
​
    