raphaeljs-hexBoard

window.onload = function() {
	Raphael.fn.hex = function(center, radius) {
		var degrees = [0, 60, 120, 180, 240, 300];
		var path = "";
		for(var i = 0; i < degrees.length; i++) {
			if (i == 0) {
				path += "M";
			} else {
				path += "L";
			}
			var cos = Math.cos(degrees[i]*Math.PI/180);
			var sin = Math.sin(degrees[i]*Math.PI/180);
			path += (center.x + Math.round(cos*radius)) + " ";
			path += (center.y + Math.round(sin*radius));
		}
		path += "Z";
		var p = this.path({stroke: 'green', 'fill': 'white'}, path);
		p.node.onmouseover = function() { p.attr('fill', 'blue');};
		p.node.onmouseout = function() { p.attr('fill', 'white');};
	};
	Raphael.fn.hexBoard = function(center, radius, size) {
		var paper = this;
		var __hexBoard = function(center, radius, size, csize) {
			if (csize < size) {
				var degrees = [0, 60, 120, 180, 240, 300];
				var r = radius*1.72;
				for(var i = 0; i < degrees.length; i++) {
					var cos = Math.cos(degrees[i]*Math.PI/180);
					var sin = Math.sin(degrees[i]*Math.PI/180);
					var c = {x: center.x + Math.round(sin*r), y: center.y + Math.round(cos*r)};
					paper.hex(c, radius);
					__hexBoard(c, radius, size, csize + 1);
				}
			}
		}
		paper.hex(center, radius);
		__hexBoard(center, radius, size, 1);
	}
	var paper = Raphael('canvas', 700, 500);
	var radius = 30;
	var center = {x: 300, y: 250};
	paper.hexBoard(center, radius, 5);
};