Built with blockbuilder.org
forked from enjalot's block: circle to hexagon
Created
June 11, 2017 00:53
-
-
Save christianbriggs/6048660d602800a99b134b57f160efa6 to your computer and use it in GitHub Desktop.
circle to hexagon
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| var n = 130; | |
| var data = d3.range(n).map(function(d) { | |
| return { | |
| angle: d/n * 360, | |
| index: d, | |
| radius: 200 | |
| } | |
| }) | |
| var color = d3.scaleLinear() | |
| .domain([0, n]) | |
| .range(["red", "blue"]) | |
| .interpolate(d3.interpolateLab) | |
| function project(x, y) { | |
| var angle = (x) / 180 * Math.PI, radius = y; | |
| return [radius * Math.cos(angle) + width/2, radius * Math.sin(angle) + height/2]; | |
| } | |
| function radians(deg) { | |
| return deg / 180 * Math.PI; | |
| } | |
| function hexProject(x, y) { | |
| var radius = y; | |
| var angle = radians(x); | |
| var startAngle = Math.floor(x / 60) * 60; | |
| var endAngle = startAngle + 60; | |
| var startX = radius * Math.cos(radians(startAngle)); | |
| var startY = radius * Math.sin(radians(startAngle)); | |
| var endX = radius * Math.cos(radians(endAngle)); | |
| var endY = radius * Math.sin(radians(endAngle)); | |
| var centerX = 0; | |
| var centerY = 0; | |
| var posX = radius * Math.cos(angle); | |
| var posY = radius * Math.sin(angle); | |
| var intersection = line_intersects(startX, startY, endX, endY, centerX, centerY, posX, posY) | |
| var t = intersection[0]; | |
| var hX = posX * t; | |
| var hY = posY * t; | |
| return [ | |
| hX + width/2, | |
| hY + height/2 | |
| ] | |
| } | |
| svg.selectAll("circle.circle") | |
| .data(data) | |
| .enter().append("circle").classed("circle", true) | |
| .attr("cx", function(d) { return project(d.angle, d.radius)[0]}) | |
| .attr("cy", function(d) { return project(d.angle, d.radius)[1]}) | |
| .attr("r", 5) | |
| .attr("stroke", function(d) { return color(d.index)}) | |
| .attr("fill", "none") | |
| // svg.selectAll("circle.hex") | |
| // .data(data) | |
| // .enter().append("circle").classed("circle", true) | |
| // .attr("cx", function(d) { return hexProject(d.angle, d.radius)[0]}) | |
| // .attr("cy", function(d) { return hexProject(d.angle, d.radius)[1]}) | |
| // .attr("r", 3) | |
| // .attr("fill", function(d) { return color(d.index)}) | |
| function line_intersects(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) { | |
| //https://gist.github.com/Joncom/e8e8d18ebe7fe55c3894 | |
| var s1_x, s1_y, s2_x, s2_y; | |
| s1_x = p1_x - p0_x; | |
| s1_y = p1_y - p0_y; | |
| s2_x = p3_x - p2_x; | |
| s2_y = p3_y - p2_y; | |
| var s, t; | |
| s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y); | |
| t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y); | |
| if (s >= 0 && s <= 1 && t >= 0 && t <= 1) | |
| { | |
| // Collision detected | |
| return [s,t]; | |
| } | |
| return []; // No collision | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment