Commit 078dfa5f authored by amandaghassaei's avatar amandaghassaei

adding in cut support

parent 44032433
......@@ -912,7 +912,7 @@
<b>External Libraries:</b><br/><br/>
<ul>
<li>All rendering and 3D interaction done with <a target="_blank" href="https://threejs.org/">three.js</a></li>
<li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG parsing</li>
<li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG path parsing</li>
<li><a href="https://github.com/edemaine/fold" target="_blank">FOLD</a> is used as the internal data structure, methods from the
<a href="https://github.com/edemaine/fold/blob/master/doc/api.md" target="_blank">FOLD API</a> used for SVG parsing</li>
<li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>
......@@ -959,15 +959,18 @@
<ul>
<li>The SVG importer supports path, line, rect, polygon, and polyline objects with the appropriate
<a href="https://www.w3schools.com/graphics/svg_stroking.asp" target="_blank">stroke</a> color:</li>
<li>Mountain folds have <span style="color:red">red</span> stroke - rgb(255, 0, 0), hex #ff0000</li>
<li>Valley folds have <span style="color:blue">blue</span> stroke - rgb(0, 0, 255), hex #0000ff</li>
<li>Outline edges have <span style="color:black">black</span> stroke - rgb(0, 0, 0), hex #000000</li>
<li>Hinges (undriven creases) have <span style="color:magenta">magenta</span> stroke - rgb(255, 0, 255), hex #ff00ff</li>
<li>Mountain folds have <b style="color:red">red</b> stroke - rgb(255, 0, 0), hex #ff0000</li>
<li>Valley folds have <b style="color:blue">blue</b> stroke - rgb(0, 0, 255), hex #0000ff</li>
<li>Outline edges have <b style="color:black">black</b> stroke - rgb(0, 0, 0), hex #000000 - use
this edge type for both the border of the pattern, and any internal holes.</li>
<li>Cuts have <b style="color:#00ff00">green</b> stroke - rgb(0, 255, 0), hex #00ff00- use this edge type
to form thin slits.</li>
<li>Hinges (undriven creases) have <b style="color:magenta">magenta</b> stroke - rgb(255, 0, 255), hex #ff00ff</li>
</ul>
<img src="assets/examplepattern.jpg"/>
<ul>
<li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
To control the triangulations draw lines in <span style="color:#cccc00">yellow</span> - rgb(255, 255, 0), hex #ffff00<br/>
To control the triangulations draw lines in <b style="color:#cccc00">yellow</b> - rgb(255, 255, 0), hex #ffff00<br/>
In general, patterns are more stable when their triangulation is symmetric and minimizes long, skinny triangles.</li>
</ul>
<img src="assets/patternwithtriangulations.jpg"/>
......
......@@ -4,8 +4,19 @@
globals = {};
function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}
function getCookie(c_name){var c_value = document.cookie;var c_start = c_value.indexOf(" " + c_name + "=");if (c_start == -1){c_start = c_value.indexOf(c_name + "=");}if (c_start == -1){c_value = null;}else{c_start = c_value.indexOf("=", c_start) + 1;var c_end = c_value.indexOf(";", c_start);if (c_end == -1){c_end = c_value.length;}c_value = unescape(c_value.substring(c_start,c_end));}return c_value;}
function delCookie(name){document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';}
$(function() {
// if (!getCookie('firsttime')){
// //Runs the code because the cookie doesn't exist and it's the user's first time
// console.log("first time");
// //Set's the cookie to true so there is a value and the code shouldn't run again.
// setCookie('firsttime',true);
// }
globals = initGlobals();
globals.UI3D = init3DUI(globals);
globals.importer = initImporter(globals);
......
......@@ -137,7 +137,7 @@ function initPattern(globals){
if (stroke == "#000000" || stroke == "#000" || stroke == "black" || stroke == "rgb(0, 0, 0)") return "border";
if (stroke == "#ff0000" || stroke == "#f00" || stroke == "red" || stroke == "rgb(255, 0, 0)") return "mountain";
if (stroke == "#0000ff" || stroke == "#00f" || stroke == "blue" || stroke == "rgb(0, 0, 255)") return "valley";
// if (stroke == "#00ff00" || stroke == "#0f0" || stroke == "green" || stroke == "rgb(0, 255, 0)") return "cut";
if (stroke == "#00ff00" || stroke == "#0f0" || stroke == "green" || stroke == "rgb(0, 255, 0)") return "cut";
if (stroke == "#ffff00" || stroke == "#ff0" || stroke == "yellow" || stroke == "rgb(255, 255, 0)") return "triangulation";
if (stroke == "#ff00ff" || stroke == "#f0f" || stroke == "magenta" || stroke == "rgb(255, 0, 255)") return "hinge";
badColors.push(stroke);
......@@ -344,7 +344,7 @@ function initPattern(globals){
findType(verticesRaw, bordersRaw, borderFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(verticesRaw, mountainsRaw, mountainFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(verticesRaw, valleysRaw, valleyFilter, $paths, $lines, $rects, $polygons, $polylines);
// findType(verticesRaw, cutsRaw, cutFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(verticesRaw, cutsRaw, cutFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(verticesRaw, triangulationsRaw, triangulationFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(verticesRaw, hingesRaw, hingeFilter, $paths, $lines, $rects, $polygons, $polylines);
......@@ -442,6 +442,11 @@ function initPattern(globals){
foldData.edges_assignment.push("U");
foldData.edges_foldAngles.push(null);
});
_.each(_cutsRaw, function(edge){
foldData.edges_vertices.push([edge[0], edge[1]]);
foldData.edges_assignment.push("C");
foldData.edges_foldAngles.push(null);
});
foldData = FOLD.filter.collapseNearbyVertices(foldData, globals.vertTol);
foldData = FOLD.filter.removeLoopEdges(foldData);//remove edges that points to same vertex
......@@ -458,13 +463,19 @@ function initPattern(globals){
foldData = removeStrayVertices(foldData);//delete stray anchors
removeRedundantVertices(foldData, 0.01);//remove vertices that split edge
foldData = edgesVerticesToVerticesEdges(foldData);
foldData.vertices_vertices = FOLD.convert.sort_vertices_vertices(foldData);
foldData = sortVerticesEdges(foldData);
foldData = FOLD.convert.vertices_vertices_to_faces_vertices(foldData);
foldData = removeBorderFaces(foldData);
foldData = edgesVerticesToVerticesEdges(foldData);
foldData = removeBorderFaces(foldData);//expose holes surrounded by all border edges
foldData = reverseFaceOrder(foldData);//set faces to counter clockwise
if (_cutsRaw.length>0) foldData = splitCuts(foldData);
if (_cutsRaw.length>0) {
foldData = sortVerticesEdges(foldData);
foldData = facesVerticesToVerticesFaces(foldData);
foldData = splitCuts(foldData);
}
return processFold(foldData);
}
......@@ -523,6 +534,21 @@ function initPattern(globals){
return fold;
}
function facesVerticesToVerticesFaces(fold){
var verticesFaces = [];
for (var i=0;i<fold.vertices_coords.length;i++){
verticesFaces.push([]);
}
for (var i=0;i<fold.faces_vertices.length;i++){
var face = fold.faces_vertices[i];
for (var j=0;j<face.length;j++){
verticesFaces[face[j]].push(i);
}
}
fold.verticesFaces = verticesFaces;
return fold;
}
function sortVerticesEdges(fold){
for (var i=0;i<fold.vertices_vertices.length;i++){
var verticesVertices = fold.vertices_vertices[i];
......@@ -549,9 +575,36 @@ function initPattern(globals){
function splitCuts(fold){
//todo split cuts
//go around each vertex and split cut in counter-clockwise order
// for (var i=0;i<fold.vertices_vertices.length;i++){
//
// }
for (var i=0;i<fold.vertices_vertices.length;i++){
var cutIndices = [];
var verticesEdges = fold.vertices_edges[i];
for (var j=0;j<verticesEdges.length;j++){
var edgeIndex = verticesEdges[j];
if (fold.edges_assignment[edgeIndex] == "C"){
cutIndices.push(j);
}
}
if (cutIndices.length == 0) continue;
var groups = [];
var completeLoop = false;
var firstPass = true;
for (var j=cutIndices[0];!completeLoop;j++){
if (j>=verticesEdges.length) j-=verticesEdges.length;
if (groups.length>0) groups[groups.length-1].push(j);
if (cutIndices.indexOf(j)>=0){
groups.push([]);
groups[groups.length-1].push(j);
}
if (!firstPass && j==cutIndices[0]) completeLoop = true;
firstPass = false;
}
console.log(groups);
}
//update faces_vertices, edges_vertices, delete vertices_edges, vertices_vertices, vertices_faces
for (var i=0;i<fold.edges_assignment.length;i++){//todo do this inline eventually
if (fold.edges_assignment[i] == "C") fold.edges_assignment[i] = "B";
}
return fold;
}
......@@ -859,7 +912,7 @@ function initPattern(globals){
function saveSVG(){
if (globals.extension == "fold"){
//todo solve for crease pattern
globals.warn("No crease pattern available for FOLD format.");
globals.warn("No crease pattern available for files imported from FOLD format.");
return;
}
var serializer = new XMLSerializer();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment