Commit 7a1809f5 authored by amandaghassaei's avatar amandaghassaei

adding in svg

parent 2d129a0b
......@@ -26,7 +26,8 @@ body{
top:0;
right:0;
width:420px;
padding:70px 20px 20px 20px;
margin-top:53px;
padding:20px 20px;
overflow: auto;
height: 100%;
/*background: rgba(255,255,255,0.5);*/
......@@ -39,7 +40,8 @@ body{
top:0;
left:0;
/*width: 420px;*/
padding:70px 20px 20px 20px;
margin-top:53px;
padding:20px 20px;
max-height: 100%;
overflow: auto;
}
......
This diff is collapsed.
......@@ -240,6 +240,7 @@
<script type="text/javascript" src="dependencies/underscore-min.js"></script>
<script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
<script type="text/javascript" src="dependencies/SVGLoader.js"></script>
<script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
<script type="text/javascript" src="js/GLBoilerplate.js"></script>
<script type="text/javascript" src="js/GPUMath.js"></script>
......@@ -271,7 +272,7 @@
<ul class="dropdown-menu">
<li><a class="loadFile" href="#">Import SVG...</a></li>
<li class="divider"></li>
<li><a id="saveSVG" href="#">Save Pattern as SVG</a></li>
<li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>
<li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
</ul>
</li>
......
......@@ -81,8 +81,9 @@ function initControls(globals){
globals.shouldResetDynamicSim = true;
});
setLink(".loadFile", function(){
setLink(".loadFile", function(e){
$("#fileSelector").click();
$(e.target).blur();
});
function setButtonGroup(id, callback){
......
......@@ -28,7 +28,11 @@ function initGlobals(){
//dynamic sim settings
percentDamping: 1,
density: 1
density: 1,
//import pattern settings
vertTol: 0.01,//vertex merge tolerange
};
var isMobile = {
......
......@@ -4,22 +4,184 @@
function initPattern(globals){
var object3D = new THREE.Object3D();
globals.threeView.sceneAddModel(object3D);
var verticesRaw = [];//list of vertex3's
//refs to vertex indices
var mountainsRaw = [];
var valleysRaw = [];
var outlinesRaw = [];
var cutsRaw = [];
var vertices = [];//list of vertex3's (after merging)
//refs to vertex indices
var mountains = [];
var valleys = [];
var outlines = [];
var cuts = [];
var SVGloader = new THREE.SVGLoader();
function loadSVG(url, callback){
SVGloader.load(url, callback, function(){}, function(error){
alert("Error loading SVG: " + url);
console.log(error);
});
}
loadSVG("/assets/Tessellations/miura-ori-dashed.svg", function(doc){
$("#svgViewer").html(doc);
console.log(doc);
loadSVG("/assets/Tessellations/miura-ori-dashed.svg", function(svg){
var _$svg = $(svg);
//format all lines
var $paths = _$svg.children("path");
$paths.css({fill:"none", 'stroke-width':3, 'stroke-dasharray':"none"});
var $outlines = $paths.filter(function(){
var stroke = $(this).attr("stroke").toLowerCase();
return stroke == "#000000" || stroke == "#000";
});
var $mountains = $paths.filter(function(){
var stroke = $(this).attr("stroke").toLowerCase();
return stroke == "#ff0000" || stroke == "#f00";
});
var $valleys = $paths.filter(function(){
var stroke = $(this).attr("stroke").toLowerCase();
return stroke == "#0000ff" || stroke == "#00f";
});
var $cuts = $paths.filter(function(){
var stroke = $(this).attr("stroke").toLowerCase();
return stroke == "#00ff00" || stroke == "#0f0";
});
var $svg = $('<svg version="1.1" viewBox="'+_$svg.attr("viewBox")+'" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>');
$svg.append($outlines);
$svg.append($mountains);
$svg.append($valleys);
$svg.append($cuts);
$("#svgViewer").html($svg);
parseSVG($outlines, $mountains, $valleys, $cuts);
});
function parsePath(_verticesRaw, _segmentsRaw, $paths){
for (var i=0;i<$paths.length;i++){
var segments = $paths[i].getPathData();
for (var j=0;j<segments.length;j++){
var segment = segments[j];
var type = segment.type.toLowerCase();
switch(type){
case "m":
_verticesRaw.push(new THREE.Vector3(segment.values[0], 0, segment.values[1]));
break;
case "l"://dx, dy
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
var vertex = _verticesRaw[_verticesRaw.length-1].clone();
vertex.x += segment.values[0];
vertex.z += segment.values[1];
_verticesRaw.push(vertex);
break;
case "v"://dy
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
var vertex = _verticesRaw[_verticesRaw.length-1].clone();
vertex.z += segment.values[0];
_verticesRaw.push(vertex);
break;
case "h"://dx
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
var vertex = _verticesRaw[_verticesRaw.length-1].clone();
vertex.x += segment.values[0];
_verticesRaw.push(vertex);
break;
case "L"://x, y
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
_verticesRaw.push(new THREE.Vector3(segment.values[0], 0, segment.values[1]));
break;
case "V"://y
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
var vertex = _verticesRaw[_verticesRaw.length-1].clone();
vertex.z = segment.values[0];
_verticesRaw.push(vertex);
break;
case "H"://x
_segmentsRaw.push([_verticesRaw.length-1, _verticesRaw.length]);
var vertex = _verticesRaw[_verticesRaw.length-1].clone();
vertex.x = segment.values[0];
_verticesRaw.push(vertex);
break;
}
}
}
}
function parseSVG($outlines, $mountains, $valleys, $cuts){
var _verticesRaw = [];
var _mountainsRaw = [];
var _valleysRaw = [];
var _outlinesRaw = [];
var _cutsRaw = [];
parsePath(_verticesRaw, _outlinesRaw, $outlines);
parsePath(_verticesRaw, _mountainsRaw, $mountains);
parsePath(_verticesRaw, _valleysRaw, $valleys);
parsePath(_verticesRaw, _cutsRaw, $cuts);
findIntersections(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw);
verticesRaw = _verticesRaw;
outlinesRaw = _outlinesRaw;
mountainsRaw = _mountainsRaw;
valleysRaw = _valleysRaw;
cutsRaw = _cutsRaw;
mergeVertices(globals.vertTol);
drawPattern();
}
function mergeVertices(tol){
vertices = verticesRaw;
outlines = outlinesRaw;
mountains = mountainsRaw;
valleys = valleysRaw;
cuts = cutsRaw;
}
function findIntersections(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw){
}
function drawPattern(){
object3D.children = [];
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(outlines),
new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4})));
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(mountains),
new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 4})));
object3D.add(new THREE.LineSegments(makeGeoFromSVGSegments(valleys),
new THREE.LineBasicMaterial({color: 0x0000ff, linewidth: 4})));
var bounds = new THREE.Box3().setFromObject(object3D);
var avg = (bounds.min.add(bounds.max)).multiplyScalar(0.5);
object3D.position.set(-avg.x, 0, -avg.z);
}
function makeGeoFromSVGSegments(segments){
var geometry = new THREE.Geometry;
for (var i=0;i<segments.length;i++){
geometry.vertices.push(vertices[segments[i][0]].clone());
geometry.vertices.push(vertices[segments[i][1]].clone());
}
return geometry;
}
return {
loadSVG: loadSVG
}
......
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