positioning sides (half done)

6 files changed, 46 insertions, 39 deletions

diff --git a/assets/javascripts/mx/mx.js b/assets/javascripts/mx/mx.js
index b7d0bca..df9abe7 100644
--- a/assets/javascripts/mx/mx.js
+++ b/assets/javascripts/mx/mx.js
@@ -389,6 +389,7 @@ var MX = MX || (function (undefined) {
                 var index = parent.children.indexOf(child)
                 if (index !== -1) {
                     parent.children.splice(index, 1)
+                    parent.el.removeChild(child.el)
                     child.parent = undefined
                 }
             })
diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index aa7af50..e2e8e31 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -2,17 +2,22 @@
 var environment = new function(){}
 environment.init = function(){
 	scene.camera.move({
-		"x": 0,
-		"y": 0,
-		"z": -1000,
-		"rotationX": 0.085,
-		"rotationY": 0.025
+		"x": 240,
+		"y": -1000,
+		"z": 240,
+		"rotationX": -PI/2,
+		"rotationY": 0 // PI
 	})
 	map && map.zoom(3.00) && map.recenter()
 
+	clipper.rects.push( new rect(100,100, 200,300) )
+	clipper.rects.push( new rect(200,300, 300,500) )
+
+	clipper.rects.push( new rect(300,100, 600,300) )
+	clipper.rects.push( new rect(400,200, 700,400) )
+
 	clipper.init()
 	scene.update()
 }
 environment.update = function(t){
 }
-
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js
index 1c576a5..ef0a28c 100644
--- a/assets/javascripts/rectangles/builder.js
+++ b/assets/javascripts/rectangles/builder.js
@@ -20,6 +20,7 @@ var builder = new function(){
 		})
 	}
 	function clear (){
+		console.log(els.length)
 		els.forEach(function(el){
 			scene.remove(el)
 		})
diff --git a/assets/javascripts/rectangles/clipper.js b/assets/javascripts/rectangles/clipper.js
index 8cefca3..5bbc155 100644
--- a/assets/javascripts/rectangles/clipper.js
+++ b/assets/javascripts/rectangles/clipper.js
@@ -27,10 +27,7 @@ var clipper = new function(){
 		z = false
 	}
 
-	var rects = base.rects = [
-		new rect(100,100, 300,300),
-		new rect(200,200, 400,400),
-	]
+	var rects = base.rects = []
 
 	this.creating = false
 	this.dragging = false
diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js
index 67abdee..3c6eedc 100644
--- a/assets/javascripts/rectangles/rect.js
+++ b/assets/javascripts/rectangles/rect.js
@@ -186,52 +186,50 @@ window.rect = (function(){
 		
 		var width = this.x.length()
 		var depth = this.y.length()
-		var height = 800
+		var height = 500
 		
 		if (this.sides & FRONT) {
 			el = wall('.face.front')
-			el.scaleX = width
-			el.scaleY = height
-			el.z = this.y.a - depth/2
+			el.width = width
+			el.height = height
 			el.x = this.x.a
-			el.y = height/2
-			list.push(el)
-		}
-		if (this.sides & LEFT) {
-			el = wall('.face.left')
-			el.rotationY = -HALF_PI
-			el.scaleY = height
-			el.scaleZ = depth
-			el.x = this.x.a - width/2
-			el.z = this.y.a
-			el.y = height/2
-			list.push(el)
-		}
-		if (this.sides & RIGHT) {
-			el = wall('.face.right')
-			el.rotationY = HALF_PI
-			el.scaleY = height
-			el.scaleZ = depth
-			el.x = this.x.a + width/2
-			el.y = height/2
 			el.z = this.y.a
 			list.push(el)
 		}
 		if (this.sides & BACK) {
 			var el = wall('.face.back')
-			el.scaleX = width
-			el.scaleY = height
+			el.width = width
+			el.height = height
 			el.rotationY = PI
-			el.z = this.y.a + depth/2
-			el.y = height/2
 			el.x = this.x.a
+			el.z = this.y.a + depth
 			list.push(el)
 		}
-		
+
+// 		if (this.sides & LEFT) {
+// 			el = wall('.face.left')
+// 			el.rotationY = -HALF_PI
+// 			el.height = height
+// 			el.width = depth
+// 			el.z = this.y.a - depth/2
+// 			el.x = this.x.a
+// 			list.push(el)
+// 		}
+// 		if (this.sides & RIGHT) {
+// 			el = wall('.face.right')
+// 			el.rotationY = HALF_PI
+// 			el.height = height
+// 			el.width = depth
+// 			el.z = this.y.a - depth/2
+// 			el.x = this.x.b
+// 			list.push(el)
+// 		}
+
 		function wall(klass){
 			var el = new MX.Object3D(klass || ".face")
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
 			el.z = el.y = el.x = 0
+			el.y = height/2
 			el.type = "Face"
 			return el
 		}
diff --git a/rectangles.html b/rectangles.html
index 99862de..b4671bf 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -3,6 +3,7 @@
 <head>
 	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
 <style type="text/css">
+body { background: black; }
 body > div {
 	float: left;
 }
@@ -17,6 +18,10 @@ body > div {
 .face {
 	background-color: #fff;
 }
+.front { background-color: #f00; }
+.back  { background-color: #800; }
+.left  { background-color: #00f; }
+.right { background-color: #008; }
 </style>
 </head>
 <body>