jeffcatania/index.html

## index.html
<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>
	<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>