var can; var c; var structures = []; var settings = 0; window.onload = function() { can = document.getElementById("c"); can.width = 360; can.height = 360; c = can.getContext("2d"); document.getElementById("cX").max = can.width; document.getElementById("cY").max = can.height; document.getElementById("cX").value = can.width / 2; document.getElementById("cY").value = can.height / 2; for (var i = 0; i < 1; i++) { structures.push(new Structure(can.width / 2, can.height / 2, 10, 10)); //centerX, centerY, height, size } otherSettings(); animate(); } function animate() { c.fillStyle = "#FEFEFE"; c.fillRect(0, 0, can.width, can.height); for (var i = 0; i < structures.length; i++) { structures[i].update(); structures[i].show(); } updateSettings(); displaySettings(); requestAnimationFrame(animate); } function otherSettings() { if (structures.length != 0) { settings = document.getElementById("changeables").value; element = structures[settings] document.getElementById("cX").value = element.centerX; document.getElementById("cY").value = element.centerY; document.getElementById("h").value = element.height; document.getElementById("ra").value = element.rotationAdd; document.getElementById("s").value = element.size; document.getElementById("color").value = element.color; } } function updateSettings() { if (structures.length != 0) { var element = structures[settings]; var cX = parseFloat(document.getElementById("cX").value); var cY = parseFloat(document.getElementById("cY").value); var h = parseFloat(document.getElementById("h").value); var ra = parseFloat(document.getElementById("ra").value); var s = parseFloat(document.getElementById("s").value); var color = parseFloat(document.getElementById("color").value); element.setCenter(cX, cY); element.setHeight(h); element.setRotationAdd(ra); element.setSize(s); element.setColor(color); } } function displaySettings(){ document.getElementById("cXText").innerHTML = "X: " + parseFloat(document.getElementById("cX").value); document.getElementById("cYText").innerHTML = "Y: " + parseFloat(document.getElementById("cY").value); document.getElementById("hText").innerHTML = "height: " + parseFloat(document.getElementById("h").value); document.getElementById("raText").innerHTML = "rotation: " + parseFloat(document.getElementById("ra").value); document.getElementById("sText").innerHTML = "hexagons-size: " + parseFloat(document.getElementById("s").value); document.getElementById("colorText").innerHTML = "color (hsl): " + parseFloat(document.getElementById("color").value); } function addStructure() { document.getElementById("changeables").innerHTML += ""; structures.push(new Structure(can.width / 2, can.height / 2, 10, 10)); if(structures.length == 1){ otherSettings(); } } function removeStructure() { if (structures.length != 0) { structures.splice(settings, 1); str = ""; for(var i=0;iediting cluster " + i + ""; } document.getElementById("changeables").innerHTML = str; document.getElementById("changeables").value = 0; } } function Structure(centerX, centerY, height, size) { this.centerX = centerX; this.centerY = centerY; this.height = height; this.size = size; this.rotationAdd = 0; this.rotation = 0; this.color = 0; this.hexagons = []; this.setCenter = function(x, y) { this.centerX = x; this.centerY = y; } this.setHeight = function(h) { this.height = h; } this.setRotationAdd = function(ra) { this.rotationAdd = ra; } this.setSize = function(s) { this.size = s; } this.setColor = function(color){ this.color = color; } this.show = function() { for (var i = 0; i < this.hexagons.length; i++) { this.hexagons[i].show("hsl(" + this.color + ", 80%, 50%)"); } } this.update = function() { this.rotation += this.rotationAdd; this.rebuildStructure(); } this.rebuildStructure = function() { this.hexagons = []; var hexagonsInCircle = 0; var distance = 0; this.hexagons.push(new Hexagon(this.centerX, this.centerY, this.size, this.rotation + Math.PI / 2)); for (var i = 0; i < this.height; i++) { hexagonsInCircle += 6; distance += 1.7 * this.size; for (var j = 0; j < hexagonsInCircle; j++) { var distance_ = distance - distance * 0.1 * Math.abs(Math.sin((6 * Math.PI) * (j / hexagonsInCircle))) var angle = 2 * Math.PI * (j / hexagonsInCircle) + this.rotation; var xOffset = distance_ * Math.sin(angle); var yOffset = distance_ * Math.cos(angle); this.hexagons.push(new Hexagon(this.centerX + xOffset, this.centerY + yOffset, this.size, this.rotation + Math.PI / 2)); } } } this.rebuildStructure(); } function Hexagon(middleX, middleY, radius, angle) { this.middleX = middleX; this.middleY = middleY; this.radius = radius; this.rotation = angle; this.show = function(color) { c.strokeStyle = color; var edges = 6; for (var i = 0; i < edges; i++) { var x1 = this.middleX + this.radius * Math.sin((2 * Math.PI) * (i / edges) + this.rotation); var y1 = this.middleY + this.radius * Math.cos((2 * Math.PI) * (i / edges) + this.rotation); var x2 = this.middleX + this.radius * Math.sin((2 * Math.PI) * ((i + 1) / edges) + this.rotation); var y2 = this.middleY + this.radius * Math.cos((2 * Math.PI) * ((i + 1) / edges) + this.rotation); c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); } } this.setMiddle = function(middleX, middleY) { this.middleX = middleX; this.middleY = middleY; } }

Hexagon Patterns