diff --git a/01_Code/physical_computing_interface/app.js b/01_Code/physical_computing_interface/app.js
index a56772f1d5c6012d5d32182ead02037f5d5246f5..167f8762e199a8b12b20b1b81e5ee055fb4c11c2 100644
--- a/01_Code/physical_computing_interface/app.js
+++ b/01_Code/physical_computing_interface/app.js
@@ -3,14 +3,16 @@
 
 /////////////////function calls/////////////////
 //todo when calling say which gridsize and grid type
-var GLOBALS=new globals();
 var utils= new utilities();
+var GLOBALS=new globals(utils);
+
 
 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();
+// var assembler= new Assembler(three,GLOBALS,1,50,[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 eb44738c19a0e3f11775dcb6c7689fcded345534..550f5eda214422cfdcc15c2b54611d31fb06fa2e 100644
--- a/01_Code/physical_computing_interface/assembly/assembly.js
+++ b/01_Code/physical_computing_interface/assembly/assembly.js
@@ -20,9 +20,11 @@ function Assembler(three,GLOBALS,numberOfRobots,speed,robotLocations,depositLoca
 	this.currentStep;
 	this.DEG_TO_RAD = Math.PI / 180;
 	this.RAD_TO_DEG = 180 / Math.PI;
+	this.color2=GLOBALS.color2;//kohly
+	this.color3=GLOBALS.color3;///*teal*/
+	this.color4= GLOBALS.color4; //red/orange
 
 	///////////////////////////voxels///////////////////////////////
-	this.voxel
 	this.voxel;
 	this.voxelSpacing=GLOBALS.voxelSpacing;
 	this.voxelLocations=[];
@@ -82,11 +84,12 @@ function Assembler(three,GLOBALS,numberOfRobots,speed,robotLocations,depositLoca
 
 	this.steps=[];
 	this.path= [];
+	this.carry=[];
 
 	this.totalNumberofSteps=[];
 
 	this.locations=[]
-	this.showPath=false;
+	this.showPath=true;
 	this.init(); //TODO INIT LATER, CHECK IF i CAN CHANGE THIS
 }
 
@@ -95,17 +98,10 @@ function Assembler(three,GLOBALS,numberOfRobots,speed,robotLocations,depositLoca
 Assembler.prototype.run=function(){
 	for( i=0;i<this.numberOfRobots;i++)
 	{
-		this.setupGUI(i);
-		this.defaultRobot(i);
-		this.buildHelperMeshes(i);
-		// this.assemble(i);
-
-
+		this.assemble(i);
 	}
 }
 
-
-
 ///////////////////////////////scene///////////////////////////////
 Assembler.prototype.declareGlobals=function(){
 	for( i=0;i<this.numberOfRobots;i++)
@@ -149,6 +145,7 @@ Assembler.prototype.declareGlobals=function(){
 		//////////////////////
 
 		this.steps.push([]);
+		this.carry.push([]);
 		this.path.push({
 			curve: null,
 			currentPoint: 0,
@@ -189,68 +186,16 @@ Assembler.prototype.declareGlobals=function(){
 
 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.setSize(window.innerWidth, window.innerHeight)
-	// container.appendChild( renderer.domElement );
-
-	// scene = new THREE.Scene();
-
-	// 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);
-
-	// 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);
-  
-	// cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
-	// cameraControls.addEventListener('change', () => renderer.render(scene, camera));
-  
-	// function onWindowResize() 
-	// {
-	// 	camera.aspect = window.innerWidth / window.innerHeight;
-	// 	camera.updateProjectionMatrix();
-	
-	// 	renderer.setSize(window.innerWidth, window.innerHeight);
-	// 	renderer.render(scene, camera);
-	// }
-	
-	// window.addEventListener('resize', onWindowResize, false);
-
-	// var size = 20;
-	// var step = 20;
-
-	// 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;
-
-	// 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();
-
 	////////////////////load voxel/////////////////////////
 	this.loadVoxel();
 	//todo load dice????????
+	///////////////////
+	for( i=0;i<this.numberOfRobots;i++)
+	{
+		this.setupGUI(i);
+		this.defaultRobot(i);
+		this.buildHelperMeshes(i);
+	}
 }
 
 ///////////////////////////geometry///////////////////////////////
@@ -299,22 +244,18 @@ Assembler.prototype.THREERobot=function(robotIndex,V_initial, limits,group) {
 	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 thicken = 1.2*this.voxelSpacing;
 
 	var w_thickened = Math.abs(w) + thicken;
 	var h_thickened = Math.abs(h) + thicken;
 	var d_thickened = Math.abs(d) + thicken;
+	var op=0.5;
 
-	var material = new THREE.MeshLambertMaterial({ color: colors[jointNumber],});
+	var material = new THREE.MeshLambertMaterial({ color: this.color2,transparent:true,opacity:op ,});
 	var geometry = new THREE.CubeGeometry(w_thickened, h_thickened, d_thickened);
 	var mesh = new THREE.Mesh(geometry, material);
 
@@ -328,17 +269,17 @@ Assembler.prototype.createCube=function(robotIndex,x, y, z, w, h, d, min, max, j
 	// 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 jointGeo1 = new THREE.CylinderGeometry  (1*this.voxelSpacing,1*this.voxelSpacing, 1 * 2*this.voxelSpacing, 32, 32, false, -min, 2 * Math.PI - max + min)
+	var jointGeoMax = new THREE.CylinderGeometry(1*this.voxelSpacing,1*this.voxelSpacing, 1 * 2*this.voxelSpacing, 32, 32, false, -max, max)
+	var jointGeoMin = new THREE.CylinderGeometry(1*this.voxelSpacing,1*this.voxelSpacing, 1 * 2*this.voxelSpacing, 32, 32, false, 0, -min)
 	var jointMesh1 = new THREE.Mesh(jointGeo1, new THREE.MeshBasicMaterial({
-	color: 0x000000,//0xffbb00,
+	color: this.color2,transparent:false,opacity:op ,//0xffbb00,
 	}));
 	var jointMeshMax = new THREE.Mesh(jointGeoMax, new THREE.MeshBasicMaterial({
-	color: 0x000000,//0x009900,
+	color: this.color2,transparent:false,opacity:op ,//0x009900,
 	}));
 	var jointMeshMin = new THREE.Mesh(jointGeoMin, new THREE.MeshBasicMaterial({
-	color: 0x000000,//0xdd2200,
+	color: this.color2,transparent:false,opacity:op ,//0xdd2200,
 	}));
 
 	var joint = new THREE.Group();
@@ -407,7 +348,7 @@ Assembler.prototype.defaultRobot=function(robotIndex) {
 	shoulder_offset = 0.220941;
 	elbow_offset = -0.1719;
 	
-	var scale=0.01*this.voxelSpacing;
+	var scale=0.015*this.voxelSpacing;
 	shoulder_height  =scale* d1;
 	upper_arm_length =scale* -a2;
 	forearm_length   =scale* -a3;
@@ -422,9 +363,9 @@ Assembler.prototype.defaultRobot=function(robotIndex) {
 		// [0, 0, scale*200],
 		// [scale*200, 0, 0],
 		[scale*200, 0, scale*100],
-		[0, 0, scale*800],
-		[0, 0,scale*200],
-		[scale*800, 0, 0],
+		[0, 0, scale*700],
+		[0, 0,scale*700],
+		[scale*700, 0, 0],
 		[scale*200, 0, 0],
 		[scale*200, 0, 0],
 
@@ -774,21 +715,20 @@ Assembler.prototype.assemble=function(robotIndex){
 	// steps[robotIndex]=[startLocations[robotIndex],new THREE.Vector3(10*voxelSpacing,0*voxelSpacing,0)];
 	// showTargetPosition(robotIndex,minIndex,true);
 	
-	for(var i=0;i<this.steps[robotIndex].length;i++){
+	for(var i=0;i<this.steps[robotIndex].length-1;i++){
 		if(i%2!=0){
 			this.moveRobot(robotIndex,true,this.steps[robotIndex][i]);
 		}else{
 			this.moveRobot(robotIndex,false,this.steps[robotIndex][i+1]);
 		}
-		
 	}
 
 }
 
 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);
+	var snormal=new THREE.Vector3(0,1,0);
+	var enormal=new THREE.Vector3(0,1,0);
+	var robotUp=new THREE.Vector3(0,1,0);
 	var p1=start.clone();
 	p1.add(snormal.clone().multiplyScalar(0));
 	var p2=new THREE.Vector3(0,0,0);
@@ -850,7 +790,7 @@ Assembler.prototype.dividePath=function(robotIndex,snormal,enormal,robotUp,robot
 	forward.normalize();
 
 	var p1=tempPoints[0];
-	var p2=tempPoints[this.path[robotIndex].number-1];
+	var p2=tempPoints[this.path[robotIndex].number];//was -1 todo
 	var diff=p2.clone().sub(p1);
 	diff.multiply(snormal);
 	
@@ -902,8 +842,8 @@ Assembler.prototype.dividePath=function(robotIndex,snormal,enormal,robotUp,robot
 		
 		if(this.path[robotIndex].showPath)
 		{
-			var material = new THREE.MeshLambertMaterial({ color:0xff7171,});//todo change to colors set
-			var geometry = new THREE.SphereGeometry(0.05, 0.05, 0.05);
+			var material = new THREE.MeshLambertMaterial({ color:this.color4,});
+			var geometry = new THREE.SphereGeometry(0.05*this.voxelSpacing, 0.05*this.voxelSpacing, 0.05*this.voxelSpacing);
 			var mesh = new THREE.Mesh(geometry, material);
 			mesh.position.x=tempPoints[i].x;
 			mesh.position.y=tempPoints[i].y;
@@ -916,17 +856,18 @@ Assembler.prototype.dividePath=function(robotIndex,snormal,enormal,robotUp,robot
 
 Assembler.prototype.moveRobot=function(robotIndex,leaveVoxel,voxelLoc){
 	var ps= this.path[robotIndex].points.slice();
+	var robot=this;
 	if(leaveVoxel){
-		setTimeout(function(){ this.buildVoxelAt(voxelLoc);this.showTargetPosition(robotIndex,voxelLoc,false) }, this.path[robotIndex].timeout);
+		setTimeout(function(){ robot.buildVoxelAt(voxelLoc);robot.showTargetPosition(robotIndex,voxelLoc,false) }, this.path[robotIndex].timeout);
 		
 
 	}else{
-		setTimeout(function(){this.showTargetPosition(robotIndex,voxelLoc,true) }, this.path[robotIndex].timeout);
+		setTimeout(function(){robot.showTargetPosition(robotIndex,voxelLoc,true) }, this.path[robotIndex].timeout);
 
 	}
-	for(var i=0;i<=this.path[robotIndex].number;i++)
+	for(var i=0;i<=robot.path[robotIndex].number;i++)
 	{
-		setTimeout(function(){ this.move(robotIndex); }, this.path[robotIndex].timeout+=this.path[robotIndex].delay);
+		setTimeout(function(){ robot.move(robotIndex); }, this.path[robotIndex].timeout+=this.path[robotIndex].delay);
 	}
 	
 	
@@ -982,12 +923,23 @@ Assembler.prototype.generatePoints=function(robotIndex){
 		this.steps[robotIndex].push(this.locations[i]);
 		
 	}
-	console.log(this.steps[robotIndex])
+	this.steps[robotIndex].push(this.startLocations[robotIndex]);
+	// 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]);
 	}
 	
 
+}
+
+Assembler.prototype.addPath=function(robotIndex,loc,carry){
+	this.steps[robotIndex].push(loc);
+	this.carry[robotIndex].push(carry);
+	this.createPath(robotIndex,this.steps[robotIndex][this.steps[robotIndex].length-2],this.steps[robotIndex][this.steps[robotIndex].length-1]);
+	this.steps[robotIndex].push(this.startLocations[robotIndex]);
+	this.carry[robotIndex].push(!carry);
+	this.createPath(robotIndex,this.steps[robotIndex][this.steps[robotIndex].length-2],this.steps[robotIndex][this.steps[robotIndex].length-1]);
+
 }
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
@@ -1039,15 +991,15 @@ Assembler.prototype.loadVoxel=function(){
 	geometry.setAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 	geometry.setAttribute( 'uv', new THREE.BufferAttribute( uv, 2 ) );
 
-	var material = new THREE.MeshLambertMaterial( { color: 0xbbc3ce } );
+	var material = new THREE.MeshLambertMaterial( { color: this.color3 } );
 	var object = new THREE.Mesh( geometry, material );
 	// object.scale.x=0.04;
 	// object.scale.y=0.04;
 	// object.scale.z=0.04;
 	// object.position.z=-1.5;
-	object.scale.x=0.5/3.0;
-	object.scale.y=0.5/3.0;
-	object.scale.z=0.5/3.0;
+	object.scale.x=0.5/3.0*this.voxelSpacing;
+	object.scale.y=0.5/3.0*this.voxelSpacing;
+	object.scale.z=0.5/3.0*this.voxelSpacing;
 	object.position.x=-15;
 	object.position.y=-15;
 	this.voxel=object;
@@ -1154,7 +1106,7 @@ 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;
+	object1.position.z=loc.z+this.voxelSpacing/2;
 	// if(loc.z==0){
 	// 	var color1= new THREE.Color( 0, 0, 0 )
 
@@ -1241,7 +1193,7 @@ Assembler.prototype.getNeighbours=function( targetPos){
 //////////////////////////utilities////////////////////////////
 
 Assembler.prototype.buildHelperMeshes=function(robotIndex){
-	var material = new THREE.MeshLambertMaterial({ color:0xff7171,});
+	var material = new THREE.MeshLambertMaterial({ color:this.color4,});
 	var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
 	this.targetPositionMesh[robotIndex] = new THREE.Mesh(geometry, material);
 	this.targetPositionMesh[robotIndex].scale.x=0.8;
@@ -1260,6 +1212,7 @@ Assembler.prototype.buildHelperMeshes=function(robotIndex){
 	}
 
 }
+
 Assembler.prototype.showTargetPosition=function(robotIndex,targetPos,show){
 	if(show)
 	{
@@ -1280,6 +1233,27 @@ Assembler.prototype.showTargetPosition=function(robotIndex,targetPos,show){
 	
 }
 
+///////////////////////////////////////////////////////////////////////
+
+document.addEventListener('addNode', function (e) { 
+	if(!e.detail.replay){ //first one create path
+		// assembler.addPath(0,new THREE.Vector3(e.detail.posX,,),true)
+		
+	}else{ //move
+		
+    }
+}, false);
+
+document.addEventListener('removeNode', function (e) { 
+	if(!e.detail.replay){//first one create path
+		
+    }else{//first one create path
+		
+    }
+}, false);
+
+
+
 
 
 
diff --git a/01_Code/physical_computing_interface/assembly/replay.js b/01_Code/physical_computing_interface/assembly/replay.js
index c377632c31f17dcd60ce2dcc727dd1d1db77d1fb..187d33177b8341659b0f8df0fbb1df1637193d00 100644
--- a/01_Code/physical_computing_interface/assembly/replay.js
+++ b/01_Code/physical_computing_interface/assembly/replay.js
@@ -8,29 +8,18 @@ slider.oninput = function() {
 };
 
 //////////////////////occupancy//////////////////
-//TODO: ADD CLOSURE GLOBAL
 
-var occupancy=[];
-for (var i=0;i<GLOBALS.gridSize;++i){
-    occupancy.push([]);
-    for (var j=0;j<GLOBALS.gridSize;++j){
-        occupancy[i].push([]);
-        for (var k=0;k<GLOBALS.gridSize;++k){
-            occupancy[i][j].push(false);
-        }
-    }
-}
-var timeStepOccupancy=[];
-timeStepOccupancy.push([occupancy.slice()]);
+// var timeStepOccupancy=[];
+// timeStepOccupancy.push([occupancy.slice()]);
 
 ////////////////////////
 document.addEventListener('addNode', function (e) { 
     
     if(!e.detail.replay){
-        console.log("Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+        // console.log("Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
         GLOBALS.adjustTimeStep(true,e.detail.x,e.detail.y,e.detail.z);
     }else{
-        console.log("Replay Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+        // console.log("Replay Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
     }
     
     
@@ -38,20 +27,20 @@ document.addEventListener('addNode', function (e) {
 
 document.addEventListener('removeNode', function (e) { 
     if(!e.detail.replay){
-        console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+        // console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
         GLOBALS.adjustTimeStep(false,e.detail.x,e.detail.y,e.detail.z);
         
     }else{
-        console.log("Replay Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+        // console.log("Replay Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
     }
 }, false);
 
 document.addEventListener('adjustTimeStep', function (e) { 
-    timeStepOccupancy.push([timeStepOccupancy[totalTimeSteps][0]]);
+    // timeStepOccupancy.push([timeStepOccupancy[totalTimeSteps][0]]);
     totalTimeSteps++;
-    timeStepOccupancy[totalTimeSteps][0][e.detail.x][e.detail.y][e.detail.z]=e.detail.addRemove;
-    occupancy=timeStepOccupancy[totalTimeSteps][0];
-
+    // timeStepOccupancy[totalTimeSteps][0][e.detail.x][e.detail.y][e.detail.z]=e.detail.addRemove;
+    GLOBALS.occupancy[e.detail.x][e.detail.y][e.detail.z]=e.detail.addRemove;
+    
     
     slider.max=totalTimeSteps;
     slider.value=totalTimeSteps;
@@ -59,49 +48,38 @@ document.addEventListener('adjustTimeStep', function (e) {
     replay(parseInt(totalTimeSteps-1));
     timeStep=parseInt(totalTimeSteps);
     
-    // console.log(occupancy);
-    // console.log(timeStep);
 
 }, false);
 
 //todo enclose to prototype
 function replay(currValue){
-    // var currValue=this.value;
-    console.log(currValue +" "+timeStep+" "+timeline.length);
-    // console.log(currValue);
-
+    
     if(currValue<timeStep){
         for(var i=timeStep;i>currValue;i--) {
             var ii=i-1;
             for(var j=0;j<timeline[ii].length;j++) {
-                occupancy=timeStepOccupancy[ii][j];
-                console.log("update occupancy to timestep "+ii);
-                // console.log(occupancy);
                 if(!timeline[ii][j].addRemove){
+                    GLOBALS.occupancy[timeline[ii][j].x][timeline[ii][j].y][timeline[ii][j].z]=true;
                     GLOBALS.addNode(timeline[ii][j].x,timeline[ii][j].y,timeline[ii][j].z,true);
                 }else{
+                    GLOBALS.occupancy[timeline[ii][j].x][timeline[ii][j].y][timeline[ii][j].z]=false;
                     GLOBALS.removeNode(timeline[ii][j].x,timeline[ii][j].y,timeline[ii][j].z,true);
                 }
+                
             }
         }
     }else if (currValue>timeStep){
         for(var i=timeStep;i<currValue;i++) {
             var ii=i-0;
-            
-                // console.log(timeline);
-                // console.log(ii);
-                // console.log(timeline[ii]);
             for(var j=0;j<timeline[ii].length;j++) {
-                if(ii<timeStepOccupancy.length){
-                    occupancy=timeStepOccupancy[ii+1][j];
-                }
-                console.log("update occupancy to timestep "+ii);
-                // console.log(occupancy);
                 if(timeline[ii][j].addRemove){
+                    GLOBALS.occupancy[timeline[ii][j].x][timeline[ii][j].y][timeline[ii][j].z]=true;
                     GLOBALS.addNode(timeline[ii][j].x,timeline[ii][j].y,timeline[ii][j].z,true);
                 }else{
+                    GLOBALS.occupancy[timeline[ii][j].x][timeline[ii][j].y][timeline[ii][j].z]=false;
                     GLOBALS.removeNode(timeline[ii][j].x,timeline[ii][j].y,timeline[ii][j].z,true);
                 }
+                
             }
 
             
diff --git a/01_Code/physical_computing_interface/globals.js b/01_Code/physical_computing_interface/globals.js
index 792a277fd59ce936f60489e167fea693d7f1138e..6a10425aa9bc2e46102c8b93643de0e0c0002dd5 100644
--- a/01_Code/physical_computing_interface/globals.js
+++ b/01_Code/physical_computing_interface/globals.js
@@ -1,6 +1,6 @@
 // Amira Abdel-Rahman
 // (c) Massachusetts Institute of Technology 2019
-function globals(){
+function globals(utils){
     this.gridSize=20;
     this.voxelSpacing=50;
     this.color1= 0xffffff; /*white*/
@@ -22,6 +22,7 @@ function globals(){
             zLayerRotation:0.0,
             doubleOffset:false,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             voxelScaleX:0.95,
             voxelScaleY:0.95,
             voxelScaleZ:0.95,
@@ -41,6 +42,7 @@ function globals(){
                 {x: 0,y: 0,z: 0},
                 {x: 0,y: 0,z: 0}
             ]
+            
         },
         Aspect_2_1_4 :  {
             xScale:1.0,
@@ -53,15 +55,16 @@ function globals(){
             zLayerRotation:0.0,
             doubleOffset:false,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             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: 1,y: 0,z: 0},//todo fix
+                {x:-1,y: 0,z: 0},//todo fix
+                {x: 0,y: 1,z: 0},//todo fix
+                {x: 0,y:-1,z: 0},//todo fix
+                {x: 0,y: 0,z: 1},//todo fix
                 {x: 0,y: 0,z:-1}
             ],
             neighborsLayerOffset:[
@@ -84,15 +87,16 @@ function globals(){
             zLayerRotation:0.0,
             doubleOffset:false,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             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: 1,y: 0,z: 0},//todo fix
+                {x:-1,y: 0,z: 0},//todo fix
+                {x: 0,y: 1,z: 0},//todo fix
+                {x: 0,y:-1,z: 0},//todo fix
+                {x: 0,y: 0,z: 1},//todo fix
                 {x: 0,y: 0,z:-1}
             ],
             neighborsLayerOffset:[
@@ -117,15 +121,16 @@ function globals(){
             zLayerRotation:0.0,
             doubleOffset:false,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             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: 1,y: 0,z: 0},//todo fix
+                {x:-1,y: 0,z: 0},//todo fix
+                {x: 0,y: 1,z: 0},//todo fix
+                {x: 0,y:-1,z: 0},//todo fix
+                {x: 0,y: 0,z: 1},//todo fix
                 {x: 0,y: 0,z:-1}
             ],
             neighborsLayerOffset:[
@@ -148,6 +153,7 @@ function globals(){
             yLayerOffset:0.5,
             zLayerRotation:Math.PI/2.0,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             doubleOffset:false,
             voxelScaleX:0.5,
             voxelScaleY:0.9,
@@ -179,6 +185,7 @@ function globals(){
             yLayerOffset2:0.5,
             zLayerRotation:Math.PI/2.0,
             voxelSpacing:this.voxelSpacing,
+            gridSize:this.gridSize,
             voxelScaleX:0.5,
             voxelScaleY:0.9,
             voxelScaleZ:0.2,
@@ -213,6 +220,18 @@ function globals(){
     };
 
     this.grid=this.gridPresets.Dice;
+    this.utils=utils;
+
+    this.occupancy=[];
+    for (var i=0;i<this.gridSize;++i){
+        this.occupancy.push([]);
+        for (var j=0;j<this.gridSize;++j){
+            this.occupancy[i].push([]);
+            for (var k=0;k<this.gridSize;++k){
+                this.occupancy[i][j].push(false);
+            }
+        }
+    }
 
 }
 
@@ -222,6 +241,7 @@ globals.prototype.addNode=function (x,y,z,replay=false){
     x=parseInt(x);
     y=parseInt(y);
     z=parseInt(z);
+    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(this.grid,x, y,z);
     var addNodeEvent = new CustomEvent('addNode', { 
         detail: 
         {
@@ -229,9 +249,10 @@ globals.prototype.addNode=function (x,y,z,replay=false){
             y:y,
             z:z,
             id:'[' +x +"," +y+","+z+']',
-            posX:(x-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posY:(y-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posZ:(z)*this.voxelSpacing+this.voxelSpacing/2,
+            posX:p_x,
+            posY:p_y,
+            posZ:p_z,
+            rotY:r_y,
             replay:replay
         }
     });
@@ -242,6 +263,7 @@ globals.prototype.removeNode=function (x,y,z,replay=false){
     x=parseInt(x);
     y=parseInt(y);
     z=parseInt(z);
+    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(this.grid,x, y,z);
     var removeNodeEvent = new CustomEvent('removeNode', { 
         detail: 
         {
@@ -249,9 +271,10 @@ globals.prototype.removeNode=function (x,y,z,replay=false){
             y:y,
             z:z,
             id:'[' +x +"," +y+","+z+']',
-            posX:(x-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posY:(y-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posZ:(z)*this.voxelSpacing+this.voxelSpacing/2,
+            posX:p_x,
+            posY:p_y,
+            posZ:p_z,
+            rotY:r_y,
             replay:replay
         }
     });
@@ -267,9 +290,10 @@ globals.prototype.adjustTimeStep=function (addRemove,x,y,z){
             z:z,
             id:'[' +x +"," +y+","+z+']',
             addRemove:addRemove,
-            posX:(x-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posY:(y-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posZ:(z)*this.voxelSpacing+this.voxelSpacing/2
+            posX:p_x,
+            posY:p_y,
+            posZ:p_z,
+            rotY:r_y
         }
     });
     document.dispatchEvent(adjustTimeStepEvent);
@@ -283,9 +307,9 @@ globals.prototype.selectNode=function (x,y,z){
             y:y,
             z:z,
             id:'[' +x +"," +y+","+z+']',
-            posX:(x-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posY:(y-this.gridSize/2)*this.voxelSpacing+this.voxelSpacing/2,
-            posZ:(z)*this.voxelSpacing+this.voxelSpacing/2
+            posX:p_x,
+            posY:p_y,
+            posZ:p_z
         }
     });
     document.dispatchEvent(selectNodeEvent);
@@ -293,6 +317,7 @@ globals.prototype.selectNode=function (x,y,z){
 //////////////////////////////////////////////
 
 //////////////////////utils//////////////////
+//rulw:utilities shouldn't be dependednt on globals
 function utilities(){
 };
 
@@ -338,12 +363,53 @@ utilities.prototype.getNeighboursList=function(grid,x,y,z){
 
             }
         }
-        list.push([x1,y1,z1]);
+        if(this.inBounds(grid.gridSize,x1,y1,z1)){
+            list.push([x1,y1,z1]);
+        }
+        
 
     }
     return list;
 
 }
+utilities.prototype.inBounds=function(gridSize,x,y,z){
+    return (x>=0&&x<gridSize&& y>=0&&y<gridSize&& z>=0&&z<gridSize);
+}
+
+utilities.prototype.getTransforms=function(grid,x, y,z){
+    var s_x=grid.voxelScaleX;
+    var s_z=grid.voxelScaleY;
+    var s_y=grid.voxelScaleZ;
+
+    var p_x=0.0;
+    var p_y=0.0;
+    var p_z=0.0;
+    var r_y=0.0;
+    if(z%2!=0){
+        r_y=grid.zLayerRotation;
+        p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset);
+        p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset);
+
+    }
+    if(grid.doubleOffset){
+        if(parseInt(z/2)%2!=0){
+            p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset2);
+            p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset2);
+        }
+    }
+
+    p_x+=grid.voxelSpacing*grid.xScale*(x );
+    p_z+=grid.voxelSpacing*grid.yScale*(y );
+    p_y+=grid.voxelSpacing*grid.zScale*(z );
+
+    if(y%2!=0){
+        p_x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset);
+        p_z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset);
+
+    }
+    return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y];
+}
+
 //////////////////////////////////////////////
 
 
diff --git a/01_Code/physical_computing_interface/graph/graph.js b/01_Code/physical_computing_interface/graph/graph.js
index e4f497644f5ede82a21290d53e66ed31275c5c15..2350d2491fd4a8c26d5881b6a3ee7a4d5b329ba5 100644
--- a/01_Code/physical_computing_interface/graph/graph.js
+++ b/01_Code/physical_computing_interface/graph/graph.js
@@ -201,15 +201,15 @@ document.addEventListener('DOMContentLoaded', function(){
     cy.on('tap', 'node', function(){
         // var nodes = this;
         selectedjson=this._private.data.data;
-        // console.log(this._private.data);
+
         var pos=utils.getXYZfromName(this._private.data.id);
         selectNode(pos.x,pos.y,pos.z);
     });
     document.addEventListener('selectNode', function (e) { 
         var tgt=cy.$id(e.detail.id);
         selectedjson=tgt._private.data.data;
-        // console.log(tgt.neighborhood().nodes());
-        // console.log(tgt._private.data);
+
+
     }, false);
 
     //select edge
@@ -218,7 +218,7 @@ document.addEventListener('DOMContentLoaded', function(){
         var nodes = this;
         selectNode();
         selectedjson=this._private.data;
-        // console.log(this._private.data);
+
     });
     
 
@@ -282,7 +282,7 @@ document.addEventListener('DOMContentLoaded', function(){
         for(var i=0;i<list.length;i++){
             var i1,j1,k1;
             [i1,j1,k1]=list[i];
-            if (occupancy[i1][j1][k1]) {
+            if (GLOBALS.occupancy[i1][j1][k1]) {
                 var tgt=cy.$id('[' +x +"," +y+","+z+']');
                 tgt._private.data.data.neighbors.push('[' +i1 +"," +j1+","+k1+']');
                 tgt=cy.$id('[' +i1 +"," +j1+","+k1+']');
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index 74a217f75d985f93a28460f456a3e1d2be063a0e..90c6181e513c57c5a8bea72b6dcb277c331135b0 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -29,6 +29,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
     this.gridSize=GLOBALS.gridSize;
     this.utils=utils;
     this.grid=GLOBALS.grid;
+    this.cubicGrid=GLOBALS.gridPresets.Cubic;
+    this.occupancy=GLOBALS.occupancy;
     // this.init();
 }
 
@@ -136,7 +138,6 @@ threejs.prototype.render=function() {
 
 ////////////////////////////
 threejs.prototype.buildGrid=function(gridSize){
-    // occupancy=[];
     this.occupancyHelper=[];
     for (var i=0;i<gridSize;++i){
         // occupancy.push([]);
@@ -150,29 +151,16 @@ threejs.prototype.buildGrid=function(gridSize){
             }
         }
     }
-    // buildVoxelAt( 10, 0,0);
-    // for (var i=0;i<gridSize;++i){
-    //     for (var j=0;j<gridSize;++j){
-    //         for (var k=0;k<3;++k){
-    //             // if(k<5){
-    //                 buildVoxelAt(grid, i, j,k);
-    //                 // console.log(i+" "+ j+" "+k)
-    //                 occupancy[i][j][k]=true;
-    //             // }
-    //         }
-    //     }
-    // }
+   
 }
 
 threejs.prototype.buildVoxelAt=function( grid,x, y,z){
-    // occupancy[x][y][z]=true;
-    // console.log(occupancy);
+    
     var voxel = new THREE.Mesh( this.cubeGeo, this.cubeMaterial );
     // var voxel = new THREE.Mesh( sphereGeo, cubeMaterial );
 
     var p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y;
-    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.getTransforms(grid,x, y,z);
-    // console.log(getTransforms(grid,x, y,z))
+    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(grid,x, y,z);
 
     voxel.scale.x=s_x;
     voxel.scale.z=s_z;
@@ -191,44 +179,11 @@ threejs.prototype.buildVoxelAt=function( grid,x, y,z){
     
     voxel.name="["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]";
 
+    
     this.scene.add(voxel);
     this.voxels.push(voxel);
 }
 
-threejs.prototype.getTransforms=function(grid,x, y,z){
-    var s_x=grid.voxelScaleX;
-    var s_z=grid.voxelScaleY;
-    var s_y=grid.voxelScaleZ;
-
-    var p_x=0.0;
-    var p_y=0.0;
-    var p_z=0.0;
-    var r_y=0.0;
-    if(z%2!=0){
-        r_y=grid.zLayerRotation;
-        p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset);
-        p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset);
-
-    }
-    if(grid.doubleOffset){
-        if(parseInt(z/2)%2!=0){
-            p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset2);
-            p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset2);
-        }
-    }
-
-    p_x+=grid.voxelSpacing*grid.xScale*(x );
-    p_z+=grid.voxelSpacing*grid.yScale*(y );
-    p_y+=grid.voxelSpacing*grid.zScale*(z );
-
-    if(y%2!=0){
-        p_x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset);
-        p_z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset);
-
-    }
-    return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y];
-}
-
 threejs.prototype.createHelperMeshes=function(grid,gridSize){
     for (var i=0;i<gridSize;++i){
         for (var j=0;j<gridSize;++j){
@@ -243,11 +198,10 @@ threejs.prototype.buildHelperSnap=function(grid,x,y,z){
     var geometry = new THREE.PlaneBufferGeometry( grid.voxelSpacing*grid.xScale, grid.voxelSpacing*grid.yScale );
     geometry.rotateX( - Math.PI / 2 );
     this.plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
-    // plane = new THREE.Mesh( geometry,helperMaterial );
+    // this.plane = new THREE.Mesh( geometry,this.helperMaterial );
     
 
-    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.getTransforms(grid,x, y,z);
-        // console.log(getTransforms(grid,x, y,z))
+    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(grid,x, y,z);
 
     this.plane.scale.x=s_x;
     this.plane.scale.z=s_z;
@@ -324,7 +278,7 @@ threejs.prototype.helperAt=function(x,y,z){
     if(x>=this.gridSize||y>=this.gridSize||z>=this.gridSize){
         return false;
     }
-    if(occupancy[x][y][z]||this.occupancyHelper[x][y][z]){
+    if(this.occupancy[x][y][z]||this.occupancyHelper[x][y][z]){
         return false;
     }
     
@@ -344,13 +298,22 @@ threejs.prototype.updateHelperMeshesAfterRemove=function(grid,x,y,z){
             var name='[' +x1+"," +y1+","+z1+']';
             var object = this.scene.getObjectByName( 'p'+name );
             this.scene.remove( object );
-            this.objects.splice( three.objects.indexOf( object ), 1 );
-            object = three.scene.getObjectByName( 's'+name );
+            this.objects.splice( this.objects.indexOf( object ), 1 );
+            object = this.scene.getObjectByName( 's'+name );
             this.scene.remove( object );
             this.occupancyHelper[x1][y1][z1]=false;
         }
-
     }
+    var list=this.utils.getNeighboursList(this.cubicGrid,x,y,z); 
+    for(var i=0;i<list.length;i++){
+        var x1,y1,z1;
+        [x1,y1,z1]=list[i];
+        if(this.occupancy[x1][y1][z1]){
+            this.buildNeighbourHelpers(grid, x1, y1,z1);
+        }
+        
+    }
+    
 }
 //
 threejs.prototype.changeToGrid=function(newGrid){
@@ -386,9 +349,9 @@ 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(three.grid,obj.x, obj.y,obj.z);
-        // console.log(getTransforms(grid,x, y,z))
+        [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
 
+        
         // rollOverMesh.scale.x=s_x;
         // rollOverMesh.scale.z=s_z;
         // rollOverMesh.scale.y=s_y;
@@ -418,15 +381,17 @@ function onDocumentMouseDownThree( event ) {
     three.raycaster.setFromCamera( three.mouse, three.camera );
     var intersects = three.raycaster.intersectObjects( three.objects );
     var intersects1 = three.raycaster.intersectObjects( three.voxels );
+    
     if ( intersects.length > 0  ||intersects1.length>0){
         if(event.which==1 && intersects.length > 0) { //left click
             var intersect = intersects[ 0 ];
             var obj=utils.getXYZfromName(intersect.object.name);
             obj=utils.getXYZfromName(three.rollOverMesh.name);
             GLOBALS.addNode (obj.x, obj.y,obj.z);
-        }else if ( intersects1.length > 0 && event.which==3){//right click
+        }
+        if ( intersects1.length > 0 && event.which==3){//right click
                 var intersect = intersects1[ 0 ];
-                // console.log(intersect.object);
+                
                 var obj=utils.getXYZfromName(intersect.object.name);
                 GLOBALS.removeNode(obj.x,obj.y,obj.z);
         }
@@ -439,9 +404,8 @@ document.addEventListener('removeNode', function (e) {
     var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
     var object = three.scene.getObjectByName( name );
     three.scene.remove( object );
-    three.voxels.splice( three.objects.indexOf( object ), 1 );
-    three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z);
-    
+    three.voxels.splice( three.voxels.indexOf( object ), 1 );
+    three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z);    
     
 }, false);