tlfrd/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A function to draw tabs for a cut out and fold model. Code for parallel coordinates from here.

  
## 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 line1 = [{x: 200, y: 200},{x: 300, y: 300}];

    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

    var line = svg.append("line")
    	.attr("x1", line1[0].x)
    	.attr("y1", line1[0].y)
    	.attr("x2", line1[1].x)
    	.attr("y2", line1[1].y)
    	.style("stroke", "black");

    generateCutOutFlap(line1, 20, 0.1, 1);

    function generateCutOutFlap(line1, outDistance, inDistance, direction) {
      var t = calcLineTranslation(outDistance, line1, direction);

      var x1 = line1[0].x - t.dx,
          y1 = line1[0].y - t.dy,
          x2 = line1[1].x - t.dx,
          y2 = line1[1].y - t.dy;

      var newLine = [{x: x1, y: y1},{x: x2, y: y2}];

      var point1 = calcPointOnLine(newLine, inDistance),
      		point2 = calcPointOnLine(newLine, 1 - inDistance);

      var line2 = svg.append("line")
        .attr("x1", point1.x)
        .attr("y1", point1.y)
        .attr("x2", point2.x)
        .attr("y2", point2.y)
    		.style("stroke", "red");

      var connector1 = svg.append("line")
        .attr("x1", line1[0].x)
        .attr("y1", line1[0].y)
        .attr("x2", point1.x)
        .attr("y2", point1.y)
    		.style("stroke", "red");

      var connector2 = svg.append("line")
        .attr("x1", line1[1].x)
        .attr("y1", line1[1].y)
        .attr("x2", point2.x)
        .attr("y2", point2.y)
    		.style("stroke", "red");


    }

    function calcLineTranslation(distance, line1, direction) {
      var x1_x0 = line1[1].x - line1[0].x,
          y1_y0 = line1[1].y - line1[0].y,
          x2_x0, y2_y0;

      if (y1_y0 === 0) {
        x2_x0 = 0;
        y2_y0 = distance;
      } else {
        var angle = Math.atan((x1_x0) / (y1_y0));
        x2_x0 = (direction*-1)*distance * Math.cos(angle);
        y2_y0 = direction*distance * Math.sin(angle);
      }

      return {
        dx: x2_x0,
        dy: y2_y0
      };
    }

    function calcPointOnLine(line1, percent) {
      var x1_x0 = line1[1].x - line1[0].x,
          y1_y0 = line1[1].y - line1[0].y;

      var newX = line1[0].x + percent*x1_x0,
          newY = line1[0].y + percent*y1_y0;

      return {
        x: newX,
        y: newY
      }
    }

  </script>
</body>
	<!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 line1 = [{x: 200, y: 200},{x: 300, y: 300}];

	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500);

	var line = svg.append("line")
	.attr("x1", line1[0].x)
	.attr("y1", line1[0].y)
	.attr("x2", line1[1].x)
	.attr("y2", line1[1].y)
	.style("stroke", "black");

	generateCutOutFlap(line1, 20, 0.1, 1);

	function generateCutOutFlap(line1, outDistance, inDistance, direction) {
	var t = calcLineTranslation(outDistance, line1, direction);

	var x1 = line1[0].x - t.dx,
	y1 = line1[0].y - t.dy,
	x2 = line1[1].x - t.dx,
	y2 = line1[1].y - t.dy;

	var newLine = [{x: x1, y: y1},{x: x2, y: y2}];

	var point1 = calcPointOnLine(newLine, inDistance),
	point2 = calcPointOnLine(newLine, 1 - inDistance);

	var line2 = svg.append("line")
	.attr("x1", point1.x)
	.attr("y1", point1.y)
	.attr("x2", point2.x)
	.attr("y2", point2.y)
	.style("stroke", "red");

	var connector1 = svg.append("line")
	.attr("x1", line1[0].x)
	.attr("y1", line1[0].y)
	.attr("x2", point1.x)
	.attr("y2", point1.y)
	.style("stroke", "red");

	var connector2 = svg.append("line")
	.attr("x1", line1[1].x)
	.attr("y1", line1[1].y)
	.attr("x2", point2.x)
	.attr("y2", point2.y)
	.style("stroke", "red");


	}

	function calcLineTranslation(distance, line1, direction) {
	var x1_x0 = line1[1].x - line1[0].x,
	y1_y0 = line1[1].y - line1[0].y,
	x2_x0, y2_y0;

	if (y1_y0 === 0) {
	x2_x0 = 0;
	y2_y0 = distance;
	} else {
	var angle = Math.atan((x1_x0) / (y1_y0));
	x2_x0 = (direction-1)distance * Math.cos(angle);
	y2_y0 = directiondistance Math.sin(angle);
	}

	return {
	dx: x2_x0,
	dy: y2_y0
	};
	}

	function calcPointOnLine(line1, percent) {
	var x1_x0 = line1[1].x - line1[0].x,
	y1_y0 = line1[1].y - line1[0].y;

	var newX = line1[0].x + percent*x1_x0,
	newY = line1[0].y + percent*y1_y0;

	return {
	x: newX,
	y: newY
	}
	}

	</script>
	</body>