Commit ecb6d97c authored by Amira Abdel-Rahman's avatar Amira Abdel-Rahman
Browse files

AM216 FINAL PROJECT

parent f75d11dc
Pipeline #19765 passed with stage
in 28 seconds
......@@ -46,49 +46,168 @@
var form = document.getElementById('basic-form');
var ACCESS_TOKEN = "sl.BGyWYErue6-qWSvHaua_RIFs-_ZIM25eIgsIIwaa1htf7Ws2cmM8Lk5O5fOc5qFNs5hvNYUC8KPH1OcKH4f3kO-4E8cINyJBKWDoZxxeHH80pGoHZm9lvB8Y1EY2rZ6tFVZrBBNGXIPA";
var ACCESS_TOKEN = "sl.BGwldNEwISe-tTwsFsggxfpnAlBf57WvBtRc3a8Fh4Duygo0juZQEIfAAFVaqKKObV80K6RfRaj-7_Z3cHzLP97UjG6n3yKt0Dh-emFcTUKrBmDF-kCGO_YeaYFuIyXObKx8rMq8";
// sl.BGuEFWMTjnEwFTZX9XQSsRBws6FBqyF305o_ht5iXWIBYAfFUVH7U6jocvUzLPreM_kjT2EvVHa89cuIBW3Dp6vZb1MPh7rgEVaxdU9mWGNfulWpOEufrePppUpVA0Li0mSVLYkE
// var dbx = new Dropbox.Dropbox({ clientId: "7tg05bolybxwg28",clientSecret:"cnfue8jlho2dbmk" });
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
dbx.filesListFolder({path: ''})
.then(function(response) {
console.log('response', response)
displayFiles(response.result.entries);
})
.catch(function(error) {
console.error(error);
});
// dbx.filesListFolder({path: 'id:3rLnCv96uAAAAAAAAAy7Pg'})
// .then(function(response) {
// console.log('response', response)
// displayFiles(response.result.entries);
// })
// .catch(function(error) {
// console.error(error);
// });
// sharingCreateSharedLink(arg)
dbx.filesListFolder({path: 'id:3rLnCv96uAAAAAAAAAy7Pg'})
.then(function(response) {
console.log('response', response)
displayFiles1(response.result.entries);
})
.catch(function(error) {
console.error(error);
});
var interaction= {
type:"train",
number:"2",
exaggeration:1,
speed:100/10, //100
run: getFiles
}
var urls=[]
var count=0;
var ii=[];
var names=[];
getFiles();
function getFiles(){
urls=[]
count=0;
ii=[];
names=[];
var name=interaction.type;
var number=interaction.number;
var folder1="";
var folder2="";
var files="";
dbx.filesListFolder({path: 'id:3rLnCv96uAAAAAAAAAy7Pg'})
.then(function(response) {
// console.log('response', response)
folder1=displayFiles(response.result.entries,name);
console.log(folder1)
dbx.filesListFolder({path: folder1.id})
.then(function(response) {
// console.log('response', response)
folder2=displayFiles(response.result.entries,number);
console.log(folder2)
dbx.filesListFolder({path: folder2.id})
.then(function(response) {
// console.log('response', response)
files=response.result.entries;
for (var i = 0; i < files.length; i++) {
// filesGetTemporaryLink
// filesDownload
var file=files[i];
// console.log(file)
dbx.sharingCreateSharedLink({path: file.path_display,short_url:true})
.then(function(response) {
console.log('response', response.result)
// var nname=response.result.metadata.name;
// // console.log(nname)
// ii.push(parseInt(nname.slice(0, -5)))
// names.push(nname);
// urls.push(response.result.link)
// // console.log(ii)
// count++;
// if (count==files.length){
// // console.log(ii)
// // console.log(urls);
// show();
// }
})
.catch(function(error) {
console.error(error);
dbx.sharingListSharedLinks({path: file.path_display,direct_only:true})
.then(function(response) {
console.log('response', response)
// var nname=response.result.metadata.name;
// // console.log(nname)
// ii.push(parseInt(nname.slice(0, -5)))
// names.push(nname);
// urls.push(response.result.link)
// // console.log(ii)
// count++;
// if (count==files.length){
// // console.log(ii)
// // console.log(urls);
// show();
// }
})
.catch(function(error) {
console.error(error);
});
});
// dbx.filesGetTemporaryLink({path: file.id})
// .then(function(response) {
// // console.log('response', response.result)
// var nname=response.result.metadata.name;
// // console.log(nname)
// ii.push(parseInt(nname.slice(0, -5)))
// names.push(nname);
// urls.push(response.result.link)
// // console.log(ii)
// count++;
// if (count==files.length){
// // console.log(ii)
// // console.log(urls);
// show();
// }
// })
// .catch(function(error) {
// console.error(error);
// });
}
})
.catch(function(error) {
console.error(error);
});
})
.catch(function(error) {
console.error(error);
});
})
.catch(function(error) {
console.error(error);
});
}
// form.onsubmit = function listFiles(e) {
// e.preventDefault();
// var ACCESS_TOKEN = "sl.BGviryDjQhu6utc8dYNFgdL9qyZuhKDji159P5C1rXja2MPu1tuDseCRWM_-FFDbC_ZNWi90ALgmOwBQ-e0a2QbwIIiYJK1-hSuOTW19Sis6DgKIjbraEbsxfRQYYFd14mlinn8X";
// document.getElementById('access-token').value;
// var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
// dbx.filesListFolder({path: ''})
// .then(function(response) {
// console.log('response', response)
// displayFiles(response.result.entries);
// })
// .catch(function(error) {
// console.error(error);
// });
// }
function displayFiles(files) {
function displayFiles(files,name) {
for (var i = 0; i < files.length; i++) {
if (files[i].name==name){
// console.log(files[i])
return files[i];
}
}
}
function displayFiles1(files) {
var filesList = document.getElementById('files');
var li;
for (var i = 0; i < files.length; i++) {
......
......@@ -3,7 +3,7 @@
<title>MetaVoxel</title>
<script src="https://unpkg.com/dropbox@10.28.0/dist/Dropbox-sdk.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.4/d3.min.js"></script>
<script src="../lib/dat.gui.js"></script>
<script src="//unpkg.com/three"></script>
......@@ -40,7 +40,7 @@
number:"1",
exaggeration:1,
speed:100/10, //100
run: getFiles
run: run
}
var gui = new dat.GUI();
......@@ -139,9 +139,6 @@
}
function displayFiles(files,name) {
for (var i = 0; i < files.length; i++) {
if (files[i].name==name){
......@@ -150,18 +147,55 @@
}
}
}
$.getJSON("https://github.com/amirabdelrahman/AM216_Final_Project_Data/blob/main/chiral_v.json", function(json0) {
console,log(json0)
// $.getJSON("https://www.dropbox.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=0", function(json0) {
// console,log(json0)
// });
var dropbox_url = "https://dl.dropboxusercontent.com/s/123456789/data.json?dl=1";
var dropbox_url = "https://www.dropbox.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=0";
var dropbox_url = "https://dl.dropboxusercontent.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=1";
// $.getJSON(dropbox_url, function(json0) {
// console.log("Successfully loaded file from Dropbox!");
// console.log(json0);
// });
var urlLinks=[]
run();
function run(){
urlLinks=[];
$.getJSON("../json/AM216_Final_Project_Links/"+interaction.type+"_"+(interaction.number-1)+".json", function(json0) {
console.log("Successfully loaded file from Dropbox!");
console.log(json0.key[0]);
for (var i = 0; i < json0.key.length; i++) {
urlLinks.push("")
}
for (var i = 0; i < json0.key.length; i++) {
var l=json0.key[i];
l="https://dl.dropboxusercontent.com/"+l.slice(24);
var start=l.lastIndexOf("/")
var end=l.lastIndexOf(".")
var ind= parseInt(l.substring(start+1,end))
urlLinks[ind]=l;
}
show()
// $.getJSON(l, function(json0) {
// console.log(json0)
// });
});
}
});
function show(){
// var name=interaction.name;
$.getJSON(urls[ii.indexOf(0)], function(json0) {
$.getJSON(urlLinks[0], function(json0) {
var maxNumFiles=json0.maxNumFiles-1;
var vizScale=json0.scale;
// var vizScale=1;
$.getJSON(urls[ii.indexOf(urls.length-1)], function(json) {
$.getJSON(urlLinks[urlLinks.length-1], function(json) {
var setup=json;
var static=false
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
......@@ -302,7 +336,7 @@
}else{ //dynamic
for(let i=0;i<maxNumFiles;i++){
$.getJSON(urls[ii.indexOf(i)] , function(jsons) {
$.getJSON(urlLinks[i] , function(jsons) {
var setups=jsons;
for(let j=0;j<setups.nodes.length;j++){
gData.nodes[j].dxs[i]=setups.nodes[j].displacement.x*scale*vizScale;
......
<head>
<style> body { margin: 0; } </style>
<title>MetaVoxel</title>
<script src="https://unpkg.com/dropbox@10.28.0/dist/Dropbox-sdk.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.4/d3.min.js"></script>
<script src="../lib/dat.gui.js"></script>
<script src="//unpkg.com/three"></script>
<script src="../lib/js-colormaps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//unpkg.com/3d-force-graph"></script>
<!-- <script src="../lib/3d-force-graph.js"></script> -->
<script src="//unpkg.com/three-spritetext"></script>
<script src="../visualization/utils.js"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
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
var name="tutorial";
// var name="newTendon";
var scale,nodeScale;
var interaction= {
type:"train",
number:"1",
exaggeration:1,
speed:100/10, //100
run: getFiles
}
var gui = new dat.GUI();
// gui.add(interaction,'exaggeration',0.0,100.0).listen();
// gui.add(interaction,'speed',0.0,2000.0).listen();
gui.add(interaction,'type',{ train: 'train', gen1: 'gen1', gen2: 'gen2' }).listen();
gui.add(interaction,'number').listen();
gui.add(interaction,'run').listen();
var ACCESS_TOKEN = "sl.BGwXNxVqBsQdIeQr6JFLYMCT_v0sHK45Pw1cNnywtK1uReLZx6-bf98oq2kkujuBWdMpWz5E_U8s5VprgdPxr5p_ewt52UBJPP9IIfXMy1K1Ah31Gksbh0LJxcgvwJmGcrldO13u";
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
// console.log(dbx.filesListFolder({path: 'id:3rLnCv96uAAAAAAAAAy7Pg'}).result)
// var files=getFiles("train","1");
// displayFiles(files);
var urls=[]
var count=0;
var ii=[];
var names=[];
function getFiles(){
urls=[]
count=0;
ii=[];
names=[];
var name=interaction.type;
var number=interaction.number;
var folder1="";
var folder2="";
var files="";
dbx.filesListFolder({path: 'id:3rLnCv96uAAAAAAAAAy7Pg'})
.then(function(response) {
// console.log('response', response)
folder1=displayFiles(response.result.entries,name);
console.log(folder1)
dbx.filesListFolder({path: folder1.id})
.then(function(response) {
// console.log('response', response)
folder2=displayFiles(response.result.entries,number);
console.log(folder2)
dbx.filesListFolder({path: folder2.id})
.then(function(response) {
// console.log('response', response)
files=response.result.entries;
for (var i = 0; i < files.length; i++) {
// filesGetTemporaryLink
// filesDownload
var file=files[i];
// console.log(ii)
dbx.filesGetTemporaryLink({path: file.id})
.then(function(response) {
// console.log('response', response.result)
var nname=response.result.metadata.name;
// console.log(nname)
ii.push(parseInt(nname.slice(0, -5)))
names.push(nname);
urls.push(response.result.link)
// console.log(ii)
count++;
if (count==files.length){
// console.log(ii)
// console.log(urls);
show();
}
})
.catch(function(error) {
console.error(error);
});
}
})
.catch(function(error) {
console.error(error);
});
})
.catch(function(error) {
console.error(error);
});
})
.catch(function(error) {
console.error(error);
});
}
function displayFiles(files,name) {
for (var i = 0; i < files.length; i++) {
if (files[i].name==name){
// console.log(files[i])
return files[i];
}
}
}
// $.getJSON("https://www.dropbox.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=0", function(json0) {
// console,log(json0)
// });
var dropbox_url = "https://dl.dropboxusercontent.com/s/123456789/data.json?dl=1";
var dropbox_url = "https://www.dropbox.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=0";
var dropbox_url = "https://dl.dropboxusercontent.com/s/zio8qqdkhzje0cz/auxetic_v.json?dl=1";
$.getJSON(dropbox_url, function(json0) {
console.log("Successfully loaded file from Dropbox!");
console.log(json0);
});
function show(){
// var name=interaction.name;
$.getJSON(urls[ii.indexOf(0)], function(json0) {
var maxNumFiles=json0.maxNumFiles-1;
var vizScale=json0.scale;
// var vizScale=1;
$.getJSON(urls[ii.indexOf(urls.length-1)], function(json) {
var setup=json;
var static=false
setup.viz.colorMaps=[YlGnBu,coolwarm, winter ,jet];
if(setup.hierarchical){
// scale=setup.scale*200;
// nodeScale=scale/1500;
scale=setup.scale*0.001;
nodeScale=scale*10;
}else{
scale=setup.scale*50;
nodeScale=scale*2.0;
}
if (setup.multiscale){
scale=setup.scale*0.003;
nodeScale=scale*10
}
var stress=0.0;
var gData =
{
nodes: setup.nodes.map(node => ({
// id: node.id,
id: (node.parent=="11")?node.id:(node.parent+node.id),
px:node.position.x*scale*vizScale,
py:node.position.y*scale*vizScale,
pz:node.position.z*scale*vizScale,
dx:node.displacement.x*scale*vizScale,
dy:node.displacement.y*scale*vizScale,
dz:node.displacement.z*scale*vizScale,
restrained:node.restrained_degrees_of_freedom[0],
loaded:!(node.force.x==0.0&&node.force.y==0.0&&node.force.z==0.0),
displaced:(node.fixedDisplacement===undefined ||(node.fixedDisplacement.x==0&&node.fixedDisplacement.y==0&&node.fixedDisplacement.z==0))?false:true,
dxs:new Array(maxNumFiles).fill(0),
dys:new Array(maxNumFiles).fill(0),
dzs:new Array(maxNumFiles).fill(0),
axs:new Array(maxNumFiles).fill(0),
ays:new Array(maxNumFiles).fill(0),
azs:new Array(maxNumFiles).fill(0),
size:(node.material===undefined) ? nodeScale:(( setup.multiscale===undefined || !setup.multiscale)?(nodeScale*0.8):(node.scale*nodeScale*0.8**(1/node.scale))),
opacity: (node.parent=="11"|| setup.multiscale===undefined ||node.parent=="")?0.8:0.0,
})),
links: setup.edges
.filter(edge => edge.id)
.map(edge => ({
// source: 'n'+edge.source,
// target: 'n'+edge.target,
source: (setup.multiscale===undefined || !setup.multiscale ||edge.sourceNodalCoordinate==0)?'n'+edge.source:('n'+edge.source+'n'+edge.sourceNodalCoordinate),
target: (setup.multiscale===undefined || !setup.multiscale ||edge.targetNodalCoordinate==0)?'n'+edge.target:('n'+edge.target+'n'+edge.targetNodalCoordinate),
stresses:new Array(maxNumFiles).fill(getColor(setup.viz,edge.stress)),
stressesVal:new Array(maxNumFiles).fill(edge.stress),
color:getColor(setup.viz,edge.stress)
}))
};
// console.log(getColor(setup.viz,setup.edges[0].stress))
//////////////////////////////////////////////////////////////////////////
const Graph = ForceGraph3D({ controlType: 'orbit' }).backgroundColor(color2)
(document.getElementById('3d-graph'))
.d3Force('center', null)
.d3Force('charge', null)
.linkWidth(1.0*scale)
.linkOpacity(1.0)
// .linkColor(color3)
.nodeThreeObject(({ size,restrained,loaded,displaced,opacity }) => new THREE.Mesh(
new THREE.BoxGeometry(size, size, size)
,
new THREE.MeshLambertMaterial({
color: getNodeColor(restrained,loaded,displaced),
transparent: opacity>0.0?false:true,
transparent:false,
opacity: opacity
})
))
.d3Force('box', () => {
gData.nodes.forEach(node => {
node.fx=node.px;
node.fy=node.py;
node.fz=node.pz;
});
})
.cooldownTime(Infinity)
.graphData(gData);
var position=new THREE.Vector3(500,100,3000);
Graph.camera().position.copy( position );
// Graph.camera().lookAt( 500, orbit.target.y, orbit.target.z );
// Graph.camera().lookAt( 500, 0, 0 );
Graph.controls().target.set( 500, 100, 0 );
////////////////////////////////////
drawConstraintBoundingBoxes(json0,Graph.scene(),scale*vizScale);
///////////////////////////////////////
if(static){
var count=0;
var totalCount=0;
var increment=true;
setInterval(() => {
Graph.d3Force('box', () => {
gData.nodes.forEach(node => {
node.fx=node.px+count/interaction.speed*node.dx*interaction.exaggeration;
node.fy=node.py+count/interaction.speed*node.dy*interaction.exaggeration;
node.fz=node.pz+count/interaction.speed*node.dz*interaction.exaggeration;
});
});