Commit b8c08966 authored by amandaghassaei's avatar amandaghassaei
Browse files

fixing patterns

parent 74207a23
......@@ -3,7 +3,6 @@
<!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="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<rect fill="#FFFFFF" width="400" height="400"/>
<path fill="none" stroke="#0000FF" stroke-linecap="round" stroke-miterlimit="10" d="M150.82,88.47l36,62.351 M213.18,249.18
l36,62.352 M249.18,186.82l62.352-36 M150.82,213.18l-62.351,36 M186.82,150.82l62.359,36 M186.82,150.82l-36,62.359 M213.18,249.18
l36-62.359 M213.18,249.18l-62.36-36"/>
......@@ -15,5 +14,4 @@
<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M213.18,249.18l62.352-36"/>
<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M213.18,124.47l36,62.351"/>
<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M150.82,213.18l36,62.352"/>
<rect fill="none" width="400" height="400"/>
</svg>
......@@ -3,7 +3,6 @@
<!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="700px" height="700px" viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
<rect fill="#FFFFFF" width="700" height="700"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M2.36,21L21,90.54 M21,90.54L2.36,160.09
M2.36,160.09L21,229.64 M71.91,2.36L2.36,21 M141.46,21L71.91,2.36 M141.46,21L211,2.36 M211,2.36l18.64,69.55 M229.64,71.91
L211,141.46 M211,141.46L229.64,211 M229.64,211l-69.55,18.64 M160.09,229.64L90.54,211 M90.54,211L21,229.64"/>
......@@ -64,5 +63,4 @@
M132.37,630.21l64.57-31.84 M164.21,565.641l-31.84-64.58 M67.79,598.359l31.84,64.58 M334.22,533.28l-63.5,33.938 M363.78,630.72
l63.5-33.938 M363.78,503.72l33.938,63.5 M300.28,596.78l33.939,63.5 M568.82,532.82l-62.352,36 M657.53,595.18l-62.352,36
M595.18,506.47l36,62.352 M568.82,657.53l-36-62.352"/>
<rect fill="none" width="700" height="700"/>
</svg>
......@@ -589,8 +589,8 @@
<li><a href="#" class="demo" data-url="Tessellations/reschBarbell.svg">Resch Barbell Tessellation</a></li>
<li class="divider"></li>
<li><a href="#" class="demo" data-url="Tessellations/langHoneycomb.svg">Lang Honeycomb Tessellation</a></li>
<li><a href="#" class="demo" data-url="Tessellations/oval_tessellation_cp.svg">Lang Oval Tessellation</a></li>
<li><a href="#" class="demo" data-url="Tessellations/hyperbolic_limit_cp.svg">Lang Hyperbolic Limit</a></li>
<li><a href="#" class="demo" data-url="Tessellations/langOvalTessellation.svg">Lang Oval Tessellation</a></li>
<li><a href="#" class="demo" data-url="Tessellations/langHyperbolicLimit.svg">Lang Hyperbolic Limit</a></li>
</ul>
</li>
<li class="dropdown-submenu">
......@@ -612,8 +612,18 @@
<li class="dropdown-submenu">
<a tabindex="-1">Problematic Patterns<span class="pull-right fui-arrow-right"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="demo" data-url="Tessellations/wedged_double_faced.svg">Lang Wedged Double Faced Tessellation</a></li>
<li><a href="#" class="demo" data-url="Tessellations/rattanweaveLang.svg">Lang Rattan Weave</a></li>
<li class="dropdown-submenu">
<a tabindex="-1">Skinny Triangles<span class="pull-right fui-arrow-right"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="demo" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1">Bad Files<span class="pull-right fui-arrow-right"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="demo" data-url="Tessellations/langWedgeDoubleFaced.svg">Lang Wedged Double Faced Tessellation</a></li>
</ul>
</li>
</ul>
</li>
</ul>
......@@ -902,10 +912,10 @@
I use Illustrator to create SVGs (though any vector editing program should be fine), here are some tips I've found for making svgs to import into this tool.<br/><br/>
<ul>
<li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
(<b>Select all + Object>Compound Path>Release</b>), and release all clipping masks (<b>Select all + Object>Clipping Mask>Release</b>).</li>
(<b>Select all + Object > Compound Path > Release</b>), and release all clipping masks (<b>Select all + Object > Clipping Mask > Release</b>).</li>
<li>Create geometry using the <b>Line Segment Tool</b>.</li>
<li>Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together. Click the line,
then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
then go to <b>Select > Same > Appearance</b> to select all similar lines in the pattern.
<li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG 1.1 settings, but version 1.0 will work as well.</li>
</ul>
</p>
......
......@@ -34,8 +34,7 @@ function initPattern(globals){
var $this = $(this);
var stroke = getStroke($this);
if (typeForStroke(stroke) == "mountain"){
var opacity = parseFloat($this.attr("opacity"));
if (isNaN(opacity)) opacity = 1;
var opacity = getOpacity($this);
this.targetAngle = -opacity*Math.PI;
return true;
}
......@@ -45,8 +44,7 @@ function initPattern(globals){
var $this = $(this);
var stroke = getStroke($this);
if (typeForStroke(stroke) == "valley"){
var opacity = parseFloat($this.attr("opacity"));
if (isNaN(opacity)) opacity = 1;
var opacity = getOpacity($this);
this.targetAngle = opacity*Math.PI;
return true;
}
......@@ -61,6 +59,18 @@ function initPattern(globals){
return typeForStroke(stroke) == "triangulation";
}
function getOpacity(obj){
var opacity = obj.attr("opacity");
if (opacity === undefined) {
if (obj.attr("style") && $(obj)[0].style.opacity) {
opacity = $(obj)[0].style.opacity;
}
}
opacity = parseFloat(opacity);
if (isNaN(opacity)) return 1;
return opacity;
}
function getStroke(obj){
var stroke = obj.attr("stroke");
if (stroke === undefined) {
......@@ -82,88 +92,6 @@ function initPattern(globals){
return null;
}
function loadSVG(url){
SVGloader.load(url, function(svg){
var _$svg = $(svg);
badColors = [];
//format all appropriate svg elements
var $paths = _$svg.children("path");
$paths.css({fill:"none", 'stroke-dasharray':"none"});
var $lines = _$svg.children("line");
$lines.css({fill:"none", 'stroke-dasharray':"none"});
var $rects = _$svg.children("rect");
$rects.css({fill:"none", 'stroke-dasharray':"none"});
var $polygons = _$svg.children("polygon");
$polygons.css({fill:"none", 'stroke-dasharray':"none"});
var $polylines = _$svg.children("polyline");
$polylines.css({fill:"none", 'stroke-dasharray':"none"});
var _verticesRaw = [];
var _mountainsRaw = [];
var _valleysRaw = [];
var _outlinesRaw = [];
var _cutsRaw = [];
var _triangulationsRaw = [];
findType(_verticesRaw, _outlinesRaw, outlineFilter, $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, _triangulationsRaw, triangulationFilter, $paths, $lines, $rects, $polygons, $polylines);
if (badColors.length>0){
badColors = _.uniq(badColors);
var string = "<br/>Some objects found with the following stroke colors:<br/><br/>";
_.each(badColors, function(color){
string += "<span style='background:" + color + "' class='colorSwatch'></span>" + color + "<br/>";
});
string += "<br/> These objects were ignored.<br/> Please check that your file is set up correctly, <br/>" +
"see <b>File>File Import Tips</b> for more information.<br/><br/>";
globals.warn(string);
}
parseSVG(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw);
//find max and min vertices
var max = new THREE.Vector3(0,0,0);
var min = new THREE.Vector3(Infinity,Infinity,Infinity);
for (var i=0;i<vertices.length;i++){
max.max(vertices[i]);
min.min(vertices[i]);
}
max.sub(min);
var border = new THREE.Vector3(0.1, 0, 0.1);
var scale = max.x;
if (max.z < scale) scale = max.z;
var strokeWidth = scale/300;
// $mountains.css({'stroke-dasharray': strokeWidth*6 + ', ' + strokeWidth*3 + ', ' + strokeWidth*1.5 + ', ' + strokeWidth*3});
// $valleys.css({'stroke-dasharray': strokeWidth*4 + ', ' + strokeWidth*3 + ', ' + strokeWidth*4 + ', ' + strokeWidth*3});
$paths.css({'stroke-width':strokeWidth});
border.multiplyScalar(scale);
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>');
$svg.append($paths);
$svg.append($lines);
$svg.append($rects);
$svg.append($polygons);
$svg.append($polylines);
$("#svgViewer").html($svg);
},
function(){},
function(error){
alert("Error loading SVG: " + url);
console.log(error);
});
}
function findType(_verticesRaw, _segmentsRaw, filter, $paths, $lines, $rects, $polygons, $polylines){
parsePath(_verticesRaw, _segmentsRaw, $paths.filter(filter));
parseLine(_verticesRaw, _segmentsRaw, $lines.filter(filter));
......@@ -339,6 +267,94 @@ function initPattern(globals){
}
}
function loadSVG(url){
SVGloader.load(url, function(svg){
var _$svg = $(svg);
badColors = [];
//format all appropriate svg elements
var $paths = _$svg.children("path");
$paths.css({fill:"none", 'stroke-dasharray':"none"});
var $lines = _$svg.children("line");
$lines.css({fill:"none", 'stroke-dasharray':"none"});
var $rects = _$svg.children("rect");
$rects.css({fill:"none", 'stroke-dasharray':"none"});
var $polygons = _$svg.children("polygon");
$polygons.css({fill:"none", 'stroke-dasharray':"none"});
var $polylines = _$svg.children("polyline");
$polylines.css({fill:"none", 'stroke-dasharray':"none"});
var _verticesRaw = [];
var _mountainsRaw = [];
var _valleysRaw = [];
var _outlinesRaw = [];
var _cutsRaw = [];
var _triangulationsRaw = [];
findType(_verticesRaw, _outlinesRaw, outlineFilter, $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, _triangulationsRaw, triangulationFilter, $paths, $lines, $rects, $polygons, $polylines);
if (badColors.length>0){
badColors = _.uniq(badColors);
var string = "<br/>Some objects found with the following stroke colors:<br/><br/>";
_.each(badColors, function(color){
string += "<span style='background:" + color + "' class='colorSwatch'></span>" + color + "<br/>";
});
string += "<br/> These objects were ignored.<br/> Please check that your file is set up correctly, <br/>" +
"see <b>File > File Import Tips</b> for more information.<br/><br/>";
globals.warn(string);
}
parseSVG(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw);
//find max and min vertices
var max = new THREE.Vector3(0,0,0);
var min = new THREE.Vector3(Infinity,Infinity,Infinity);
for (var i=0;i<vertices.length;i++){
max.max(vertices[i]);
min.min(vertices[i]);
}
max.sub(min);
var border = new THREE.Vector3(0.1, 0, 0.1);
var scale = max.x;
if (max.z < scale) scale = max.z;
var strokeWidth = scale/300;
// $mountains.css({'stroke-dasharray': strokeWidth*6 + ', ' + strokeWidth*3 + ', ' + strokeWidth*1.5 + ', ' + strokeWidth*3});
// $valleys.css({'stroke-dasharray': strokeWidth*4 + ', ' + strokeWidth*3 + ', ' + strokeWidth*4 + ', ' + strokeWidth*3});
$paths.css({'stroke-width':strokeWidth});
border.multiplyScalar(scale);
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>');
$svg.append($paths);
$svg.append($lines);
$svg.append($rects);
$svg.append($polygons);
$svg.append($polylines);
$("#svgViewer").html($svg);
},
function(){},
function(error){
alert("Error loading SVG: " + url);
console.log(error);
});
}
function parseSVG(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw){
findIntersections(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw);
......
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