grid that is actually quantized

5 files changed, 28 insertions, 7 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index 24a66a5..818cb55 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -36,14 +36,20 @@ environment.init = function(){
 	}))
 	
 	builder.init()
-	clipper.init()
-	window.scene && scene.update()
-	environment.update()
 
 	if (window.location.href.match(/stone/)) {
-		$(".face").css("background","url(http://i.asdf.us/im/4a/_1398144847_frankhats.gif)")
+		builder.tube.on("clip", function(){
+			$(".face").css({
+				"background-image": "url(http://i.asdf.us/im/4a/_1398144847_frankhats.gif)"
+			})
+		})
 		$("#map").hide()
 	}
+
+	clipper.init()
+	window.scene && scene.update()
+	environment.update()
+
 }
 environment.update = function(t){
 	if (window.scene && scene.camera) {
diff --git a/assets/javascripts/rectangles/map/_map.js b/assets/javascripts/rectangles/map/_map.js
index 2815b89..72901a1 100644
--- a/assets/javascripts/rectangles/map/_map.js
+++ b/assets/javascripts/rectangles/map/_map.js
@@ -12,8 +12,8 @@ var map = new function(){
 	
 	base.sides = function(){
 		var sides = base.bounds.clone().div(2).div(base.zoom)
-		return new rect( base.center.a - sides.a, base.center.b - sides.b,
-										 base.center.a + sides.a, base.center.b + sides.b )
+		return new rect( base.center.a - sides.a, -base.center.b - sides.b,
+										 base.center.a + sides.a, -base.center.b + sides.b )
 	}
 
 	base.zoom = 1/8
diff --git a/assets/javascripts/rectangles/map/draw.js b/assets/javascripts/rectangles/map/draw.js
index cfa99d4..57faa10 100644
--- a/assets/javascripts/rectangles/map/draw.js
+++ b/assets/javascripts/rectangles/map/draw.js
@@ -100,6 +100,18 @@ map.draw = new function(){
 		ctx.fillStyle = "#eee";
 		dot_at(300,0)
 		dot_at(0,300)
+		
+		ctx.strokeStyle = "rgba(0,0,0,0.1)"
+		ctx.lineWidth = 1/map.zoom
+		
+		var sides = map.sides()
+		var quant = sides.clone().quantize(200)
+		for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) {
+			line(x, sides.y.a, x, sides.y.b)
+		}
+		for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) {
+			line(sides.x.a, y, sides.x.b, y)
+		}
 	}
 
 	//
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
index 10496e3..e7d2cf7 100644
--- a/assets/javascripts/rectangles/map/ui.js
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -26,6 +26,7 @@ map.ui = new function(){
 		cursor.y.div(h).sub(0.5).mul(map.bounds.b / map.zoom).sub(map.center.b)
 
 		if (e.ctrlKey || e.which === 3) {
+			cursor.quantize(1)
 			map.center.a = cursor.x.a
 			map.center.b = -cursor.y.a
 			console.log(map.center+"")
@@ -69,7 +70,6 @@ map.ui = new function(){
 	}
 
 	function up (e, cursor, new_cursor) {
-
 		new_cursor.x.div(w).add(0.5).mul(map.bounds.a / map.zoom).add(map.center.a)
 		new_cursor.y.div(h).sub(0.5).mul(map.bounds.b / map.zoom).sub(map.center.b)
 
diff --git a/assets/javascripts/rectangles/models/rect.js b/assets/javascripts/rectangles/models/rect.js
index 5623dc8..d18c6af 100644
--- a/assets/javascripts/rectangles/models/rect.js
+++ b/assets/javascripts/rectangles/models/rect.js
@@ -30,10 +30,12 @@ window.rect = (function(){
 	rect.prototype.mul = function(n){
 		this.x.mul(n)
 		this.y.mul(n)
+		return this
 	}
 	rect.prototype.div = function(n){
 		this.x.div(n)
 		this.y.div(n)
+		return this
 	}
 
 	rect.prototype.translate = function(translation){
@@ -63,6 +65,7 @@ window.rect = (function(){
 	rect.prototype.quantize = function(n){
 		this.x.quantize(n)
 		this.y.quantize(n)
+		return this
 	}
 	rect.prototype.split = function(r){
 		var rz = this