This hexagon mesh demonstrates how complex geomteric patterns can be created while fixin the padding on one of the axes (x or y) and incrementing the sizes.
x is fixed, increase the y to see different patterns emerge.y is fixed, increase the x to see different patterns emerge.| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| text-align: center; | |
| font-family: monospace !important; | |
| } | |
| #plot { | |
| width: 962px; | |
| height: 450px; | |
| display: block; | |
| } | |
| .hex { | |
| fill: rgba(210, 82, 127, 0.08); | |
| stroke: gray; | |
| stroke-width: 0.8; | |
| } | |
| .slider_val { | |
| display: block; | |
| text-align: left; | |
| margin-top: 11px; | |
| } | |
| .he { | |
| display: inline-block; | |
| width: auto; | |
| float: left; | |
| margin-right: 35px; | |
| } | |
| .he label { | |
| display: inline-block; | |
| } | |
| .he input { | |
| border: 0; | |
| color: #f6931f; | |
| font-weight: bold; | |
| display: inline-block; | |
| width: 23px; | |
| } | |
| .he .slider { | |
| width: 250px; | |
| display: inline-block; | |
| vertical-align: text-top; | |
| } | |
| </style> | |
| <body> | |
| <div id="plot"></div> | |
| <div class="slider_val"> | |
| <div class="he"> | |
| <label for="x_val">hex width:</label> | |
| <input type="text" id="x_val" readonly> | |
| <div id="x_val_range" class="slider"></div> | |
| </div> | |
| <div class="he"> | |
| <label for="y_val">hex height:</label> | |
| <input type="text" id="y_val" readonly> | |
| <div id="y_val_range" class="slider"></div> | |
| </div> | |
| <div> | |
| pad: | |
| <input type="radio" name="lock" value="x" checked>x</input> | |
| <input type="radio" name="lock" value="y">y</input> | |
| </div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> | |
| <script src="http://code.jquery.com/jquery-1.10.2.js"></script> | |
| <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |
| <script> | |
| var width = 965; | |
| var height = 450; | |
| function hex_grid(nw, nh) { | |
| function get_polygon_points(points) { | |
| var pts = ""; | |
| for (var i = 0; i < points.length; i++) { | |
| for (var j = 0; j < points[i].length; j++) { | |
| if (i < points.length - 1) { | |
| pts += points[i][j] + ","; | |
| } else { | |
| pts += points[i][j] + " "; | |
| } | |
| } | |
| pts += " " | |
| } | |
| return pts; | |
| } | |
| $("#plot").empty(); | |
| var svg = d3.select("#plot") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var g = svg.append("g") | |
| .attr("id", "scope") | |
| .attr("transform", "translate(0,0)"); | |
| var x = 0; | |
| var y = 0; | |
| var inc_map = { | |
| x: function(w, h) { | |
| return h / 3; | |
| }, | |
| y: function(w, h) { | |
| return w / 3; | |
| } | |
| }; | |
| var inc = inc_map[$('input[name="lock"]:checked').val()](nw, nh); | |
| for (var j = 0; j < height / (nh * 0.66) + 1; j++) { | |
| for (var i = 0; i < width / (nw * 0.666); i++) { | |
| var hex_a1 = get_hexagon({ | |
| x: x, | |
| y: y, | |
| w: nw, | |
| h: nh, | |
| inc: inc | |
| }); | |
| g.append("polygon") | |
| .attr("points", get_polygon_points(hex_a1)) | |
| .attr("class", "hex") | |
| .on('mouseover', function() { | |
| d3.select(this) | |
| .style("fill", "rgba(54, 215, 183, 0.6)"); | |
| }) | |
| .on("mouseleave", function() { | |
| d3.select(this) | |
| .transition() | |
| .duration(200) | |
| .style("fill", "rgba(210, 82, 127, 0.08)"); | |
| }) | |
| x += nw * 0.666; | |
| } | |
| var indent = Math.abs(Math.min((j % 2) - 1, 1)) | |
| x = 0 - indent * (nw * 0.333); | |
| y += nh * 0.66; | |
| } | |
| function get_hexagon(obj) { | |
| //get hexagon on a location | |
| var hex = [ | |
| [obj.x, (obj.y - obj.inc)], | |
| [obj.x, (obj.y - (obj.inc * 2))], | |
| [(obj.x + obj.inc), (obj.y - (obj.inc * 3))], | |
| [(obj.x + (obj.inc * 2)), (obj.y - (obj.inc * 2))], | |
| [(obj.x + (obj.inc * 2)), (obj.y - obj.inc)], | |
| [obj.x + obj.inc, obj.y] | |
| ]; | |
| return hex; | |
| } | |
| } | |
| $("#x_val_range").slider({ | |
| range: "min", | |
| value: 30, | |
| min: 30, | |
| max: 500, | |
| slide: function(event, ui) { | |
| hex_grid(ui.value, $("#y_val_range").slider("value")); | |
| $("#x_val").val(ui.value); | |
| } | |
| }); | |
| $("#y_val_range").slider({ | |
| range: "min", | |
| value: 30, | |
| min: 30, | |
| max: 500, | |
| slide: function(event, ui) { | |
| hex_grid($("#x_val_range").slider("value"), ui.value); | |
| $("#y_val").val(ui.value); | |
| } | |
| }); | |
| $("#x_val").val($("#x_val_range").slider("value")); | |
| $("#y_val").val($("#y_val_range").slider("value")); | |
| //call the function with fixed values | |
| hex_grid(30, 30) | |
| </script> | |
| </body> |
