tlfrd · December 24, 2017 00:12 · Dec 24, 2017 · Dec 22, 2017 · Dec 22, 2017 · Dec 22, 2017
diff --git a/README.md b/README.md
@@ -1 +1 @@
-A function to draw flaps for a cut out and fold model. Code for parallel coordinates from [here](http://webiks.com/d3-js-force-layout-straight-parallel-links/).
+A function to draw tabs for a cut out and fold model. Code for parallel coordinates from [here](http://webiks.com/d3-js-force-layout-straight-parallel-links/).
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
     generateCutOutFlap(line1, 20, 0.1, 1);
 
     function generateCutOutFlap(line1, outDistance, inDistance, direction) {
-      var t = calcTranslationExact(outDistance, line1, direction);
+      var t = calcLineTranslation(outDistance, line1, direction);
 
       var x1 = line1[0].x - t.dx,
           y1 = line1[0].y - t.dy,
@@ -61,7 +61,7 @@
 
     }
 
-    function calcTranslationExact(distance, line1, direction) {
+    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;
@@ -70,10 +70,11 @@
         x2_x0 = 0;
         y2_y0 = distance;
       } else {
-        let angle = Math.atan((x1_x0) / (y1_y0));
+        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

diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
     	.attr("y2", line1[1].y)
     	.style("stroke", "black");
 
-    generateCutOutFlap(line1, 20, 5, 1);
+    generateCutOutFlap(line1, 20, 0.1, 1);
 
     function generateCutOutFlap(line1, outDistance, inDistance, direction) {
       var t = calcTranslationExact(outDistance, line1, direction);
@@ -34,8 +34,8 @@
 
       var newLine = [{x: x1, y: y1},{x: x2, y: y2}];
 
-      var point1 = calcPointOnLine(newLine, 0.1),
-      		point2 = calcPointOnLine(newLine, 0.9);
+      var point1 = calcPointOnLine(newLine, inDistance),
+      		point2 = calcPointOnLine(newLine, 1 - inDistance);
 
       var line2 = svg.append("line")
         .attr("x1", point1.x)

diff --git a/index.html b/index.html
@@ -37,12 +37,28 @@
       var point1 = calcPointOnLine(newLine, 0.1),
       		point2 = calcPointOnLine(newLine, 0.9);
 
-      svg.append("line")
+      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 calcTranslationExact(distance, line1, direction) {

diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
     	.attr("y2", line1[1].y)
     	.style("stroke", "black");
 
-    generateCutOutFlap(line1, 30, 5, 1);
+    generateCutOutFlap(line1, 20, 5, 1);
 
     function generateCutOutFlap(line1, outDistance, inDistance, direction) {
       var t = calcTranslationExact(outDistance, line1, direction);
@@ -31,12 +31,17 @@
           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, 0.1),
+      		point2 = calcPointOnLine(newLine, 0.9);
 
       svg.append("line")
-        .attr("x1", x1)
-        .attr("y1", y1)
-        .attr("x2", x2)
-        .attr("y2", y2)
+        .attr("x1", point1.x)
+        .attr("y1", point1.y)
+        .attr("x2", point2.x)
+        .attr("y2", point2.y)
     		.style("stroke", "red");
     }
 
@@ -47,7 +52,7 @@
 
       if (y1_y0 === 0) {
         x2_x0 = 0;
-        y2_y0 = targetDistance;
+        y2_y0 = distance;
       } else {
         let angle = Math.atan((x1_x0) / (y1_y0));
         x2_x0 = (direction*-1)*distance * Math.cos(angle);
@@ -58,6 +63,19 @@
         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>
diff --git a/README.md b/README.md
@@ -1 +1 @@
-A function to draw flaps for a cut out and fold model.
+A function to draw flaps for a cut out and fold model. Code for parallel coordinates from [here](http://webiks.com/d3-js-force-layout-straight-parallel-links/).
diff --git a/index.html b/index.html
@@ -22,10 +22,10 @@
     	.attr("y2", line1[1].y)
     	.style("stroke", "black");
 
-    generateCutOutFlap(line1, 50, 1);
+    generateCutOutFlap(line1, 30, 5, 1);
 
-    function generateCutOutFlap(line1, distance, direction) {
-      var t = calcTranslationExact(distance, line1);
+    function generateCutOutFlap(line1, outDistance, inDistance, direction) {
+      var t = calcTranslationExact(outDistance, line1, direction);
 
       var x1 = line1[0].x - t.dx,
           y1 = line1[0].y - t.dy,
@@ -40,7 +40,7 @@
     		.style("stroke", "red");
     }
 
-    function calcTranslationExact(distance, line1) {
+    function calcTranslationExact(distance, line1, direction) {
       var x1_x0 = line1[1].x - line1[0].x,
           y1_y0 = line1[1].y - line1[0].y,
           x2_x0, y2_y0;
@@ -50,8 +50,8 @@
         y2_y0 = targetDistance;
       } else {
         let angle = Math.atan((x1_x0) / (y1_y0));
-        x2_x0 = -distance * Math.cos(angle);
-        y2_y0 = distance * Math.sin(angle);
+        x2_x0 = (direction*-1)*distance * Math.cos(angle);
+        y2_y0 = direction*distance * Math.sin(angle);
       }
       return {
         dx: x2_x0,

diff --git a/index.html b/index.html
@@ -9,21 +9,54 @@
 
 <body>
   <script>
-    var lineCoordinates = [[200, 200],[400, 300]];
+    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", lineCoordinates[0][0])
-    	.attr("y1", lineCoordinates[0][1])
-    	.attr("x2", lineCoordinates[1][0])
-    	.attr("y2", lineCoordinates[1][1])
+    	.attr("x1", line1[0].x)
+    	.attr("y1", line1[0].y)
+    	.attr("x2", line1[1].x)
+    	.attr("y2", line1[1].y)
     	.style("stroke", "black");
 
-    function generateCutOutFlap(line, distance, direction) {
+    generateCutOutFlap(line1, 50, 1);
+
+    function generateCutOutFlap(line1, distance, direction) {
+      var t = calcTranslationExact(distance, line1);
 
+      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;
+
+      svg.append("line")
+        .attr("x1", x1)
+        .attr("y1", y1)
+        .attr("x2", x2)
+        .attr("y2", y2)
+    		.style("stroke", "red");
+    }
+
+    function calcTranslationExact(distance, line1) {
+      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 = targetDistance;
+      } else {
+        let angle = Math.atan((x1_x0) / (y1_y0));
+        x2_x0 = -distance * Math.cos(angle);
+        y2_y0 = distance * Math.sin(angle);
+      }
+      return {
+        dx: x2_x0,
+        dy: y2_y0
+      };
     }
 
   </script>

diff --git a/index.html b/index.html
@@ -9,23 +9,20 @@
 
 <body>
   <script>
-    var lineCoordinates = {
-      firstPoint: [200, 200],
-      secondPoint: [300, 300]
-    };
+    var lineCoordinates = [[200, 200],[400, 300]];
 
     var svg = d3.select("body").append("svg")
       .attr("width", 960)
       .attr("height", 500);
 
     var line = svg.append("line")
-    	.attr("x1", lineCoordinates.firstPoint[0])
-    	.attr("y1", lineCoordinates.firstPoint[1])
-    	.attr("x2", lineCoordinates.secondPoint[0])
-    	.attr("y2", lineCoordinates.secondPoint[1])
+    	.attr("x1", lineCoordinates[0][0])
+    	.attr("y1", lineCoordinates[0][1])
+    	.attr("x2", lineCoordinates[1][0])
+    	.attr("y2", lineCoordinates[1][1])
     	.style("stroke", "black");
 
-    function generateCutOutFlap(line) {
+    function generateCutOutFlap(line, distance, direction) {
 
     }
 

diff --git a/README.md b/README.md
@@ -1 +1 @@
-Built with [blockbuilder.org](http://blockbuilder.org)
+A function to draw flaps for a cut out and fold model.
diff --git a/index.html b/index.html
@@ -9,9 +9,21 @@
 
 <body>
   <script>
+    var lineCoordinates = {
+      firstPoint: [200, 200],
+      secondPoint: [300, 300]
+    };
+
     var svg = d3.select("body").append("svg")
       .attr("width", 960)
-      .attr("height", 500)
+      .attr("height", 500);
+
+    var line = svg.append("line")
+    	.attr("x1", lineCoordinates.firstPoint[0])
+    	.attr("y1", lineCoordinates.firstPoint[1])
+    	.attr("x2", lineCoordinates.secondPoint[0])
+    	.attr("y2", lineCoordinates.secondPoint[1])
+    	.style("stroke", "black");
 
     function generateCutOutFlap(line) {
 

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!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 svg = d3.select("body").append("svg")
+      .attr("width", 960)
+      .attr("height", 500)
+
+    function generateCutOutFlap(line) {
+
+    }
+
+  </script>
+</body>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		A function to draw flaps for a cut out and fold model. Code for parallel coordinates from [here](http://webiks.com/d3-js-force-layout-straight-parallel-links/).
		A function to draw tabs for a cut out and fold model. Code for parallel coordinates from [here](http://webiks.com/d3-js-force-layout-straight-parallel-links/).
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Built with [blockbuilder.org](http://blockbuilder.org)
		A function to draw flaps for a cut out and fold model.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Built with [blockbuilder.org](http://blockbuilder.org)