| license: CC0-1.0 |
Trying to develop some intution for hexagon placement, and perhaps re-discover some trigonometry along the way.
for loops and conditionals?! I know. hopefully more compact representations will present themselves in future iterations.
hexagon path generating function from http://www.thelow.co.uk/?p=128
motivation from the bl.ocks hexbin with no axes and Fog of War III, which stubbornly resisted quick modification
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>hexagon placement intuition</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var data = ["A", "B", "C", "D", "E", "F", "G"]; | |
| var height = 240; | |
| var width = 460; | |
| var svg = d3.select('body').append('svg') | |
| .attr("height", height) | |
| .attr("width", width); | |
| svg.append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var board = svg.append("g") | |
| .attr("clip-path", "url(#clip)"); | |
| var hexCount = 13; | |
| var r = 20; | |
| var x0 = 100; | |
| var y0 = 100; | |
| var x; | |
| var y; | |
| var xStep = Math.cos(Math.PI/6)*r; | |
| var yStep = Math.sin(Math.PI/6)*r; | |
| var c; // center | |
| for(var i=0; i<hexCount; i++) { | |
| c = hexCenter(i, x0, y0); | |
| var hex = board.append("g") | |
| .attr("class", "hex"); | |
| hex | |
| .append("path") | |
| .attr("d", hexagon(c.x,c.y,r)) | |
| .style("fill", hexColor(i)) | |
| .style("stroke", "black"); | |
| hex | |
| .append("text") | |
| .style("stroke", "white") | |
| .style("stroke-width", "1") | |
| .style("fill", "white") | |
| .style("opacity", .3) | |
| .attr({ | |
| "x": c.x, | |
| "y": c.y, | |
| "dy": ".35em" | |
| }) | |
| .style("text-anchor", "middle") | |
| .text(i); // data[i] | |
| } | |
| function hexagon(x,y,r) { | |
| var x1 = x; | |
| var y1 = y-r; | |
| var x2 = x+(Math.cos(Math.PI/6)*r); | |
| var y2 = y-(Math.sin(Math.PI/6)*r); | |
| var x3 = x+(Math.cos(Math.PI/6)*r); | |
| var y3 = y+(Math.sin(Math.PI/6)*r); | |
| var x4 = x; | |
| var y4 = y+r; | |
| var x5 = x-(Math.cos(Math.PI/6)*r); | |
| var y5 = y+(Math.sin(Math.PI/6)*r); | |
| var x6 = x-(Math.cos(Math.PI/6)*r); | |
| var y6 = y-(Math.sin(Math.PI/6)*r); | |
| var path = "M"+x1+" "+y1+" L"+x2+" "+y2+" L"+x3+" "+y3+" L"+x4+" "+y4+" L"+x5+" "+y5+" L"+x6+" "+y6+"z"; | |
| return path; | |
| } | |
| function hexCenter(i, x0, y0) { | |
| if(i === 0) { | |
| x = x0; | |
| y = y0; | |
| } | |
| if(i === 1) { | |
| x = x0 + 2*xStep; | |
| y = y0; | |
| } | |
| if(i === 2) { | |
| x = x0 + xStep; | |
| y = y0 + 3*yStep; | |
| } | |
| if(i === 3) { | |
| x = x0 - xStep; | |
| y = y0 + 3*yStep; | |
| } | |
| if(i === 4) { | |
| x = x0 - 2*xStep; | |
| y = y0; | |
| } | |
| if(i === 5) { | |
| x = x0 - xStep; | |
| y = y0 - 3*yStep; | |
| } | |
| if(i === 6) { | |
| x = x0 + xStep; | |
| y = y0 - 3*yStep; | |
| } | |
| if(i === 7) { | |
| x = x0 + 3*xStep; | |
| y = y0 - 3*yStep; | |
| } | |
| if(i === 8) { | |
| x = x0 + 4*xStep; | |
| y = y0; | |
| } | |
| if(i === 9) { | |
| x = x0 + 3*xStep; | |
| y = y0 + 3*yStep; | |
| } | |
| if(i === 10) { | |
| x = x0 + 2*xStep; | |
| y = y0 + 6*yStep; | |
| } | |
| if(i === 11) { | |
| x = x0; | |
| y = y0 + 6*yStep; | |
| } | |
| return { | |
| 'x': x, | |
| 'y': y | |
| } | |
| } | |
| function hexColor(i) { | |
| if(i === 0) { return "#006d2c" } | |
| if(i < 7) { return "#2ca25f" } | |
| if(i >= 7) { return "#66c2a4" } | |
| } | |
| </script> | |
| </body> | |
| </html> |
