Created
July 30, 2015 19:11
-
-
Save jeffcatania/371d0cfa404d32f01629 to your computer and use it in GitHub Desktop.
Voronoi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment