From a19c6dea5f04924684f917b06f73f78f73d59466 Mon Sep 17 00:00:00 2001
From: Amira Abdel-Rahman <amira-rahman@aucegypt.edu>
Date: Mon, 25 Nov 2019 15:50:59 -0500
Subject: [PATCH] assembly intergrated first step, no animation yet

---
 01_Code/physical_computing_interface/app.js   |   17 +
 .../assembly/assembly.js                      | 2090 +++++------------
 .../{threejs => assembly}/replay.js           |    1 +
 .../{index.html => standAloneAssembly.html}   |    0
 .../physical_computing_interface/globals.js   |  210 +-
 .../graph/graph.js                            |    4 +-
 .../physical_computing_interface/index.html   |   13 +-
 .../threejs/grid.js                           |  283 +--
 8 files changed, 855 insertions(+), 1763 deletions(-)
 create mode 100644 01_Code/physical_computing_interface/app.js
 rename 01_Code/physical_computing_interface/{threejs => assembly}/replay.js (99%)
 rename 01_Code/physical_computing_interface/assembly/{index.html => standAloneAssembly.html} (100%)

diff --git a/01_Code/physical_computing_interface/app.js b/01_Code/physical_computing_interface/app.js
new file mode 100644
index 0000000..a56772f
--- /dev/null
+++ b/01_Code/physical_computing_interface/app.js
@@ -0,0 +1,17 @@
+// Amira Abdel-Rahman
+// (c) Massachusetts Institute of Technology 2019
+
+/////////////////function calls/////////////////
+//todo when calling say which gridsize and grid type
+var GLOBALS=new globals();
+var utils= new utilities();
+
+var three=new threejs(GLOBALS,utils,'webgl','threejs');
+three.init();
+
+var assembler= new Assembler(three,GLOBALS,1,100,[new THREE.Vector3(0,0,0)],[new THREE.Vector3(GLOBALS.gridSize/2.0*GLOBALS.voxelSpacing,0,0)]);
+assembler.run();
+
+//TODO ADD GRAPH STUFF AND JSON STUFF HERE
+
+
diff --git a/01_Code/physical_computing_interface/assembly/assembly.js b/01_Code/physical_computing_interface/assembly/assembly.js
index 0ad0346..eb44738 100644
--- a/01_Code/physical_computing_interface/assembly/assembly.js
+++ b/01_Code/physical_computing_interface/assembly/assembly.js
@@ -1,110 +1,122 @@
 // Amira Abdel-Rahman
-// (c) Massachusetts Institute of Technology 2018
+// (c) Massachusetts Institute of Technology 2019
 
 ///////////////////////////globals///////////////////////////////
+function Assembler(three,GLOBALS,numberOfRobots,speed,robotLocations,depositLocations){
+	///////////////////////////THREE///////////////////////////////
+
+	this.container =three.container;
+	this.camera    =three.camera;    
+	this.scene     =three.scene  ;   
+	this.renderer  =three.renderer ; 
+	this.guiControls =[];
+	this.geometryGui; //todo needed?
+	this.targetGui;//todo needed?
+	this.jointsGui;//todo needed?
+	this.jointsParams;//todo needed?
+	this.targetParams;//todo needed?
+	this.geometryParams;//todo needed?
+	this.end;//todo needed?
+	this.currentStep;
+	this.DEG_TO_RAD = Math.PI / 180;
+	this.RAD_TO_DEG = 180 / Math.PI;
+
+	///////////////////////////voxels///////////////////////////////
+	this.voxel
+	this.voxel;
+	this.voxelSpacing=GLOBALS.voxelSpacing;
+	this.voxelLocations=[];
+	this.voxelSlices=[];
+	this.voxelSlicesCount=[];
+
+	this.currentVoxelCount=0;
+	this.build=[];
+
+	this.globalZ=0;
+	this.globalRank=0;
+
+	this.voxelNum=0;
+	this.gridSize=GLOBALS.gridSize;
+
+	this.stepsCap=100; //change with very big simulations
+
+	this.grid=[];
+
+	///////////////////////////robot///////////////////////////////
+	this.numberOfRobots=numberOfRobots; //change number of robots
+	this.speed=speed; //change to speed up the simulation
+	this.THREE1=[];
+	this.robotBones = [];
+	this.joints = [];
+	this.angles = [];
+	this.IK=[];
+
+	this.robotState=[];
+
+	this.THREERobot;
+	this.VisualRobot= [];
+	this.THREESimulationRobot= [];
+	this.geo=[];
+	this.defaultRobotState= [];
+	this.target = [];
+	this.control= [];
+	this.leg= [];
+
+	this.voxelNormal= [];
+	this.normalAdjustmentVector= [];
+
+	//TODO assert number of start locations same as deposit locations
+	this.startLocations= depositLocations.slice();
+	this.robotLocations= robotLocations.slice();
+
+	this.THREE1dir= [];
+	this.THREE1Pos= [];
+
+	//path
+	this.targetPositionMesh= [];
+	this.carriedVoxel= [];
+
+	this.goHome= [];
 
+	//////////////////////
 
-///////////////////////////THREE///////////////////////////////
-var container, camera, scene, renderer;
-
-var guiControls =[];
-var  geometryGui,targetGui,jointsGui, jointsParams, targetParams, geometryParams,end, currentStep;
-
-var DEG_TO_RAD = Math.PI / 180;
-var RAD_TO_DEG = 180 / Math.PI;
-
-///////////////////////////voxels///////////////////////////////
-var voxel;
-var voxelSpacing=1.0;
-var voxelLocations=[];
-var voxelSlices=[];
-var voxelSlicesCount=[];
-
-var currentVoxelCount=0;
-var build=[];
-
-var globalZ=0;
-var globalRank=0;
-
-var voxelNum=0;
-var GLOBALS.gridSize=6+4;//change 10 to changecube size
-
-var stepsCap=100; //change with very big simulations
-
-var grid=[];
-
-
-///////////////////////////robot///////////////////////////////
-var numberOfRobots=1; //change number of robots
-var speed=20; //change to speed up the simulation
-var THREE1=[];
-var robotBones = [];
-var joints = [];
-var angles = [];
-var IK=[];
-
-var robotState=[];
-
-var THREERobot;
-var VisualRobot= [];
-var THREESimulationRobot= [];
-var geo=[];
-var defaultRobotState= [];
-var target = [];
-var control= [];
-var leg= [];
-
-var voxelNormal= [];
-var normalAdjustmentVector= [];
-
-var startLocations= [];
-
-var THREE1dir= [];
-var THREE1Pos= [];
-
-//path
-var targetPositionMesh= [];
-var carriedVoxel= [];
-
-var goHome= [];
-
-//////////////////////
-
-var steps=[];
-var path= [];
-
-var totalNumberofSteps=[];
+	this.steps=[];
+	this.path= [];
 
-var locations=[]
+	this.totalNumberofSteps=[];
 
+	this.locations=[]
+	this.showPath=false;
+	this.init(); //TODO INIT LATER, CHECK IF i CAN CHANGE THIS
+}
 
 ///////////////////////function calls///////////////////////////////
-declareGlobals();
-init();
-// frepVoxel(10,10,10,"");//later change string for frep
 
+Assembler.prototype.run=function(){
+	for( i=0;i<this.numberOfRobots;i++)
+	{
+		this.setupGUI(i);
+		this.defaultRobot(i);
+		this.buildHelperMeshes(i);
+		// this.assemble(i);
 
-for( i=0;i<numberOfRobots;i++)
-{
-	setupGUI(i);
-	THREERobotCall(i);
-	defaultRobot(i);
-	buildHelperMeshes(i);
-	assemble(i);
 
+	}
 }
 
+
+
 ///////////////////////////////scene///////////////////////////////
-function declareGlobals(){
-	for( i=0;i<numberOfRobots;i++)
+Assembler.prototype.declareGlobals=function(){
+	for( i=0;i<this.numberOfRobots;i++)
 	{
-	    guiControls.push(null);
+	    this.guiControls.push(null);
 	
-		THREE1.push(new THREE.Vector3(0,0,0) );
-		robotBones.push([]);
-		joints.push([]);
-		angles.push([0, 0, 0, 0, 0, 0]);
-		robotState.push({
+		this.THREE1.push(new THREE.Vector3(0,0,0) );
+		this.robotBones.push([]);
+		this.joints.push([]);
+		this.angles.push([0, 0, 0, 0, 0, 0]);
+		this.robotState.push({
 			leg1Pos:new THREE.Vector3(1,0,0),
 			leg2Pos:new THREE.Vector3(0,0,0),
 			up:new THREE.Vector3(0,0,1),
@@ -114,320 +126,272 @@ function declareGlobals(){
 		});
 
 		// THREERobot.push(null);
-		VisualRobot.push(null);
-		THREESimulationRobot.push(null);
-		geo.push(null);
-		defaultRobotState.push(null);
-		target.push(null);
-		control.push(null);
-		leg.push(1);
-		voxelNormal.push(180);
-		normalAdjustmentVector.push(new THREE.Vector3( 0, 0, 0));	
-		startLocations.push(new THREE.Vector3(0*voxelSpacing,10*voxelSpacing,0) );
-		THREE1dir.push(new THREE.Vector3(1,0,0) );
-		THREE1Pos.push(new THREE.Vector3(0,0,0) );
+		this.VisualRobot.push(null);
+		this.THREESimulationRobot.push(null);
+		this.geo.push(null);
+		this.defaultRobotState.push(null);
+		this.target.push(null);
+		this.control.push(null);
+		this.leg.push(1);
+		this.voxelNormal.push(180);
+		this.normalAdjustmentVector.push(new THREE.Vector3( 0, 0, 0));	
+		// this.startLocations.push(new THREE.Vector3(0*this.voxelSpacing,10*this.voxelSpacing,0) );
+		this.THREE1dir.push(new THREE.Vector3(1,0,0) );
+		this.THREE1Pos.push(new THREE.Vector3(0,0,0) );
 
 		//path
-		targetPositionMesh.push(startLocations[i]);
-		carriedVoxel.push(null);
+		this.targetPositionMesh.push(this.startLocations[i]);
+		this.carriedVoxel.push(null);
 
-		goHome.push(false);
-		totalNumberofSteps.push(0);
+		this.goHome.push(false);
+		this.totalNumberofSteps.push(0);
 
 		//////////////////////
 
-		steps.push([]);
-		path.push({
+		this.steps.push([]);
+		this.path.push({
 			curve: null,
 			currentPoint: 0,
 			points:[],
 			number:20,
-			delay:1000/speed,
+			delay:1000/this.speed,
 			timeout:0,
-			cHeight:5.0*voxelSpacing,
-			showPath:true,
+			cHeight:5.0*this.voxelSpacing,
+			showPath:this.showPath,
 			normals:[],
 			changeLegs:[],
 			changeRotation:[],
 			normalAdjustments:[]
 		});
-		IK.push([]);
+		this.IK.push([]);
 
 	}
-	//starting positions and pickup stations
-	if(numberOfRobots>1){
-		robotState[1].leg1Pos=new THREE.Vector3((GLOBALS.gridSize-1),(GLOBALS.gridSize-2),0);
-		robotState[1].leg2Pos=new THREE.Vector3((GLOBALS.gridSize-1),(GLOBALS.gridSize-1),0);
-		startLocations[1]=new THREE.Vector3((GLOBALS.gridSize-1)*voxelSpacing,(GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing);
+	// //starting positions and pickup stations
+	// if(numberOfRobots>1){
+	// 	robotState[1].leg1Pos=new THREE.Vector3((GLOBALS.gridSize-1),(GLOBALS.gridSize-2),0);
+	// 	robotState[1].leg2Pos=new THREE.Vector3((GLOBALS.gridSize-1),(GLOBALS.gridSize-1),0);
+	// 	startLocations[1]=new THREE.Vector3((GLOBALS.gridSize-1)*voxelSpacing,(GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing);
 
-	}
-	if(numberOfRobots>2){
-		robotState[2].leg1Pos=new THREE.Vector3((GLOBALS.gridSize-1),1,0);
-		robotState[2].leg2Pos=new THREE.Vector3((GLOBALS.gridSize-1),0,0);
-		startLocations[2]=new THREE.Vector3((GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing,0*voxelSpacing);
+	// }
+	// if(numberOfRobots>2){
+	// 	robotState[2].leg1Pos=new THREE.Vector3((GLOBALS.gridSize-1),1,0);
+	// 	robotState[2].leg2Pos=new THREE.Vector3((GLOBALS.gridSize-1),0,0);
+	// 	startLocations[2]=new THREE.Vector3((GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing,0*voxelSpacing);
 
-	}
-	if(numberOfRobots>3){
-		robotState[3].leg1Pos=new THREE.Vector3(1,GLOBALS.gridSize-1,0);
-		robotState[3].leg2Pos=new THREE.Vector3(0,GLOBALS.gridSize-1,0);
-		startLocations[3]=new THREE.Vector3(0*voxelSpacing,(GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing);
-	}
+	// }
+	// if(numberOfRobots>3){
+	// 	robotState[3].leg1Pos=new THREE.Vector3(1,GLOBALS.gridSize-1,0);
+	// 	robotState[3].leg2Pos=new THREE.Vector3(0,GLOBALS.gridSize-1,0);
+	// 	startLocations[3]=new THREE.Vector3(0*voxelSpacing,(GLOBALS.gridSize-1)*voxelSpacing,0*voxelSpacing);
+	// }
 	
 }
 
-function init() {
-	container = document.getElementById( 'webgl' );
+Assembler.prototype.init=function() {
+	this.declareGlobals();
+	// this.container = document.getElementById( 'webgl' );
 
-	renderer = new THREE.WebGLRenderer({
-		antialias: true, // to get smoother output
-		preserveDrawingBuffer: false, // no screenshot -> faster?
-	  });
-	renderer.setClearColor(0x333333);
+	// renderer = new THREE.WebGLRenderer({
+	// 	antialias: true, // to get smoother output
+	// 	preserveDrawingBuffer: false, // no screenshot -> faster?
+	//   });
+	// renderer.setClearColor(0x333333);
 
-	renderer.setSize(window.innerWidth, window.innerHeight)
-	container.appendChild( renderer.domElement );
+	// renderer.setSize(window.innerWidth, window.innerHeight)
+	// container.appendChild( renderer.domElement );
 
-	scene = new THREE.Scene();
+	// scene = new THREE.Scene();
 
-	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000)
+	// camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000)
 	
-	camera.up.set(0, 0, 0.5);
-  	camera.position.set(75, 75, 75);
-  	scene.add(camera);
+	// camera.up.set(0, 0, 0.5);
+  	// camera.position.set(75, 75, 75);
+  	// scene.add(camera);
 
 	// lights
-	var light = new THREE.AmbientLight(0xaaaaaa);
-	scene.add(light);
-	var light2 = new THREE.DirectionalLight(0xaaaaaa);
-	light2.position.set(1, 1.3, 1).normalize();
-	scene.add(light2);
+	// var light = new THREE.AmbientLight(0xaaaaaa);
+	// scene.add(light);
+	// var light2 = new THREE.DirectionalLight(0xaaaaaa);
+	// light2.position.set(1, 1.3, 1).normalize();
+	// scene.add(light2);
   
-	cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
-	cameraControls.addEventListener('change', () => renderer.render(scene, camera));
+	// cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
+	// cameraControls.addEventListener('change', () => renderer.render(scene, camera));
   
-	function onWindowResize() 
-	{
-		camera.aspect = window.innerWidth / window.innerHeight;
-		camera.updateProjectionMatrix();
+	// function onWindowResize() 
+	// {
+	// 	camera.aspect = window.innerWidth / window.innerHeight;
+	// 	camera.updateProjectionMatrix();
 	
-		renderer.setSize(window.innerWidth, window.innerHeight);
-		renderer.render(scene, camera);
-	}
+	// 	renderer.setSize(window.innerWidth, window.innerHeight);
+	// 	renderer.render(scene, camera);
+	// }
 	
-	window.addEventListener('resize', onWindowResize, false);
+	// window.addEventListener('resize', onWindowResize, false);
 
-	var size = 20;
-	var step = 20;
+	// var size = 20;
+	// var step = 20;
 
-	var gridHelper = new THREE.GridHelper(size, step);
-	gridHelper.rotation.x = Math.PI / 2;
-	scene.add(gridHelper);
+	// var gridHelper = new THREE.GridHelper(size, step);
+	// gridHelper.rotation.x = Math.PI / 2;
+	// scene.add(gridHelper);
 
-	var axisHelper = new THREE.AxesHelper(5);
-	var colors = axisHelper.geometry.attributes.color.array;
+	// var axisHelper = new THREE.AxesHelper(5);
+	// var colors = axisHelper.geometry.attributes.color.array;
 
-	colors.set( [
-		0, 1, 0,    0, 1, 0, // x-axis rgb at origin; rgb at end of segment
-		1, 0, 0,    1, 0, 0, // y-axis
-		0, 0, 1,    0, 0, 1  // z-axis
-	] );
+	// colors.set( [
+	// 	0, 1, 0,    0, 1, 0, // x-axis rgb at origin; rgb at end of segment
+	// 	1, 0, 0,    1, 0, 0, // y-axis
+	// 	0, 0, 1,    0, 0, 1  // z-axis
+	// ] );
 
-	scene.add(axisHelper);
-	animate();
+	// scene.add(axisHelper);
+	// animate();
 
 	////////////////////load voxel/////////////////////////
-	loadVoxel();
-}
-
-function animate() {
-	requestAnimationFrame( animate );
-	render();
-}
-
-function render() {
-	renderer.render(scene, camera);
-	
+	this.loadVoxel();
+	//todo load dice????????
 }
 
 ///////////////////////////geometry///////////////////////////////
 //implemented based on https://github.com/glumb/robot-gui
-function THREERobotCall(robotIndex) {
-	THREERobot= function (robotIndex,V_initial, limits, scene) {
-		
-		THREE1[robotIndex] = new THREE.Group();
-
-		var colors = [
-			0xaaaaaa,
-			0xbbbbbb,
-			0xbcbcbc,
-			0xcbcbcb,
-			0xcccccc,
-			0x0,
-		];
-
-		let parentObject = THREE1[robotIndex];
-		robotBones[robotIndex] = [];
-		joints[robotIndex] = [];
-
-		function createCube(x, y, z, w, h, d, min, max, jointNumber) {
-			var thicken = 1;
-		
-			var w_thickened = Math.abs(w) + thicken;
-			var h_thickened = Math.abs(h) + thicken;
-			var d_thickened = Math.abs(d) + thicken;
+Assembler.prototype.THREERobot=function(robotIndex,V_initial, limits,group) {
+	// this.THREERobot= function (robotIndex,V_initial, limits, scene) {
 		
-			var material = new THREE.MeshLambertMaterial({ color: colors[jointNumber],});
-			var geometry = new THREE.CubeGeometry(w_thickened, h_thickened, d_thickened);
-			var mesh = new THREE.Mesh(geometry, material);
+	this.THREE1[robotIndex] = new THREE.Group();
 
-			
-		
-			mesh.position.set(w / 2, h / 2, d / 2);
-			var group = new THREE.Object3D();
-			group.position.set(x, y, z);
-			group.add(mesh);
-		
-			// min = min / 180 * Math.PI
-			// max = max / 180 * Math.PI
-		
-			var jointGeo1 = new THREE.CylinderGeometry(0.8, 0.8, 0.8 * 2, 32, 32, false, -min, 2 * Math.PI - max + min)
-			var jointGeoMax = new THREE.CylinderGeometry(0.8, 0.8, 0.8 * 2, 32, 32, false, -max, max)
-			var jointGeoMin = new THREE.CylinderGeometry(0.8, 0.8, 0.8 * 2, 32, 32, false, 0, -min)
-			var jointMesh1 = new THREE.Mesh(jointGeo1, new THREE.MeshBasicMaterial({
-			color: 0x000000,//0xffbb00,
-			}));
-			var jointMeshMax = new THREE.Mesh(jointGeoMax, new THREE.MeshBasicMaterial({
-			color: 0x000000,//0x009900,
-			}));
-			var jointMeshMin = new THREE.Mesh(jointGeoMin, new THREE.MeshBasicMaterial({
-			color: 0x000000,//0xdd2200,
-			}));
-		
-			var joint = new THREE.Group();
-			joint.add(jointMeshMax, jointMeshMin, jointMesh1);
-		
-			joints[robotIndex].push(joint);
-		
-			switch (jointNumber) {
-				// case 0:
-				//   joint.rotation.x = Math.PI / 2
-				//   break
-				// case 1:
-				//   joint.rotation.z = Math.PI / 2 //changed
-				// //   joint.rotation.y = Math.PI / 2 //changed
-				//   break
-				// case 2:
-				// 	joint.rotation.z = Math.PI / 2 //changed
-				// 	// joint.rotation.y = Math.PI / 2 //changed
-				//   	// joint.rotation.x = Math.PI / 2
-				//   break
-				// case 3:
-				// 		joint.rotation.z = Math.PI / 2 //changed
-				//   // joint.rotation.y = Math.PI
-				//   break
-				// case 4:
-				// 		joint.rotation.x = Math.PI / 2 //changed
-				//   // joint.rotation.x = Math.PI / 2
-				// //   joint.rotation.y = Math.PI / 2
-				//   break
-				// case 5:
-				//   joint.rotation.x = Math.PI / 2
-				//   group.rotation.y = Math.PI / 2
-				// break;
-				case 0:
-				  joint.rotation.x = Math.PI / 2
-				  break
-				case 1:
-				  // joint.rotation.x = Math.PI / 2
-				  break
-				case 2:
-				  // joint.rotation.x = Math.PI / 2
-				  break
-				case 3:
-				  joint.rotation.z = Math.PI / 2
-				  // joint.rotation.y = Math.PI
-				  break
-				case 4:
-				  // joint.rotation.x = Math.PI / 2
-				  joint.rotation.y = Math.PI / 2
-				  break
-				case 5:
-				  joint.rotation.x = Math.PI / 2
-				  group.rotation.y = Math.PI / 2
-				break;
-			}
-		
-			group.add(joint);
-			return group;
-		}
+	
 
-		let x = 0,
-		y = 0,
-		z = 0;
+	let parentObject = this.THREE1[robotIndex];
+	this.robotBones[robotIndex] = [];
+	this.joints[robotIndex] = [];
 
-		V_initial.push([0, 0, 0]) // add a 6th pseudo link for 6 axis
+	let x = 0,
+	y = 0,
+	z = 0;
 
-		for (let i = 0; i < V_initial.length; i++) {
-			var link = V_initial[i];
+	V_initial.push([0, 0, 0]) // add a 6th pseudo link for 6 axis	
 
-			
-		
-			var linkGeo = createCube(x, y, z, link[0], link[1], link[2], limits[i][0], limits[i][1], i);
-			x = link[0];
-			y = link[1];
-			z = link[2];
+	for (let i = 0; i < V_initial.length; i++) {
+		var link = V_initial[i];
 
-			if(i==4)//todo change later
-			{
+		var linkGeo = this.createCube(robotIndex,x, y, z, link[0], link[1], link[2], limits[i][0], limits[i][1], i);
+		x = link[0];
+		y = link[1];
+		z = link[2];
 
-				carriedVoxel[robotIndex]=voxel.clone();
-				carriedVoxel[robotIndex].position.x=x+2.5*voxelSpacing;
-				carriedVoxel[robotIndex].position.y=y;
-				carriedVoxel[robotIndex].position.z=z ;
-				linkGeo.add( carriedVoxel[robotIndex] );
-			}
+		if(i==4)//todo change later
+		{
 
-			parentObject.add(linkGeo);
-			parentObject = linkGeo;
-			robotBones[robotIndex].push(linkGeo);
+			this.carriedVoxel[robotIndex]=this.voxel.clone();
+			this.carriedVoxel[robotIndex].position.x=x+2.5*this.voxelSpacing;
+			this.carriedVoxel[robotIndex].position.y=y;
+			this.carriedVoxel[robotIndex].position.z=z ;
+			linkGeo.add( this.carriedVoxel[robotIndex] );
 		}
-	
-		scene.add(THREE1[robotIndex]);
-	};
 
-	THREERobot.prototype = {
-		setAngles(robotIndex,angles1) {
-		// robotBones[robotIndex][0].rotation.z = angles[robotIndex][0];
-		// robotBones[robotIndex][1].rotation.y = angles[robotIndex][1];
-		// robotBones[robotIndex][2].rotation.y = angles[robotIndex][2];
-		// robotBones[robotIndex][3].rotation.y = angles[robotIndex][3];
-		// robotBones[robotIndex][4].rotation.z = angles[robotIndex][4];
-		// robotBones[robotIndex][5].rotation.y = angles[robotIndex][5];
-
-		robotBones[robotIndex][0].rotation.z = angles[robotIndex][0];
-		robotBones[robotIndex][1].rotation.y = angles[robotIndex][1];
-		robotBones[robotIndex][2].rotation.y = angles[robotIndex][2];
-		robotBones[robotIndex][3].rotation.x = angles[robotIndex][3];
-		robotBones[robotIndex][4].rotation.y = angles[robotIndex][4];
-		robotBones[robotIndex][5].rotation.z = angles[robotIndex][5];
-
-		// robotBones[robotIndex][0].rotation.z =angles[robotIndex][0];
-		// robotBones[robotIndex][1].rotation.x =angles[robotIndex][1];
-		// robotBones[robotIndex][2].rotation.x =angles[robotIndex][2];
-		// robotBones[robotIndex][3].rotation.x =angles[robotIndex][3];
-		// robotBones[robotIndex][4].rotation.z =angles[robotIndex][4];
-		// robotBones[robotIndex][5].rotation.z =angles[robotIndex][5];
-		},
+		parentObject.add(linkGeo);
+		parentObject = linkGeo;
+		this.robotBones[robotIndex].push(linkGeo);
+	}
+
+	group.add(this.THREE1[robotIndex]);
+	group.rotation.x=-Math.PI/2.0;
+
+}
+Assembler.prototype.createCube=function(robotIndex,x, y, z, w, h, d, min, max, jointNumber) {
+	var colors = [
+		0xaaaaaa,
+		0xbbbbbb,
+		0xbcbcbc,
+		0xcbcbcb,
+		0xcccccc,
+		0x0,
+	];
+	var thicken = 1*this.voxelSpacing;
+
+	var w_thickened = Math.abs(w) + thicken;
+	var h_thickened = Math.abs(h) + thicken;
+	var d_thickened = Math.abs(d) + thicken;
+
+	var material = new THREE.MeshLambertMaterial({ color: colors[jointNumber],});
+	var geometry = new THREE.CubeGeometry(w_thickened, h_thickened, d_thickened);
+	var mesh = new THREE.Mesh(geometry, material);
+
 	
-		setAngle(robotIndex,index, angle) {
-		angles[robotIndex][index] = angle;
-		this.setAngles(robotIndex,angles[robotIndex].slice());
-		},
-	};
+
+	mesh.position.set(w / 2, h / 2, d / 2);
+	var group = new THREE.Object3D();
+	group.position.set(x, y, z);
+	group.add(mesh);
+
+	// min = min / 180 * Math.PI
+	// max = max / 180 * Math.PI
+
+	var jointGeo1 = new THREE.CylinderGeometry(0.8*this.voxelSpacing, 0.8*this.voxelSpacing, 0.8 * 2*this.voxelSpacing, 32, 32, false, -min, 2 * Math.PI - max + min)
+	var jointGeoMax = new THREE.CylinderGeometry(0.8*this.voxelSpacing, 0.8*this.voxelSpacing, 0.8 * 2*this.voxelSpacing, 32, 32, false, -max, max)
+	var jointGeoMin = new THREE.CylinderGeometry(0.8*this.voxelSpacing, 0.8*this.voxelSpacing, 0.8 * 2*this.voxelSpacing, 32, 32, false, 0, -min)
+	var jointMesh1 = new THREE.Mesh(jointGeo1, new THREE.MeshBasicMaterial({
+	color: 0x000000,//0xffbb00,
+	}));
+	var jointMeshMax = new THREE.Mesh(jointGeoMax, new THREE.MeshBasicMaterial({
+	color: 0x000000,//0x009900,
+	}));
+	var jointMeshMin = new THREE.Mesh(jointGeoMin, new THREE.MeshBasicMaterial({
+	color: 0x000000,//0xdd2200,
+	}));
+
+	var joint = new THREE.Group();
+	joint.add(jointMeshMax, jointMeshMin, jointMesh1);
+
+	this.joints[robotIndex].push(joint);
+
+	switch (jointNumber) {
+		case 0:
+			joint.rotation.x = Math.PI / 2
+			break
+		case 1:
+			// joint.rotation.x = Math.PI / 2
+			break
+		case 2:
+			// joint.rotation.x = Math.PI / 2
+			break
+		case 3:
+			joint.rotation.z = Math.PI / 2
+			// joint.rotation.y = Math.PI
+			break
+		case 4:
+			// joint.rotation.x = Math.PI / 2
+			joint.rotation.y = Math.PI / 2
+			break
+		case 5:
+			joint.rotation.x = Math.PI / 2
+			group.rotation.y = Math.PI / 2
+		break;
+	}
+
+	group.add(joint);
+	return group;
+}
+
+Assembler.prototype.setAngles=function(robotIndex){
+	this.robotBones[robotIndex][0].rotation.z = this.angles[robotIndex][0];
+	this.robotBones[robotIndex][1].rotation.y = this.angles[robotIndex][1];
+	this.robotBones[robotIndex][2].rotation.y = this.angles[robotIndex][2];
+	this.robotBones[robotIndex][3].rotation.x = this.angles[robotIndex][3];
+	this.robotBones[robotIndex][4].rotation.y = this.angles[robotIndex][4];
+	this.robotBones[robotIndex][5].rotation.z = this.angles[robotIndex][5];
+
+}
+
+Assembler.prototype.setAngle=function(robotIndex,index, angle){
+	this.angles[robotIndex][index] = angle;
+	this.setAngles(robotIndex);
+
 }
 
 ///////////////////////initialization/////////////////////////////
-function defaultRobot(robotIndex) {
+Assembler.prototype.defaultRobot=function(robotIndex) {
 	localState = {
 		jointOutOfBound: [false, false, false, false, false, false],
 	  };
@@ -443,14 +407,14 @@ function defaultRobot(robotIndex) {
 	shoulder_offset = 0.220941;
 	elbow_offset = -0.1719;
 	
-	var scale=0.01;
+	var scale=0.01*this.voxelSpacing;
 	shoulder_height  =scale* d1;
 	upper_arm_length =scale* -a2;
 	forearm_length   =scale* -a3;
 	wrist_1_length   =scale* d4 - elbow_offset - shoulder_offset;
 	wrist_2_length   =scale* d5;
 	wrist_3_length   =scale* d6;
-	geo = [
+	this.geo = [
 		// [scale*200, 0, scale*50],
 		// [-scale*100, 0, scale*600],
 		// [0, 0, scale*600],
@@ -465,12 +429,12 @@ function defaultRobot(robotIndex) {
 		[scale*200, 0, 0],
 
 	];
-	defaultRobotState[robotIndex]  = {
+	this.defaultRobotState[robotIndex]  = {
 		target: {
 		  position: {
-			x: startLocations[robotIndex].x,
-			y: startLocations[robotIndex].y,
-			z: startLocations[robotIndex].z,
+			x: this.startLocations[robotIndex].x,
+			y: this.startLocations[robotIndex].y,
+			z: this.startLocations[robotIndex].z,
 		  },
 		  rotation: {
 			x: Math.PI,
@@ -506,129 +470,74 @@ function defaultRobot(robotIndex) {
 		configuration: [false, false, false],
 		geometry: {
 		  V0: {
-			x: geo[0][0],
-			y: geo[0][1],
-			z: geo[0][2],
+			x: this.geo[0][0],
+			y: this.geo[0][1],
+			z: this.geo[0][2],
 		  },
 		  V1: {
-			x: geo[1][0],
-			y: geo[1][1],
-			z: geo[1][2],
+			x: this.geo[1][0],
+			y: this.geo[1][1],
+			z: this.geo[1][2],
 		  },
 		  V2: {
-			x: geo[2][0],
-			y: geo[2][1],
-			z: geo[2][2],
+			x: this.geo[2][0],
+			y: this.geo[2][1],
+			z: this.geo[2][2],
 		  },
 		  V3: {
-			x: geo[3][0],
-			y: geo[3][1],
-			z: geo[3][2],
+			x: this.geo[3][0],
+			y: this.geo[3][1],
+			z: this.geo[3][2],
 		  },
 		  V4: {
-			x: geo[4][0],
-			y: geo[4][1],
-			z: geo[4][2],
+			x: this.geo[4][0],
+			y: this.geo[4][1],
+			z: this.geo[4][2],
 		  },
 		},
 	  };
 	  
-	THREESimulationRobot[robotIndex] = new THREE.Group();
-	scene.add(THREESimulationRobot[robotIndex]);
+	this.THREESimulationRobot[robotIndex] = new THREE.Group();
+	this.scene.add(this.THREESimulationRobot[robotIndex]);
 
 	  ////////////////
 
 	//////////////////
 	
-	updateIK(robotIndex);
+	this.updateIK(robotIndex);
 
-	console.log(defaultRobotState[robotIndex].angles);
 
-	var geometry = Object.values(defaultRobotState[robotIndex].geometry).map((val, i, array) => [val.x, val.y, val.z]);
-    var jointLimits = Object.values(defaultRobotState[robotIndex].jointLimits);
+	var geometry = Object.values(this.defaultRobotState[robotIndex].geometry).map((val, i, array) => [val.x, val.y, val.z]);
+    var jointLimits = Object.values(this.defaultRobotState[robotIndex].jointLimits);
 
-	VisualRobot[robotIndex] = new THREERobot(robotIndex,geometry, jointLimits, THREESimulationRobot[robotIndex]);
+	this.THREERobot(robotIndex,geometry, jointLimits, this.THREESimulationRobot[robotIndex]);
 	// var angles = Object.values(defaultRobotState.angles);
 	// VisualRobot[robotIndex].setAngles(angles);
 	var restAngle=60;
 	// VisualRobot[robotIndex].setAngle(0,restAngle/ 180 * Math.PI);
-	VisualRobot[robotIndex].setAngle(robotIndex,1,restAngle*RAD_TO_DEG);
-	VisualRobot[robotIndex].setAngle(robotIndex,2,restAngle*RAD_TO_DEG);
-	VisualRobot[robotIndex].setAngle(robotIndex,3,restAngle*RAD_TO_DEG);
-	VisualRobot[robotIndex].setAngle(robotIndex,4,restAngle*RAD_TO_DEG);
-	VisualRobot[robotIndex].setAngle(robotIndex,5,restAngle*RAD_TO_DEG);
-
-	// var target= new THREE.Vector3(guiControls[robotIndex].x,guiControls[robotIndex].y,guiControls[robotIndex].z);
-	// updateGUI();
+	this.setAngle(robotIndex,1,restAngle*this.RAD_TO_DEG);
+	this.setAngle(robotIndex,2,restAngle*this.RAD_TO_DEG);
+	this.setAngle(robotIndex,3,restAngle*this.RAD_TO_DEG);
+	this.setAngle(robotIndex,4,restAngle*this.RAD_TO_DEG);
+	this.setAngle(robotIndex,5,restAngle*this.RAD_TO_DEG);
 	
-	targetControl(robotIndex);
-	THREE1[robotIndex].position.x=0;
-	THREE1[robotIndex].position.y=0;
-	THREE1[robotIndex].position.z=0;
-	updateAngles(robotIndex);
+	this.targetControl(robotIndex);
+	this.THREE1[robotIndex].position.x=this.robotLocations[robotIndex].x;
+	this.THREE1[robotIndex].position.y=this.robotLocations[robotIndex].y;
+	this.THREE1[robotIndex].position.z=this.robotLocations[robotIndex].z;
 
-}
+	this.updateAngles(robotIndex);
 
-function updateRobotGeometry1(robotIndex){
-	geo = [
-		[2.5 + 2.3, 0, 7.3],
-		[0, 0, 13.0],
-		[1, 0, 2],
-		[12.6, 0, 0],
-		[3.6, 0, 0],
-		[0, 0, 0],
-	];
-	
-	defaultRobotState[robotIndex].geometry ={
-		V0: {
-			x: geo[0][0],
-			y: geo[0][1],
-			z: geo[0][2],
-		},
-		V1: {
-			x: geo[1][0],
-			y: geo[1][1],
-			z: geo[1][2],
-		},
-		V2: {
-			x: geo[2][0],
-			y: geo[2][1],
-			z: geo[2][2],
-		},
-		V3: {
-			x: geo[3][0],
-			y: geo[3][1],
-			z: geo[3][2],
-		},
-		V4: {
-			x: geo[4][0],
-			y: geo[4][1],
-			z: geo[4][2],
-		},
-	};
-
-	updateIK(robotIndex);
-
-	var geometry = Object.values(defaultRobotState[robotIndex].geometry).map((val, i, array) => [val.x, val.y, val.z]);
-    var jointLimits = Object.values(defaultRobotState[robotIndex].jointLimits);
-
-	while (THREESimulationRobot[robotIndex].children.length) {
-		THREESimulationRobot[robotIndex].remove(THREESimulationRobot[robotIndex].children[0]);
-	}
-
-	VisualRobot[robotIndex] = new THREERobot(robotIndex,geometry, jointLimits, THREESimulationRobot[robotIndex]);
-	
-	updateAngles(robotIndex);
 }
 
-
 ////////////////////////////////GUI///////////////////////////////
-function setupGUI(robotIndex){
+Assembler.prototype.setupGUI=function(robotIndex){
 	//Parameters that can be modified.
-	guiControls[robotIndex] = new function() {
-		this.x = startLocations[robotIndex].x;
-		this.y = startLocations[robotIndex].y;
-		this.z = startLocations[robotIndex].z;
+	var start=this.startLocations[robotIndex];
+	this.guiControls[robotIndex] = new function() {
+		this.x = start.x;
+		this.y = start.y;
+		this.z = start.z;
 		this.j1 = 0.0;
 		this.j2 = 0.0;
 		this.j3 = 0.0;
@@ -642,68 +551,41 @@ function setupGUI(robotIndex){
 		this.step=0;
 	};
 
-	var gui = new dat.GUI();
-
-	geometryGui = gui.addFolder('Robot Geometry');
-	geometryParams=[];
-	geometryParams.push(geometryGui.add(guiControls[robotIndex], 'leg1', 1.00, 10.0).step(0.1).listen());
-	geometryParams.push(geometryGui.add(guiControls[robotIndex], 'leg2', 1.00, 10.0).step(0.1).listen());
-	geometryParams.push(geometryGui.add(guiControls[robotIndex], 'offset', 1.00, 10.0).step(0.1).listen());
-
-	jointsGui = gui.addFolder('Robot Joints');
-	jointsParams=[];
-	jointsParams.push(jointsGui.add(guiControls[robotIndex], 'j1', 0.00, 360.0).step(0.5).listen());
-	jointsParams.push(jointsGui.add(guiControls[robotIndex], 'j2', 0.00, 360.0).step(0.5).listen());
-	jointsParams.push(jointsGui.add(guiControls[robotIndex], 'j3', 0.00, 360.0).step(0.5).listen());
-	jointsParams.push(jointsGui.add(guiControls[robotIndex], 'j4', 0.00, 360.0).step(0.5).listen());
-	jointsParams.push(jointsGui.add(guiControls[robotIndex], 'j5', 0.00, 360.0).step(0.5).listen());
-
-	targetGui = gui.addFolder('Target');
-	targetParams=[];
-	targetParams.push(targetGui.add(guiControls[robotIndex], 'x', -10.0, 10.0).step(0.1).listen());
-	targetParams.push(targetGui.add(guiControls[robotIndex], 'y', -10.0, 10.0).step(0.1).listen());
-	targetParams.push(targetGui.add(guiControls[robotIndex], 'z', -10.0, 10.0).step(0.1).listen());
-
-	var endtarget= gui.addFolder('Target End');
-	end=endtarget.add(guiControls[robotIndex],'targetEnd',["end 1","end 2"]).listen();
-
-	currentStep=gui.add(guiControls[robotIndex], 'step', 0, path[robotIndex].number).step(1.0).listen();
-	
 	
 }
 
-function updateGUI(robotIndex){
+Assembler.prototype.updateGUI=function(robotIndex){
 	for (var i=0;i<targetParams.length;i++) {
 		targetParams[i].onChange(function(value) {
-			updateAngles(robotIndex);
-			control[robotIndex].position.x = guiControls[robotIndex].x;
-			control[robotIndex].position.y = guiControls[robotIndex].y;
-			control[robotIndex].position.z = guiControls[robotIndex].z;
-			target[robotIndex].position.x = guiControls[robotIndex].x;
-			target[robotIndex].position.y = guiControls[robotIndex].y;
-			target[robotIndex].position.z = guiControls[robotIndex].z;
+			this.updateAngles(robotIndex);
+			this.control[robotIndex].position.x =this.guiControls[robotIndex].x;
+			this.control[robotIndex].position.y =this.guiControls[robotIndex].y;
+			this.control[robotIndex].position.z =this.guiControls[robotIndex].z;
+			this.target[robotIndex].position.x = this.guiControls[robotIndex].x;
+			this.target[robotIndex].position.y = this.guiControls[robotIndex].y;
+			this.target[robotIndex].position.z = this.guiControls[robotIndex].z;
 		});
 	}
 
 	for (var i=0;i<jointsParams.length;i++) {
-		jointsParams[i].onChange(function(value) {
-			if(leg[robotIndex]==1)
+		this.jointsParams[i].onChange(function(value) {
+			if(this.leg[robotIndex]==1)
 			{
-				VisualRobot[robotIndex].setAngle(robotIndex,0,guiControls[robotIndex].j1*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,1,guiControls[robotIndex].j2*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,2,guiControls[robotIndex].j3*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,3,guiControls[robotIndex].j4*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,4,guiControls[robotIndex].j5*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,5,guiControls[robotIndex].j6*DEG_TO_RAD);
+				this.setAngle(robotIndex,0,this.guiControls[robotIndex].j1*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,1,this.guiControls[robotIndex].j2*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,2,this.guiControls[robotIndex].j3*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,3,this.guiControls[robotIndex].j4*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,4,this.guiControls[robotIndex].j5*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,5,this.guiControls[robotIndex].j6*this.DEG_TO_RAD);
 
 			}else
 			{
-				VisualRobot[robotIndex].setAngle(robotIndex,5,guiControls[robotIndex].j1*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,4,guiControls[robotIndex].j2*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,3,guiControls[robotIndex].j3*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,2,guiControls[robotIndex].j4*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,1,guiControls[robotIndex].j5*DEG_TO_RAD);
-				VisualRobot[robotIndex].setAngle(robotIndex,0,guiControls[robotIndex].j6*DEG_TO_RAD);
+				this.setAngle(robotIndex,5,this.guiControls[robotIndex].j1*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,4,this.guiControls[robotIndex].j2*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,3,this.guiControls[robotIndex].j3*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,2,this.guiControls[robotIndex].j4*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,1,this.guiControls[robotIndex].j5*this.DEG_TO_RAD);
+				this.setAngle(robotIndex,0,this.guiControls[robotIndex].j6*this.DEG_TO_RAD);
 				
 
 			}
@@ -713,42 +595,43 @@ function updateGUI(robotIndex){
 	}
 
 	for (var i=0 ;i<geometryParams.length ;i++) {
-		geometryParams[i].onChange(function(value) {
-			updateRobotGeometry(robotIndex);
+		this.geometryParams[i].onChange(function(value) {
+			this.updateRobotGeometry(robotIndex);
 		});
 	}
 
-	currentStep.onChange(function(value) {
-		step(robotIndex,guiControls[robotIndex].step);
+	this.currentStep.onChange(function(value) {
+		this.step(robotIndex,guiControls[robotIndex].step);
 	});
 
-	end.onChange(function(value) {
+	this.end.onChange(function(value) {
 		
-		changeEnd(robotIndex);
+		this.changeEnd(robotIndex);
 	});
 
 
 }
 
 ///////////////////////Inverse Kinematics////////////////////////
-function updateIK(robotIndex) {
-	const geo = Object.values(defaultRobotState[robotIndex].geometry).map((val, i, array) => [val.x, val.y, val.z])
+Assembler.prototype.updateIK=function(robotIndex) {
+	const geo = Object.values(this.defaultRobotState[robotIndex].geometry).map((val, i, array) => [val.x, val.y, val.z])
 	// todo not optimal, since IK is a sideeffect
-	IK[robotIndex] = new InverseKinematic(geo);
+	this.IK[robotIndex] = new InverseKinematic(geo);
 }
 
-function updateAngles(robotIndex){
+Assembler.prototype.updateAngles=function(robotIndex){
 	// const calculateAngles = (jointLimits, position, rotation, configuration) => {
 	const angles = []
-	IK[robotIndex].calculateAngles(
-		guiControls[robotIndex].x,
-		guiControls[robotIndex].y,
-		guiControls[robotIndex].z +2.5*voxelSpacing,
-		defaultRobotState[robotIndex].target.rotation.x,
-		defaultRobotState[robotIndex].target.rotation.y,
-		defaultRobotState[robotIndex].target.rotation.z,
+	
+	this.IK[robotIndex].calculateAngles(
+		this.guiControls[robotIndex].x,
+		-this.guiControls[robotIndex].z,
+		this.guiControls[robotIndex].y +2.5*this.voxelSpacing,
+		this.defaultRobotState[robotIndex].target.rotation.x,
+		this.defaultRobotState[robotIndex].target.rotation.y,
+		this.defaultRobotState[robotIndex].target.rotation.z,
 		angles,
-		defaultRobotState[robotIndex].target.configuration
+		this.defaultRobotState[robotIndex].target.configuration
 	)
 	outOfBounds = [false, false, false, false, false, false]
 	// let i = 0
@@ -758,31 +641,34 @@ function updateAngles(robotIndex){
 	// 	}
 	// 	i++
 	// }
-	VisualRobot[robotIndex].setAngle(robotIndex,0,angles[0]);
-	VisualRobot[robotIndex].setAngle(robotIndex,1,angles[1]);
-	VisualRobot[robotIndex].setAngle(robotIndex,2,angles[2]);
-	VisualRobot[robotIndex].setAngle(robotIndex,3,angles[3]);
-	VisualRobot[robotIndex].setAngle(robotIndex,4,angles[4]);
-	VisualRobot[robotIndex].setAngle(robotIndex,5,angles[5]);
-
-	angles[robotIndex][0]=angles[0];
-	angles[robotIndex][1]=angles[1];
-	angles[robotIndex][2]=angles[2];
-	angles[robotIndex][3]=angles[3];
-	angles[robotIndex][4]=angles[4];
-	angles[robotIndex][5]=angles[5];
-
-	guiControls[robotIndex].j1=angles[robotIndex][0]*RAD_TO_DEG;
-	guiControls[robotIndex].j2=angles[robotIndex][1]*RAD_TO_DEG;
-	guiControls[robotIndex].j3=angles[robotIndex][2]*RAD_TO_DEG;
-	guiControls[robotIndex].j4=angles[robotIndex][3]*RAD_TO_DEG;
-	guiControls[robotIndex].j5=angles[robotIndex][4]*RAD_TO_DEG;
-	guiControls[robotIndex].j6=angles[robotIndex][5]*RAD_TO_DEG;
+	this.setAngle(robotIndex,0,angles[0]);
+	this.setAngle(robotIndex,1,angles[1]);
+	this.setAngle(robotIndex,2,angles[2]);
+	this.setAngle(robotIndex,3,angles[3]);
+	this.setAngle(robotIndex,4,angles[4]);
+	this.setAngle(robotIndex,5,angles[5]);
+
+	
+	// this.angles[robotIndex][0]=angles[0];
+	// this.angles[robotIndex][1]=angles[1];
+	// this.angles[robotIndex][2]=angles[2];
+	// this.angles[robotIndex][3]=angles[3];
+	// this.angles[robotIndex][4]=angles[4];
+	// this.angles[robotIndex][5]=angles[5];
+
+	// this.guiControls[robotIndex].j1=this.angles[robotIndex][0]*this.RAD_TO_DEG;
+	// this.guiControls[robotIndex].j2=this.angles[robotIndex][1]*this.RAD_TO_DEG;
+	// this.guiControls[robotIndex].j3=this.angles[robotIndex][2]*this.RAD_TO_DEG;
+	// this.guiControls[robotIndex].j4=this.angles[robotIndex][3]*this.RAD_TO_DEG;
+	// this.guiControls[robotIndex].j5=this.angles[robotIndex][4]*this.RAD_TO_DEG;
+	// this.guiControls[robotIndex].j6=this.angles[robotIndex][5]*this.RAD_TO_DEG;
+
+	// this.control[robotIndex].size=0.5;
 	return angles;
 
 }
 
-function getNormalAdjustment(robotIndex,n,vnormal,forward){//n is normal degree
+Assembler.prototype.getNormalAdjustment=function(robotIndex,n,vnormal,forward){//n is normal degree
 
 	var result=new THREE.Vector3(0,0,0);
 	if(n==180)
@@ -790,9 +676,9 @@ function getNormalAdjustment(robotIndex,n,vnormal,forward){//n is normal degree
 		return result;
 	}
 	var theta=Math.abs(180-n);
-	var base=2*Math.sin(theta/2*DEG_TO_RAD)*guiControls[robotIndex].offset;
-	var x= Math.sin(((180-theta)/2)*DEG_TO_RAD)*base;
-	var y= Math.cos(((180-theta)/2)*DEG_TO_RAD)*base;
+	var base=2*Math.sin(theta/2*this.DEG_TO_RAD)*this.guiControls[robotIndex].offset;
+	var x= Math.sin(((180-theta)/2)*this.DEG_TO_RAD)*base;
+	var y= Math.cos(((180-theta)/2)*this.DEG_TO_RAD)*base;
 
 	result= vnormal.clone().multiplyScalar(-y);
 
@@ -811,41 +697,44 @@ function getNormalAdjustment(robotIndex,n,vnormal,forward){//n is normal degree
 }
 
 ////////////////////////Taget Control////////////////////////////
-function targetControl(robotIndex){
-	target[robotIndex] = new THREE.Group();
-	scene.add(target[robotIndex]);
-
-	control[robotIndex] = new THREE.TransformControls(camera, renderer.domElement);
-	target[robotIndex].position.x = guiControls[robotIndex].x;
-	target[robotIndex].position.y = guiControls[robotIndex].y;
-	target[robotIndex].position.z = guiControls[robotIndex].z;
-
-	control[robotIndex].size=0.5;
-	control[robotIndex].space = "local";
-	target[robotIndex].rotation.y=180*DEG_TO_RAD;
-	target[robotIndex].rotation.z=90*DEG_TO_RAD;
+Assembler.prototype.targetControl=function(robotIndex){
+	this.target[robotIndex] = new THREE.Group();
+	this.scene.add(this.target[robotIndex]);
+
+	this.control[robotIndex] = new THREE.TransformControls(this.camera, this.renderer.domElement);
+	this.target[robotIndex].position.x = this.guiControls[robotIndex].x;
+	this.target[robotIndex].position.y = this.guiControls[robotIndex].y;
+	this.target[robotIndex].position.z = this.guiControls[robotIndex].z;
+
+	this.control[robotIndex].size=0.5;
+	this.control[robotIndex].space = "local";
+	// this.target[robotIndex].rotation.y=180*this.DEG_TO_RAD;
+	// this.target[robotIndex].rotation.z=90*this.DEG_TO_RAD;
+	this.target[robotIndex].rotation.x=-90*this.DEG_TO_RAD;
+	this.target[robotIndex].rotation.z=-90*this.DEG_TO_RAD;
 	// control[robotIndex].setSpace( control[robotIndex].space === "local" ? "world" : "local" );
-	control[robotIndex].addEventListener('change', () => {
-		guiControls[robotIndex].x= target[robotIndex].position.x;
-		guiControls[robotIndex].y= target[robotIndex].position.y;
-		guiControls[robotIndex].z= target[robotIndex].position.z;
-		defaultRobotState[robotIndex].target.position.x=target[robotIndex].position.x;
-		defaultRobotState[robotIndex].target.position.y=target[robotIndex].position.y;
-		defaultRobotState[robotIndex].target.position.z=target[robotIndex].position.z;
+	this.control[robotIndex].addEventListener('change', () => {
+		this.control[robotIndex].size=0.5;
+		this.guiControls[robotIndex].x= this.target[robotIndex].position.x;
+		this.guiControls[robotIndex].y= this.target[robotIndex].position.y;
+		this.guiControls[robotIndex].z= this.target[robotIndex].position.z;
+		this.defaultRobotState[robotIndex].target.position.x=this.target[robotIndex].position.x;
+		this.defaultRobotState[robotIndex].target.position.y=this.target[robotIndex].position.y;
+		this.defaultRobotState[robotIndex].target.position.z=this.target[robotIndex].position.z;
 		// defaultRobotState[robotIndex].target.rotation.x
 		// defaultRobotState[robotIndex].target.rotation.y
 		// defaultRobotState[robotIndex].target.rotation.z
-		// console.log("here")
-		updateAngles(robotIndex);
+
+		this.updateAngles(robotIndex);
 	});
-	control[robotIndex].attach(target[robotIndex]);
+	this.control[robotIndex].attach(this.target[robotIndex]);
 
-	scene.add(control[robotIndex]);
+	this.scene.add(this.control[robotIndex]);
 	// control[robotIndex].visible = false;
 }
 
-function updateTarget(robotIndex){
-	console.log("heree")
+Assembler.prototype.updateTarget=function(robotIndex){
+	// console.log("hereee")
 	var tempPosition=new THREE.Vector3(0,0,0);
 
 	parent.updateMatrixWorld();
@@ -855,48 +744,48 @@ function updateTarget(robotIndex){
 
 
 
-	var object=THREE1[robotIndex].children[0].children[2].children[2].children[2].children[2];
+	var object=this.THREE1[robotIndex].children[0].children[2].children[2].children[2].children[2];
 	object.updateMatrixWorld();
 	var vector = object.geometry.vertices[i].clone();
 	vector.applyMatrix4( object.matrixWorld );
 
-	tempPosition.x=THREE1[robotIndex].parent.parent.children[0].position.x;
-	tempPosition.y=THREE1[robotIndex].parent.parent.children[0].position.y;
-	tempPosition.z=THREE1[robotIndex].parent.parent.children[0].position.z;
-	guiControls[robotIndex].x=tempPosition.x;
-	guiControls[robotIndex].y=tempPosition.y;
-	guiControls[robotIndex].z=tempPosition.z;
+	tempPosition.x=this.THREE1[robotIndex].parent.parent.children[0].position.x;
+	tempPosition.y=this.THREE1[robotIndex].parent.parent.children[0].position.y;
+	tempPosition.z=this.THREE1[robotIndex].parent.parent.children[0].position.z;
+	this.guiControls[robotIndex].x=tempPosition.x;
+	this.guiControls[robotIndex].y=tempPosition.y;
+	this.guiControls[robotIndex].z=tempPosition.z;
 
-	control[robotIndex].position.x = guiControls[robotIndex].x;
-	control[robotIndex].position.y = guiControls[robotIndex].y;
-	control[robotIndex].position.z = guiControls[robotIndex].z;
+	this.control[robotIndex].position.x = this.guiControls[robotIndex].x;
+	this.control[robotIndex].position.y = this.guiControls[robotIndex].y;
+	this.control[robotIndex].position.z = this.guiControls[robotIndex].z;
 
-	target[robotIndex].position.x = guiControls[robotIndex].x;
-	target[robotIndex].position.y = guiControls[robotIndex].y;
-	target[robotIndex].position.z = guiControls[robotIndex].z;
+	this.target[robotIndex].position.x = this.guiControls[robotIndex].x;
+	this.target[robotIndex].position.y = this.guiControls[robotIndex].y;
+	this.target[robotIndex].position.z = this.guiControls[robotIndex].z;
 }
 
 ///////////////////////assembly/////////
-function assemble(robotIndex){
-	resetPath(robotIndex);
-	builtShape();
-	generatePoints(robotIndex);
+Assembler.prototype.assemble=function(robotIndex){
+	this.resetPath(robotIndex);
+	this.buildShape();
+	this.generatePoints(robotIndex);
 	
 	// steps[robotIndex]=[startLocations[robotIndex],new THREE.Vector3(10*voxelSpacing,0*voxelSpacing,0)];
 	// showTargetPosition(robotIndex,minIndex,true);
 	
-	for(var i=0;i<steps[robotIndex].length;i++){
+	for(var i=0;i<this.steps[robotIndex].length;i++){
 		if(i%2!=0){
-			moveRobot(robotIndex,true,steps[robotIndex][i]);
+			this.moveRobot(robotIndex,true,this.steps[robotIndex][i]);
 		}else{
-			moveRobot(robotIndex,false,steps[robotIndex][i+1]);
+			this.moveRobot(robotIndex,false,this.steps[robotIndex][i+1]);
 		}
 		
 	}
 
 }
 
-function createPath(robotIndex,start,end){
+Assembler.prototype.createPath=function(robotIndex,start,end){
 	var snormal=new THREE.Vector3(0,0,1);
 	var enormal=new THREE.Vector3(0,0,1);
 	var robotUp=new THREE.Vector3(0,0,1);
@@ -915,7 +804,7 @@ function createPath(robotIndex,start,end){
 
 	var temp1=new THREE.Vector3(0,0,0);
 	var temp2=new THREE.Vector3(0,0,0);
-	nor.multiplyScalar(path[robotIndex].cHeight);
+	nor.multiplyScalar(this.path[robotIndex].cHeight);
 
 
 	temp1.addVectors(start,dir.multiplyScalar(1/3));
@@ -926,16 +815,16 @@ function createPath(robotIndex,start,end){
 	p3.addVectors(nor,temp2);
 
 	//create bezier curve
-	path[robotIndex].curve= new THREE.CubicBezierCurve3 (
+	this.path[robotIndex].curve= new THREE.CubicBezierCurve3 (
 		p1,
 		p2,
 		p3,
 		p4
 	);
-	dividePath(robotIndex,snormal.clone(),enormal.clone());
+	this.dividePath(robotIndex,snormal.clone(),enormal.clone());
 }
 
-function dividePath(robotIndex,snormal,enormal,robotUp,robotLocation){
+Assembler.prototype.dividePath=function(robotIndex,snormal,enormal,robotUp,robotLocation){
 
 	var snormal=new THREE.Vector3(0,0,1);
 	var enormal=new THREE.Vector3(0,0,1);
@@ -943,8 +832,8 @@ function dividePath(robotIndex,snormal,enormal,robotUp,robotLocation){
 	var robotLocation=new THREE.Vector3(0,0,1);
 	
 	//points
-	var d=1/path[robotIndex].number;
-	var tempPoints=path[robotIndex].curve.getSpacedPoints(path[robotIndex].number);
+	var d=1/this.path[robotIndex].number;
+	var tempPoints=this.path[robotIndex].curve.getSpacedPoints(this.path[robotIndex].number);
 
 	var forward=new THREE.Vector3(0,0,0);
 	var tempV=tempPoints[0].clone().sub(robotLocation);
@@ -961,7 +850,7 @@ function dividePath(robotIndex,snormal,enormal,robotUp,robotLocation){
 	forward.normalize();
 
 	var p1=tempPoints[0];
-	var p2=tempPoints[path[robotIndex].number-1];
+	var p2=tempPoints[this.path[robotIndex].number-1];
 	var diff=p2.clone().sub(p1);
 	diff.multiply(snormal);
 	
@@ -1000,434 +889,109 @@ function dividePath(robotIndex,snormal,enormal,robotUp,robotLocation){
 			}
 		}
 	}
-	var dn=(vnormal2-vnormal1)/path[robotIndex].number;
+	var dn=(vnormal2-vnormal1)/this.path[robotIndex].number;
 
 	
 
-	for (var i=0;i<=path[robotIndex].number;i++)
+	for (var i=0;i<=this.path[robotIndex].number;i++)
 	{
-		path[robotIndex].normals.push(vnormal1+i*dn);
-		path[robotIndex].normalAdjustments.push(getNormalAdjustment(robotIndex,vnormal1+i*dn,robotUp,forward));
-		path[robotIndex].points.push(tempPoints[i].clone());
+		this.path[robotIndex].normals.push(vnormal1+i*dn);
+		this.path[robotIndex].normalAdjustments.push(this.getNormalAdjustment(robotIndex,vnormal1+i*dn,robotUp,forward));
+		this.path[robotIndex].points.push(tempPoints[i].clone());
 		
 		
-		if(path[robotIndex].showPath)
+		if(this.path[robotIndex].showPath)
 		{
-			var material = new THREE.MeshLambertMaterial({ color:0xff7171,});
+			var material = new THREE.MeshLambertMaterial({ color:0xff7171,});//todo change to colors set
 			var geometry = new THREE.SphereGeometry(0.05, 0.05, 0.05);
 			var mesh = new THREE.Mesh(geometry, material);
 			mesh.position.x=tempPoints[i].x;
 			mesh.position.y=tempPoints[i].y;
 			mesh.position.z=tempPoints[i].z;
-			scene.add(mesh);
+			this.scene.add(mesh);
 		}
 	}
 	
 }
 
-function moveRobot(robotIndex,leaveVoxel,voxelLoc){
-	var ps= path[robotIndex].points.slice();
+Assembler.prototype.moveRobot=function(robotIndex,leaveVoxel,voxelLoc){
+	var ps= this.path[robotIndex].points.slice();
 	if(leaveVoxel){
-		setTimeout(function(){ buildVoxelAt(voxelLoc);showTargetPosition(robotIndex,voxelLoc,false) }, path[robotIndex].timeout);
+		setTimeout(function(){ this.buildVoxelAt(voxelLoc);this.showTargetPosition(robotIndex,voxelLoc,false) }, this.path[robotIndex].timeout);
 		
 
 	}else{
-		setTimeout(function(){showTargetPosition(robotIndex,voxelLoc,true) }, path[robotIndex].timeout);
+		setTimeout(function(){this.showTargetPosition(robotIndex,voxelLoc,true) }, this.path[robotIndex].timeout);
 
 	}
-	for(var i=0;i<=path[robotIndex].number;i++)
+	for(var i=0;i<=this.path[robotIndex].number;i++)
 	{
-		setTimeout(function(){ move(robotIndex); }, path[robotIndex].timeout+=path[robotIndex].delay);
+		setTimeout(function(){ this.move(robotIndex); }, this.path[robotIndex].timeout+=this.path[robotIndex].delay);
 	}
 	
 	
 	
 }
 
-function move(robotIndex){
-	guiControls[robotIndex].x=path[robotIndex].points[path[robotIndex].currentPoint].x;
-	guiControls[robotIndex].y=path[robotIndex].points[path[robotIndex].currentPoint].y;
-	guiControls[robotIndex].z=path[robotIndex].points[path[robotIndex].currentPoint].z;
-	voxelNormal[robotIndex]=path[robotIndex].normals[path[robotIndex].currentPoint];
-	normalAdjustmentVector[robotIndex]=path[robotIndex].normalAdjustments[path[robotIndex].currentPoint];
+Assembler.prototype.move=function(robotIndex){
+	this.guiControls[robotIndex].x=this.path[robotIndex].points[this.path[robotIndex].currentPoint].x;
+	this.guiControls[robotIndex].y=this.path[robotIndex].points[this.path[robotIndex].currentPoint].y;
+	this.guiControls[robotIndex].z=this.path[robotIndex].points[this.path[robotIndex].currentPoint].z;
+	this.voxelNormal[robotIndex]=this.path[robotIndex].normals[this.path[robotIndex].currentPoint];
+	this.normalAdjustmentVector[robotIndex]=this.path[robotIndex].normalAdjustments[this.path[robotIndex].currentPoint];
 
-	updateAngles(robotIndex);
+	this.updateAngles(robotIndex);
 
-	control[robotIndex].position.x = guiControls[robotIndex].x;
-	control[robotIndex].position.y = guiControls[robotIndex].y;
-	control[robotIndex].position.z = guiControls[robotIndex].z;
+	this.control[robotIndex].position.x = this.guiControls[robotIndex].x;
+	this.control[robotIndex].position.y = this.guiControls[robotIndex].y;
+	this.control[robotIndex].position.z = this.guiControls[robotIndex].z;
 
-	target[robotIndex].position.x = guiControls[robotIndex].x;
-	target[robotIndex].position.y = guiControls[robotIndex].y;
-	target[robotIndex].position.z = guiControls[robotIndex].z;
-	
-	path[robotIndex].currentPoint++;
-	if(path[robotIndex].currentPoint==path[robotIndex].points.length)
-	{
-		// if(goHome[robotIndex])
-		// {
-			
-		// 	buildVoxelAt(robotState[robotIndex].leg1Pos.clone().multiplyScalar(voxelSpacing));
-		// 	//go Home
-		// 	// console.log("robotIndex:"+robotIndex+" s2s");
-		// 	startMovement(robotIndex,true);
-
-		// }else
-		// {
-		// 	//go to new Voxel
-		// 	// console.log("robotIndex:"+robotIndex+" s2s");
-		// 	startMovement(robotIndex,false);
-		// }
-	}
+	this.target[robotIndex].position.x = this.guiControls[robotIndex].x;
+	this.target[robotIndex].position.y = this.guiControls[robotIndex].y;
+	this.target[robotIndex].position.z = this.guiControls[robotIndex].z;
 	
+	this.path[robotIndex].currentPoint++;
 }
 
-function builtShape(){
-	for(var i=0;i<GLOBALS.gridSize;i++)
+Assembler.prototype.buildShape=function(){
+	for(var i=0;i<this.gridSize;i++)
 	{
 		var t=[];
-		grid.push(t)
-		for(var j=0;j<GLOBALS.gridSize;j++)
+		this.grid.push(t)
+		for(var j=0;j<this.gridSize;j++)
 		{
 			var tt=[];
-			grid[i].push(tt);
-			for(var k=0;k<GLOBALS.gridSize;k++)
+			this.grid[i].push(tt);
+			for(var k=0;k<this.gridSize;k++)
 			{
-				grid[i][j].push(false);
+				this.grid[i][j].push(false);
 			}	
 		}
 	}
-	for(var i=GLOBALS.gridSize/2.0;i<GLOBALS.gridSize;i++)
+	for(var i=this.gridSize/2.0;i<this.gridSize;i++)
 	{
-		grid[i][0][0]=true;
-		locations.push(new THREE.Vector3(i*voxelSpacing,0,0)); //TODO CHANGE LATER BASED ON NUMBER OF ROBOTS
+		this.grid[i][0][0]=true;
+		this.locations.push(new THREE.Vector3(i*this.voxelSpacing,0,0)); //TODO CHANGE LATER BASED ON NUMBER OF ROBOTS
 	}
 
 }
 
-function generatePoints(robotIndex){
-	for(var i=0;i<locations.length;i++){
-		steps[robotIndex].push(startLocations[robotIndex]);
-		steps[robotIndex].push(locations[i]);
+Assembler.prototype.generatePoints=function(robotIndex){
+	for(var i=0;i<this.locations.length;i++){
+		this.steps[robotIndex].push(this.startLocations[robotIndex]);
+		this.steps[robotIndex].push(this.locations[i]);
 		
 	}
-	console.log(steps[robotIndex])
-	for(var i=0;i<steps[robotIndex].length-1;i++){
-		createPath(robotIndex,steps[robotIndex][i],steps[robotIndex][i+1]);
-	}
-	
-
-}
-
-
-///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-////////////////////Change Fixed End////////////////////////////
-function changeEnd(robotIndex){
-	//TODO: send fix end and unfix end to code
-	if(leg[robotIndex]==2)
-	{
-		//later output package
-		// console.log("unfix leg 1, fix leg 2");
-		leg[robotIndex]=1;
-		guiControls[robotIndex].targetEnd="end 1";
-	}else
-	{
-		//later output package
-		// console.log("unfix leg 2, fix leg 1");
-		leg[robotIndex]=2;
-		guiControls[robotIndex].targetEnd="end 2";
-	}
-
-	var tempPosition=new THREE.Vector3(0,0,0);
-	tempPosition.x=THREE1[robotIndex].position.x;
-	tempPosition.y=THREE1[robotIndex].position.y;
-	tempPosition.z=THREE1[robotIndex].position.z;
-
-	THREE1[robotIndex].position.x=target[robotIndex].position.x;
-	THREE1[robotIndex].position.y=target[robotIndex].position.y;
-	THREE1[robotIndex].position.z=target[robotIndex].position.z;
-	
-
-	guiControls[robotIndex].x=tempPosition.x;
-	guiControls[robotIndex].y=tempPosition.y;
-	guiControls[robotIndex].z=tempPosition.z;
-
-	control[robotIndex].position.x = guiControls[robotIndex].x;
-	control[robotIndex].position.y = guiControls[robotIndex].y;
-	control[robotIndex].position.z = guiControls[robotIndex].z;
-	target[robotIndex].position.x = guiControls[robotIndex].x;
-	target[robotIndex].position.y = guiControls[robotIndex].y;
-	target[robotIndex].position.z = guiControls[robotIndex].z;
-
-	updateAngles(robotIndex);
-
-}
-
-function rotateRobot(robotIndex,dir){
-	
-	var newRotation=getRotation(dir).clone();
-	THREE1[robotIndex].rotation.x=newRotation.x;
-	THREE1[robotIndex].rotation.y=newRotation.y;
-	THREE1[robotIndex].rotation.z=newRotation.z;
-
-	voxelNormal[robotIndex]=path[robotIndex].normals[path[robotIndex].currentPoint+1];
-	normalAdjustmentVector[robotIndex]=path[robotIndex].normalAdjustments[path[robotIndex].currentPoint+1];
-	updateAngles(robotIndex);
-}
-
-function getRotation(dir){
-	var tempRot=new THREE.Vector3();
-	if(dir.equals(new THREE.Vector3(0,0,1)) )
-	{
-		tempRot=new THREE.Vector3(0,0,0);
-	}
-	else if (dir.equals( new THREE.Vector3(0,0,-1)))
-	{
-		tempRot=new THREE.Vector3(180*DEG_TO_RAD,0,0);
-	}
-	else if (dir.equals( new THREE.Vector3(0,-1,0)))
-	{
-		tempRot=new THREE.Vector3(90*DEG_TO_RAD,0,0);
+	console.log(this.steps[robotIndex])
+	for(var i=0;i<this.steps[robotIndex].length-1;i++){
+		this.createPath(robotIndex,this.steps[robotIndex][i],this.steps[robotIndex][i+1]);
 	}
-	else if (dir.equals( new THREE.Vector3(0,1,0)))
-	{
-		tempRot=new THREE.Vector3(-90*DEG_TO_RAD,0,0);
-	}
-	else if (dir.equals(new THREE.Vector3(-1,0,0)))
-	{
-		tempRot=new THREE.Vector3(0,-90*DEG_TO_RAD,0);
-	}
-	else if (dir.equals( new THREE.Vector3(1,0,0)))
-	{
-		tempRot=new THREE.Vector3(0,90*DEG_TO_RAD,0);
-	}
-	return tempRot;
-}
-
-////////////////////////////////Path////////////////////////////
-
-
-
-function _createPath(robotIndex,start,end,snormal,enormal,robotUp,robotLocation){
-	var p1=start.clone();
-	p1.add(snormal.clone().multiplyScalar(1));
-	var p2=new THREE.Vector3(0,0,0);
-	var p3=new THREE.Vector3(0,0,0);
-	var p4=end.clone();
-	p4.add(enormal.clone().multiplyScalar(1));
-
-	var nor = snormal.clone();
-	nor.add(enormal);
-	nor.normalize();
-
-	var dir=end.clone().sub(start);
-
-	var temp1=new THREE.Vector3(0,0,0);
-	var temp2=new THREE.Vector3(0,0,0);
-	nor.multiplyScalar(path[robotIndex].cHeight);
-
-
-	temp1.addVectors(start,dir.multiplyScalar(1/3));
-	temp2.addVectors(start,dir.multiplyScalar(2));
-
-
-	p2.addVectors(nor,temp1);
-	p3.addVectors(nor,temp2);
-
-	//create bezier curve
-	path[robotIndex].curve= new THREE.CubicBezierCurve3 (
-		p1,
-		p2,
-		p3,
-		p4
-	);
-	_dividePath(robotIndex,snormal.clone(),enormal.clone(),robotUp,robotLocation);
-}
-
-function _dividePath(robotIndex,snormal,enormal,robotUp,robotLocation){
 	
-	//points
-	var d=1/path[robotIndex].number;
-	var tempPoints=path[robotIndex].curve.getSpacedPoints(path[robotIndex].number);
 
-	var forward=new THREE.Vector3(0,0,0);
-	var tempV=tempPoints[0].clone().sub(robotLocation);
-	if(tempV.x!=0 && robotUp.x==0)
-	{
-		forward.x=tempV.x;
-	}else if(tempV.y!=0 && robotUp.y==0)
-	{
-		forward.y=tempV.y;
-	}else if(tempV.z!=0 && robotUp.z==0)
-	{
-		forward.z=tempV.z;
-	}
-	forward.normalize();
-
-	var p1=tempPoints[0];
-	var p2=tempPoints[path[robotIndex].number-1];
-	var diff=p2.clone().sub(p1);
-	diff.multiply(snormal);
-	
-	//normals
-	var vnormal1=180;
-	var vnormal2=180;
-	if(!snormal.equals(enormal))
-	{
-
-		if(diff.x>0||diff.y>0||diff.z>0)
-		{
-			if(robotUp.equals(snormal))
-			{
-				vnormal1=180;
-				vnormal2=90;
-
-			}else
-			{
-				vnormal2=180;
-				vnormal1=90;
-
-			}
-				
-		}else if(diff.x<0||diff.y<0||diff.z<0)
-		{
-			if(robotUp.equals(snormal))
-			{
-				vnormal1=180;
-				vnormal2=180+90;
-
-			}else
-			{
-				vnormal2=180;
-				vnormal1=180+90;
-
-			}
-		}
-	}
-	var dn=(vnormal2-vnormal1)/path[robotIndex].number;
-
-	
-
-	for (var i=0;i<=path[robotIndex].number;i++)
-	{
-		path[robotIndex].normals.push(vnormal1+i*dn);
-		path[robotIndex].normalAdjustments.push(getNormalAdjustment(robotIndex,vnormal1+i*dn,robotUp,forward));
-		path[robotIndex].points.push(tempPoints[i].clone());
-		
-		
-		if(path[robotIndex].showPath)
-		{
-			var material = new THREE.MeshLambertMaterial({ color:0xff7171,});
-			var geometry = new THREE.SphereGeometry(0.05, 0.05, 0.05);
-			var mesh = new THREE.Mesh(geometry, material);
-			mesh.position.x=tempPoints[i].x;
-			mesh.position.y=tempPoints[i].y;
-			mesh.position.z=tempPoints[i].z;
-			scene.add(mesh);
-		}
-	}
-	
 }
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-function _BilleStep(robotIndex,stepLeg1,stepLeg2,legsNormal){
-	var changeLegBefore=false;
-	var leg1Pos=new THREE.Vector3(0,0,0);
-	var leg2Pos=new THREE.Vector3(0,0,0);
-
-	var pos1=new THREE.Vector3(0,0,0);
-	var pos2=new THREE.Vector3(0,0,0);
-
-	if(path[robotIndex].points.length==0)
-	{	
-		pos1.copy(target[robotIndex].position);
-		pos2.copy(THREE1[robotIndex].position);
-	}else{
-		pos1.copy(path[robotIndex].points[path[robotIndex].points.length-1-1-path[robotIndex].number]);
-		pos2.copy(path[robotIndex].points[path[robotIndex].points.length-1]);
-		
-	}
-
-	//check starting leg based on distance to target 
-	if(pos2.distanceTo(stepLeg1)<pos1.distanceTo(stepLeg1))
-	{
-		changeLegBefore=true;
-		var temp=new THREE.Vector3(0,0,0);
-		temp.copy(pos1);
-		pos1.copy(pos2);
-		pos2.copy(temp);
-	}
-
-	leg1Pos.copy(pos1);
-	leg2Pos.copy(pos2);
-
-	// var robotUp=THREE1dir[robotIndex].clone();
-	var robotUp=THREE1dir[robotIndex].clone();
-	var robotLocation=THREE1Pos[robotIndex].clone();
-	
-	_createPath(robotIndex,leg1Pos,stepLeg1,THREE1dir[robotIndex],legsNormal,robotUp,robotLocation);
-
-	robotUp=legsNormal;
-	robotLocation=stepLeg1;
-	_createPath(robotIndex,leg2Pos,stepLeg2,THREE1dir[robotIndex],legsNormal,robotUp,robotLocation);
-
-	//update previous locations/pos
-	THREE1dir[robotIndex] = legsNormal.clone();
-	THREE1Pos[robotIndex]=stepLeg2.clone();
-
-	return [changeLegBefore,legsNormal];
-}
-
-function moveLeg(robotIndex){
-	var ps= path[robotIndex].points.slice();
-
-	for(var i=0;i<=path[robotIndex].number;i++)
-	{
-		setTimeout(function(){ move(robotIndex); }, path[robotIndex].timeout+=path[robotIndex].delay);
-	}
-	setTimeout(function(){ changeEnd(robotIndex); }, path[robotIndex].timeout);
-	
-}
-
-function _move(robotIndex){
-	guiControls[robotIndex].x=path[robotIndex].points[path[robotIndex].currentPoint].x;
-	guiControls[robotIndex].y=path[robotIndex].points[path[robotIndex].currentPoint].y;
-	guiControls[robotIndex].z=path[robotIndex].points[path[robotIndex].currentPoint].z;
-	voxelNormal[robotIndex]=path[robotIndex].normals[path[robotIndex].currentPoint];
-	normalAdjustmentVector[robotIndex]=path[robotIndex].normalAdjustments[path[robotIndex].currentPoint];
-	updateAngles(robotIndex);
-
-	control[robotIndex].position.x = guiControls[robotIndex].x;
-	control[robotIndex].position.y = guiControls[robotIndex].y;
-	control[robotIndex].position.z = guiControls[robotIndex].z;
-
-	target[robotIndex].position.x = guiControls[robotIndex].x;
-	target[robotIndex].position.y = guiControls[robotIndex].y;
-	target[robotIndex].position.z = guiControls[robotIndex].z;
-	
-	path[robotIndex].currentPoint++;
-	if(path[robotIndex].currentPoint==path[robotIndex].points.length)
-	{
-		if(goHome[robotIndex])
-		{
-			
-			buildVoxelAt(robotState[robotIndex].leg1Pos.clone().multiplyScalar(voxelSpacing));
-			//go Home
-			// console.log("robotIndex:"+robotIndex+" s2s");
-			startMovement(robotIndex,true);
-
-		}else
-		{
-			//go to new Voxel
-			// console.log("robotIndex:"+robotIndex+" s2s");
-			startMovement(robotIndex,false);
-		}
-	}
-	
-}
-
-function getDirVec(direction){
+Assembler.prototype.getDirVec=function(direction){
 	var vec = new THREE.Vector3(0,0,0);
 	
 	switch(direction)
@@ -1449,262 +1013,20 @@ function getDirVec(direction){
 
 }
 
-function resetPath(robotIndex){
+Assembler.prototype.resetPath=function(robotIndex){
 	//////////////////////
-	steps[robotIndex]=[];
-	path[robotIndex].curve=null;
-	path[robotIndex].points=[];
-	path[robotIndex].normals=[];
-	path[robotIndex].changeRotation=[];
-	path[robotIndex].normalAdjustments=[];
-	path[robotIndex].currentPoint=0;
-	path[robotIndex].timeout=0;
-}
-
-//////////////////////////commands stack////////////////////////////
-function _generatePoints(robotIndex){
-	for (var i=0; i<steps[robotIndex].length ; i++)
-	{
-		var s=_BilleStep(robotIndex,steps[robotIndex][i][0],steps[robotIndex][i][1],steps[robotIndex][i][2]);
-		path[robotIndex].changeLegs.push(s[0]);
-		path[robotIndex].changeRotation.push(s[1]);
-	}
-}
-
-function step(robotIndex,i){
-	totalNumberofSteps[robotIndex]++;
-	// console.log("robot "+robotIndex +":"+totalNumberofSteps[robotIndex]);
-	// console.log(totalNumberofSteps);
-	if(path[robotIndex].changeLegs[i])
-	{
-		setTimeout(function(){ changeEnd(robotIndex); }, path[robotIndex].timeout);
-	}
-
-	moveLeg(robotIndex);//leg1
-
-	//rotate bill-e
-	if(i>0 && !path[robotIndex].changeRotation[i].equals(path[robotIndex].changeRotation[i-1]))
-	{
-		
-		setTimeout(function(){ rotateRobot(robotIndex,path[robotIndex].changeRotation[parseInt((path[robotIndex].currentPoint-path[robotIndex].number)/path[robotIndex].number/2)]); 
-		}, path[robotIndex].timeout);
-	}
-
-	moveLeg(robotIndex);//leg2
-
-}
-
-function startMovement(robotIndex,home){
-    // console.log("robot:"+robotIndex+" home:"+home);
-	
-	if(!home)
-	{
-		resetPath(robotIndex);
-		voxelBuilder(robotIndex,robotState[robotIndex].leg1Pos, robotState[robotIndex].leg2Pos, robotState[robotIndex].up,robotState[robotIndex].forward); 
-		generatePoints(robotIndex);
-
-		
-		if(steps[robotIndex].length>0)
-		{
-			for(var i=0;i<steps[robotIndex].length;i++)
-			{
-				step(robotIndex,i);
-			}
-			goHome[robotIndex]=true;
-		}
-
-
-
-		//update z and rank
-		if(robotState[robotIndex].Z>globalZ)
-		{
-			globalZ=robotState[robotIndex].Z;
-			globalRank=robotState[robotIndex].rank;
-		}else if(robotState[robotIndex].Z<globalZ)
-		{
-			robotState[robotIndex].Z=globalZ;
-			robotState[robotIndex].rank=globalRank;
-		}else
-		{
-			if(robotState[robotIndex].rank>globalRank)
-			{
-				globalRank=robotState[robotIndex].rank;
-			}else if(robotState[robotIndex].rank<globalRank)
-			{
-				robotState[robotIndex].rank=globalRank;
-			}
-		}
-		
-
-		if(voxelSlices[robotState[robotIndex].Z].length>0)
-		{
-			if(voxelSlicesCount[robotState[robotIndex].Z][robotState[robotIndex].rank] <voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank].length-1)
-			{
-				voxelSlicesCount[robotState[robotIndex].Z][robotState[robotIndex].rank]++;	
-				// console.log("robot:"+robotIndex+" f"+" home:"+home);
-				if(!goHome[robotIndex])
-				{
-					startMovement(robotIndex,true);
-				}
-			}
-			else
-			{
-				if(robotState[robotIndex].rank<voxelSlicesCount[robotState[robotIndex].Z].length-1)
-				{
-					robotState[robotIndex].rank++;
-					// globalRank++;
-					// console.log("robot:"+robotIndex+" ff"+" home:"+home);
-					if(!goHome[robotIndex])
-					{
-						startMovement(robotIndex,true);
-					}
-				}
-				else
-				{
-					if(robotState[robotIndex].Z<voxelSlicesCount.length-1)
-					{
-						robotState[robotIndex].Z++;
-						robotState[robotIndex].rank=0;
-
-						// globalZ++;
-						// globalRank=0;
-
-						// console.log("robot:"+robotIndex+" fff"+" home:"+home);
-						if(!goHome[robotIndex])
-						{
-							startMovement(robotIndex,true);
-						}
-						
-					}else
-					{
-						console.log("DONEEE!!!");
-
-					}
-				}
-			}
-		}
-		else if(robotState[robotIndex].Z<voxelSlices.length)
-		{
-			// console.log("robot:"+robotIndex+" fffff"+" home:"+home);
-			robotState[robotIndex].Z++;
-			robotState[robotIndex].rank=0;
-			
-			// globalZ++;
-			// globalRank=0;
-			// console.log("ss");
-			startMovement(robotIndex,false);
-		}
-
-	}
-	else
-	{
-		resetPath(robotIndex);
-		reloadVoxel(robotIndex,robotState[robotIndex].leg1Pos, robotState[robotIndex].leg2Pos, robotState[robotIndex].up,robotState[robotIndex].forward);
-		generatePoints(robotIndex);
-
-		for(var i=0;i<steps[robotIndex].length;i++)
-		{
-			step(robotIndex,i);
-		}
-		goHome[robotIndex]=false;
-
-
-		if(steps[robotIndex].length==0)
-		{
-			// console.log("nn st")
-			startMovement(robotIndex,false);
-		}
-
-	}
-				
-}
-
-function reloadVoxel(robotIndex,leg1Pos, leg2Pos, up ,forward){
-	var succeeded;
-
-	showTargetPosition(robotIndex,leg1Pos.clone(),false); 
-
-	state= pathPlan(robotIndex,leg1Pos, leg2Pos, up ,forward,startLocations[robotIndex]);
-
-	robotState[robotIndex].leg1Pos=state[0].clone();
-	robotState[robotIndex].leg2Pos=state[1].clone();
-	robotState[robotIndex].up=state[2].clone();
-	robotState[robotIndex].forward=state[3].clone();
-	succeeded=state[4];
-	
-	if(succeeded)
-	{
-		return [state[0],state[1],state[2],state[3]];
-
-	}else
-	{
-		// console.log("COULDN'T FIND PATH!!!");
-		return false;
-	}
-	 
-
-}
-
-function voxelBuilder(robotIndex,leg1Pos, leg2Pos, up ,forward){
-	
-	var start=leg1Pos.clone();
-	var state;
-	var succeeded;
-	var count=0;
-
-	//get point with minimum distance
-	var min=Infinity;
-	var minIndex= new THREE.Vector3(0,0,0);
-
-
-	if(voxelSlices[robotState[robotIndex].Z].length>0)
-	{
-		
-		for(var i=0;i<voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank].length;i++)
-		{
-			if(!voxelAt(voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank][i].clone().multiplyScalar(1/voxelSpacing)))
-			{
-				
-				if(start.distanceTo(voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank][i])<min)
-				{
-					min=start.distanceTo(voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank][i]);
-					minIndex=voxelSlices[robotState[robotIndex].Z][robotState[robotIndex].rank][i];
-
-				}
-				
-			}
-		}
-
-		grid[minIndex.x/voxelSpacing][minIndex.y/voxelSpacing][minIndex.z/voxelSpacing]=true;
-
-		showTargetPosition(robotIndex,minIndex,true);
-
-		// console.log(minIndex);
-		
-		state= pathPlan(robotIndex,leg1Pos, leg2Pos, up ,forward,minIndex);
-
-		robotState[robotIndex].leg1Pos=state[0].clone();
-		robotState[robotIndex].leg2Pos=state[1].clone();
-		robotState[robotIndex].up=state[2].clone();
-		robotState[robotIndex].forward=state[3].clone();
-		succeeded=state[4];
-
-		if(succeeded)
-		{
-			return [state[0],state[1],state[2],state[3]];
-
-		}else
-		{
-			// console.log("COULDN'T FIND PATH!!!");
-			return false;
-		}
-
-	}
-
+	this.steps[robotIndex]=[];
+	this.path[robotIndex].curve=null;
+	this.path[robotIndex].points=[];
+	this.path[robotIndex].normals=[];
+	this.path[robotIndex].changeRotation=[];
+	this.path[robotIndex].normalAdjustments=[];
+	this.path[robotIndex].currentPoint=0;
+	this.path[robotIndex].timeout=0;
 }
 
 //////////////////////////load Voxels////////////////////////////
-function loadVoxel(){
+Assembler.prototype.loadVoxel=function(){
 	var geometry = new THREE.BufferGeometry();
 	// create a simple square shape. We duplicate the top left and bottom right
 	// vertices because each vertex needs to appear once per triangle.
@@ -1728,32 +1050,32 @@ function loadVoxel(){
 	object.scale.z=0.5/3.0;
 	object.position.x=-15;
 	object.position.y=-15;
-	voxel=object;
+	this.voxel=object;
 }
 
-function frepVoxel(rangeX,rangeY,rangeZ,stringFunction){
+Assembler.prototype.frepVoxel=function(rangeX,rangeY,rangeZ,stringFunction){
 	//build grid
-	for(var i=0;i<GLOBALS.gridSize;i++)
+	for(var i=0;i<this.gridSize;i++)
 	{
 		var t=[];
-		grid.push(t)
-		for(var j=0;j<GLOBALS.gridSize;j++)
+		this.grid.push(t)
+		for(var j=0;j<this.gridSize;j++)
 		{
 			var tt=[];
-			grid[i].push(tt);
-			for(var k=0;k<GLOBALS.gridSize;k++)
+			this.grid[i].push(tt);
+			for(var k=0;k<this.gridSize;k++)
 			{
-				grid[i][j].push(false);
+				this.grid[i][j].push(false);
 			}	
 		}
 	}
 	//build first layer
-	for(var i=0;i<GLOBALS.gridSize;i++)
+	for(var i=0;i<this.gridSize;i++)
 	{
-		for(var j=0;j<GLOBALS.gridSize;j++)
+		for(var j=0;j<this.gridSize;j++)
 		{
-			buildVoxelAt(new THREE.Vector3(i*voxelSpacing,j*voxelSpacing,0));
-			grid[i][j][0]=true;	
+			this.buildVoxelAt(new THREE.Vector3(i*this.voxelSpacing,j*this.voxelSpacing,0));
+			this.grid[i][j][0]=true;	
 		}
 	}
 	
@@ -1819,7 +1141,7 @@ function frepVoxel(rangeX,rangeY,rangeZ,stringFunction){
 
 }
 
-function frep(X,Y,Z){
+Assembler.prototype.frep=function(X,Y,Z){
 	// return (3*3-((X-(5))*(X-(5))+(Y-(5))*(Y-(5))+(Z-(3))*(Z-(3)))); //sphere FIX!!
 	// return Math.min(Math.min(Math.min(Math.min(X-(2),(7)-X),Math.min(Y-(2),(7)-Y)),Math.min(Z-(1),(5)-Z)),-(Math.min(Math.min(Math.min(X-(4),(8)-X),Math.min(Y-(4),(8)-Y)),Math.min(Z-(0),(4)-Z))));
 	// return Math.min(Math.min(Math.min(Math.min(X-(2),(5)-X),Math.min(Y-(2),(5)-Y)),Math.min(Z-(1),(5)-Z)),-(Math.min(Math.min(Math.min(X-(3),(6)-X),Math.min(Y-(3),(6)-Y)),Math.min(Z-(0),(4)-Z))));
@@ -1828,8 +1150,8 @@ function frep(X,Y,Z){
 	return Math.min(Math.min(Math.min(X-(2),((GLOBALS.gridSize-3))-X),Math.min(Y-(2),((GLOBALS.gridSize-3))-Y)),Math.min(Z-(1),((GLOBALS.gridSize-4))-Z)); //CUBE
 }
 
-function buildVoxelAt(loc){
-	var object1=voxel.clone();
+Assembler.prototype.buildVoxelAt=function(loc){
+	var object1=this.voxel.clone();
 	object1.position.x=loc.x;
 	object1.position.y=loc.y;
 	object1.position.z=loc.z+voxelSpacing/2;
@@ -1847,257 +1169,19 @@ function buildVoxelAt(loc){
 	
 
 
-	scene.add( object1 );
+	this.scene.add( object1 );
 }
-
 //////////////////////////path planing///////////////////////////
 
-function pathPlan(robotIndex,leg1Pos, leg2Pos, up ,forward,targetPos){
-	
-	if(voxelAt(targetPos.clone().multiplyScalar(1/voxelSpacing)))
-	{
-		var succeded=false;
-		var p0=findShortestPath(robotIndex,leg1Pos.clone(), leg2Pos.clone(), up.clone(),forward.clone(), targetPos);
-		succeded=p0[4];
-		steps[robotIndex]=steps[robotIndex].concat(p0[5]);
-		return [p0[0] , p0[1] , p0[2] , p0[3] , true];
-		if(!succeded)
-		{
-			// console.log("see path from neighbours");
-			var neighbours=getNeighbours(targetPos);
-			
-			for(var i=0;i<neighbours.length;i++)
-			{	
-				var p=findShortestPath(robotIndex,leg1Pos.clone(), leg2Pos.clone(), up.clone(),forward.clone(),neighbours[i]);
-				succeded=p[4];
-				if(succeded)
-				{
-					var stepsFirst=p[5].slice();
-					var p1=findShortestPath(robotIndex,p[0], p[1], p[2],p[3],targetPos);
-					succeded=p[4];
-					if(succeded)
-					{
-						for(var j=0;j<steps[robotIndex].length;j++)
-						{
-							stepsFirst.push(p1[5][j]);
-						}
-
-						steps[robotIndex]=steps[robotIndex].concat(stepsFirst.slice());
-						return [p[0] , p[1] , p[2] , p[3] , true];
-					}
-				}
-			}
-			return [leg1Pos, leg2Pos, up ,forward , false];
-		}
-
-	}
-	else
-	{
-		// console.log("TARGET VOXEL DOESN'T EXIST!");
-		return [leg1Pos, leg2Pos, up ,forward , false];
-
-	}
-	
-	
-}
-
-function findShortestPath(robotIndex,leg1Pos, leg2Pos, up,forward, targetPos){
-	var stepsTemp=[];
-	var stepsAlternative=[];
-	var orderAlternatives=[[0,1,2],[0,2,1],[1,2,0],[1,0,2],[2,1,0],[2,0,1]];
-	for(var i=0;i<orderAlternatives.length;i++)
-	{
-		stepsAlternative.push(findPath(robotIndex,leg1Pos.clone(), leg2Pos.clone(), up.clone(),forward.clone(), targetPos, orderAlternatives[i]).slice());
-	}
-	stepsAlternative.sort(function(a, b){
-		// ASC  -> a.length - b.length
-		// DESC -> b.length - a.length
-		return a[4].length - b[4].length;
-	});
-	stepsTemp=stepsAlternative[0][4].slice();
-	if(stepsTemp.length>stepsCap)
-	{
-		stepsTemp=[];
-		// console.log("CAN'T FIND ANY PATH TO THIS POINT");
-		return [stepsAlternative[0][0],stepsAlternative[0][1],stepsAlternative[0][2],stepsAlternative[0][3],false,stepsTemp];
-	}else
-	{
-		return [stepsAlternative[0][0],stepsAlternative[0][1],stepsAlternative[0][2],stepsAlternative[0][3],true,stepsTemp];
-	}
-}
-
-function findPath(robotIndex,leg1Pos, leg2Pos, up, forward, targetPos, order){
-	var logg=false;
-	if (logg) console.log(order);
-	var stepsTemp=[];
-	// leg1Pos.multiplyScalar(1/voxelSpacing);
-	// leg2Pos.multiplyScalar(1/voxelSpacing);
-	var difference=getDifference(leg1Pos, targetPos);
-	var forwardAlt=new THREE.Vector3(0,0,0);
-	var pos=leg1Pos.clone();
-	
-
-	while(difference[0]!=0||difference[1]!=0||difference[2]!=0)
-	{
-		for(var count=0;count<3;count++)
-		{
-			var i= order[count];
-			var startingLeg1Pos=leg1Pos.clone();
-			var startingLeg2Pos=leg2Pos.clone();
-			var exit=false;
-			var previousDifference=Math.pow(10, 1000);//infinity
-			
-			if(i==0)
-			{
-				forwardAlt=new THREE.Vector3(-difference[0],0,0);
-				forwardAlt.normalize();
-				if(up.x==0)
-				{
-					forward=forwardAlt.clone();
-				}
-			}else if(i==1)
-			{
-				forwardAlt=new THREE.Vector3(0,-difference[1],0);
-				forwardAlt.normalize();
-				if(up.y==0)
-				{
-					forward=forwardAlt.clone();
-				}
-			}else if(i==2)
-			{
-				forwardAlt=new THREE.Vector3(0,0,-difference[2]);
-				forwardAlt.normalize();
-				if(up.z==0)
-				{
-					forward=forwardAlt.clone();
-				}
-			}
-
-			while (Math.abs(difference[i])>0 && !exit)
-			{
-				
-				if(voxelAt(pos.clone().add(forward.clone().add(up))))
-				{
-					if( voxelAt( pos.clone().add( forward.clone().add(up.clone().add(up)) )))
-					{
-						//step there //rotate convex
-						if (logg) console.log("rotate convex");
-						leg1Pos=pos.clone().add( forward.clone().add(up.clone().add(up)));
-						leg2Pos=pos.clone().add(forward.clone().add(up));
-						var temp=up.clone();
-						up= new THREE.Vector3(0,0,0).sub(forward);
-						forward=temp.clone();
-						stepsTemp.push([leg1Pos.clone().multiplyScalar(voxelSpacing),leg2Pos.clone().multiplyScalar(voxelSpacing),up]);
-						difference=getDifference(leg1Pos, targetPos);
-						pos=leg1Pos.clone();
-					}
-					else //if pos+forward+up+up empty 
-					{
-						//step there //step up
-						if (logg) console.log("step up");
-						leg2Pos=leg1Pos.clone();
-						leg1Pos=pos.clone().add(forward.clone().add(up));
-						stepsTemp.push([leg1Pos.clone().multiplyScalar(voxelSpacing),leg2Pos.clone().multiplyScalar(voxelSpacing),up]);
-						difference=getDifference(leg1Pos, targetPos);
-						pos=leg1Pos.clone();
-					}
-				}
-				else //if(pos +foward +up) empty
-				{
-					if (voxelAt(pos.clone().add(forward.clone())))
-					{
-						//step there //step forward
-						if (logg) console.log("step forward");
-						leg2Pos=leg1Pos.clone();
-						leg1Pos=pos.clone().add(forward.clone());
-						stepsTemp.push([leg1Pos.clone().multiplyScalar(voxelSpacing),leg2Pos.clone().multiplyScalar(voxelSpacing),up]);
-						difference=getDifference(leg1Pos, targetPos);
-						pos=leg1Pos.clone();
-					}
-					else //if pos+forward empty
-					{
-						if(voxelAt(pos.clone().add(forward.clone().sub(up))))
-						{
-							//step there //step down
-							if (logg) console.log("step down");
-							leg2Pos=leg1Pos.clone();
-							leg1Pos=pos.clone().add(forward.clone().sub(up));
-							stepsTemp.push([leg1Pos.clone().multiplyScalar(voxelSpacing),leg2Pos.clone().multiplyScalar(voxelSpacing),up]);
-							difference=getDifference(leg1Pos, targetPos);
-							pos=leg1Pos.clone();
-						}
-						else if (voxelAt(pos.clone().sub(up))) //pos-up full
-						{
-							if (logg) console.log("rotate concave");
-							leg2Pos=leg1Pos.clone();
-							leg1Pos=pos.clone().sub(up);
-							var temp=up.clone();
-							up= forward.clone();
-							forward=new THREE.Vector3(0,0,0).sub(temp);
-							stepsTemp.push([leg1Pos.clone().multiplyScalar(voxelSpacing),leg2Pos.clone().multiplyScalar(voxelSpacing),up]);
-							difference=getDifference(leg1Pos, targetPos);
-							pos=leg1Pos.clone();
-						}
-						else 
-						{
-							if (logg) console.log("fail");
-							exit=true;
-						}
-					}
-				}
-
-				if( previousDifference<0 &&difference[i]<=0 )
-				{
-					
-					if(Math.abs(previousDifference)<Math.abs(difference[i]))
-					{
-						exit=true;
-						if (logg) console.log("exit");
-					}
-
-				}
-				else
-				{
-					if(previousDifference<Math.abs(difference[i]))
-					{
-						exit=true;
-						if (logg) console.log("exit");
-					}
-
-				}
-				previousDifference=difference[i];
-				if(stepsTemp.length>stepsCap)//cap number of steps in case of failuer // change later based on complexity of the model
-				{
-					exit=true;
-					if (logg) console.log("Too many steps,choose another alternative");
-				}	
-
-			}
-
-			
-		}
-		if(stepsTemp.length>stepsCap)//cap number of steps in case of failuer // change later based on complexity of the model
-		{
-			difference[0]=0;
-			difference[1]=0;
-			difference[2]=0;
-			if (logg) console.log("Too many steps,choose another alternative");
-		}	
-
-	}
-	return [leg1Pos, leg2Pos, up,forward,stepsTemp];
-
-}
-
-function voxelAt(location){
-	if(location.x<0||location.y<0||location.z<0||location.x>=GLOBALS.gridSize||location.y>=GLOBALS.gridSize||location.z>=GLOBALS.gridSize)
+Assembler.prototype.voxelAt=function(location){
+	if(location.x<0||location.y<0||location.z<0||location.x>=this.gridSize||location.y>=this.gridSize||location.z>=this.gridSize)
 	{
 		return false;
 	}
-	return grid[location.x][location.y][location.z];
+	return this.grid[location.x][location.y][location.z];
 }
 
-function getDifference(location, targetPos){
+Assembler.prototype.getDifference=function(location, targetPos){
 	var diff=[];
 	diff.push(location.x-targetPos.x/voxelSpacing);//0
 	diff.push(location.y-targetPos.y/voxelSpacing);//1
@@ -2105,7 +1189,7 @@ function getDifference(location, targetPos){
 	return diff.slice();
 }
 
-function getNeighbours( targetPos){
+Assembler.prototype.getNeighbours=function( targetPos){
 	var n=[];
 	var t=targetPos.clone().multiplyScalar(1/voxelSpacing);
 	// for(var i=-1;i<2;i++)
@@ -2154,70 +1238,42 @@ function getNeighbours( targetPos){
 	}
 	return n;
 }
-
 //////////////////////////utilities////////////////////////////
-function ClosestPointOnLine(s ,d ,vPoint ){
-	var tempvPoint=new THREE.Vector3(0,0,0);
-	tempvPoint.copy(vPoint);
-	var tempD=new THREE.Vector3(0,0,0);
-	tempD.copy(d);
-	var temps=new THREE.Vector3(0,0,0);
-	temps.copy(d);
-
 
-	var vVector1 = tempvPoint.sub(temps) ;
-	
-	var vVector2 = tempD.normalize();
-
-	var t = vVector2.dot( vVector1);
-
-	if (t <= 0)
-	{
-		return s;
-	}
-	
-	var vVector3 = vVector2.multiplyScalar(t) ;
-
-	var vClosestPoint = temps.add(vVector3);
-
-	return vClosestPoint;
-}
-
-function buildHelperMeshes(robotIndex){
+Assembler.prototype.buildHelperMeshes=function(robotIndex){
 	var material = new THREE.MeshLambertMaterial({ color:0xff7171,});
 	var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
-	targetPositionMesh[robotIndex] = new THREE.Mesh(geometry, material);
-	targetPositionMesh[robotIndex].scale.x=0.8;
-	targetPositionMesh[robotIndex].scale.y=0.8;
-	targetPositionMesh[robotIndex].scale.z=0.8;
-	scene.add(targetPositionMesh[robotIndex]);
+	this.targetPositionMesh[robotIndex] = new THREE.Mesh(geometry, material);
+	this.targetPositionMesh[robotIndex].scale.x=0.8;
+	this.targetPositionMesh[robotIndex].scale.y=0.8;
+	this.targetPositionMesh[robotIndex].scale.z=0.8;
+	this.scene.add(this.targetPositionMesh[robotIndex]);
 
-	for (var count=0; count<startLocations.length;count++)
+	for (var count=0; count<this.numberOfRobots;count++)
 	{
-		geometry = new THREE.BoxGeometry(voxelSpacing*1.1, voxelSpacing*1.1, voxelSpacing*1.1);
+		geometry = new THREE.BoxGeometry(this.voxelSpacing*1.1, this.voxelSpacing*1.1, this.voxelSpacing*1.1);
 		mesh = new THREE.Mesh(geometry, material);
-		mesh.position.x=startLocations[count].x;
-		mesh.position.y=startLocations[count].y;
-		mesh.position.z=startLocations[count].z;
-		scene.add(mesh);
+		mesh.position.x=this.startLocations[count].x;
+		mesh.position.y=this.startLocations[count].y;
+		mesh.position.z=this.startLocations[count].z;
+		this.scene.add(mesh);
 	}
 
 }
-
-function showTargetPosition(robotIndex,targetPos,show){
+Assembler.prototype.showTargetPosition=function(robotIndex,targetPos,show){
 	if(show)
 	{
 		
-		targetPositionMesh[robotIndex].position.x=targetPos.x;
-		targetPositionMesh[robotIndex].position.y=targetPos.y;
-		targetPositionMesh[robotIndex].position.z=targetPos.z+voxelSpacing/2;
-		carriedVoxel[robotIndex].visible=true;
-		targetPositionMesh[robotIndex].visible=true;
+		this.targetPositionMesh[robotIndex].position.x=targetPos.x;
+		this.targetPositionMesh[robotIndex].position.y=targetPos.y;
+		this.targetPositionMesh[robotIndex].position.z=targetPos.z+this.voxelSpacing/2;
+		this.carriedVoxel[robotIndex].visible=true;
+		this.targetPositionMesh[robotIndex].visible=true;
 		
 	}else
 	{
-		carriedVoxel[robotIndex].visible=false;
-		targetPositionMesh[robotIndex].visible=false;
+		this.carriedVoxel[robotIndex].visible=false;
+		this.targetPositionMesh[robotIndex].visible=false;
 		
 
 	}
diff --git a/01_Code/physical_computing_interface/threejs/replay.js b/01_Code/physical_computing_interface/assembly/replay.js
similarity index 99%
rename from 01_Code/physical_computing_interface/threejs/replay.js
rename to 01_Code/physical_computing_interface/assembly/replay.js
index 8e769f5..c377632 100644
--- a/01_Code/physical_computing_interface/threejs/replay.js
+++ b/01_Code/physical_computing_interface/assembly/replay.js
@@ -64,6 +64,7 @@ document.addEventListener('adjustTimeStep', function (e) {
 
 }, false);
 
+//todo enclose to prototype
 function replay(currValue){
     // var currValue=this.value;
     console.log(currValue +" "+timeStep+" "+timeline.length);
diff --git a/01_Code/physical_computing_interface/assembly/index.html b/01_Code/physical_computing_interface/assembly/standAloneAssembly.html
similarity index 100%
rename from 01_Code/physical_computing_interface/assembly/index.html
rename to 01_Code/physical_computing_interface/assembly/standAloneAssembly.html
diff --git a/01_Code/physical_computing_interface/globals.js b/01_Code/physical_computing_interface/globals.js
index 699946c..792a277 100644
--- a/01_Code/physical_computing_interface/globals.js
+++ b/01_Code/physical_computing_interface/globals.js
@@ -1,3 +1,5 @@
+// Amira Abdel-Rahman
+// (c) Massachusetts Institute of Technology 2019
 function globals(){
     this.gridSize=20;
     this.voxelSpacing=50;
@@ -7,6 +9,210 @@ function globals(){
     this.color4= 0xfa6e70; //red/orange
     this.color5=0x380152; //purple
     this.color6=0x696767; //grey
+    this.gridPresets={
+        Cubic :  {
+        
+            xScale:1.0,
+            yScale:1.0,
+            zScale:1.0,
+            xLineOffset:0.0,
+            yLineOffset:0.0,
+            xLayerOffset:0.0,
+            yLayerOffset:0.0,
+            zLayerRotation:0.0,
+            doubleOffset:false,
+            voxelSpacing:this.voxelSpacing,
+            voxelScaleX:0.95,
+            voxelScaleY:0.95,
+            voxelScaleZ:0.95,
+            neighbors:[
+                {x: 1,y: 0,z: 0},
+                {x:-1,y: 0,z: 0},
+                {x: 0,y: 1,z: 0},
+                {x: 0,y:-1,z: 0},
+                {x: 0,y: 0,z: 1},
+                {x: 0,y: 0,z:-1}
+            ],
+            neighborsLayerOffset:[
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0}
+            ]
+        },
+        Aspect_2_1_4 :  {
+            xScale:1.0,
+            yScale:0.5,
+            zScale:2.0,
+            xLineOffset:0.0,
+            yLineOffset:0.0,
+            xLayerOffset:0.0,
+            yLayerOffset:0.0,
+            zLayerRotation:0.0,
+            doubleOffset:false,
+            voxelSpacing:this.voxelSpacing,
+            voxelScaleX:1.0,
+            voxelScaleY:1.0,
+            voxelScaleZ:1.0,
+            neighbors:[
+                {x: 1,y: 0,z: 0},
+                {x:-1,y: 0,z: 0},
+                {x: 0,y: 1,z: 0},
+                {x: 0,y:-1,z: 0},
+                {x: 0,y: 0,z: 1},
+                {x: 0,y: 0,z:-1}
+            ],
+            neighborsLayerOffset:[
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0}
+            ]
+        },
+        FaceCenteredCubic:  {
+            xScale:1.0,
+            yScale:1.0,
+            zScale:Math.sqrt(2)/2,
+            xLineOffset:0.0,
+            yLineOffset:0.0,
+            xLayerOffset:0.5,
+            yLayerOffset:0.5,
+            zLayerRotation:0.0,
+            doubleOffset:false,
+            voxelSpacing:this.voxelSpacing,
+            voxelScaleX:1.0,
+            voxelScaleY:1.0,
+            voxelScaleZ:1.0,
+            neighbors:[
+                {x: 1,y: 0,z: 0},
+                {x:-1,y: 0,z: 0},
+                {x: 0,y: 1,z: 0},
+                {x: 0,y:-1,z: 0},
+                {x: 0,y: 0,z: 1},
+                {x: 0,y: 0,z:-1}
+            ],
+            neighborsLayerOffset:[
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0}
+            ]
+            
+        },
+        HexagonalClosePacked:  {
+        
+            xScale:1.0,
+            yScale:Math.sqrt(3)/2,
+            zScale:Math.sqrt(2)/Math.sqrt(3),
+            xLineOffset:0.5,
+            yLineOffset:0.0,
+            xLayerOffset:0.5,
+            yLayerOffset:1.0/Math.sqrt(12),
+            zLayerRotation:0.0,
+            doubleOffset:false,
+            voxelSpacing:this.voxelSpacing,
+            voxelScaleX:1.0,
+            voxelScaleY:1.0,
+            voxelScaleZ:1.0,
+            neighbors:[
+                {x: 1,y: 0,z: 0},
+                {x:-1,y: 0,z: 0},
+                {x: 0,y: 1,z: 0},
+                {x: 0,y:-1,z: 0},
+                {x: 0,y: 0,z: 1},
+                {x: 0,y: 0,z:-1}
+            ],
+            neighborsLayerOffset:[
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 0,z: 0}
+            ]
+            
+        } ,
+        Dice2:  {
+            xScale:1.0,
+            yScale:1.0,
+            zScale:0.2,
+            xLineOffset:0.0,
+            yLineOffset:0.0,
+            xLayerOffset:0.0,
+            yLayerOffset:0.5,
+            zLayerRotation:Math.PI/2.0,
+            voxelSpacing:this.voxelSpacing,
+            doubleOffset:false,
+            voxelScaleX:0.5,
+            voxelScaleY:0.9,
+            voxelScaleZ:0.2,
+            neighbors:[
+                {x: 0,y: 0,z: 1},
+                {x: 0,y: 0,z:-1},
+                {x: 0,y:-1,z: 1},
+                {x: 0,y:-1,z:-1}
+            ],
+            neighborsLayerOffset:[
+                {x: 0,y: 1,z: 0},
+                {x: 0,y: 0,z: 0},
+                {x: 0,y: 1,z: 0},
+                {x: 0,y: 1,z: 0} //if rotated
+            ]
+            
+        },
+        Dice:  {
+            xScale:1.0,
+            yScale:1.0,
+            zScale:0.2,
+            xLineOffset:0.0,
+            yLineOffset:0.0,
+            xLayerOffset:0.0,
+            yLayerOffset:0.5,
+            doubleOffset:true,
+            xLayerOffset2:0.5,
+            yLayerOffset2:0.5,
+            zLayerRotation:Math.PI/2.0,
+            voxelSpacing:this.voxelSpacing,
+            voxelScaleX:0.5,
+            voxelScaleY:0.9,
+            voxelScaleZ:0.2,
+            neighbors:[ // layer 0, 4,8
+                {x: 0,y:-1,z:-1},
+                {x:-1,y:-1,z:-1},
+                {x: 0,y:-1,z: 1},
+                {x: 0,y: 0,z: 1}
+            ],
+            neighborsLayerOffset:[ // layer 1, 5, 9
+                {x: 0,y: 1,z:-1},
+                {x: 0,y: 0,z:-1},
+                {x:-1,y: 0,z: 1},
+                {x: 0,y: 0,z: 1} 
+            ],
+            neighborsLayerOffset1:[ // layer 2, 6, 19
+                {x: 1,y: 0,z:-1},
+                {x: 0,y: 0,z:-1},
+                {x: 0,y:-1,z: 1},
+                {x: 0,y: 0,z: 1} 
+            ],
+            neighborsLayerOffset2:[ // layer 3, 7, 11
+                {x: 0,y: 1,z:-1},
+                {x: 0,y: 0,z:-1},
+                {x: 0,y: 1,z: 1},
+                {x: 1,y: 1,z: 1} 
+            ]
+            
+        }
+        
+        
+    };
+
+    this.grid=this.gridPresets.Dice;
 
 }
 
@@ -140,9 +346,7 @@ utilities.prototype.getNeighboursList=function(grid,x,y,z){
 }
 //////////////////////////////////////////////
 
-/////////////////FUNCTION CALLS//////////////
-var GLOBALS=new globals();
-var utils= new utilities();
+
 
 
 //////////performance calculations/////////////////
diff --git a/01_Code/physical_computing_interface/graph/graph.js b/01_Code/physical_computing_interface/graph/graph.js
index ec3ef72..e4f4976 100644
--- a/01_Code/physical_computing_interface/graph/graph.js
+++ b/01_Code/physical_computing_interface/graph/graph.js
@@ -1,6 +1,8 @@
 var selectedjson;
+//todo enclose this
 document.addEventListener('DOMContentLoaded', function(){
 
+    //todo change these and put to global
     var color1= "#ffffff"; //white
     var color11= "#ffffff8c"; //white transparent
     var color2= "#020227";  //dark blue
@@ -275,7 +277,7 @@ document.addEventListener('DOMContentLoaded', function(){
         x=parseInt(x);
         y=parseInt(y);
         z=parseInt(z);
-        var list=utils.getNeighboursList(grid,x,y,z);
+        var list=utils.getNeighboursList(GLOBALS.grid,x,y,z);
         
         for(var i=0;i<list.length;i++){
             var i1,j1,k1;
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 2f0f8b6..064140a 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -103,12 +103,21 @@
 
 <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>
+
+<script src="./assembly/InverseKinematic.js"></script><!-- TODO LOCATION -->
+<script src="./assembly/voxel.js"></script><!-- TODO CHANGE TO DICE PIECES -->
 
 
 <!-- code -->
-<script src="./globals.js"></script> <!-- event handling and main json structure -->
-<script src="./threejs/replay.js"></script><!-- assembly and timestep handling -->
+<script src="./globals.js"></script> <!-- event handling and GLOBALS,UTILS -->
 <script src="./threejs/grid.js"></script><!-- threejs visualization -->
+<script src="./assembly/assembly.js"></script><!-- robot assembly -->
+
+<script src="./app.js"></script><!-- threejs visualization -->
+
+<script src="./assembly/replay.js"></script><!-- assembly and timestep handling -->
 <script src="./graph/graph.js"></script><!-- graph flow visualization-->
 <script src="./json/json.js"></script><!-- json -->
 
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index 11f04ed..74a217f 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -1,208 +1,6 @@
-var gridPresets={
-    Cubic :  {
-	
-        xScale:1.0,
-        yScale:1.0,
-        zScale:1.0,
-        xLineOffset:0.0,
-        yLineOffset:0.0,
-        xLayerOffset:0.0,
-        yLayerOffset:0.0,
-        zLayerRotation:0.0,
-        doubleOffset:false,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        voxelScaleX:0.95,
-        voxelScaleY:0.95,
-        voxelScaleZ:0.95,
-        neighbors:[
-            {x: 1,y: 0,z: 0},
-            {x:-1,y: 0,z: 0},
-            {x: 0,y: 1,z: 0},
-            {x: 0,y:-1,z: 0},
-            {x: 0,y: 0,z: 1},
-            {x: 0,y: 0,z:-1}
-        ],
-        neighborsLayerOffset:[
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0}
-        ]
-    },
-    Aspect_2_1_4 :  {
-        xScale:1.0,
-        yScale:0.5,
-        zScale:2.0,
-        xLineOffset:0.0,
-        yLineOffset:0.0,
-        xLayerOffset:0.0,
-        yLayerOffset:0.0,
-        zLayerRotation:0.0,
-        doubleOffset:false,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        voxelScaleX:1.0,
-        voxelScaleY:1.0,
-        voxelScaleZ:1.0,
-        neighbors:[
-            {x: 1,y: 0,z: 0},
-            {x:-1,y: 0,z: 0},
-            {x: 0,y: 1,z: 0},
-            {x: 0,y:-1,z: 0},
-            {x: 0,y: 0,z: 1},
-            {x: 0,y: 0,z:-1}
-        ],
-        neighborsLayerOffset:[
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0}
-        ]
-    },
-    FaceCenteredCubic:  {
-		xScale:1.0,
-        yScale:1.0,
-        zScale:Math.sqrt(2)/2,
-        xLineOffset:0.0,
-        yLineOffset:0.0,
-        xLayerOffset:0.5,
-        yLayerOffset:0.5,
-        zLayerRotation:0.0,
-        doubleOffset:false,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        voxelScaleX:1.0,
-        voxelScaleY:1.0,
-        voxelScaleZ:1.0,
-        neighbors:[
-            {x: 1,y: 0,z: 0},
-            {x:-1,y: 0,z: 0},
-            {x: 0,y: 1,z: 0},
-            {x: 0,y:-1,z: 0},
-            {x: 0,y: 0,z: 1},
-            {x: 0,y: 0,z:-1}
-        ],
-        neighborsLayerOffset:[
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0}
-        ]
-		
-    },
-    HexagonalClosePacked:  {
-	
-		xScale:1.0,
-        yScale:Math.sqrt(3)/2,
-        zScale:Math.sqrt(2)/Math.sqrt(3),
-        xLineOffset:0.5,
-        yLineOffset:0.0,
-        xLayerOffset:0.5,
-        yLayerOffset:1.0/Math.sqrt(12),
-        zLayerRotation:0.0,
-        doubleOffset:false,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        voxelScaleX:1.0,
-        voxelScaleY:1.0,
-        voxelScaleZ:1.0,
-        neighbors:[
-            {x: 1,y: 0,z: 0},
-            {x:-1,y: 0,z: 0},
-            {x: 0,y: 1,z: 0},
-            {x: 0,y:-1,z: 0},
-            {x: 0,y: 0,z: 1},
-            {x: 0,y: 0,z:-1}
-        ],
-        neighborsLayerOffset:[
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 0,z: 0}
-        ]
-		
-    } ,
-    Dice2:  {
-		xScale:1.0,
-        yScale:1.0,
-        zScale:0.2,
-        xLineOffset:0.0,
-        yLineOffset:0.0,
-        xLayerOffset:0.0,
-        yLayerOffset:0.5,
-        zLayerRotation:Math.PI/2.0,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        doubleOffset:false,
-        voxelScaleX:0.5,
-        voxelScaleY:0.9,
-        voxelScaleZ:0.2,
-        neighbors:[
-            {x: 0,y: 0,z: 1},
-            {x: 0,y: 0,z:-1},
-            {x: 0,y:-1,z: 1},
-            {x: 0,y:-1,z:-1}
-        ],
-        neighborsLayerOffset:[
-            {x: 0,y: 1,z: 0},
-            {x: 0,y: 0,z: 0},
-            {x: 0,y: 1,z: 0},
-            {x: 0,y: 1,z: 0} //if rotated
-        ]
-		
-    },
-    Dice:  {
-		xScale:1.0,
-        yScale:1.0,
-        zScale:0.2,
-        xLineOffset:0.0,
-        yLineOffset:0.0,
-        xLayerOffset:0.0,
-        yLayerOffset:0.5,
-        doubleOffset:true,
-        xLayerOffset2:0.5,
-        yLayerOffset2:0.5,
-        zLayerRotation:Math.PI/2.0,
-        voxelSpacing:GLOBALS.voxelSpacing,
-        voxelScaleX:0.5,
-        voxelScaleY:0.9,
-        voxelScaleZ:0.2,
-        neighbors:[ // layer 0, 4,8
-            {x: 0,y:-1,z:-1},
-            {x:-1,y:-1,z:-1},
-            {x: 0,y:-1,z: 1},
-            {x: 0,y: 0,z: 1}
-        ],
-        neighborsLayerOffset:[ // layer 1, 5, 9
-            {x: 0,y: 1,z:-1},
-            {x: 0,y: 0,z:-1},
-            {x:-1,y: 0,z: 1},
-            {x: 0,y: 0,z: 1} 
-        ],
-        neighborsLayerOffset1:[ // layer 2, 6, 19
-            {x: 1,y: 0,z:-1},
-            {x: 0,y: 0,z:-1},
-            {x: 0,y:-1,z: 1},
-            {x: 0,y: 0,z: 1} 
-        ],
-        neighborsLayerOffset2:[ // layer 3, 7, 11
-            {x: 0,y: 1,z:-1},
-            {x: 0,y: 0,z:-1},
-            {x: 0,y: 1,z: 1},
-            {x: 1,y: 1,z: 1} 
-        ]
-		
-    }
-    
-    
-};
-var grid=gridPresets.Dice;
 
-function threejs(){
+
+function threejs(GLOBALS,utils,containerName,container1Name){
     this.camera;
     this.scene;
     this.renderer;
@@ -219,18 +17,25 @@ function threejs(){
     this.helperPosition;
     this.helperColor;
     this.objects = [];
-    this.container = document.getElementById( 'webgl' );
-    // var container1 = document.getElementById( 'threejs' );
+    this.container = document.getElementById( containerName );
+    this.container1Name = container1Name;
     this.controls;
     this.voxelSpacing=GLOBALS.voxelSpacing;
     this.occupancyHelper;
     this.voxels=[];
+    this.color1=GLOBALS.color1;
+    this.color3=GLOBALS.color3;
+    this.color4=GLOBALS.color4;
+    this.gridSize=GLOBALS.gridSize;
+    this.utils=utils;
+    this.grid=GLOBALS.grid;
+    // this.init();
 }
 
 threejs.prototype.init=function() {
-    this.camera = new THREE.PerspectiveCamera( 45, this.getWidth()/ this.getHeight()  , 1, 10000 );
-    this.camera.position.set( 500, 800, 1300 );
-    this.camera.lookAt( GLOBALS.gridSize/2, 0, GLOBALS.gridSize/2 );
+    this.camera = new THREE.PerspectiveCamera( 45, this.getWidth()/ this.getHeight()  , 1, 10000*this.voxelSpacing);
+    this.camera.position.set( this.gridSize/2*this.voxelSpacing, this.gridSize*this.voxelSpacing*1.0, this.gridSize*this.voxelSpacing*2.5 );
+    this.camera.lookAt( this.gridSize/2, 0, this.gridSize/2 );
     this.scene = new THREE.Scene();
     this.scene.background = new THREE.Color( 0xffffff );
 
@@ -239,25 +44,25 @@ threejs.prototype.init=function() {
     this.cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
 
     // grid
-    var gridHelper = new THREE.GridHelper( (GLOBALS.gridSize)*this.voxelSpacing, GLOBALS.gridSize );
-    gridHelper.position.x=GLOBALS.gridSize/2.0*this.voxelSpacing-this.voxelSpacing/2.0;
-    gridHelper.position.z=GLOBALS.gridSize/2.0*this.voxelSpacing-this.voxelSpacing/2.0;
-    gridHelper.position.y=-this.voxelSpacing/2.0*grid.voxelScaleZ;
-
-    gridHelper.scale.x=grid.xScale;
-    gridHelper.scale.z=grid.yScale;
-    gridHelper.scale.y=grid.zScale;
+    var gridHelper = new THREE.GridHelper( (this.gridSize)*this.voxelSpacing, this.gridSize );
+    gridHelper.position.x=this.gridSize/2.0*this.voxelSpacing-this.voxelSpacing/2.0;
+    gridHelper.position.z=this.gridSize/2.0*this.voxelSpacing-this.voxelSpacing/2.0;
+    gridHelper.position.y=-this.voxelSpacing/2.0*this.grid.voxelScaleZ;
+
+    gridHelper.scale.x=this.grid.xScale;
+    gridHelper.scale.z=this.grid.yScale;
+    gridHelper.scale.y=this.grid.zScale;
     this.scene.add( gridHelper );
 
 
 
     // roll-over helpers
     var rollOverGeo = new THREE.BoxBufferGeometry( this.voxelSpacing, this.voxelSpacing, this.voxelSpacing  );
-    this.rollOverMaterial = new THREE.MeshBasicMaterial( { color: GLOBALS.color4, opacity: 0.8, transparent: true } );
+    this.rollOverMaterial = new THREE.MeshBasicMaterial( { color: this.color4, opacity: 0.8, transparent: true } );
     this.rollOverMesh = new THREE.Mesh( rollOverGeo, this.rollOverMaterial );
-    this.rollOverMesh.scale.x=grid.voxelScaleX;
-    this.rollOverMesh.scale.z=grid.voxelScaleY;
-    this.rollOverMesh.scale.y=grid.voxelScaleZ;
+    this.rollOverMesh.scale.x=this.grid.voxelScaleX;
+    this.rollOverMesh.scale.z=this.grid.voxelScaleY;
+    this.rollOverMesh.scale.y=this.grid.voxelScaleZ;
     this.scene.add( this.rollOverMesh );
 
     this.raycaster = new THREE.Raycaster();
@@ -269,15 +74,15 @@ threejs.prototype.init=function() {
     // objects.push( plane );
     
     this.helperPosition = new Float32Array( 1 * 3 );
-    var c = new THREE.Color( GLOBALS.color1 );
+    var c = new THREE.Color( this.color1 );
     this.helperColor = new Float32Array( 1 * 3 );
     this.helperColor[0]=c.r;
     this.helperColor[1]=c.g;
     this.helperColor[2]=c.b;
-    this.helperMaterial = new THREE.PointsMaterial( { size: 5, vertexColors: THREE.VertexColors,color:GLOBALS.color3 } );
+    this.helperMaterial = new THREE.PointsMaterial( { size: 5, vertexColors: THREE.VertexColors,color:this.color3 } );
 
-    this.buildGrid(GLOBALS.gridSize);
-    this.createHelperMeshes(GLOBALS.gridSize);
+    this.buildGrid(this.gridSize);
+    this.createHelperMeshes(this.grid,this.gridSize);
     
 
     // var axesHelper = new THREE.AxesHelper( 20 *grid.voxelSpacing);
@@ -297,7 +102,7 @@ threejs.prototype.init=function() {
     
     this.container.appendChild( this.renderer.domElement );
     this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
-    this.controls.target=new THREE.Vector3( GLOBALS.gridSize/2*this.voxelSpacing,0 ,GLOBALS.gridSize/2*this.voxelSpacing );
+    this.controls.target=new THREE.Vector3( this.gridSize/2*this.voxelSpacing,0 ,this.gridSize/2*this.voxelSpacing );
     this.controls.update();
     
     // document.body.appendChild( renderer.domElement );
@@ -424,7 +229,7 @@ threejs.prototype.getTransforms=function(grid,x, y,z){
     return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y];
 }
 
-threejs.prototype.createHelperMeshes=function(gridSize){
+threejs.prototype.createHelperMeshes=function(grid,gridSize){
     for (var i=0;i<gridSize;++i){
         for (var j=0;j<gridSize;++j){
             this.buildHelperSnap(grid,i,j,0);
@@ -494,7 +299,7 @@ threejs.prototype.buildHelperSnap=function(grid,x,y,z){
 
 threejs.prototype.buildNeighbourHelpers=function(grid, x, y,z){
 
-    var list=utils.getNeighboursList(grid,x,y,z); 
+    var list=this.utils.getNeighboursList(grid,x,y,z); 
     
     for(var i=0;i<list.length;i++){
         var x1,y1,z1;
@@ -516,7 +321,7 @@ threejs.prototype.helperAt=function(x,y,z){
     if(x<0||y<0||z<0){
         return false;
     }
-    if(x>=GLOBALS.gridSize||y>=GLOBALS.gridSize||z>=GLOBALS.gridSize){
+    if(x>=this.gridSize||y>=this.gridSize||z>=this.gridSize){
         return false;
     }
     if(occupancy[x][y][z]||this.occupancyHelper[x][y][z]){
@@ -529,7 +334,7 @@ threejs.prototype.helperAt=function(x,y,z){
 
 threejs.prototype.updateHelperMeshesAfterRemove=function(grid,x,y,z){
     this.buildHelperSnap(grid,x,y,z);
-    var list=utils.getNeighboursList(grid,x,y,z); //TODO ENCLOSE
+    var list=this.utils.getNeighboursList(grid,x,y,z); //TODO ENCLOSE
     
     for(var i=0;i<list.length;i++){
         var x1,y1,z1;
@@ -554,17 +359,13 @@ threejs.prototype.changeToGrid=function(newGrid){
 
 threejs.prototype.getWidth=function(){
     // return container.style.width;
-    return $('#threejs').width() ;
+    return $('#'+this.container1Name).width() ;
 }
 
 threejs.prototype.getHeight=function(){
     // return container.style.height;
-    return $('#threejs').height() ;
+    return $('#'+this.container1Name).height() ;
 }
-/////////////////////
-
-var three=new threejs();
-three.init();
 
 
 //////////////////////////////////////////////////
@@ -585,7 +386,7 @@ function onDocumentMouseMoveThree( event ) {
         var intersect = intersects[ 0 ];
         var obj=utils.getXYZfromName(intersect.object.name);
 
-        [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=three.getTransforms(grid,obj.x, obj.y,obj.z);
+        [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=three.getTransforms(three.grid,obj.x, obj.y,obj.z);
         // console.log(getTransforms(grid,x, y,z))
 
         // rollOverMesh.scale.x=s_x;
@@ -639,13 +440,13 @@ document.addEventListener('removeNode', function (e) {
     var object = three.scene.getObjectByName( name );
     three.scene.remove( object );
     three.voxels.splice( three.objects.indexOf( object ), 1 );
-    three.updateHelperMeshesAfterRemove(grid,e.detail.x,e.detail.y,e.detail.z);
+    three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z);
     
     
 }, false);
 
 document.addEventListener('addNode', function (e) { 
-    three.buildVoxelAt( grid, e.detail.x, e.detail.y,e.detail.z);
+    three.buildVoxelAt( three.grid, e.detail.x, e.detail.y,e.detail.z);
 
     //deleteHelper Meshes
     var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
@@ -656,11 +457,13 @@ document.addEventListener('addNode', function (e) {
     three.scene.remove( object );
     three.occupancyHelper[e.detail.x][e.detail.y][e.detail.z]=false;
 
-    three.buildNeighbourHelpers(grid, e.detail.x, e.detail.y,e.detail.z);
+    three.buildNeighbourHelpers(three.grid, e.detail.x, e.detail.y,e.detail.z);
     
 }, false);
 
 
+/////////////////////
+
 
 
 
-- 
GitLab