Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Amanda Ghassaei
OrigamiSimulator
Commits
74207a23
Commit
74207a23
authored
Jun 03, 2017
by
amandaghassaei
Browse files
eod
parent
29719416
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/main.css
View file @
74207a23
...
...
@@ -401,4 +401,12 @@ a.seeMore.closed>.fui-triangle-down{
margin-left
:
auto
;
margin-right
:
auto
;
display
:
block
;
}
.colorSwatch
{
display
:
inline-block
;
width
:
20px
;
height
:
10px
;
margin-right
:
10px
;
margin-bottom
:
2px
;
}
\ No newline at end of file
index.html
View file @
74207a23
...
...
@@ -875,7 +875,7 @@
<br/>
<b>
Importing SVG:
</b><br/><br/>
<ul>
<li>
The SVG importer supports path
objects and line objects (coming). Please convert polygons to paths before importing.
</li>
<li>
The SVG importer supports path
, line, rect, polygon, and polyline objects
</li>
<li>
Mountain folds are
<span
style=
"color:red"
>
red
</span>
- rgb(255, 0, 0), hex #ff0000
</li>
<li>
Valley folds are
<span
style=
"color:blue"
>
blue
</span>
- rgb(0, 0, 255), hex #0000ff
</li>
<li>
Outline edges are
<span
style=
"color:black"
>
black
</span>
- rgb(0, 0, 0), hex #000000
</li>
...
...
@@ -906,7 +906,6 @@
<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.
<li>
To turn lines and polygons into path objects, select the geometry then right click and select
<b>
Make Compound Path
</b>
.
</li>
<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>
...
...
js/pattern.js
View file @
74207a23
...
...
@@ -21,17 +21,19 @@ function initPattern(globals){
var
triangulations
=
[];
var
polygons
=
[];
var
badColors
=
[];
//store any bad colors in svg file to show user
var
SVGloader
=
new
THREE
.
SVGLoader
();
//filter for svg parsing
function
outlineFilter
(){
var
stroke
=
getStroke
(
$
(
this
));
return
stroke
==
"
#000000
"
||
stroke
==
"
#000
"
||
stroke
==
"
black
"
||
stroke
==
"
rgb(0, 0, 0)
"
;
return
typeForStroke
(
stroke
)
==
"
outline
"
;
}
function
mountainFilter
(){
var
$this
=
$
(
this
);
var
stroke
=
getStroke
(
$this
);
if
(
stroke
==
"
#ff0000
"
||
stroke
==
"
#f00
"
||
stroke
==
"
red
"
||
stroke
==
"
rgb(255, 0, 0)
"
){
if
(
typeForStroke
(
stroke
)
==
"
mountain
"
){
var
opacity
=
parseFloat
(
$this
.
attr
(
"
opacity
"
));
if
(
isNaN
(
opacity
))
opacity
=
1
;
this
.
targetAngle
=
-
opacity
*
Math
.
PI
;
...
...
@@ -42,7 +44,7 @@ function initPattern(globals){
function
valleyFilter
(){
var
$this
=
$
(
this
);
var
stroke
=
getStroke
(
$this
);
if
(
stroke
==
"
#0000ff
"
||
stroke
==
"
#00f
"
||
stroke
==
"
blue
"
||
stroke
==
"
rgb(0, 0, 255)
"
){
if
(
typeForStroke
(
stroke
)
==
"
valley
"
){
var
opacity
=
parseFloat
(
$this
.
attr
(
"
opacity
"
));
if
(
isNaN
(
opacity
))
opacity
=
1
;
this
.
targetAngle
=
opacity
*
Math
.
PI
;
...
...
@@ -52,11 +54,11 @@ function initPattern(globals){
}
function
cutFilter
(){
var
stroke
=
getStroke
(
$
(
this
));
return
stroke
==
"
#00ff00
"
||
stroke
==
"
#0f0
"
||
stroke
==
"
green
"
||
stroke
==
"
rgb(0, 255, 0)
"
;
return
typeForStroke
(
stroke
)
==
"
cut
"
;
}
function
triangulationFilter
(){
var
stroke
=
getStroke
(
$
(
this
));
return
stroke
==
"
#ffff00
"
||
stroke
==
"
#ff0
"
||
stroke
==
"
yellow
"
||
stroke
==
"
rgb(255, 255, 0)
"
;
return
typeForStroke
(
stroke
)
==
"
triangulation
"
;
}
function
getStroke
(
obj
){
...
...
@@ -70,10 +72,22 @@ function initPattern(globals){
return
stroke
.
toLowerCase
();
}
function
typeForStroke
(
stroke
){
if
(
stroke
==
"
#000000
"
||
stroke
==
"
#000
"
||
stroke
==
"
black
"
||
stroke
==
"
rgb(0, 0, 0)
"
)
return
"
outline
"
;
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
==
"
#ffff00
"
||
stroke
==
"
#ff0
"
||
stroke
==
"
yellow
"
||
stroke
==
"
rgb(255, 255, 0)
"
)
return
"
triangulation
"
;
badColors
.
push
(
stroke
);
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
"
});
...
...
@@ -99,6 +113,17 @@ function initPattern(globals){
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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment