vasturiano · December 9, 2018 01:35 · Dec 9, 2018 · Dec 9, 2018 · Dec 9, 2018 · Dec 9, 2018
diff --git a/index.html b/index.html
@@ -54,8 +54,8 @@
       const rows = [...Array(controls.nRows).keys()].map((_, i) => i);
       const cols = [...Array(controls.nCols).keys()].map((_, i) => i);
 
-      const getY = rowNumber => r * 1.2 + (r * 2 + vGap) * rowNumber; //r * (1.2 + controls.gapV * rowNumber);
-      const getX = (colNumber, rowNumber) => r * 1.2 + (r * 2 + hGap) * (colNumber + ((rowNumber + 1)%2 * 0.5)); //r * (1.2 + controls.gapH * (colNumber + ((rowNumber + 1)%2 * 0.5)));
+      const getY = rowNumber => r * 1.2 + (r * 2 + vGap) * rowNumber;
+      const getX = (colNumber, rowNumber) => r * 1.2 + (r * 2 + hGap) * (colNumber + ((rowNumber + 1)%2 * 0.5));
 
       // Balls
       const ballRow = svg.selectAll('g.ballRow').data(rows);

diff --git a/README.md b/README.md
@@ -1 +1 @@
-Tesselation template for Xmas tree decoration. Dimensions in `cm`.
+Tesselation template for christmas tree decoration. Dimensions in `cm`.
diff --git a/preview.png b/preview.png
diff --git a/README.md b/README.md
@@ -1 +1 @@
-Tesselation template for Xmas tree decoration. Dimensions in `cm`.
+Tesselation template for christmas tree decoration. Dimensions in `cm`.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Tesselation template for Xmas tree decoration. Dimensions in `cm`.
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -29,31 +29,33 @@
     const controls = {
       nRows: 15,
       nCols: 15,
-      diameter: 4,
-      distanceH: 7/2 * 0.95, // ratio of radius
-      distanceV: 7/2 * (30 / 19)
+      diameter: 4, // cm
+      gapH: 2.65, // cm
+      gapV: 7.05 // cm
     };
 
     const gui = new dat.GUI();
 
     gui.add(controls, 'diameter', 1, 10).onChange(digest);
-    gui.add(controls, 'distanceH', 1, 10).onChange(digest);
-    gui.add(controls, 'distanceV', 1, 10).onChange(digest);
+    gui.add(controls, 'gapH', 0, 10).onChange(digest);
+    gui.add(controls, 'gapV', 0, 10).onChange(digest);
 
     const svg = d3.select(document.getElementById('tree'))
-      .attr('width', window.innerWidth * 4)
-      .attr('height', window.innerHeight * 4);
+      .attr('width', window.innerWidth * 2)
+      .attr('height', window.innerHeight * 3);
 
-    digest();
+    digest(); // init run
 
     function digest() {
-      const r = controls.diameter / 2 * 35.43307 * (4 / 2.5);
+      const r = cm2Px(controls.diameter / 2);
+      const hGap = cm2Px(controls.gapH);
+      const vGap = cm2Px(controls.gapV);
 
       const rows = [...Array(controls.nRows).keys()].map((_, i) => i);
       const cols = [...Array(controls.nCols).keys()].map((_, i) => i);
 
-      const getY = rowNumber => r * (1.2 + controls.distanceV * rowNumber);
-      const getX = (colNumber, rowNumber) => r * (1.2 + controls.distanceH * (colNumber + ((rowNumber + 1)%2 * 0.5)));
+      const getY = rowNumber => r * 1.2 + (r * 2 + vGap) * rowNumber; //r * (1.2 + controls.gapV * rowNumber);
+      const getX = (colNumber, rowNumber) => r * 1.2 + (r * 2 + hGap) * (colNumber + ((rowNumber + 1)%2 * 0.5)); //r * (1.2 + controls.gapH * (colNumber + ((rowNumber + 1)%2 * 0.5)));
 
       // Balls
       const ballRow = svg.selectAll('g.ballRow').data(rows);
@@ -97,5 +99,9 @@
         .attr('y1', 0)
         .attr('y2', svg.attr('height'));
     }
+
+    function cm2Px(cm) {
+      return cm * 35.43307 * (4 / 2.5);
+    }
   </script>
 </body>
diff --git a/index.html b/index.html
@@ -1,6 +1,9 @@
 <head>
   <style>
-    body { margin: 0; }
+    body {
+      margin: 0;
+      background: red;
+    }
 
     line {
       stroke: darkgrey;
@@ -10,7 +13,7 @@
     .ball {
       stroke-width: 2;
       stroke: black;
-      fill: white;
+      fill: green;
     }
   </style>
 
@@ -27,8 +30,8 @@
       nRows: 15,
       nCols: 15,
       diameter: 4,
-      distanceH: 7/2, // ratio of radius
-      distanceV: 7/2
+      distanceH: 7/2 * 0.95, // ratio of radius
+      distanceV: 7/2 * (30 / 19)
     };
 
     const gui = new dat.GUI();

diff --git a/index.html b/index.html
@@ -27,8 +27,8 @@
       nRows: 15,
       nCols: 15,
       diameter: 4,
-      distanceH: 7/2,
-      distanceV: 8/2
+      distanceH: 7/2, // ratio of radius
+      distanceV: 7/2
     };
 
     const gui = new dat.GUI();

diff --git a/index.html b/index.html
@@ -2,6 +2,11 @@
   <style>
     body { margin: 0; }
 
+    line {
+      stroke: darkgrey;
+      stroke-width: 1px;
+    }
+
     .ball {
       stroke-width: 2;
       stroke: black;
@@ -41,20 +46,53 @@
     function digest() {
       const r = controls.diameter / 2 * 35.43307 * (4 / 2.5);
 
-      const row = svg.selectAll('g').data([...Array(controls.nRows).keys()].map((_, i) => i));
+      const rows = [...Array(controls.nRows).keys()].map((_, i) => i);
+      const cols = [...Array(controls.nCols).keys()].map((_, i) => i);
+
+      const getY = rowNumber => r * (1.2 + controls.distanceV * rowNumber);
+      const getX = (colNumber, rowNumber) => r * (1.2 + controls.distanceH * (colNumber + ((rowNumber + 1)%2 * 0.5)));
+
+      // Balls
+      const ballRow = svg.selectAll('g.ballRow').data(rows);
 
-      row.exit().remove();
+      ballRow.exit().remove();
 
-      row.merge(row.enter().append('g')).each(function(rowNumber) {
-        const ball = d3.select(this).selectAll('.ball').data([...Array(controls.nCols).keys()].map((_, i) => i));
+      ballRow.merge(ballRow.enter().append('g').attr('class', 'ballRow')).each(function(rowNumber) {
+        const ball = d3.select(this).selectAll('.ball').data(cols);
 
         ball.exit().remove();
 
         ball.merge(ball.enter().append('circle').attr('class', 'ball'))
-          .style('cx', colNumber => r * (1.2 + controls.distanceH * (colNumber + ((rowNumber + 1)%2 * 0.5))) + 'px')
-          .style('cy', r * (1.2 + controls.distanceV * rowNumber) + 'px')
-          .style('r', r + 'px')
+          .attr('cx', colNumber => getX(colNumber, rowNumber))
+        .attr('cy', getY(rowNumber))
+          .attr('r', r)
       });
+
+      // H lines
+      const hLine = svg.selectAll('line.h').data(cols);
+      hLine.exit().remove();
+      hLine.merge(hLine.enter().append('line').attr('class', 'h'))
+        .attr('x1', 0)
+        .attr('x2', svg.attr('width'))
+        .attr('y1', getY)
+        .attr('y2', getY);
+
+      // V lines
+      const vLineOdd = svg.selectAll('line.vodd').data(rows);
+      vLineOdd.exit().remove();
+      vLineOdd.merge(vLineOdd.enter().append('line').attr('class', 'vodd'))
+        .attr('x1', colNumber => getX(colNumber, 1))
+        .attr('x2', colNumber => getX(colNumber, 1))
+        .attr('y1', 0)
+        .attr('y2', svg.attr('height'));
+
+      const vLineEven = svg.selectAll('line.veven').data(rows);
+      vLineEven.exit().remove();
+      vLineEven.merge(vLineEven.enter().append('line').attr('class', 'veven'))
+        .attr('x1', colNumber => getX(colNumber, 2))
+        .attr('x2', colNumber => getX(colNumber, 2))
+        .attr('y1', 0)
+        .attr('y2', svg.attr('height'));
     }
   </script>
 </body>
diff --git a/index.html b/index.html
@@ -33,8 +33,8 @@
     gui.add(controls, 'distanceV', 1, 10).onChange(digest);
 
     const svg = d3.select(document.getElementById('tree'))
-      .attr('width', window.innerWidth)
-      .attr('height', window.innerHeight);
+      .attr('width', window.innerWidth * 4)
+      .attr('height', window.innerHeight * 4);
 
     digest();
 

diff --git a/index.html b/index.html
@@ -22,8 +22,8 @@
       nRows: 15,
       nCols: 15,
       diameter: 4,
-      distanceH: 7/4,
-      distanceV: 8/4
+      distanceH: 7/2,
+      distanceV: 8/2
     };
 
     const gui = new dat.GUI();

diff --git a/index.html b/index.html
@@ -22,8 +22,8 @@
       nRows: 15,
       nCols: 15,
       diameter: 4,
-      distanceH: 3,
-      distanceV: 3
+      distanceH: 7/4,
+      distanceV: 8/4
     };
 
     const gui = new dat.GUI();

diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<head>
+  <style>
+    body { margin: 0; }
+
+    .ball {
+      stroke-width: 2;
+      stroke: black;
+      fill: white;
+    }
+  </style>
+
+  <script src="//unpkg.com/dat.gui"></script>
+  <script src="//unpkg.com/d3"></script>
+</head>
+
+<body>
+  <svg id="tree"></svg>
+
+  <script>
+
+    const controls = {
+      nRows: 15,
+      nCols: 15,
+      diameter: 4,
+      distanceH: 3,
+      distanceV: 3
+    };
+
+    const gui = new dat.GUI();
+
+    gui.add(controls, 'diameter', 1, 10).onChange(digest);
+    gui.add(controls, 'distanceH', 1, 10).onChange(digest);
+    gui.add(controls, 'distanceV', 1, 10).onChange(digest);
+
+    const svg = d3.select(document.getElementById('tree'))
+      .attr('width', window.innerWidth)
+      .attr('height', window.innerHeight);
+
+    digest();
+
+    function digest() {
+      const r = controls.diameter / 2 * 35.43307 * (4 / 2.5);
+
+      const row = svg.selectAll('g').data([...Array(controls.nRows).keys()].map((_, i) => i));
+
+      row.exit().remove();
+
+      row.merge(row.enter().append('g')).each(function(rowNumber) {
+        const ball = d3.select(this).selectAll('.ball').data([...Array(controls.nCols).keys()].map((_, i) => i));
+
+        ball.exit().remove();
+
+        ball.merge(ball.enter().append('circle').attr('class', 'ball'))
+          .style('cx', colNumber => r * (1.2 + controls.distanceH * (colNumber + ((rowNumber + 1)%2 * 0.5))) + 'px')
+          .style('cy', r * (1.2 + controls.distanceV * rowNumber) + 'px')
+          .style('r', r + 'px')
+      });
+    }
+  </script>
+</body>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Tesselation template for Xmas tree decoration. Dimensions in `cm`.
		Tesselation template for christmas tree decoration. Dimensions in `cm`.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Tesselation template for Xmas tree decoration. Dimensions in `cm`.