Haxxes dance!!!

hexdance.html

<canvas id="canvasElement" style="border: 1px solid black;"></canvas>
<script>

setup(); setInterval(loop, 10);

////////////////////////////////////////////////////////////

var canvas, context, hex1, hex2, radius;

////////////////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d');
	canvas.width = canvas.height = 700;
	hex1 = 0; hex2 = 0;
}

////////////////////////////////////////////////////////////

function loop () {
	clearCanvas();
	rotateHexxes();
	drawHexxes();
}

////////////////////////////////////////////////////////////

function drawHexxes () {
	for (var i = 0; i < 11; i++) drawHex(hex1, i * 50);
	for (var i = 0; i < 11; i++) drawHex(hex2, i * 50 + 25);
}

function drawHex (angle, radius) {
	var points = [];
	for (var i = 0; i < 6; i++)
		points.push({
			x: canvas.width/2 + radius * Math.cos((angle + i*60) * Math.PI / 180),
			y: canvas.height/2 + radius * Math.sin((angle + i*60) * Math.PI / 180)
		});

	for (var i = 0; i < 5; i++)
		drawLine(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
	drawLine(points[0].x, points[0].y, points[5].x, points[5].y);
}

function drawLine (x1, y1, x2, y2) {
	context.beginPath();
	context.moveTo(x1, y1);
	context.lineTo(x2, y2);
	context.stroke();
}

function rotateHexxes () {
	hex1++; hex2--;
}

function clearCanvas () {
	canvas.width = canvas.height;
}

</script>