main.js

// Amira Abdel-Rahman
// (c) Massachusetts Institute of Technology 2019

var color1= 0xffffff; /*white*/
var color2= 0x020227;  /*kohly*/
var color3= 0x1c5c61; /*teal*/
var color4= "#fa6e70"; //red/orange
var color5="#380152"; //purple
var color6="#696767"; //grey
var color7="#03dbfc"; //blue

///////////globals (in case of hierarichal)/////////////
var camera;
var gui = new dat.GUI();

var clock = new THREE.Clock();

var timeElapsed = clock.getElapsedTime();
var currTimeStep=0;
var increase=true;

var setupEmpty={//empty
	nodes: [
		],
	edges: [
		],

	//material properties - AISI 1095 Carbon Steel (Spring Steel)
	ndofs   : 3*6,

	animation :  {
	
		showDisplacement : false,
		exaggeration : 1000,
		speed:3.0
		
	},
	viz :  {
		minStress:10e6,
		maxStress: -10e6,
		colorMaps:[coolwarm,YlGnBu, winter ,jet],
		colorMap:0,
		
	},
	
};

var setup=JSON.parse(JSON.stringify(setupEmpty));


function animate(){
	timeElapsed = clock.getElapsedTime();
	requestAnimationFrame(animate);
	if(increase){
		currTimeStep+=setup.animation.speed*setup.animation.speed*2.0; //todo change to globalSetup
	}else{
		currTimeStep-=setup.animation.speed*setup.animation.speed*2.0; //todo change to globalSetup
	}
	
}
animate();
///////////////////////////////

////////////threejs object and utils//////////////////////

function threejs(setup,containerName,container1Name,static=true,live=false,empty=false){
	// this.line;
	this.setup=setup;
	this.renderer;
	this.scene;
	// this.camera;
	this.controls;
	this.containerName=containerName;
	this.container = document.getElementById( this.containerName );
	this.container1Name=container1Name;
	// this.line1;
	this.matLineBasic;
	this.matLineDashed;
	this.matLineBasicBasic;
	this.matLineBasicDashed;
	this.static=static;
	this.labelRenderer=[];
	this.counter=0;
	this.numFile=0;
	this.live=live;
	this.thinLines=false;
	this.speed=this.setup.animation.speed;
	this.empty=empty;
	
	// viewport
	

}

threejs.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.container.appendChild( this.renderer.domElement );
	this.scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 60, this.getWidth() / this.getHeight(), 1, 10000 );
	camera.position.set( - 40, 40, 60 );
	camera = new THREE.OrthographicCamera( this.getWidth() / - 2, this.getWidth() / 2, this.getHeight() / 2, this.getHeight() / - 2, 1, 1000 );
	camera.position.set( 0, 125, 0 );

	this.controls = new THREE.OrbitControls( camera, this.renderer.domElement );
	// this.controls.target.set( this.setup.voxelSize/2.0*this.setup.scale, this.setup.voxelSize*2.0*this.setup.scale, this.setup.voxelSize/2.0*this.setup.scale );
	this.controls.minDistance = 1;
	this.controls.maxDistance = 500;

	

	var helper = new THREE.GridHelper( 100, 100 );
    helper.position.y = -this.setup.voxelSize/2.0;
    helper.material.opacity = 0.5;
	helper.material.transparent = true;
	helper.scale.x=2.0
	helper.scale.z=2.0
	this.scene.add( helper );

	

	// this.labelRenderer = new THREE.CSS2DRenderer();
	// this.labelRenderer.setSize( this.getWidth(), this.getHeight() );
	// this.labelRenderer.domElement.style.position = 'absolute';
	// this.labelRenderer.domElement.style.top = 0;
	// this.container.appendChild( this.labelRenderer.domElement ); 
	// this.controls = new THREE.OrbitControls( camera, this.labelRenderer.domElement );
	
	
	// draw forces
	
	// draw degrees of freedom
	window.addEventListener( 'resize', onWindowResize, false );
	onWindowResize();
	if(!this.empty){

		this.matLineBasic = new THREE.LineMaterial( {
			color: 0xffffff,
			vertexColors: THREE.VertexColors,
			linewidth: 5, // in pixels
			//resolution:  // to be set by renderer, eventually
			dashed: false
	
		} );
	
		this.matLineBasicBasic = new THREE.LineBasicMaterial( {
			color: 0xffffff,
			vertexColors: THREE.VertexColors,
			linewidth: 5, // in pixels
			//resolution:  // to be set by renderer, eventually
	
		} );
	
		
		// matLineDashed.defines.USE_DASH = ""; 
		this.matLineDashed = new THREE.LineMaterial( {
			color: 0xffffff,
			linewidth: 5, // in pixels
			vertexColors: THREE.VertexColors,
			//resolution:  // to be set by renderer, eventually
			dashed: false
		} );
	
		this.matLineBasicDashed = new THREE.LineBasicMaterial( {
			color: 0xffffff,
			linewidth: 5, // in pixels
			vertexColors: THREE.VertexColors,
	
		} );

		this.drawStructure();
		this.colorEdges();
		this.drawConstraintBoundingBoxes();

		if(!this.live){
			if(!this.static){//dynamic
				// initialize(this.setup);
				this.renderEuler();
				this.animateEuler()
			}else{
				this.render();
				this.animate();
			}

		}else{
			this.renderLive();
			this.animateLive();
		}

		guiCreate(this);

	}else{


		this.renderEmpty();
		this.animateEmpty();
	}

	
	
};

threejs.prototype.drawStructure=function() {
	//draw edges
	for(var i=0;i<this.setup.edges.length;i++){
		//this.createEdge(this.setup.nodes[this.setup.edges[i].source].position,this.setup.nodes[this.setup.edges[i].target].position,this.setup.edges[i].id,false);
		if(this.live){
			this.createEdge(this.setup.nodes[this.setup.edges[i].source].position,this.setup.nodes[this.setup.edges[i].target].position,this.setup.edges[i].id,true,this.setup.edges[i].area);
		}else{
			this.createEdge(this.setup.nodes[this.setup.edges[i].source].position,this.setup.nodes[this.setup.edges[i].target].position,this.setup.edges[i].id,true);
		}
		
	}
	
	// draw nodes
	for(var i=0;i<this.setup.nodes.length;i++){
		//this.createNode(this.setup.nodes[i].position,this.setup.nodes[i].id,false,this.setup.nodes[i].restrained_degrees_of_freedom[0]);
		var loaded=false;
		if(this.setup.nodes[i].force.x!=0||this.setup.nodes[i].force.y!=0||this.setup.nodes[i].force.z!=0){
			loaded=true;
		}
		this.createNode(this.setup.nodes[i].position,this.setup.nodes[i].id,true,this.setup.nodes[i].restrained_degrees_of_freedom[0],loaded);
	}

	this.drawForces();
};

threejs.prototype.createEdge=function(fromPoint,toPoint,name,displacement,lineWidth=1.0) {
	fromPoint=toThreeVec(fromPoint);//todo utils
	toPoint=toThreeVec(toPoint);//todo utils
	var positions = [];
	var positionss = [];
	var colors = [];
	var points =[fromPoint,toPoint];

	var spline = new THREE.CatmullRomCurve3( points );
	var divisions = Math.round( 2 * points.length );

	var color = new THREE.Color();

	var colorss = new Float32Array( (divisions+1) * 3 );

	var count=0;

	for ( var i = 0, l = divisions; i <= l; i ++ ) {
		var point = spline.getPoint( i / l );
		positionss.push( new THREE.Vector3( point.x, point.y, point.z) );
		positions.push(  point.x, point.y, point.z );
		// color.setHSL( i / l, 1.0, 0.5 );
		color=interpolateLinearly(i / l, this.setup.viz.colorMaps[this.setup.viz.colorMap]);
		// color=interpolateLinearly(i / l, coolwarm);
		colors.push(  new THREE.Vector3( color[0], color[1], color[2]));
		colorss[count]=color[0]
		colorss[count+1]=color[1]
		colorss[count+2]=color[2]
		count+=3
	}

	
	if(this.thinLines){
		var geometry = new THREE.BufferGeometry().setFromPoints( positionss );
	}else{
		var geometry = new THREE.LineGeometry();
		geometry.setPositions( positions );
		geometry.setColors( colors );

	}

	
	
	var line;
	if(displacement){

		if(this.thinLines){
			line = new THREE.Line( geometry, this.matLineBasicDashed.clone() );
		}else{
			line = new THREE.Line2( geometry, this.matLineDashed );
		}
	}else{
		if(this.thinLines){
			line = new THREE.Line( geometry, this.matLineBasicBasic.clone() );
		}else{
			line = new THREE.Line2( geometry, this.matLineBasic );
		}
	}

	if(this.thinLines){
		line.geometry.setAttribute( 'color',new THREE.BufferAttribute( colorss, 3 ) );
		line.geometry.colorsNeedUpdate = true; 
		line.material.transparent=true;
		line.material.opacity=lineWidth;
		line.material.needsUpdate=true;
	}else{
		line.computeLineDistances();
		line.scale.set( 1, 1, 1 );

	}

	
	if(displacement){
		line.name='d'+name;
	}else{
		line.name=name;
	}

	this.scene.add( line );

	

};

threejs.prototype.createNode=function(point,name,displacement,restrained,loaded=false) {
	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	var material;

	if(restrained){
		material = new THREE.MeshBasicMaterial( {color: color4} );
	}else if(loaded){
		material = new THREE.MeshBasicMaterial( {color: color7} );
	}else {
		material = new THREE.MeshBasicMaterial( {color: color3} );
	}

	if(displacement){
		material.transparent=true;
		material.opacity=0.7;
	}else{
		material.transparent=true;
		material.opacity=0.0;

	}
	var cube = new THREE.Mesh( geometry, material );
	cube.position.set(point.x, point.y, point.z);
	cube.scale.set(0.05*this.setup.voxelSize, 0.05*this.setup.voxelSize,0.05*this.setup.voxelSize);
	// console.log(this.setup.voxelSize);
	// this.setup.voxelSize=1.5;
	if(this.setup.hierarchical){
		cube.scale.set(0.9*this.setup.voxelSize, 0.9*this.setup.voxelSize,0.9*this.setup.voxelSize);
	}
	
	if(displacement){
		cube.name='d'+name;
	}else{
		cube.name=name;
	}
	
	// var earthDiv = document.createElement( 'div' );
	// earthDiv.className = 'label';
	// earthDiv.textContent = name;
	// earthDiv.style.marginTop = '-1em';
	// var earthLabel = new THREE.CSS2DObject( earthDiv );
	// earthLabel.position.set( point.x*0.1, point.y*0.1, point.z*0.1 );
	// cube.add( earthLabel );
	

	this.scene.add( cube );

};

threejs.prototype.editEdge=function(fromPoint,toPoint,name) {
	var edge = this.scene.getObjectByName(name);


	var positions = [];
	var points =[fromPoint,toPoint];

	var spline = new THREE.CatmullRomCurve3( points );
	var divisions = Math.round( 2 * points.length );

	// var color = new THREE.Color();
	var positionss = new Float32Array( (divisions+1) * 3 );
	var count=0;

	for ( var i = 0, l = divisions; i <=l; i ++ ) {
		var point = spline.getPoint( i / l );
		positions.push( point.x, point.y, point.z );
		positionss[count]=point.x
		positionss[count+1]=point.y
		positionss[count+2]=point.z
		count+=3
		
	}
	// edge.geometry.setDrawRange( 0, newValue );
	// edge.geometry.setPositions( positions );
	// edge.geometry.attributes.position.needsUpdate = true; 
	// edge.geometry.setPositions( positions );
	// geometry.setColors( colors );

	if(this.thinLines){
		edge.geometry.setAttribute( 'position',new THREE.BufferAttribute( positionss, 3 ) );
		edge.geometry.attributes.position.needsUpdate = true; 

	}else{
		edge.geometry.setPositions( positions );
	}
	
	
};

threejs.prototype.drawForces=function() {
	for(var i=0;i<this.setup.nodes.length;i++){
		
		var dx=0.1;
		var o=toThreeVec(this.setup.nodes[i].position);
		o.multiplyScalar(this.setup.scale);
		var dir = toThreeVec(this.setup.nodes[i].force);
		var length = dir.length ();
		dir.normalize();
		var scale=0.00002*this.setup.scale;
		if(length!=0){
			var arrowhelper=new THREE.ArrowHelper( dir, o.sub(dir), scale*length, color7 ,scale*length, scale*length);
			// var arrowhelper=new THREE.ArrowHelper( dir, o.sub(dir), scale*length, color7);
			arrowhelper.name="f"+i;
			this.scene.add(arrowhelper);
		}
	}
};

threejs.prototype.updateForce1=function(id,o,dir){

	var length = dir.length();
	dir.normalize();
	// var scale=0.2;
	var scale=0.00002*this.setup.scale;
	if(length!=0){
		var arrow = this.scene.getObjectByName("f"+id.substring(1));
		if(arrow){
			// arrowhelper=new THREE.ArrowHelper( force.normalize(), arrow.position, scale*length, color7 ,scale*length, scale*length);
			// arrowhelper.name="f"+id.substring(1);
			// arrow.setDirection(force.normalize());
			// arrow.setLength(scale*length,scale*length,scale*length);
			// arrow=new THREE.ArrowHelper( dir, o.sub(dir), scale*length, color7 ,scale*length, scale*length);
			// console.log("here")
			var pos=o.sub(dir);
			arrow.position.x=pos.x;
			arrow.position.y=pos.y;
			arrow.position.z=pos.z;

		}
	}

}

threejs.prototype.updateForce=function(id,f){
	// var scale=0.00000001;
	var scale=0.00002*this.setup.scale;
	var force=new THREE.Vector3(f,0,0);
	var length = force.length();
	
	var arrow = this.scene.getObjectByName("f"+id.substring(1));
	if(arrow){
		// arrowhelper=new THREE.ArrowHelper( force.normalize(), arrow.position, scale*length, color7 ,scale*length, scale*length);
		// arrowhelper.name="f"+id.substring(1);
		arrow.setDirection(force.normalize());
		arrow.setLength(scale*length,scale*length,scale*length);

	}

}

///////
threejs.prototype.animateEmpty=function() {
	requestAnimationFrame( this.animateEmpty.bind(this));
	this.renderEmpty();
	
};

threejs.prototype.animate=function() {
	requestAnimationFrame( this.animate.bind(this));
	this.render();
	
};

threejs.prototype.animateEuler=function() {
	requestAnimationFrame( this.animateEuler.bind(this));
	this.renderEuler();
	
};

threejs.prototype.animateLive=function() {
	requestAnimationFrame( this.animateLive.bind(this));
	this.renderLive();
	
};

threejs.prototype.renderEmpty=function(){
	// main scene
	// this.labelRenderer.render( this.scene, camera );

	this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
	// renderer will set this eventually
	this.renderer.render( this.scene, camera );

};

threejs.prototype.render=function(){
	// main scene
	// this.labelRenderer.render( this.scene, camera );

	this.renderer.setClearColor( color2, 1 );
	this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
	// 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.renderer.render( this.scene, camera );

	var speed=this.setup.animation.speed;
	var exaggeration=this.setup.animation.exaggeration;
	// var exaggeration=0.01;
	
	if(this.setup.animation.showDisplacement){
		//displacement animation edges
		for(var i=0;i<this.setup.edges.length;i++){
			var fromPoint=new THREE.Vector3(0,0,0);
			var toPoint=new THREE.Vector3(0,0,0);
			var node1=this.setup.nodes[this.setup.edges[i].source];
			var node2=this.setup.nodes[this.setup.edges[i].target];

			fromPoint.x = node1.position.x+node1.displacement.x*exaggeration+ Math.sin(timeElapsed*speed)* node1.displacement.x*exaggeration ;
			fromPoint.y = node1.position.y+node1.displacement.y*exaggeration+ Math.sin(timeElapsed*speed)* node1.displacement.y*exaggeration ;
			fromPoint.z = node1.position.z+node1.displacement.z*exaggeration+ Math.sin(timeElapsed*speed)* node1.displacement.z*exaggeration ;

			var node = this.scene.getObjectByName('d'+node1.id);

			node.position.x = fromPoint.x;
			node.position.y = fromPoint.y;
			node.position.z = fromPoint.z;

			node.rotation.x = 0+node1.angle.x*exaggeration+ Math.sin(timeElapsed*speed)* node1.angle.x*exaggeration ;
			node.rotation.y = 0+node1.angle.y*exaggeration+ Math.sin(timeElapsed*speed)* node1.angle.y*exaggeration ;
			node.rotation.z = 0+node1.angle.z*exaggeration+ Math.sin(timeElapsed*speed)* node1.angle.z*exaggeration ;
		

			toPoint.x   = node2.position.x+node2.displacement.x*exaggeration+ Math.sin(timeElapsed*speed)* node2.displacement.x*exaggeration ;
			toPoint.y   = node2.position.y+node2.displacement.y*exaggeration+ Math.sin(timeElapsed*speed)* node2.displacement.y*exaggeration ;
			toPoint.z   = node2.position.z+node2.displacement.z*exaggeration+ Math.sin(timeElapsed*speed)* node2.displacement.z*exaggeration ;

			node = this.scene.getObjectByName('d'+node2.id);

			node.position.x = toPoint.x;
			node.position.y = toPoint.y;
			node.position.z = toPoint.z;

			node.rotation.x = 0+node2.angle.x*exaggeration+ Math.sin(timeElapsed*speed)* node2.angle.x*exaggeration ;
			node.rotation.y = 0+node2.angle.y*exaggeration+ Math.sin(timeElapsed*speed)* node2.angle.y*exaggeration ;
			node.rotation.z = 0+node2.angle.z*exaggeration+ Math.sin(timeElapsed*speed)* node2.angle.z*exaggeration ;
		
			this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
			
			
		}

	}

};

threejs.prototype.renderEuler1=function(){


	var dt=0.0251646;
	// simulateParallel( this.setup,10,dt,false,2); 
	doTimeStep(this.setup,dt,false,this.counter,1);
	// this.colorEdges();
	// simulateParallel(setup1,three.setup.numTimeSteps,dt,static,2);
		

	// main scene
	this.renderer.setClearColor( color2, 1 );
	this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
	// 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.renderer.render( this.scene, camera );

	var speed=this.setup.animation.speed;
	var exaggeration=this.setup.animation.exaggeration;
	var exaggeration=1.0;
	// console.log(this.setup.nodes[0].posTimeSteps)
	//todo later change how it's implemented
	if(this.setup.nodes[0].posTimeSteps){
		var numIntervals=this.setup.nodes[0].posTimeSteps.length;
		// if(currTimeStep>=numIntervals){
		// 	currTimeStep=numIntervals-1;
		// 	increase=false;
		// }else if(currTimeStep<0){
		// 	currTimeStep=0;
		// 	increase=true;
		// }
		if(currTimeStep>=numIntervals){
			currTimeStep=0;
		}

		var index=parseInt(currTimeStep);
		currTimeStep=this.counter;
		index=this.counter;
		
		if(this.setup.animation.showDisplacement){
			//displacement animation edges
			for(var i=0;i<this.setup.edges.length;i++){
				var fromPoint=new THREE.Vector3(0,0,0);
				var toPoint=new THREE.Vector3(0,0,0);
				var node1=this.setup.nodes[this.setup.edges[i].source];
				var node2=this.setup.nodes[this.setup.edges[i].target];

				fromPoint.x =  node1.position.x+node1.posTimeSteps[index].x*exaggeration ;
				fromPoint.y =  node1.position.y+node1.posTimeSteps[index].y*exaggeration ;
				fromPoint.z =  node1.position.z+node1.posTimeSteps[index].z*exaggeration ;

				var node = this.scene.getObjectByName('d'+node1.id);
				//todo check if this is effecient or ject go thought nodes

				node.position.x = fromPoint.x;
				node.position.y = fromPoint.y;
				node.position.z = fromPoint.z;

				node.rotation.x = 0+node1.angTimeSteps[index].x*exaggeration ;
				node.rotation.y = 0+node1.angTimeSteps[index].y*exaggeration ;
				node.rotation.z = 0+node1.angTimeSteps[index].z*exaggeration ;

				var scale=0.1;
				
				this.updateForce(node1.id,getForce(node1.position,currTimeStep).length()*scale);
			

				toPoint.x   =  node2.position.x+node2.posTimeSteps[index].x*exaggeration ;
				toPoint.y   =  node2.position.y+node2.posTimeSteps[index].y*exaggeration ;
				toPoint.z   =  node2.position.z+node2.posTimeSteps[index].z*exaggeration ;

				node = this.scene.getObjectByName('d'+node2.id);

				node.position.x = toPoint.x;
				node.position.y = toPoint.y;
				node.position.z = toPoint.z;

				node.rotation.x = 0+node2.angTimeSteps[index].x*exaggeration ;
				node.rotation.y = 0+node2.angTimeSteps[index].y*exaggeration ;
				node.rotation.z = 0+node2.angTimeSteps[index].z*exaggeration ;

				this.updateForce(node2.id,getForce(node2.position,currTimeStep).length()*scale);
			

				this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
				if(globalSetup.updateStress){
					this.colorEdge(this.setup.edges[i].stressTimeSteps[index],'d'+this.setup.edges[i].id);
				}
				
				
			}

		}
	}

	this.counter++;

};

threejs.prototype.renderEuler=function(){

		

	// main scene
	this.renderer.setClearColor( color2, 1 );
	this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
	// 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.renderer.render( this.scene, camera );

	var speed=this.setup.animation.speed;
	var exaggeration=this.setup.animation.exaggeration;
	
	// console.log(this.setup.nodes[0].posTimeSteps.length)
	
	//todo later change how it's implemented
	if(this.setup.nodes[0].posTimeSteps){
		var numIntervals=this.setup.nodes[0].posTimeSteps.length;
		// console.log(numIntervals)
		
		// if(currTimeStep>=numIntervals){
		// 	currTimeStep=numIntervals-1;
		// 	increase=false;
		// }else if(currTimeStep<0){
		// 	currTimeStep=0;
		// 	increase=true;
		// }
		if(currTimeStep>=numIntervals){
			currTimeStep=0;
		}

		var index=parseInt(currTimeStep);
		
		
		if(this.setup.animation.showDisplacement){
			// console.log(index)
			//displacement animation edges
			for(var i=0;i<this.setup.edges.length;i++){
				var fromPoint=new THREE.Vector3(0,0,0);
				var toPoint=new THREE.Vector3(0,0,0);
				var node1=this.setup.nodes[this.setup.edges[i].source];
				var node2=this.setup.nodes[this.setup.edges[i].target];

				fromPoint.x =  node1.position.x+node1.posTimeSteps[index].x*exaggeration ;
				fromPoint.y =  node1.position.y+node1.posTimeSteps[index].y*exaggeration ;
				fromPoint.z =  node1.position.z+node1.posTimeSteps[index].z*exaggeration ;

				var node = this.scene.getObjectByName('d'+node1.id);
				//todo check if this is effecient or ject go thought nodes

				node.position.x = fromPoint.x;
				node.position.y = fromPoint.y;
				node.position.z = fromPoint.z;

				node.rotation.x = 0+node1.angTimeSteps[index].x*exaggeration ;
				node.rotation.y = 0+node1.angTimeSteps[index].y*exaggeration ;
				node.rotation.z = 0+node1.angTimeSteps[index].z*exaggeration ;

				var scale=0.1;
				
				// this.updateForce(node1.id,getForce(node1.position,currTimeStep).length()*scale);
			

				toPoint.x   =  node2.position.x+node2.posTimeSteps[index].x*exaggeration ;
				toPoint.y   =  node2.position.y+node2.posTimeSteps[index].y*exaggeration ;
				toPoint.z   =  node2.position.z+node2.posTimeSteps[index].z*exaggeration ;

				node = this.scene.getObjectByName('d'+node2.id);

				node.position.x = toPoint.x;
				node.position.y = toPoint.y;
				node.position.z = toPoint.z;

				node.rotation.x = 0+node2.angTimeSteps[index].x*exaggeration ;
				node.rotation.y = 0+node2.angTimeSteps[index].y*exaggeration ;
				node.rotation.z = 0+node2.angTimeSteps[index].z*exaggeration ;

				// this.updateForce(node2.id,getForce(node2.position,currTimeStep).length()*scale);
			

				this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
				if(this.setup.updateStress){
					this.colorEdge(this.setup.edges[i].stressTimeSteps[index],'d'+this.setup.edges[i].id);
				}
				
				
			}

		}
	}

	

};

threejs.prototype.renderLive=function(){
	// main scene
	// this.labelRenderer.render( this.scene, camera );

	this.renderer.setClearColor( color2, 1 );
	this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
	// 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.renderer.render( this.scene, camera );

	var speed=this.speed;
	var exaggeration=this.setup.animation.exaggeration;
	// var exaggeration=0.01;
	
	if(this.setup.animation.showDisplacement){
		//displacement animation edges
		for(var i=0;i<this.setup.edges.length;i++){
			var fromPoint=new THREE.Vector3(0,0,0);
			var toPoint=new THREE.Vector3(0,0,0);
			var node1=this.setup.nodes[this.setup.edges[i].source];
			var node2=this.setup.nodes[this.setup.edges[i].target];

			fromPoint.x = node1.position.x+node1.displacement.x*exaggeration;
			fromPoint.y = node1.position.y+node1.displacement.y*exaggeration;
			fromPoint.z = node1.position.z+node1.displacement.z*exaggeration;

			var node = this.scene.getObjectByName('d'+node1.id);

			var dir = toThreeVec(node1.force);
			var length = dir.length();
			if(length!=0){
				this.updateForce1(node1.id,fromPoint.clone(),dir);
			}

			node.position.x = fromPoint.x;
			node.position.y = fromPoint.y;
			node.position.z = fromPoint.z;

			node.rotation.x = 0+node1.angle.x;
			node.rotation.y = 0+node1.angle.y;
			node.rotation.z = 0+node1.angle.z;

			if(typeof node1.size !== 'undefined'){
				node.scale.x = 0.5*node1.size;
				node.scale.y = 0.5*node1.size;
				node.scale.z = 0.5*node1.size;
			}
			
		

			toPoint.x   = node2.position.x+node2.displacement.x*exaggeration;
			toPoint.y   = node2.position.y+node2.displacement.y*exaggeration;
			toPoint.z   = node2.position.z+node2.displacement.z*exaggeration;

			node = this.scene.getObjectByName('d'+node2.id);

			var dir = toThreeVec(node2.force);
			var length = dir.length();
			if(length!=0){
				this.updateForce1(node2.id,toPoint.clone(),dir);
			}

			node.position.x = toPoint.x;
			node.position.y = toPoint.y;
			node.position.z = toPoint.z;

			node.rotation.x = 0+node2.angle.x;
			node.rotation.y = 0+node2.angle.y;
			node.rotation.z = 0+node2.angle.z;

			if(typeof node2.size !== 'undefined'){
				node.scale.x = 0.5*node2.size;
				node.scale.y = 0.5*node2.size;
				node.scale.z = 0.5*node2.size;
			}
		

			// this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
			this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
			// uncomment this to make it faster
			this.colorEdge(this.setup.edges[i].stress,'d'+this.setup.edges[i].id);
			
		}

		this.counter++;
		var numFile=this.numFile;
		var s=this.setup;

		if(this.counter>this.speed*0.5){
			//get new setup
			// this.colorEdges();
			$.getJSON("../json/"+this.folderName+"/"+numFile+".json", function(json) {
				// console.log(numFile)
				// console.log(json.nodes)
				// this.setup.nodes=json.nodes;
				s.nodes=json.nodes;
				s.edges=json.edges;
				s.viz.minStress=json.viz.minStress;
				s.viz.maxStress=json.viz.maxStress;
				// s=json;
				// console.log("opened file:"+ numFile);
			});
			this.setup=s;
			this.numFile++;
			if (this.numFile>s.maxNumFiles-1){
				this.numFile=0;
			}
			this.counter=0;
		}

	}

	
};

threejs.prototype.renderLast=function(){
	// main scene
	// this.labelRenderer.render( this.scene, camera );
	if(this.live){

		this.renderer.setClearColor( color2, 1 );
		this.renderer.setViewport( 0, 0, this.getWidth(), this.getHeight() );
		// 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.renderer.render( this.scene, camera );

		var speed=this.setup.animation.speed;
		var exaggeration=this.setup.animation.exaggeration;
		
	
		var s=this.setup;
		var numFile=s.maxNumFiles-1;
		

		//get new setup
		// this.colorEdges();
		$.getJSON("../json/"+this.folderName+"/"+numFile+".json", function(json) {
			// console.log(json.nodes)
			// this.setup.nodes=json.nodes;
			s.nodes=json.nodes;
			s.edges=json.edges;
			s.viz.minStress=json.viz.minStress;
			s.viz.maxStress=json.viz.maxStress;
			// s=json;
			// console.log("opened file:"+ numFile);
		});
		this.setup=s;
		this.numFile++;
		if (this.numFile>s.maxNumFiles){
			this.numFile=0;
		}
		

		//displacement animation edges
		for(var i=0;i<this.setup.edges.length;i++){
			var fromPoint=new THREE.Vector3(0,0,0);
			var toPoint=new THREE.Vector3(0,0,0);
			var node1=this.setup.nodes[this.setup.edges[i].source];
			var node2=this.setup.nodes[this.setup.edges[i].target];

			fromPoint.x = node1.position.x+node1.displacement.x*exaggeration;
			fromPoint.y = node1.position.y+node1.displacement.y*exaggeration;
			fromPoint.z = node1.position.z+node1.displacement.z*exaggeration;

			var node = this.scene.getObjectByName('d'+node1.id);

			node.position.x = fromPoint.x;
			node.position.y = fromPoint.y;
			node.position.z = fromPoint.z;

			node.rotation.x = 0+node1.angle.x;
			node.rotation.y = 0+node1.angle.y;
			node.rotation.z = 0+node1.angle.z;

			if(typeof node.size !== 'undefined'){
				node.scale.x = 0.5*node1.size;
				node.scale.y = 0.5*node1.size;
				node.scale.z = 0.5*node1.size;
			}
		

			toPoint.x   = node2.position.x+node2.displacement.x*exaggeration;
			toPoint.y   = node2.position.y+node2.displacement.y*exaggeration;
			toPoint.z   = node2.position.z+node2.displacement.z*exaggeration;

			node = this.scene.getObjectByName('d'+node2.id);

			node.position.x = toPoint.x;
			node.position.y = toPoint.y;
			node.position.z = toPoint.z;

			node.rotation.x = 0+node2.angle.x;
			node.rotation.y = 0+node2.angle.y;
			node.rotation.z = 0+node2.angle.z;

			if(typeof node.size !== 'undefined'){
				node.scale.x = 0.5*node2.size;
				node.scale.y = 0.5*node2.size;
				node.scale.z = 0.5*node2.size;
			}
		

			this.editEdge(fromPoint,toPoint,'d'+this.setup.edges[i].id);
			
		}
	}

	
};
//////////////////////////////////////////

threejs.prototype.getWidth=function(){
	// return container.style.width;
	if(this.container1Name===""){
		return window.innerWidth;
	}else{
		return $('#'+this.container1Name).width() ;
	}
    
};

threejs.prototype.getHeight=function(){
    // return container.style.height;
	if(this.container1Name===""){
		console.log()
		return window.innerHeight ;
	}else{
		return $('#'+this.container1Name).height() ;
	}
};

/////events////
//todo change 
function onWindowResize() {
	if(typeof three !== 'undefined'){
		camera.aspect = three.getWidth() / three.getHeight();
		camera.updateProjectionMatrix();
		three.renderer.setSize( three.getWidth(), three.getHeight() );
	}
	if(typeof three1 !== 'undefined'){
		camera.aspect = three1.getWidth() / three1.getHeight();