Merge pull request #30 from hundredrabbits/origami

Origami

desktop/sources/scripts/dotgrid.js

@@ -32,14 +32,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   var cursor = null;
 
   this.svg_el = null;
-  this.mirror_el = null;
-  this.mirror = false;
   this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black";
   this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
   this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc";
-  this.mirror_layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.mirror_layer_1.id = "mirror_layer_1"; this.mirror_layer_1.style.stroke = "black";
-  this.mirror_layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.mirror_layer_2.id = "mirror_layer_2"; this.mirror_layer_2.style.stroke = "#999";
-  this.mirror_layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.mirror_layer_3.id = "mirror_layer_3"; this.mirror_layer_3.style.stroke = "#ccc";
   
   this.install = function()
   {  
@@ -65,7 +60,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.element.appendChild(this.cursor_y);
 
     this.offset_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
     // Vector
     this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     this.svg_el.setAttribute("class","vector");
@@ -96,14 +90,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.preview_el.style.fill = "none";
     this.element.appendChild(this.preview_el);
 
-    this.mirror_el.appendChild(this.mirror_layer_3)
     this.offset_el.appendChild(this.layer_3)
-    this.mirror_el.appendChild(this.mirror_layer_2)
     this.offset_el.appendChild(this.layer_2)
-    this.mirror_el.appendChild(this.mirror_layer_1)
     this.offset_el.appendChild(this.layer_1)
     this.svg_el.appendChild(this.offset_el);
-    this.svg_el.appendChild(this.mirror_el);
 
     this.theme.start();
     this.tool.start();
@@ -378,7 +368,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   this.preview = function(operation)
   {
     if(this.preview_prev == operation){ return; }
-    this.preview_el.innerHTML = !operation ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path([{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
+    this.preview_el.innerHTML = !operation ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path(dotgrid.tool.index,[{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
     this.preview_prev = operation;
   }
 
@@ -417,12 +407,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.draw();
   }
 
-  this.mirror_index = 0;
-
   this.mod_mirror = function()
   {
-    this.mirror_index += 1; 
+    this.tool.style().mirror_style += 1;
-    this.mirror_index = this.mirror_index > 3 ? 0 : this.mirror_index;
+    this.tool.style().mirror_style = this.tool.style().mirror_style > 7 ? 0 : this.tool.style().mirror_style;
     this.draw();
   }
 
@@ -474,10 +462,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.layer_2.setAttribute("d",paths[1]);
     this.layer_3.setAttribute("d",paths[2]);
 
-    this.mirror_layer_1.setAttribute("d",this.mirror_index > 0 ? paths[0] : "M0,0");
-    this.mirror_layer_2.setAttribute("d",this.mirror_index > 0 ? paths[1] : "M0,0");
-    this.mirror_layer_3.setAttribute("d",this.mirror_index > 0 ? paths[2] : "M0,0");
-
     this.svg_el.style.width = this.width;
     this.svg_el.style.height = this.height;
 
@@ -487,12 +471,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.layer_1.style.stroke = this.tool.styles[0].color;
     this.layer_1.style.fill = this.tool.styles[0].fill;
     this.layer_1.style.strokeDasharray = `${this.tool.styles[0].dash[0] * this.tool.styles[0].thickness},${this.tool.styles[0].dash[1] * this.tool.styles[0].thickness}`;
-    this.mirror_layer_1.style.strokeWidth = this.tool.styles[0].thickness;
-    this.mirror_layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
-    this.mirror_layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
-    this.mirror_layer_1.style.stroke = this.tool.styles[0].color;
-    this.mirror_layer_1.style.fill = this.tool.styles[0].fill;
-    this.mirror_layer_1.style.strokeDasharray = `${this.tool.styles[0].dash[0] * this.tool.styles[0].thickness},${this.tool.styles[0].dash[1] * this.tool.styles[0].thickness}`;
   
     this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
     this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
@@ -500,12 +478,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.layer_2.style.stroke = this.tool.styles[1].color;
     this.layer_2.style.fill = this.tool.styles[1].fill;
     this.layer_2.style.strokeDasharray = `${this.tool.styles[1].dash[0] * this.tool.styles[1].thickness},${this.tool.styles[1].dash[1] * this.tool.styles[1].thickness}`;
-    this.mirror_layer_2.style.strokeWidth = this.tool.styles[1].thickness;
-    this.mirror_layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
-    this.mirror_layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
-    this.mirror_layer_2.style.stroke = this.tool.styles[1].color;
-    this.mirror_layer_2.style.fill = this.tool.styles[1].fill;
-    this.mirror_layer_2.style.strokeDasharray = `${this.tool.styles[1].dash[0] * this.tool.styles[1].thickness},${this.tool.styles[1].dash[1] * this.tool.styles[1].thickness}`;
     
     this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
     this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
@@ -513,34 +485,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.layer_3.style.stroke = this.tool.styles[2].color;
     this.layer_3.style.fill = this.tool.styles[2].fill;
     this.layer_3.style.strokeDasharray = `${this.tool.styles[2].dash[0] * this.tool.styles[2].thickness},${this.tool.styles[2].dash[1] * this.tool.styles[2].thickness}`;
-    this.mirror_layer_3.style.strokeWidth = this.tool.styles[2].thickness;
-    this.mirror_layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
-    this.mirror_layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
-    this.mirror_layer_3.style.stroke = this.tool.styles[2].color;
-    this.mirror_layer_3.style.fill = this.tool.styles[2].fill;
-    this.mirror_layer_3.style.strokeDasharray = `${this.tool.styles[2].dash[0] * this.tool.styles[2].thickness},${this.tool.styles[2].dash[1] * this.tool.styles[2].thickness}`;
-
-    // Draw Mirror
-    if(this.mirror_index == 1){
-      this.mirror_layer_1.setAttribute("transform",`translate(${this.width},0),scale(-1,1)`)
-      this.mirror_layer_2.setAttribute("transform",`translate(${this.width},0),scale(-1,1)`)
-      this.mirror_layer_3.setAttribute("transform",`translate(${this.width},0),scale(-1,1)`)
-    }
-    else if(this.mirror_index == 2){
-      this.mirror_layer_1.setAttribute("transform",`translate(0,${this.height}),scale(1,-1)`)
-      this.mirror_layer_2.setAttribute("transform",`translate(0,${this.height}),scale(1,-1)`)
-      this.mirror_layer_3.setAttribute("transform",`translate(0,${this.height}),scale(1,-1)`)
-    }
-    else if(this.mirror_index == 3){
-      this.mirror_layer_1.setAttribute("transform",`translate(${this.width},${this.height}),scale(-1,-1)`)
-      this.mirror_layer_2.setAttribute("transform",`translate(${this.width},${this.height}),scale(-1,-1)`)
-      this.mirror_layer_3.setAttribute("transform",`translate(${this.width},${this.height}),scale(-1,-1)`)
-    }
-    else{
-      this.mirror_layer_1.setAttribute("transform","")
-      this.mirror_layer_2.setAttribute("transform","")
-      this.mirror_layer_3.setAttribute("transform","")
-    }
     
     this.offset_el.setAttribute("transform","translate(0,0)")
 

desktop/sources/scripts/tool.js

@@ -3,9 +3,9 @@ function Tool()
   this.index = 0;
   this.layers = [[],[],[]];
   this.styles = [
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0]},
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0},
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0]},
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0},
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0]}
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0}
   ];
   this.verteces = [];
   this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};
@@ -164,24 +164,63 @@ function Tool()
     return this.verteces.length >= this.reqs[type];
   }
 
-  this.path = function(layer = this.layer())
+  this.path = function(layer_id = 0, preview = null)
   {
-    if(layer.length > 0 && layer[0].type == "close"){ return ""; }
+    var layer = preview ? preview : this.layers[layer_id];
 
     var html = "";
     for(id in layer){
       var segment = layer[id];
-      html += segment.type == "close" ? "Z " : this.render(segment);
+      html += segment.type == "close" ? "Z " : this.render(segment,0);
+
+      // Horizontal Mirror
+      if(this.styles[layer_id].mirror_style == 1){
+        html += segment.type == "close" ? "Z " : this.render(segment,0,true,false);
+      }
+      // Vertical Mirror
+      if(this.styles[layer_id].mirror_style == 2){
+        html += segment.type == "close" ? "Z " : this.render(segment,0,false,true);
+      }
+      // Single-fold
+      if(this.styles[layer_id].mirror_style == 3){
+        html += segment.type == "close" ? "Z " : this.render(segment,180,false,false);
+      }
+      // Three-fold
+      if(this.styles[layer_id].mirror_style == 4){
+        html += segment.type == "close" ? "Z " : this.render(segment,120,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,240,false,false);
+      }
+      // Four-fold
+      if(this.styles[layer_id].mirror_style == 5){
+        html += segment.type == "close" ? "Z " : this.render(segment,90,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,180,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,270,false,false);
+      }
+      // Five-folds
+      if(this.styles[layer_id].mirror_style == 6){
+        html += segment.type == "close" ? "Z " : this.render(segment,72,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,72*2,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,72*3,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,72*4,false,false);
+      }
+      // Six-folds
+      if(this.styles[layer_id].mirror_style == 7){
+        html += segment.type == "close" ? "Z " : this.render(segment,60,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,60*2,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,60*3,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,60*4,false,false);
+        html += segment.type == "close" ? "Z " : this.render(segment,60*5,false,false);
+      }
     }
     return html
   }
 
   this.paths = function()
   {
-    return [this.path(this.layers[0]),this.path(this.layers[1]),this.path(this.layers[2])]
+    return [this.path(0),this.path(1),this.path(2)]
   }
 
-  this.render = function(segment)
+  this.render = function(segment, angle = 0, mirror_x = false, mirror_y = false)
   {
     var type = segment.type;
     var verteces = segment.verteces;
@@ -190,10 +229,14 @@ function Tool()
 
     for(id in verteces){
       if(skip > 0){ skip -= 1; continue; }
-      if(id == 0){ html += `M${verteces[id].x},${verteces[id].y} `; }
+      
-      var vertex = verteces[id];
+      var vertex = this.mirror_mod(verteces[id],angle,mirror_x,mirror_y);
-      var next = verteces[parseInt(id)+1]
+      var next = this.mirror_mod(verteces[parseInt(id)+1],angle,mirror_x,mirror_y)
-      var after_next = verteces[parseInt(id)+2]
+      var after_next = this.mirror_mod(verteces[parseInt(id)+2],angle,mirror_x,mirror_y)
+
+      if(id == 0){ 
+        html += `M${vertex.x},${vertex.y} `;
+      }
 
       if(type == "line"){
         html += `L${vertex.x},${vertex.y} `;  
@@ -213,6 +256,28 @@ function Tool()
     return html
   }
 
+  this.mirror_mod = function(vertex,angle,mirror_x = false,mirror_y = false)
+  {
+    if(!vertex){ return null; }
+
+    if(mirror_x == true){
+      return {x:(dotgrid.width - vertex.x),y:vertex.y}
+    }
+    if(mirror_y == true){
+      return {x:vertex.x,y:(dotgrid.height - vertex.y)+(dotgrid.height/2)}
+    }
+    return rotate_point(vertex.x,vertex.y,dotgrid.width/2,dotgrid.height/2,angle)
+  }
+
+  function rotate_point(pointX, pointY, originX, originY, angle)
+  {
+    angle = angle * Math.PI / 180.0;
+    return {
+      x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
+      y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
+    };
+  }
+
   this.translate = function(a,b)
   {
     for(segment_id in this.layer()){