diff --git a/01_Code/physical_computing_interface/assembly/app.js b/01_Code/physical_computing_interface/assembly/app.js index 770e61eff034e478753895303b189630022f050b..110d757dde865f9bacb88fbea473e1a227ac3180 100644 --- a/01_Code/physical_computing_interface/assembly/app.js +++ b/01_Code/physical_computing_interface/assembly/app.js @@ -100,10 +100,10 @@ var integratedSetup={ delta_t: 1e-4, cutoff: 0.1, spring_constant: 1000.0, - num_particles_per_node:3, + num_particles_per_node:10, region_pitch:1.0, save_every:20, //visualize every how much frames - save_max:200, //max num of files saved + save_max:500, //max num of files saved }, particles:[], } @@ -234,6 +234,12 @@ function assembleNode(e,integratedSetup){ } function startAssembler(integratedSetup){ + + if(integratedSetup.DEMSetup.parameters.run){ + runDEMViz(); + + } + var ur10Setup=integratedSetup.ur10Setup; console.log("Run Assembler to assemble "+ur10Setup.nodes.length+ " node(s) and "+ur10Setup.edges.length+ " edge(s)!"); @@ -246,5 +252,9 @@ function startAssembler(integratedSetup){ ur10Setup.nodes=[]; ur10Setup.edges=[]; + + + + } diff --git a/01_Code/physical_computing_interface/assembly/python-urx/setup.json b/01_Code/physical_computing_interface/assembly/python-urx/setup.json index 46e67bcff2c84824311a440e6031a4165ef3c13a..90503d1121a9b8e7a1f9bb7866d4c5ba2f9dfeb6 100644 --- a/01_Code/physical_computing_interface/assembly/python-urx/setup.json +++ b/01_Code/physical_computing_interface/assembly/python-urx/setup.json @@ -1,7 +1,7 @@ { "setup": { "parameters": { - "run": true, + "run": false, "pythonFileName": "ur10test", "ipNode": "192.168.1.52", "ipEdge": "192.168.1.53", @@ -65,6 +65,14 @@ "rx": 0, "ry": 0, "rz": 0 + }, + { + "y": 0, + "x": 1, + "z": 0, + "rx": 0, + "ry": 0, + "rz": 0 } ], "edges": [ @@ -99,6 +107,30 @@ "rx": 0, "ry": 0, "rz": 1.5707963267948966 + }, + { + "y": 0, + "x": 1.5, + "z": 0, + "rx": 0, + "ry": 0, + "rz": 0 + }, + { + "y": -0.5, + "x": 1, + "z": 0, + "rx": 0, + "ry": 0, + "rz": 1.5707963267948966 + }, + { + "y": 0, + "x": 0.5, + "z": 0, + "rx": 0, + "ry": 0, + "rz": 0 } ] } diff --git a/01_Code/physical_computing_interface/demos/indexUR10.html b/01_Code/physical_computing_interface/demos/indexUR10.html index 2ecd4e10b041b2c4d56436189f36623f3bfbe55e..7c5096e77dfd5b641b959010c9cf0361b0dd1d7f 100644 --- a/01_Code/physical_computing_interface/demos/indexUR10.html +++ b/01_Code/physical_computing_interface/demos/indexUR10.html @@ -29,13 +29,13 @@ <div id="simulation"> <div id="threejs1"> - <div class="header1"> + <div class="header2"> <i> Simulation</i> </div> <div class="dragbar2"></div> <!-- <div id="webgl1"></div> --> <!-- todo put this somewhere elseß --> - <div id="intro_demo"> + <div id="webgl1"></div> </div> @@ -103,6 +103,13 @@ <!-- libraries --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> + +<script src="//unpkg.com/three"></script> +<script src="//unpkg.com/3d-force-graph"></script> +<script src="//unpkg.com/three-spritetext"></script> + + + <!-- Import TensorFlow.js --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script> <!-- Import tfjs-vis --> @@ -123,7 +130,7 @@ <script src="../lib/jsoneditor/jsoneditor.js"></script> -<script src="../lib/three.min.js"></script> +<!-- <script src="../lib/three.min.js"></script> --> <script src="../lib/OrbitControls.js"></script> <script src="../lib/dat.gui.min.js"></script> <script src="../lib/TransformControls.js"></script> @@ -139,21 +146,12 @@ <script src="../assembly/replay.js"></script><!-- assembly and timestep handling --> <script src="../graph/graph.js"></script><!--graph flow visualization--> - -<!-- <script language="javascript" type="text/javascript" src="../AI/lib/p5.min.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/p5.dom.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/numjs.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/agent.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/wann_agent.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/swingup.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/jquery-1.12.4.min.js"></script> - <script language="javascript" type="text/javascript" src="../AI/lib/demo.js"></script> --> - +<script src="../json/json.js"></script><!-- json --> -<script src="../json/json.js"></script><!-- json --> +<script src="../simulation/3dGraphVizDEM.js"></script><!--graph for DEM viz--> -<script src="../assembly/app.js"></script> +<script src="../assembly/app.js"></script><!--ur10 assembly stuff--> <script src="../setup/windowsControl.js"></script> @@ -162,6 +160,4 @@ </script> - - </html> diff --git a/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js b/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js new file mode 100644 index 0000000000000000000000000000000000000000..6184ab74bcc75c24df371f09a7eb3a54509ef778 --- /dev/null +++ b/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js @@ -0,0 +1,206 @@ +function runDEMViz(){ + $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/sim_config.json", function(config) { + var numParticles=config.particles.length; + var maxFiles=config.parameters.save_max; + + + + var color1= 0xffffff; /*white*/ + var color2= '#020227'; /*kohly*/ + var color3= 0x1c5c61; /*teal*/ + var color4= "#fa6e70"; //red/orange + var color5="#380152"; //purple + var color6="#696767"; //grey + var color7="#03dbfc"; //blue + + $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/positions/0.json", function(json0) { + + + var positions=json0.positions; + var edges=[]; + var nodes=[]; + + var scale=100.0; + + + for (var i=0;i<2*numParticles;i+=2){ + nodes.push({ + id:i, + x:positions[i], + y:positions[i+1], + }); + } + + var gData = { + nodes: nodes.map(node => ({ + id:node.id, + px:node.x*scale-scale, + py:node.y*scale-scale, + pz:0, + })), + links: edges + .filter(edge => edge.id) + .map(edge => ({ + source: 'n'+edge.source, + target: 'n'+edge.target, + color:getColor(edge.stress) + })) + }; + //color=interpolateLinearly(i / l, this.setup.viz.colorMaps[this.setup.viz.colorMap]); + + const Graph = ForceGraph3D().backgroundColor(color2) + .width($('#simulation').width()) + .height($('#simulation').height()) + (document.getElementById('webgl1')) + .d3Force('center', null) + .d3Force('charge', null) + // .linkDirectionalParticles(0.5) + + // .linkThreeObject(link => { + // // extend link with text sprite + // const sprite = new SpriteText(`${link.source} > ${link.target}`); + // sprite.color = 'lightgrey'; + // sprite.textHeight = 1.5; + // return sprite; + // }) + // .linkPositionUpdate((sprite, { start, end }) => { + // const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({ + // [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point + // }))); + + // // Position sprite + // Object.assign(sprite.position, middlePos); + // }) + + .linkWidth(1.0) + .linkOpacity(1.0) + .linkColor(color3) + .nodeThreeObject(({ }) => new THREE.Mesh( + new THREE.BoxGeometry(scale/10.0, scale/10.0, scale/10.0), + new THREE.MeshLambertMaterial({ + color: color3, + transparent: true, + opacity: 0.9 + }) + )) + .d3Force('box', () => { + + gData.nodes.forEach(node => { + node.fx=node.px; + node.fy=node.py; + node.fz=node.pz; + + }); + }) + + .cooldownTime(Infinity) + .graphData(gData); + // + + + var count=0; + var count1=0; + var totalCount=0; + var increment=true; + var speed=1; + var exaggeration=10000.0; + + + setInterval(() => { + + $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/positions/"+count+".json", function(json) { + + var positions=json.positions; + var edges=[]; + var nodes=[]; + + var scale=100.0; + + + for (var i=0;i<2*numParticles;i+=2){ + nodes.push({ + id:i, + x:positions[i], + y:positions[i+1], + }); + } + + gData = { + nodes: nodes.map(node => ({ + id:node.id, + px:node.x*scale-scale, + py:node.y*scale-scale, + pz:0, + })), + links: edges + .filter(edge => edge.id) + .map(edge => ({ + source: 'n'+edge.source, + target: 'n'+edge.target, + color:getColor(edge.stress) + })) + }; + + + Graph.d3Force('box', () => { + + gData.nodes.forEach(node => { + + + node.fx=node.px; + node.fy=node.py; + node.fz=node.pz; + + }); + }).graphData(gData);; + + count++; + if(count>=maxFiles){ + count=0; + } + + + // count1=0; + // } + // count1++; + + + // console.log(count) + // console.log(maxFiles) + + + + // if(count>speed){ + // increment=false; + // }else if (count<0){ + // increment=true; + // } + + + // if(increment){ + // count++; + // }else{ + // count--; + // } + // totalCount++; + // console.log(totalCount); + }); + + + }, 50); + + + var helper = new THREE.GridHelper( 2, 2 ); + helper.material.opacity = 0.5; + helper.material.transparent = true; + helper.scale.x=1.0*scale + helper.scale.z=1.0*scale + helper.rotation.x=Math.PI/2.0; + Graph.scene().add(helper); + + Graph.scene() + + }); + }); +} +