From bdf2da9a19881e66cada8fb2be001378fce1a0a9 Mon Sep 17 00:00:00 2001
From: amandaghassaei <amandaghassaei@gmail.com>
Date: Tue, 2 May 2017 01:21:03 -0400
Subject: [PATCH] reorganizing
---
index.html | 23 +++++++++++
js/controls.js | 15 ++++++-
js/dynamic/dynamicModel.js | 83 ++++++++++++++++++--------------------
js/globals.js | 9 +++--
js/model.js | 83 ++++++++++++++++++++++++--------------
js/pattern.js | 1 +
6 files changed, 136 insertions(+), 78 deletions(-)
diff --git a/index.html b/index.html
index eacd77c..809b245 100644
--- a/index.html
+++ b/index.html
@@ -410,6 +410,29 @@
<div id="svgViewer"></div>
<div class="extraSpace"></div>
</div>
+
+<div id="controlsLeft" class="flipped">
+ <div>
+ <b>View Settings:</b><br/><br/>
+ <div class="indent">
+ Mesh Material:
+ <div class="indent">
+ <label class="radio">
+ <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+ Colored Material
+ </label>
+ <div id="coloredMaterialOptions" class="indent">
+ <label>Frontside Color (rgb hex): </label><input value="" placeholder="" class="form-control" type="text"><br/>
+ <label>Backside Color (rgb hex): </label><input value="" placeholder="" class="form-control" type="text"><br/>
+ </div>
+ <label class="radio">
+ <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+ Face Normals Material
+ </label>
+ </div><br/>
+ </div>
+ </div>
+</div>
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
diff --git a/js/controls.js b/js/controls.js
index a3d1e2e..cfd2447 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -46,7 +46,7 @@ function initControls(globals){
globals.schematicVisible = val;
});
- setSliderInput("#axialStiffness", globals.axialStiffness, 100, 1000, 1, function(val){
+ setSliderInput("#axialStiffness", globals.axialStiffness, 500, 4000, 1, function(val){
globals.axialStiffness = val;
globals.materialHasChanged = true;
});
@@ -86,6 +86,19 @@ function initControls(globals){
$(e.target).blur();
});
+ if (globals.colorMode == "color") $("#coloredMaterialOptions").show();
+ else $("#coloredMaterialOptions").hide();
+ setRadio("colorMode", globals.colorMode, function(val){
+ globals.colorMode = val;
+ if (val == "color") {
+ $("#coloredMaterialOptions").show();
+ globals.dynamicModel.setMeshMaterial();
+ }
+ else $("#coloredMaterialOptions").hide();
+
+
+ });
+
function setButtonGroup(id, callback){
$(id+" a").click(function(e){
e.preventDefault();
diff --git a/js/dynamic/dynamicModel.js b/js/dynamic/dynamicModel.js
index 10a08d4..0f556d6 100644
--- a/js/dynamic/dynamicModel.js
+++ b/js/dynamic/dynamicModel.js
@@ -5,6 +5,15 @@
function initDynamicModel(globals){
var material = new THREE.MeshNormalMaterial({shading: THREE.FlatShading, side: THREE.DoubleSide});
+ function setMeshMaterial(){
+ material = THREE.MeshFaceMaterial([
+ new THREE.MeshLambertMaterial({shading:THREE.FlatShading, color:0xff0000, side:THREE.FrontSide}),
+ new THREE.MeshLambertMaterial({shading:THREE.FlatShading, color:0x0000ff, side:THREE.BackSide})
+ ]);
+ object3D.material = material;
+ }
+
+
var geometry = new THREE.Geometry();
geometry.dynamic = true;
var object3D = new THREE.Mesh(geometry, material);
@@ -37,6 +46,8 @@ function initDynamicModel(globals){
var theta;//[theta, w, normalIndex1, normalIndex2]
var lastTheta;//[theta, w, normalIndex1, normalIndex2]
+ var inited = false;
+
function syncNodesAndEdges(firstTime){
nodes = globals.model.getNodes();
edges = globals.model.getEdges();
@@ -56,6 +67,14 @@ function initDynamicModel(globals){
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
+ // for ( var face in geometry.faces ) {
+ // if (face<geometry.faces.length/2) {
+ // geometry.faces[ face ].materialIndex = 1;
+ // console.log(face);
+ // }
+ // else geometry.faces[ face ].materialIndex = 0;
+ // }
+
var bounds = geometry.boundingBox;
var avg = (bounds.min.add(bounds.max)).multiplyScalar(-0.5);
// object3D.position.set(avg.x, 0, avg.z);
@@ -67,7 +86,7 @@ function initDynamicModel(globals){
initTexturesAndPrograms(globals.gpuMath, firstTime);
steps = parseInt(setSolveParams());
- if(firstTime) runSolver();
+ inited = true;
}
var steps;
@@ -91,28 +110,9 @@ function initDynamicModel(globals){
// }
}
- function runSolver(){
- globals.threeView.startAnimation(function(){
- if (!globals.dynamicSimVisible) {
- return;
- }
- // steps = 1;
- for (var j=0;j<steps;j++){
- solveStep();
- }
- render();
- });
- }
-
- function setVisibility(state){
- object3D.visible = state;
- globals.threeView.render();
- }
-
- function solveStep(){
-
+ function solve(){
if (globals.shouldSyncWithModel){
- syncNodesAndEdges();
+ syncNodesAndEdges(true);
// reset();
globals.shouldSyncWithModel = false;
} else {
@@ -146,6 +146,19 @@ function initDynamicModel(globals){
}
}
+ for (var j=0;j<steps;j++){
+ solveStep();
+ }
+ render();
+ }
+
+ function setVisibility(state){
+ object3D.visible = state;
+ globals.threeView.render();
+ }
+
+ function solveStep(){
+
var gpuMath = globals.gpuMath;
gpuMath.setProgram("normalCalc");
@@ -214,8 +227,6 @@ function initDynamicModel(globals){
} else {
console.log("here");
}
-
- //globals.gpuMath.setSize(textureDim, textureDim);
}
function setSolveParams(){
@@ -387,9 +398,6 @@ function initDynamicModel(globals){
// this.vertices[1].clone().sub(this.vertices[0]);
creaseVectors[rgbaIndex] = nodes[0].getIndex();
creaseVectors[rgbaIndex+1] = nodes[1].getIndex();
- // creaseVectors[rgbaIndex] = -vector.x;
- // creaseVectors[rgbaIndex+1] = -vector.y;
- // creaseVectors[rgbaIndex+2] = -vector.z;
}
globals.gpuMath.initTextureFromData("u_creaseVectors", textureDimCreases, textureDimCreases, "FLOAT", creaseVectors, true);
}
@@ -440,7 +448,7 @@ function initDynamicModel(globals){
numNodeCreases += numCreases*2;
textureDimNodeCreases = calcTextureSize(numNodeCreases);
- var numFaces = geometry.faces.length;
+ var numFaces = geometry.faces.length/2;
textureDimFaces = calcTextureSize(numFaces);
originalPosition = new Float32Array(textureDim*textureDim*4);
@@ -472,10 +480,6 @@ function initDynamicModel(globals){
mass[4*i+1] = 1;//set all fixed by default
}
- _.each(nodes, function(node, index){
- mass[4*index] = node.getSimMass();//todo move into bottom loop?
- });
-
for (var i=0;i<textureDimCreases*textureDimCreases;i++){
if (i >= numCreases){
lastTheta[i*4+2] = -1;
@@ -488,6 +492,7 @@ function initDynamicModel(globals){
var index = 0;
for (var i=0;i<nodes.length;i++){
+ mass[4*i] = nodes[i].getSimMass();
meta[i*4+2] = index;
var nodeCreases = nodes[i].creases;
var nodeInvCreases = nodes[i].invCreases;
@@ -516,19 +521,11 @@ function initDynamicModel(globals){
updateCreaseVectors();
}
- function pause(){
- globals.threeView.pauseAnimation();
- }
-
- function resume(){
- runSolver();
- }
-
return {
syncNodesAndEdges: syncNodesAndEdges,
- pause: pause,
- resume: resume,
setVisibility: setVisibility,
- updateFixed: updateFixed
+ updateFixed: updateFixed,
+ setMeshMaterial: setMeshMaterial,
+ solve: solve
}
}
\ No newline at end of file
diff --git a/js/globals.js b/js/globals.js
index 49f7971..1c188e0 100644
--- a/js/globals.js
+++ b/js/globals.js
@@ -7,6 +7,9 @@ function initGlobals(){
var _globals = {
+ //view
+ colorMode: "normal",
+
//flags
fixedHasChanged: false,
forceHasChanged: false,
@@ -14,13 +17,11 @@ function initGlobals(){
creaseMaterialHasChanged: false,
shouldResetDynamicSim: false,
shouldChangeCreasePercent: false,
- shouldSyncWithModel: false,
+ shouldSyncWithModel: true,
nodePositionHasChanged: false,
//3d vis
- dynamicSimVisible: true,
- staticSimVisible: false,
- schematicVisible: true,
+ simType: "dynamic",
//sim settings
creasePercent: 0,
diff --git a/js/model.js b/js/model.js
index fb76f27..38e7038 100644
--- a/js/model.js
+++ b/js/model.js
@@ -8,11 +8,11 @@ function initModel(globals){
var allNodeObject3Ds = [];
var nodes = [];
- nodes.push(new Node(new THREE.Vector3(0,0,0), nodes.length));
- nodes.push(new Node(new THREE.Vector3(0,0,10), nodes.length));
- nodes.push(new Node(new THREE.Vector3(10,0,0), nodes.length));
- nodes.push(new Node(new THREE.Vector3(0,0,-10), nodes.length));
- nodes.push(new Node(new THREE.Vector3(10,0,-10), nodes.length));
+ // nodes.push(new Node(new THREE.Vector3(0,0,0), nodes.length));
+ // nodes.push(new Node(new THREE.Vector3(0,0,10), nodes.length));
+ // nodes.push(new Node(new THREE.Vector3(10,0,0), nodes.length));
+ // nodes.push(new Node(new THREE.Vector3(0,0,-10), nodes.length));
+ // nodes.push(new Node(new THREE.Vector3(10,0,-10), nodes.length));
// nodes.push(new Node(new THREE.Vector3(-10,0,0), nodes.length));
@@ -21,44 +21,66 @@ function initModel(globals){
// nodes[2].setFixed(true);
var edges = [];
- edges.push(new Beam([nodes[1], nodes[0]]));
- edges.push(new Beam([nodes[1], nodes[2]]));
- edges.push(new Beam([nodes[2], nodes[0]]));
- edges.push(new Beam([nodes[3], nodes[0]]));
- edges.push(new Beam([nodes[3], nodes[2]]));
- edges.push(new Beam([nodes[3], nodes[4]]));
- edges.push(new Beam([nodes[2], nodes[4]]));
+ // edges.push(new Beam([nodes[1], nodes[0]]));
+ // edges.push(new Beam([nodes[1], nodes[2]]));
+ // edges.push(new Beam([nodes[2], nodes[0]]));
+ // edges.push(new Beam([nodes[3], nodes[0]]));
+ // edges.push(new Beam([nodes[3], nodes[2]]));
+ // edges.push(new Beam([nodes[3], nodes[4]]));
+ // edges.push(new Beam([nodes[2], nodes[4]]));
// edges.push(new Beam([nodes[4], nodes[0]]));
// edges.push(new Beam([nodes[4], nodes[1]]));
// edges.push(new Beam([nodes[3], nodes[4]]));
var faces = [];
- faces.push(new THREE.Face3(0,1,2));
- faces.push(new THREE.Face3(0,2,3));
- faces.push(new THREE.Face3(4,3,2));
+ // faces.push(new THREE.Face3(0,1,2));
+ // faces.push(new THREE.Face3(0,2,3));
+ // faces.push(new THREE.Face3(4,3,2));
// faces.push(new THREE.Face3(4,1,0));
// faces.push(new THREE.Face3(3,4,0));
var creases = [];
- creases.push(new Crease(edges[2], 0, 1, Math.PI, 1, nodes[1], nodes[3], 0));
- creases.push(new Crease(edges[4], 2, 1, -Math.PI, 1, nodes[4], nodes[0], 1));
+ // creases.push(new Crease(edges[2], 0, 1, Math.PI, 1, nodes[1], nodes[3], 0));
+ // creases.push(new Crease(edges[4], 2, 1, -Math.PI, 1, nodes[4], nodes[0], 1));
// creases.push(new Crease(edges[5], 3, 2, -Math.PI, 1, nodes[3], nodes[1], 1));
// creases.push(new Crease(edges[0], 3, 0, Math.PI, 1, nodes[4], nodes[2], 2));
- var _allNodeObject3Ds = [];
- _.each(nodes, function(node){
- var obj3D = node.getObject3D();
- _allNodeObject3Ds.push(obj3D);
- globals.threeView.sceneAddModel(obj3D);
- });
- allNodeObject3Ds = _allNodeObject3Ds;
- _.each(edges, function(edge){
- globals.threeView.sceneAddModel(edge.getObject3D());
- });
+ // var _allNodeObject3Ds = [];
+ // _.each(nodes, function(node){
+ // var obj3D = node.getObject3D();
+ // _allNodeObject3Ds.push(obj3D);
+ // globals.threeView.sceneAddModel(obj3D);
+ // });
+ // allNodeObject3Ds = _allNodeObject3Ds;
+ // _.each(edges, function(edge){
+ // globals.threeView.sceneAddModel(edge.getObject3D());
+ // });
+
+ function pause(){
+ globals.threeView.pauseAnimation();
+ }
+
+ function resume(){
+ startSolver();
+ }
+
+ var inited = false;
+ startSolver();
+
+ function startSolver(){
+ globals.threeView.startAnimation(function(){
+ if (!inited) return;
+ if (globals.simType == "dynamic"){
+ globals.dynamicModel.solve();
+ } else {
+ console.log("static");
+ }
+ });
+ }
function buildModel(_faces, _vertices, _allEdges, allCreaseParams){
@@ -103,8 +125,6 @@ function initModel(globals){
faces = _faces;
creases = _creases;
- globals.shouldSyncWithModel = true;
-
for (var i=0;i<oldNodes.length;i++){
oldNodes[i].destroy();
}
@@ -120,7 +140,8 @@ function initModel(globals){
}
oldCreases = null;
- globals.dynamicModel.syncNodesAndEdges(true);
+ globals.shouldSyncWithModel = true;
+ inited = true;
// globals.staticSolver.syncNodesAndEdges();
}
@@ -145,6 +166,8 @@ function initModel(globals){
}
return {
+ pause: pause,
+ resume: resume,
getNodes: getNodes,
getEdges: getEdges,
getFaces: getFaces,
diff --git a/js/pattern.js b/js/pattern.js
index 5b2de6d..fa5ad9a 100644
--- a/js/pattern.js
+++ b/js/pattern.js
@@ -614,6 +614,7 @@ function initPattern(globals){
}
function drawPattern(faces){
+ console.log("draw pattern");
object3D.children = [];
var geo = new THREE.Geometry();
--
GitLab