Commit 7a1809f5 authored by amandaghassaei's avatar amandaghassaei
Browse files

adding in svg

parent 2d129a0b
...@@ -26,7 +26,8 @@ body{ ...@@ -26,7 +26,8 @@ body{
top:0; top:0;
right:0; right:0;
width:420px; width:420px;
padding:70px 20px 20px 20px; margin-top:53px;
padding:20px 20px;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
/*background: rgba(255,255,255,0.5);*/ /*background: rgba(255,255,255,0.5);*/
...@@ -39,7 +40,8 @@ body{ ...@@ -39,7 +40,8 @@ body{
top:0; top:0;
left:0; left:0;
/*width: 420px;*/ /*width: 420px;*/
padding:70px 20px 20px 20px; margin-top:53px;
padding:20px 20px;
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;
} }
......
This diff is collapsed.
...@@ -240,6 +240,7 @@ ...@@ -240,6 +240,7 @@
<script type="text/javascript" src="dependencies/underscore-min.js"></script> <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/FileSaver.min.js"></script>
<script type="text/javascript" src="dependencies/SVGLoader.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/GLBoilerplate.js"></script>
<script type="text/javascript" src="js/GPUMath.js"></script> <script type="text/javascript" src="js/GPUMath.js"></script>
...@@ -271,7 +272,7 @@ ...@@ -271,7 +272,7 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="loadFile" href="#">Import SVG...</a></li> <li><a class="loadFile" href="#">Import SVG...</a></li>
<li class="divider"></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> <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
</ul> </ul>
</li> </li>
......
...@@ -81,8 +81,9 @@ function initControls(globals){ ...@@ -81,8 +81,9 @@ function initControls(globals){
globals.shouldResetDynamicSim = true; globals.shouldResetDynamicSim = true;
}); });
setLink(".loadFile", function(){ setLink(".loadFile", function(e){
$("#fileSelector").click(); $("#fileSelector").click();
$(e.target).blur();
}); });
function setButtonGroup(id, callback){ function setButtonGroup(id, callback){
......
...@@ -28,7 +28,11 @@ function initGlobals(){ ...@@ -28,7 +28,11 @@ function initGlobals(){
//dynamic sim settings //dynamic sim settings
percentDamping: 1, percentDamping: 1,
density: 1 density: 1,
//import pattern settings
vertTol: 0.01,//vertex merge tolerange
}; };
var isMobile = { var isMobile = {
......
...@@ -4,22 +4,184 @@ ...@@ -4,22 +4,184 @@
function initPattern(globals){ 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(); var SVGloader = new THREE.SVGLoader();
function loadSVG(url, callback){ function loadSVG(url, callback){
SVGloader.load(url, callback, function(){}, function(error){ SVGloader.load(url, callback, function(){}, function(error){
alert("Error loading SVG: " + url); alert("Error loading SVG: " + url);
console.log(error); console.log(error);
}); });
} }
loadSVG("/assets/Tessellations/miura-ori-dashed.svg", function(doc){ loadSVG("/assets/Tessellations/miura-ori-dashed.svg", function(svg){
$("#svgViewer").html(doc); var _$svg = $(svg);
console.log(doc);
//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 { return {
loadSVG: loadSVG 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