enjalot/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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 = 100;
		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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 = 100;
	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>