Skip to content

GitLab

Commit 338dcf1d authored by amandaghassaei's avatar amandaghassaei
Browse files

fold

parent 5e1f9fae
Expand all Hide whitespace changes
Inline Side-by-side
assets/Tessellations/test.svg 0 → 100644
View file @ 338dcf1d
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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.176l582.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"/>
</svg>
css/main.css
View file @ 338dcf1d
......@@ -28,7 +28,7 @@ body{
top:53px;
bottom: 0;
right:0;
width:440px;
width:450px;
padding:20px 20px;
overflow: auto;
background:rgba(10,10,10,0.1);
......
dependencies/fold.js 0 → 100755
View file @ 338dcf1d
This diff is collapsed.
index.html
View file @ 338dcf1d
......@@ -499,15 +499,16 @@
<script type="text/javascript" src="dependencies/OBJExporter.js"></script>
<script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
<script type="text/javascript" src="dependencies/earcut.js"></script>
<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
<script type="text/javascript" src="dependencies/fold.js"></script>
<!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
<script type="text/javascript" src="dependencies/EffectComposer.js"></script>
<script type="text/javascript" src="dependencies/MaskPass.js"></script>
<script type="text/javascript" src="dependencies/ShaderPass.js"></script>
<script type="text/javascript" src="dependencies/CopyShader.js"></script>
<script type="text/javascript" src="dependencies/SSAOShader.js"></script>
<script type="text/javascript" src="dependencies/Detector.js"></script>
<script type="text/javascript" src="dependencies/RenderPass.js"></script>
<!--<script type="text/javascript" src="dependencies/EffectComposer.js"></script>-->
<!--<script type="text/javascript" src="dependencies/MaskPass.js"></script>-->
<!--<script type="text/javascript" src="dependencies/ShaderPass.js"></script>-->
<!--<script type="text/javascript" src="dependencies/CopyShader.js"></script>-->
<!--<script type="text/javascript" src="dependencies/SSAOShader.js"></script>-->
<!--<script type="text/javascript" src="dependencies/Detector.js"></script>-->
<!--<script type="text/javascript" src="dependencies/RenderPass.js"></script>-->
<script type="text/javascript" src="dependencies/WebVR.js"></script>
<script type="text/javascript" src="dependencies/VREffect.js"></script>
......@@ -592,6 +593,7 @@
<li><a href="#" class="demo" data-url="Tessellations/langHoneycomb.svg">Lang Honeycomb Tessellation</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>
<li><a href="#" class="demo" data-url="Tessellations/test.svg">test (REMOVE)</a></li>
</ul>
</li>
<li class="dropdown-submenu">
......@@ -757,7 +759,6 @@
<div class="extraSpace"></div>
</div>
<div id="svgViewer"></div>
<div id="controlsLeft" class="flipped">
<div>
<b>View Settings:</b><br/><br/>
......@@ -843,23 +844,49 @@
</div>
</div>
</div>
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<p><b>Origami Simulator</b><br/><br/>
<a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a><br/>
<a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a><br/>
<b>Origami Simulator</b><br/><br/>
<p>
This app allows you to upload any origami crease pattern and simulate how it will fold. It uses a physics-based
approach to iteratively solve for small displacements in the geometry of an initially flat sheet due to forces
exerted by creases. This physics solver extends work from the following sources: <br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a> by Mark Schenk and Simon D. Guest<br/>
&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a> by Tomohiro Tachi<br/>
<br/>
All simulation methods were written from scratch and are executed in parallel in several GPU fragment shaders for fast performance.
</p><br/>
<b>Instructions:</b><br/><br/>
<ul>
<li>Slide the <b>Fold Angle</b> slider to control the degree of folding of the pattern (1 is fully folded, 0 is unfolded,
and -1 is fully folded with the opposite mountain/valley assignments).</li>
<li>Import other patterns under the <b>Examples</b> menu.</li>
<li>Upload your own crease patterns in SVG or FOLD formats, following <a href="#" class="goToImportInstructions">these instructions</a>.</li>
<li>Export FOLD files or 3D models ( STL or OBJ ) of the folded state of your design ( <b>File>Save Simulation as...</b> ).</li>
<li>Visualize the internal strain of the origami as it folds using the <b>Strain Visualization</b> in the left menu.</li>
<li>If you are working from a computer connected to a Vive, follow <a href="#" id="goToViveInstructions">these instructions</a>
to use this app in an interactive virtual reality mode.</li>
</ul>
<br/>
This app uses <a target="_blank" href="https://threejs.org/">three.js</a> to visualize and interact with the 3D geometry of the folding.<br/>
Triangulation of quad faces in origami patterns is achieved by adding the shortest edge across the quad (this helps to preserve symmetry, which
makes the simulation work better). Arbitrary polygonal faces are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a>.<br/>
Additionally, I used <a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
<a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> to build the GUI.<br/>
<b>External Libraries:</b><br/><br/>
<ul>
<li>All rendering and 3D interaction done with <a target="_blank" href="https://threejs.org/">three.js</a></li>
<li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG parsing</li>
<li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>
<li><a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
<a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> used to build the GUI</li>
</ul>
<p>
<br/>
Built by <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a> as a final project for <a href="http://courses.csail.mit.edu/6.849/spring17/" target="_blank">Geometric Folding Algorithms</a>.
Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>. If you have interesting crease patterns that would
make good demo files, please send them to me (Amanda) so I can add them to the <b>Examples</b> menu. My email address is on my website. Thanks!
make good demo files, please send them to me (Amanda) so I can add them to the <b>Examples</b> menu. My email address is on my website. Thanks!<br/>
<br/>
More documentation coming soon.
</p>
</div>
</div><!-- /.modal-content -->
......@@ -931,7 +958,7 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<p><b>VR</b><br/><br/>
<p><b>Virtual Reality</b><br/><br/>
This tool currently supports an interactive Virtual Reality mode using the Vive headset and controllers.
For this to work, you must first use a <a href="https://webvr.info/" target="_blank">WebVR enabled browser</a>:
currently only <a href="https://webvr.rocks/firefox" target="_blank">Firefox Nightly</a> is supported by this app.
......@@ -1104,7 +1131,7 @@
<br/><br/>
This measurement is equivalent to <a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
Cauchy strain or engineering strain</a> of the distance constraints on this system.
Increasing the <b>Axial Stiffness</b> will tighten these constraints and
Increasing the <b>Axial Strength</b> will tighten these constraints and
lower the error in the simulation.<br/>
<br/>
To visualize the error of each vertex graphically, select <b>Strain Visualization</b> under <b>Mesh Material</b>
......@@ -1193,14 +1220,16 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutAxialStrainModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-med">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<p><b>Strain Visualization</b><br/><br/>
....
<a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
Cauchy strain or engineering strain</a> is a unitless measurement of how much a material is being stretched or compressed under load.
The <b>Strain Visualization</b> illustrates the strain across an origami sheet by mapping it to a color from blue (no strain) to red (max strain).
</p>
</div>
</div><!-- /.modal-content -->
......
js/controls.js
View file @ 338dcf1d
......@@ -207,6 +207,16 @@ function initControls(globals){
});
}
setLink(".goToImportInstructions", function(){
$("#aboutModal").modal("hide");
$("#tipsModal").modal("show");
});
setLink("#goToViveInstructions", function(){
$("#aboutModal").modal("hide");
$("#aboutVRmodal").modal("show");
});
setRadio("simType", globals.simType, function(val){
globals.simType = val;
......
js/main.js
View file @ 338dcf1d
......@@ -19,5 +19,5 @@ $(function() {
globals.rigidSolver = initRigidSolver(globals);
globals.pattern = initPattern(globals);
globals.vive = initViveInterface(globals);
$(".demo[data-url='Tessellations/huffmanExtrudedBoxes.svg']").click();//load demo models
$(".demo[data-url='Tessellations/test.svg']").click();//load demo models
});
\ No newline at end of file
js/pattern.js
View file @ 338dcf1d
......@@ -4,6 +4,20 @@
function initPattern(globals){
var FOLD = require('fold');
var foldData = {};
clearFold();
function clearFold(){
foldData.vertices_coords = [];
foldData.edges_vertices = edges_vertices = [];
foldData.edges_assignment = edges_assignment = [];//B = boundary, M = mountain, V = valley, C = cut, F = facet, H/U = hinge
foldData.edges_foldAngles = [];//target angles
foldData.faces_vertices = [];
}
var verticesRaw = [];//list of vertex3's
//refs to vertex indices
var mountainsRaw = [];
......@@ -365,12 +379,50 @@ function initPattern(globals){
cutsRaw = _cutsRaw;
triangulationsRaw = _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]);
});
_.each(_outlinesRaw, function(edge){
foldData.edges_vertices.push([edge[0], edge[1]]);
foldData.edges_assignment.push("B");
foldData.edges_foldAngles.push(null);
});
_.each(_mountainsRaw, function(edge, i){
foldData.edges_vertices.push([edge[0], edge[1]]);
foldData.edges_assignment.push("M");
foldData.edges_foldAngles.push(_mountainAngles[i]);
});
_.each(_valleysRaw, function(edge, i){
foldData.edges_vertices.push([edge[0], edge[1]]);
foldData.edges_assignment.push("V");
foldData.edges_foldAngles.push(_valleyAngles[i]);
});
_.each(_triangulationsRaw, function(edge){
foldData.edges_vertices.push([edge[0], edge[1]]);
foldData.edges_assignment.push("F");
foldData.edges_foldAngles.push(0);
});
var error = mergeVertices();
if (error) {
console.warn("aborting file import");
return;
}
console.log(JSON.stringify(foldData.vertices_coords));
foldData = FOLD.filter.collapseNearbyVertices(foldData, 3);
console.log(JSON.stringify(foldData.vertices_coords));
// console.log(JSON.stringify(foldData.edges_vertices));
// console.log(FOLD.filter.subdivideCrossingEdges_vertices(foldData, 3));
// console.log(JSON.stringify(foldData.edges_vertices));
mergeVertices();//
var nullEdges = 0;
nullEdges += removeNullEdges(outlines);
nullEdges += removeNullEdges(mountains);
......@@ -559,7 +611,7 @@ function initPattern(globals){
return allCreaseParams;
}
function mergeVertices(){
function mergeVertices(allEdges){
vertices = verticesRaw.slice();
......@@ -568,7 +620,6 @@ function initPattern(globals){
var mergedVertices = [];
var _weededVertices = vertices.slice();
var goodVertices = [];
var allEdges = outlinesRaw.concat(mountainsRaw).concat(valleysRaw).concat(cutsRaw).concat(triangulationsRaw);
var js = [];
for (var i=0;i<vertices.length;i++){
js.push(i);
......@@ -606,12 +657,6 @@ function initPattern(globals){
}
}
outlines = outlinesRaw.slice();
mountains = mountainsRaw.slice();
valleys = valleysRaw.slice();
cuts = cutsRaw.slice();
triangulations = triangulationsRaw.slice();
var strays = findStrayVertices();
for (var i=0;i<strays.length;i++){
for (var j=0;j<_weededVertices.length;j++){
......@@ -630,11 +675,7 @@ function initPattern(globals){
return true;
}
removeCombinedFromSet(combined, outlines);
removeCombinedFromSet(combined, mountains);
removeCombinedFromSet(combined, valleys);
removeCombinedFromSet(combined, cuts);
removeCombinedFromSet(combined, triangulations);
removeCombinedFromSet(combined, allEdges);
for (var i=0;i<goodVertices.length;i++){
var newIndex = mergedVertices.length;
......@@ -945,31 +986,13 @@ function initPattern(globals){
}
}
function findIntersections(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw){
findIntersectionsInSets(_verticesRaw, _outlinesRaw, _outlinesRaw);
findIntersectionsInSets(_verticesRaw, _outlinesRaw, _mountainsRaw);
findIntersectionsInSets(_verticesRaw, _outlinesRaw, _valleysRaw);
findIntersectionsInSets(_verticesRaw, _outlinesRaw, _cutsRaw);
findIntersectionsInSets(_verticesRaw, _outlinesRaw, _triangulationsRaw);
findIntersectionsInSets(_verticesRaw, _mountainsRaw, _mountainsRaw);
findIntersectionsInSets(_verticesRaw, _mountainsRaw, _valleysRaw);
findIntersectionsInSets(_verticesRaw, _mountainsRaw, _cutsRaw);
findIntersectionsInSets(_verticesRaw, _mountainsRaw, _triangulationsRaw);
findIntersectionsInSets(_verticesRaw, _valleysRaw, _valleysRaw);
findIntersectionsInSets(_verticesRaw, _valleysRaw, _cutsRaw);
findIntersectionsInSets(_verticesRaw, _valleysRaw, _triangulationsRaw);
findIntersectionsInSets(_verticesRaw, _cutsRaw, _cutsRaw);
findIntersectionsInSets(_verticesRaw, _cutsRaw, _triangulationsRaw);
findIntersectionsInSets(_verticesRaw, _triangulationsRaw, _triangulationsRaw);
}
function findIntersectionsInSets(_verticesRaw, set1, set2){
function findIntersectionsInSets(_verticesRaw, set1){
for (var i=set1.length-1;i>=0;i--){
for (var j=set2.length-1;j>=0;j--){
for (var j=set1.length-1;j>=0;j--){
var v1 = _verticesRaw[set1[i][0]];
var v2 = _verticesRaw[set1[i][1]];
var v3 = _verticesRaw[set2[j][0]];
var v4 = _verticesRaw[set2[j][1]];
var v3 = _verticesRaw[set1[j][0]];
var v4 = _verticesRaw[set1[j][1]];
var data = line_intersect(v1, v2, v3, v4);
if (data) {
var d1 = getDistFromEnd(data.t1, v1, v2);
......@@ -989,9 +1012,9 @@ function initPattern(globals){
i++;
}
if (seg2Int){
set2.splice(j+1, 0, [vertIndex, set2[j][0], set2[j][2]]);
set2.splice(j+1, 0, [vertIndex, set2[j][1], set2[j][2]]);
set2.splice(j, 1);
set1.splice(j+1, 0, [vertIndex, set1[j][0], set1[j][2]]);
set1.splice(j+1, 0, [vertIndex, set1[j][1], set1[j][2]]);
set1.splice(j, 1);
j ++;
}
}
......@@ -1001,6 +1024,8 @@ function initPattern(globals){
function getDistFromEnd(t, v1, v2){
if (t>0.5) t = 1-t;
v1 = new THREE.Vector3(v1[0], 0, v1[1]);
v2 = new THREE.Vector3(v2[0], 0, v2[1]);
var length = (v2.clone().sub(v1)).length();
var dist = t*length;
if (dist < -globals.vertTol) return null;
......
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