Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
O
OrigamiSimulator
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Amanda Ghassaei
OrigamiSimulator
Commits
7a1809f5
Commit
7a1809f5
authored
Feb 26, 2017
by
amandaghassaei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
adding in svg
parent
2d129a0b
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
1261 additions
and
10 deletions
+1261
-10
css/main.css
css/main.css
+4
-2
dependencies/path-data-polyfill.js
dependencies/path-data-polyfill.js
+1081
-0
index.html
index.html
+2
-1
js/controls.js
js/controls.js
+2
-1
js/globals.js
js/globals.js
+5
-1
js/pattern.js
js/pattern.js
+167
-5
No files found.
css/main.css
View file @
7a1809f5
...
...
@@ -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
;
}
...
...
dependencies/path-data-polyfill.js
0 → 100755
View file @
7a1809f5
This diff is collapsed.
Click to expand it.
index.html
View file @
7a1809f5
...
...
@@ -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>
...
...
js/controls.js
View file @
7a1809f5
...
...
@@ -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
){
...
...
js/globals.js
View file @
7a1809f5
...
...
@@ -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
=
{
...
...
js/pattern.js
View file @
7a1809f5
...
...
@@ -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
}
...
...
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