From 9ce1c749f3c11512e6bddb92ecd8dbd5186fd59f Mon Sep 17 00:00:00 2001
From: amira <amiraa@mit.edu>
Date: Thu, 20 Jul 2023 16:29:20 -0400
Subject: [PATCH] simulation better
---
.../css/style.css | 4 +-
.../demos/indexAI.html | 2 +-
.../demos/indexDEM.html | 2 +-
.../demos/indexDNN.html | 2 +-
.../demos/indexSimulation.html | 2 +-
.../demos/indexSwitchWindows.html | 2 +-
.../demos/indexUR10.html | 2 +-
.../simulation/app.js | 37 ++++++++--
.../simulation/fea/parallelFea.js | 40 ++++++++--
.../simulation/visualization/geometry.js | 16 ++++
.../simulation/visualization/main.js | 74 +++++++++++++++----
.../threejs/grid.js | 43 ++++++++---
12 files changed, 177 insertions(+), 49 deletions(-)
diff --git a/01_Code/physical_computing_interface/css/style.css b/01_Code/physical_computing_interface/css/style.css
index ea97d5e..31ab9b3 100644
--- a/01_Code/physical_computing_interface/css/style.css
+++ b/01_Code/physical_computing_interface/css/style.css
@@ -214,13 +214,13 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
#jsoneditor {
width: 100%;
- height: 100%;
+ height: 95%;
float: bottom;
}
#jsondiveditor {
width: 95%;
- height: 90%;
+ height: 80%;
left: var(--top);
top:var(--top);
float: right;
diff --git a/01_Code/physical_computing_interface/demos/indexAI.html b/01_Code/physical_computing_interface/demos/indexAI.html
index c6622bc..58bb766 100644
--- a/01_Code/physical_computing_interface/demos/indexAI.html
+++ b/01_Code/physical_computing_interface/demos/indexAI.html
@@ -89,7 +89,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/demos/indexDEM.html b/01_Code/physical_computing_interface/demos/indexDEM.html
index c6622bc..58bb766 100644
--- a/01_Code/physical_computing_interface/demos/indexDEM.html
+++ b/01_Code/physical_computing_interface/demos/indexDEM.html
@@ -89,7 +89,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/demos/indexDNN.html b/01_Code/physical_computing_interface/demos/indexDNN.html
index 0be0ee2..950599b 100644
--- a/01_Code/physical_computing_interface/demos/indexDNN.html
+++ b/01_Code/physical_computing_interface/demos/indexDNN.html
@@ -89,7 +89,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/demos/indexSimulation.html b/01_Code/physical_computing_interface/demos/indexSimulation.html
index 531f9fd..9ce0468 100644
--- a/01_Code/physical_computing_interface/demos/indexSimulation.html
+++ b/01_Code/physical_computing_interface/demos/indexSimulation.html
@@ -93,7 +93,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu with more options
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/demos/indexSwitchWindows.html b/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
index 9c00435..b7475fe 100644
--- a/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
+++ b/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
@@ -446,7 +446,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/demos/indexUR10.html b/01_Code/physical_computing_interface/demos/indexUR10.html
index 4d0a5b2..1ecb082 100644
--- a/01_Code/physical_computing_interface/demos/indexUR10.html
+++ b/01_Code/physical_computing_interface/demos/indexUR10.html
@@ -87,7 +87,7 @@
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
- <div class="footer2">
+ <div class="footer2" id="instructions">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
diff --git a/01_Code/physical_computing_interface/simulation/app.js b/01_Code/physical_computing_interface/simulation/app.js
index 9ceb617..f3e2625 100644
--- a/01_Code/physical_computing_interface/simulation/app.js
+++ b/01_Code/physical_computing_interface/simulation/app.js
@@ -38,7 +38,7 @@ var static=true;
var latticeSize=10;
var voxelSize=5;
var globalSetup={
- exaggeration:10e10,
+ exaggeration:10e1,
speed:3.0,
updateStress:false
@@ -50,11 +50,29 @@ setup.voxelSize=voxelSize;
setup.gridSize=GLOBALS.gridSize
document.addEventListener('runNode', function (e) {
- solveParallel(10);
+ x = document.getElementById("instructions");x.innerHTML = "Simulation Started, wait a few seconds for the results!";
+ solveParallel(1000);
+
+}, false);
+
+document.addEventListener('changeNodeColor', function (e) {
+ if(e.detail.data.type=="force"){
+ var load1=new _rhino3dm.BoundingBox(
+ [-voxelSize/2+e.detail.x*voxelSize,
+ +voxelSize/8+e.detail.z*voxelSize,
+ -voxelSize/2+e.detail.y*voxelSize],
+ [voxelSize/2+voxelSize*e.detail.x,
+ voxelSize/2+voxelSize*e.detail.z,
+ voxelSize/2+voxelSize*e.detail.y]);
+ console.log(load1)
+ loads.push([load1,{x:0,y:-100*5,z:0}]);
+ }
+ resetMetavoxels(e);
}, false);
document.addEventListener('addNode', function (e) {
+
resetMetavoxels(e);
}, false);
@@ -66,7 +84,7 @@ function resetMetavoxels(e){
setup=sim.reset();
//get present voxels
var present=[];
- console.log(GLOBALS.timeline)
+ // console.log(GLOBALS.timeline)
GLOBALS.timeline.forEach(step => {
@@ -93,11 +111,17 @@ function resetMetavoxels(e){
});
-
+ setup.loads=loads
+ setup.supports=supports
restrainFromBox(setup,supports);
loadFromBox(setup,loads);
+
+
sim.update(setup);
+
+
+
}
rhino3dm().then(async m => {
@@ -144,7 +168,8 @@ rhino3dm().then(async m => {
supports=[[support,dof]];
loads=[[load,{x:0,y:-100,z:0}]];
// var diffMaterialBox=[[matB,material2]];
-
+ setup.loads=loads
+ setup.supports=supports
///
@@ -199,7 +224,7 @@ function solveParallel(numTimeSteps){
setTimeout(function() {
- simulateParallel( setup,numTimeSteps,dt,static,2);
+ simulateParallel( setup,numTimeSteps,dt,static,2);
}, 1);
// var dt=0.0251646; //?? todo change to recommended step
diff --git a/01_Code/physical_computing_interface/simulation/fea/parallelFea.js b/01_Code/physical_computing_interface/simulation/fea/parallelFea.js
index 5603beb..11d0b66 100644
--- a/01_Code/physical_computing_interface/simulation/fea/parallelFea.js
+++ b/01_Code/physical_computing_interface/simulation/fea/parallelFea.js
@@ -20,16 +20,40 @@ var maxStrain=0;
function simulateParallel(setup,numTimeSteps,dt,static=true,saveInterval=10){
// var instuctionsDiv=document.getElementById("footer2").innerHTML;
+ xxx = document.getElementById("instructions")
initialize(setup);
- for(var i=0;i<numTimeSteps;i++){
- var t0 = performance.now();
- doTimeStep(setup,dt,static,i,saveInterval);
- var t1 = performance.now();
- console.log("doTimeStep took " + (t1 - t0) + " milliseconds.");
-
- // document.getElementById("footer2").innerHTML = "Timestep "+i +" out of "+ numTimeSteps+".";
+ sim.totalTime=0.0;
+ var interval= Math.floor(numTimeSteps / 10);
+ sim.j=0;
+ for(var j=0;j<10;j++){
+ setTimeout(function() {
+ for(var i=0;i<interval;i++){
+ var t0 = performance.now();
+ doTimeStep(setup,dt,static,i,saveInterval);
+ var t1 = performance.now();
+ // console.log("doTimeStep took " + (t1 - t0) + " milliseconds.");
+ sim.totalTime+=parseFloat(parseFloat(t1) - parseFloat(t0));
+ // document.getElementById("footer2").innerHTML = "Timestep "+i +" out of "+ numTimeSteps+".";
+ // console.log(x.innerHTML)
+
+ }
+ sim.j+=1
+ // console.log("Simulation took " + (sim.totalTime/1000).toFixed(2) + " seconds, with an average of "+(sim.totalTime/numTimeSteps/1000).toFixed(2)+" per timestep.");
+ updateColors();
+ var str=(sim.j)+"0% done!"
+ xxx.innerHTML = "Simulation Started. "+str.bold();
+ // console.log("Simulation Started. "+(sim.j)+" percent done!")
+ }, 1);
}
- updateColors();
+ setTimeout(function() {
+ x = document.getElementById("instructions");x.innerHTML = "Done! The simulation of "+numTimeSteps+" timesteps took "+(sim.totalTime/1000).toFixed(2)+" seconds. Showing the results.";
+
+ console.log("Simulation took " + (sim.totalTime/1000).toFixed(2) + " seconds, with an average of "+(sim.totalTime/numTimeSteps/1000).toFixed(2)+" per timestep.");
+ }, 1);
+
+
+ // xxx.innerHTML = "Simulation Started. "+(1+1)+" of "+numTimeSteps+ " timesteps done!";
+
}
function initialize(setup){
diff --git a/01_Code/physical_computing_interface/simulation/visualization/geometry.js b/01_Code/physical_computing_interface/simulation/visualization/geometry.js
index 193e192..72e36cd 100644
--- a/01_Code/physical_computing_interface/simulation/visualization/geometry.js
+++ b/01_Code/physical_computing_interface/simulation/visualization/geometry.js
@@ -734,4 +734,20 @@ function edgeInBox(setup,edge,box){
}
+function drawBox (min,max,color,scene,scale) {
+ // var box = new THREE.Box3(new THREE.Vector3(min.x*scale,min.y*scale,min.z*scale),new THREE.Vector3(max.x*scale,max.y*scale,max.z*scale));
+ // var mesh = new THREE.Box3Helper( box, color );
+ // scene.add( mesh );
+ console.log("hhhh")
+ var geometry = new THREE.BoxBufferGeometry( max.x*scale-min.x*scale, max.y*scale-min.y*scale, max.z*scale-min.z*scale );
+ var geometry = new THREE.BoxGeometry( max.x*scale-min.x*scale, max.y*scale-min.y*scale, max.z*scale-min.z*scale );
+
+ var material = new THREE.MeshLambertMaterial( { wireframe:false, transparent: false,color:color, side: THREE.DoubleSide } );
+ var mesh = new THREE.Mesh( geometry, material );
+
+ scene.add( mesh );
+ return mesh;
+ // todo add name??
+};
+
////////////
\ No newline at end of file
diff --git a/01_Code/physical_computing_interface/simulation/visualization/main.js b/01_Code/physical_computing_interface/simulation/visualization/main.js
index ad1d930..89e467b 100644
--- a/01_Code/physical_computing_interface/simulation/visualization/main.js
+++ b/01_Code/physical_computing_interface/simulation/visualization/main.js
@@ -10,9 +10,9 @@ var color6="#696767"; //grey
var color7="#03dbfc"; //blue
-///////////globals (in case of hierarichal)/////////////
+///////////globals (in case of hierarchal)/////////////
var camera;
-var gui = new dat.GUI();
+// var gui = new dat.GUI();
var clock = new THREE.Clock();
@@ -32,7 +32,8 @@ var setupEmpty={//empty
animation : {
showDisplacement : true,
- exaggeration : 10e5/2,
+ exaggeration : 10e2*5,
+ // exaggeration : 10e5/2,
speed:3.0
},
@@ -93,7 +94,9 @@ threejs1.prototype.init=function() {
this.renderer = new THREE.WebGLRenderer( { antialias: true } );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setClearColor( color2, 1.0 );
- this.renderer.setSize( this.getWidth(), this.getHeight() );
+ this.windowWidth=this.getWidth()
+ this.windowHeight=this.getHeight()
+ this.renderer.setSize( this.windowWidth, this.windowHeight );
this.container.appendChild( this.renderer.domElement );
this.scene = new THREE.Scene();
@@ -166,8 +169,7 @@ threejs1.prototype.init=function() {
// draw forces
// draw degrees of freedom
- window.addEventListener( 'resize', onWindowResize, false );
- onWindowResize(this);
+ onWindowResize1();
this.update(this.setup);
@@ -178,10 +180,24 @@ threejs1.prototype.init=function() {
this.render();
this.animate();
}
- guiCreate(this);
+ // guiCreate(this);
+
+ // this.container.addEventListener( 'mousemove', onDocumentMouseMoveThree, false );
+ this.container.addEventListener( 'mousedown', onDocumentMouseDown1, false );
+
+
+ window.addEventListener( 'mouseup', onWindowResize1, false );
+ window.addEventListener( 'resize', onWindowResize1, false );
+
};
+function onDocumentMouseMove1( event ) {
+ event.preventDefault();
+}
+function onDocumentMouseDown1( event ) {
+ event.preventDefault();
+}
threejs1.prototype.update=function(setup){
this.setup=setup;
this.drawStructure();
@@ -204,6 +220,21 @@ threejs1.prototype.drawStructure=function() {
}
this.drawForces();
+ // scale=1
+ // if (supports ) {
+ // for (var i=0;i< setup.supports.length;i++) {
+ // let s=setup.supports[i][0];
+ // drawBox(s.min,s.max,GLOBALS.color4,this.scene,scale);
+ // }
+ // }
+ // if (loads ) {
+ // for (var i=0;i< setup.loads.length;i++) {
+ // let l=setup.loads[i][0];
+ // console.log(l)
+ // drawBox(l.min,l.max,GLOBALS.color7,this.scene,scale);
+ // }
+
+ // }
};
threejs1.prototype.createEdge=function(fromPoint,toPoint,name,displacement) {
@@ -377,10 +408,11 @@ threejs1.prototype.render=function(){
// this.labelRenderer.render( this.scene, camera );
this.renderer.setClearColor( color2, 1 );
- this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
+
+ this.renderer.setViewport( 0, 0, this.windowWidth, this.windowHeight );
// renderer will set this eventually
- this.matLineBasic.resolution.set( this.getWidth(), this.getHeight() ); // resolution of the viewport
- this.matLineDashed.resolution.set( this.getWidth(), this.getHeight() ); // resolution of the viewport
+ this.matLineBasic.resolution.set( this.windowWidth, this.windowHeight ); // resolution of the viewport
+ this.matLineDashed.resolution.set( this.windowWidth, this.windowHeight ); // resolution of the viewport
this.renderer.render( this.scene, camera );
var speed=this.setup.animation.speed;
@@ -535,6 +567,13 @@ threejs1.prototype.renderEuler=function(){
};
threejs1.prototype.getWidth=function(){
+ this.windowWidth=$('#'+three.container1Name).width()
+
+
+
+ // return container.style.width;
+ return $('#'+three.container1Name).width() ;
+
// return container.style.width;
if(this.container1Name===""){
return window.innerWidth;
@@ -546,19 +585,22 @@ threejs1.prototype.getWidth=function(){
threejs1.prototype.getHeight=function(){
// return container.style.height;
+ this.windowHeight=window.innerHeight-$('#'+three.container1Name).height()
+ return window.innerHeight-$('#'+three.container1Name).height()
if(this.container1Name===""){
console.log()
return window.innerHeight ;
}else{
return $('#'+this.container1Name).height() ;
}
+
};
/////events////
//todo change
-function onWindowResize(sim) {
- camera.aspect = sim.getWidth() / sim.getHeight();
+function onWindowResize1(event) {
+ camera.aspect = three.getWidth() / sim.getHeight();
camera.updateProjectionMatrix();
sim.renderer.setSize( sim.getWidth(), sim.getHeight() );
@@ -594,15 +636,15 @@ threejs1.prototype.drawConstraintBoundingBoxes=function() {
let supports=this.setup.supports;
let loads=this.setup.loads;
if (supports ) {
- for (var i=0;i< supports.length;i++) {
+ for (var i=1;i< supports.length;i++) {
let s=supports[i][0];
- this.drawBox(s.min,s.max,color4);
+ this.drawBox(s.min,s.max,GLOBALS.color7);
}
}
if (loads ) {
- for (var i=0;i< loads.length;i++) {
+ for (var i=1;i< loads.length;i++) {
let l=loads[i][0];
- this.drawBox(l.min,l.max,color7);
+ this.drawBox(l.min,l.max,GLOBALS.color4);
}
}
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index 3df50c6..f94bd43 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -92,14 +92,7 @@ function threejs(GLOBALS,utils,containerName,container1Name){
}
},
- {
- //RUN/PLAY NODE
- content: '<span class="fa fa-play fa-1x"></span>',
- select: function(){
- // console.log( "play");//todo move to globals
- GLOBALS.runNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
- }
- },
+
{
// content: 'delete',
@@ -255,6 +248,14 @@ function threejs(GLOBALS,utils,containerName,container1Name){
input.click();
}
},
+ {
+ //RUN/PLAY NODE
+ content: '<span class="fa fa-play fa-1x"></span>',
+ select: function(){
+ // console.log( "play");//todo move to globals
+ GLOBALS.runNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
+ }
+ },
{
@@ -571,6 +572,7 @@ threejs.prototype.changeToGrid=function(newGrid){
};
threejs.prototype.getWidth=function(){
+ // console.log($('#'+this.container1Name).width())
// return container.style.width;
return $('#'+this.container1Name).width() ;
};
@@ -662,6 +664,8 @@ function onDocumentMouseDownThree( event ) {
three.highlight.position.x=p_x;
three.highlight.position.y=p_y;
three.highlight.position.z=p_z;
+
+ x = document.getElementById("instructions");x.innerHTML = "Select node, Delete node, play simulation or change node type.";
@@ -670,6 +674,9 @@ function onDocumentMouseDownThree( event ) {
}
if(event.which==3 && !(intersects1.length > 0)&& !(intersects.length > 0)){
three.menu=three.cy.cxtmenu( three.cxtdefaults );
+
+ x = document.getElementById("instructions");x.innerHTML = "Upload or save design.";
+
}
}
@@ -686,6 +693,9 @@ function onDocumentKeyUpThree(event){
document.addEventListener('removeNode', function (e) {
var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
+
+ x = document.getElementById("instructions");x.innerHTML = "Deleted node at x="+e.detail.x+", y="+e.detail.y+", z="+e.detail.y+".";
+
var object = three.scene.getObjectByName( name );
three.scene.remove( object );
three.voxels.splice( three.voxels.indexOf( object ), 1 );
@@ -701,8 +711,15 @@ document.addEventListener('removeNode', function (e) {
}, false);
document.addEventListener('addNode', function (e) {
+
+
+
three.buildVoxelAt( three.grid, e.detail.x, e.detail.y,e.detail.z);
+
+ x = document.getElementById("instructions");x.innerHTML = "Added node at x="+e.detail.x+", y="+e.detail.y+", z="+e.detail.y+".";
+
+
//deleteHelper Meshes
var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
var object = three.scene.getObjectByName( 'p'+name );
@@ -744,15 +761,19 @@ document.addEventListener('changeNodeColor', function (e) {
var selectedIndex = GLOBALS.globalJson.nodes.findIndex(selected => selected.x == obj.x&&selected.y == obj.y&&selected.z == obj.z);
GLOBALS.globalJson.nodes[selectedIndex].data=obj.data
+
+ x = document.getElementById("instructions");x.innerHTML = "Changed node x="+e.detail.x+", y="+e.detail.y+", z="+e.detail.y+" type to \""+obj.data.type+"\".";
+
}, false);
document.addEventListener('selectNode', function (e) {
- var obj=e.detail;
- [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
+ var obj=e.detail;
+ [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
-
+ // x = document.getElementById("instructions");x.innerHTML = "Selected node at x="+e.detail.x+", y="+e.detail.y+", z="+e.detail.y+".";
+
three.highlight.name="h["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]";
three.highlight.position.x=0;
three.highlight.position.y=0;
--
GitLab