Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
7
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
Amanda Ghassaei
OrigamiSimulator
Commits
ae08183c
Commit
ae08183c
authored
Jun 22, 2017
by
amandaghassaei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
draw parsed svg to screen
parent
bc0c8beb
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
56 additions
and
35 deletions
+56
-35
assets/Tessellations/test.svg
assets/Tessellations/test.svg
+2
-4
dependencies/fold.js
dependencies/fold.js
+5
-5
js/pattern.js
js/pattern.js
+49
-26
No files found.
assets/Tessellations/test.svg
View file @
ae08183c
...
...
@@ -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.176l
437.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.176l
582.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>
dependencies/fold.js
View file @
ae08183c
...
...
@@ -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
)
{
...
...
js/pattern.js
View file @
ae08183c
...
...
@@ -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
){
...
...
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