Commit ae08183c authored by amandaghassaei's avatar amandaghassaei

draw parsed svg to screen

parent bc0c8beb
......@@ -3,10 +3,8 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="3456px" height="6912px" viewBox="0 0 3456 6912" enable-background="new 0 0 3456 6912" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M775.294,1121.176l437.392-574.353l144.961-190.353 M1840,1185.882
L1357.646,356.47 M1840,1185.882l-1064.706-64.706"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M775.294,1121.176l582.353-764.706 M1840,1185.882L1357.646,356.47
M1840,1185.882l-1064.706-64.706"/>
<path fill="none" stroke="#FF0000" stroke-miterlimit="10" d="M1064.715,741.129L1840,1185.882"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="1840" y1="1184.875" x2="1840" y2="1186.382"/>
<path fill="none" stroke="#FF0000" stroke-miterlimit="10" d="M2042.351,725.046"/>
<path fill="none" stroke="#FF0000" stroke-miterlimit="10" d="M1840,425.016"/>
</svg>
......@@ -235,23 +235,23 @@ filter.edgesAssigned = function(fold, target) {
};
filter.mountainEdges = function(fold) {
return assignment.edgesAssigned(fold, 'M');
return filter.edgesAssigned(fold, 'M');
};
filter.valleyEdges = function(fold) {
return assignment.edgesAssigned(fold, 'V');
return filter.edgesAssigned(fold, 'V');
};
filter.flatEdges = function(fold) {
return assignment.edgesAssigned(fold, 'F');
return filter.edgesAssigned(fold, 'F');
};
filter.boundaryEdges = function(fold) {
return assignment.edgesAssigned(fold, 'B');
return filter.edgesAssigned(fold, 'B');
};
filter.unassignedEdges = function(fold) {
return assignment.edgesAssigned(fold, 'U');
return filter.edgesAssigned(fold, 'U');
};
filter.keysStartingWith = function(fold, prefix) {
......
......@@ -121,6 +121,20 @@ function initPattern(globals){
return null;
}
function colorForAssignment(assignment){
if (assignment == "B") return "#000";
if (assignment == "M") return "#f00";
if (assignment == "V") return "#00f";
if (assignment == "C") return "#0f0";
if (assignment == "F") return "#ff0";
if (assignment == "U") return "#f0f";
return "#0ff"
}
function opacityForAngle(angle){
if (angle === null) return 1;
return Math.abs(angle)/Math.PI;
}
function findType(_verticesRaw, _segmentsRaw, filter, $paths, $lines, $rects, $polygons, $polylines){
parsePath(_verticesRaw, _segmentsRaw, $paths.filter(filter));
parseLine(_verticesRaw, _segmentsRaw, $lines.filter(filter));
......@@ -333,7 +347,7 @@ function initPattern(globals){
parseSVG(verticesRaw, bordersRaw, mountainsRaw, valleysRaw, cutsRaw, triangulationsRaw);
//find max and min vertices
var max = new THREE.Vector3(-Infinity,-Infinity,Infinity);
var max = new THREE.Vector3(-Infinity,-Infinity,-Infinity);
var min = new THREE.Vector3(Infinity,Infinity,Infinity);
for (var i=0;i<vertices.length;i++){
max.max(vertices[i]);
......@@ -357,32 +371,34 @@ function initPattern(globals){
min.sub(border);
max.add(border.multiplyScalar(2));
var viewBoxTxt = min.x + " " + min.z + " " + max.x + " " + max.z;
var $svg = $('<svg version="1.1" viewBox="' + viewBoxTxt + '" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>');
//todo only show montains, valleys, hinges, triangulations, etc
$svg.append($paths);
$svg.append($lines);
$svg.append($rects);
$svg.append($polygons);
$svg.append($polylines);
$("#svgViewer").html($svg);
var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
svg.setAttribute('viewBox', viewBoxTxt);
for (var i=0;i<foldData.edges_vertices.length;i++){
var line = document.createElementNS(ns, 'line');
var vertex = vertices[foldData.edges_vertices[i][0]];
line.setAttribute('stroke', colorForAssignment(foldData.edges_assignment[i]));
line.setAttribute('opacity', opacityForAngle(foldData.edges_foldAngles[i]));
line.setAttribute('x1', vertex.x);
line.setAttribute('y1', vertex.z);
vertex = vertices[foldData.edges_vertices[i][1]];
line.setAttribute('x2', vertex.x);
line.setAttribute('y2', vertex.z);
line.setAttribute('stroke-width', strokeWidth);
svg.appendChild(line);
}
document.getElementById("svgViewer").appendChild(svg);
},
function(){},
function(error){
globals.warn("Error loading SVG: " + url);
console.log(error);
globals.warn("Error loading SVG " + url + " : " + error);
console.warn(error);
});
}
function parseSVG(_verticesRaw, _bordersRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw, _hingesRaw){
// findIntersections(_verticesRaw, _bordersRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw);
//FOLD.convert.edges_vertices_to_faces_vertices(fold)
//FOLD.filter.removeLoopEdges
clearFold();
_.each(_verticesRaw, function(vertex){
foldData.vertices_coords.push([vertex.x, vertex.z]);
......@@ -418,15 +434,22 @@ function initPattern(globals){
foldData = FOLD.filter.removeLoopEdges(foldData);//remove edges that points to same vertex
foldData = FOLD.filter.subdivideCrossingEdges_vertices(foldData, globals.vertTol);//find intersections ad add vertices/edges
foldData = FOLD.convert.edges_vertices_to_vertices_vertices_unsorted(foldData);
console.log(JSON.stringify(foldData));
foldData = removeStrayVertices(foldData);//delete stray anchors
removeRedundantVertices(foldData, 0.01);//remove vertices that split edge
// foldData = FOLD.convert.sort_vertices_vertices(foldData);//todo need this?
console.log(JSON.stringify(foldData));
FOLD.convert.sort_vertices_vertices(foldData);
console.log(JSON.stringify(foldData));
foldData = FOLD.convert.vertices_vertices_to_faces_vertices(foldData);
console.log(JSON.stringify(foldData));
polygons = findPolygons(allEdges);
var faces = triangulatePolys(polygons, allEdges);
// var faces = triangulatePolys(polygons, allEdges);
vertices = [];
for (var i=0;i<foldData.vertices_coords.length;i++){
var vertex = foldData.vertices_coords[i];
vertices.push(new THREE.Vector3(vertex[0], 0, vertex[1]));
}
mountains = FOLD.filter.mountainEdges(foldData);
valleys = FOLD.filter.valleyEdges(foldData);
borders = FOLD.filter.boundaryEdges(foldData);
......@@ -439,11 +462,11 @@ function initPattern(globals){
$("#numBoundary").html("(" + borders.length + ")");
$("#numPassive").html("(" + hinges.length + ")");
var allCreaseParams = getFacesAndVerticesForEdges(faces, allEdges);
var allTypes = [borders.length, mountains.length, valleys.length, cuts.length];
globals.model.buildModel(faces, vertices, allEdges, allCreaseParams, allTypes);
// var allCreaseParams = getFacesAndVerticesForEdges(faces, allEdges);
//
// var allTypes = [borders.length, mountains.length, valleys.length, cuts.length];
//
// globals.model.buildModel(faces, vertices, allEdges, allCreaseParams, allTypes);
}
function getFacesAndVerticesForEdges(faces, allEdges){
......
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