shift to quantize

author: Julie Lala <jules@okfoc.us> 2014-04-11 00:29:49 -0400
committer: Julie Lala <jules@okfoc.us> 2014-04-11 00:29:49 -0400
commit: 30d75e82c7649ef2ab9f71fa360f5735eb098bc5 (patch)
tree: 92f4b287e250ebfb471d871e41382b5222c0790f
parent: 218ba4f20989d05ad24a35fafda6f0d39cfa7b89 (diff)
6 files changed, 205 insertions, 113 deletions
diff --git a/assets/javascripts/util.js b/assets/javascripts/util.js
index d100731..81103aa 100644
--- a/assets/javascripts/util.js
+++ b/assets/javascripts/util.js
@@ -20,6 +20,7 @@ function mix(n,a,b){ return a*(1-n)+b*n }
 function ceil(n){ return Math.ceil(n) }
 function floor(n){ return Math.floor(n) }
 function round(n){ return Math.round(n) }
+function quantize(n,a){ return round(n / a) * a }
 function max(a,b){ return Math.max(a,b) }
 function min(a,b){ return Math.min(a,b) }
 function abs(n){ return Math.abs(n) }
diff --git a/assets/stylesheets/css.css b/assets/stylesheets/css.css
index e59793a..1e54a94 100644
--- a/assets/stylesheets/css.css
+++ b/assets/stylesheets/css.css
@@ -9,6 +9,8 @@ html, body {
   height: 100%;
 	background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(244,251,255,1) 59%, rgba(244,251,255,1) 59%, rgba(234,247,255,1) 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(59%,rgba(244,251,255,1)), color-stop(59%,rgba(244,251,255,1)), color-stop(100%,rgba(234,247,255,1))); /* Chrome,Safari4+ */
+	font-family: sans-serif;
+	font-weight: 300;
 }
 .mx-scene {
   z-index: 1;
diff --git a/rect.js b/rect.js
new file mode 100644
index 0000000..dcf2d33
--- /dev/null
+++ b/rect.js
@@ -0,0 +1,60 @@
+function rect (x0,y0,x1,y1){
+	if (x0 instanceof vec2) {
+		this.x = x0
+		this.y = y0
+	}
+	else if (x1 === undefined) {
+		this.x = new vec2(x0,x0)
+		this.y = new vec2(y0,y0)
+	}
+	else {
+		this.x = new vec2(x0,x1)
+		this.y = new vec2(y0,y1)
+	}
+	this.translation = new vec2(0,0)
+}
+rect.prototype.clone = function(){
+	return new rect( this.x.clone(), this.y.clone() )
+}
+rect.prototype.center = function(){
+	return new vec2(this.x.midpoint(), this.y.midpoint())
+}
+rect.prototype.area = function(){
+	return this.x.length() * this.y.length()
+}
+rect.prototype.normalize = function(){
+	this.x.normalize().add(this.translation.a)
+	this.y.normalize().add(this.translation.b)
+	this.translation.a = this.translation.b = 0
+	return this
+}
+rect.prototype.contains = function(x,y){
+	return this.x.contains(x) && this.y.contains(y)
+}
+rect.prototype.intersects = function(r){
+	return this.x.intersects(r.x) && this.y.intersects(r.y)
+}
+rect.prototype.width = function(){ return this.x.length() }
+rect.prototype.height = function(){ return this.y.length() }
+rect.prototype.fill = function(){
+	ctx.fillRect(this.x.a + this.translation.a, this.y.a + this.translation.b, this.x.length(), this.y.length())
+}
+rect.prototype.stroke = function(){
+	ctx.beginPath()
+	ctx.moveTo(this.x.a, this.y.a)
+	ctx.lineTo(this.x.b, this.y.b)
+	ctx.stroke()
+}
+rect.prototype.perimeter = function(){
+	line( this.x.a, this.y.a, this.x.b, this.y.a, this.translation )
+	line( this.x.a, this.y.b, this.x.b, this.y.b, this.translation )
+	line( this.x.a, this.y.a, this.x.a, this.y.b, this.translation )
+	line( this.x.b, this.y.a, this.x.b, this.y.b, this.translation )
+}
+rect.prototype.toString = function(){
+	return "[" + this.x.toString() + " " + this.y.toString() + "]"
+}
+rect.prototype.quantize = function(n){
+	this.x.quantize(n)
+	this.y.quantize(n)
+}
diff --git a/rectagnesl-drag.html b/rectangles-drag.html
index 086ce27..086ce27 100644
--- a/rectagnesl-drag.html
+++ b/rectangles-drag.html
diff --git a/rectangles.html b/rectangles.html
index 8878985..aa31344 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -6,6 +6,9 @@
 body > div {
 	float: left;
 }
+#info {
+	padding: 30px;
+}
 </style>
 </head>
 <body>
@@ -17,118 +20,15 @@ body > div {
 
 </body>
 <script type="text/javascript" src="assets/javascripts/util.js"></script>
+<script type="text/javascript" src="rect.js"></script>
+<script type="text/javascript" src="vec2.js"></script>
 <script type="text/javascript">
 
-function vec2(a,b){
-	this.a = a
-	this.b = b
-}
-vec2.prototype.magnitude = function(){
-	return this.b-this.a
-}
-vec2.prototype.length = function(){
-	return abs(this.b-this.a)
-}
-vec2.prototype.clone = function(){
-	return new vec2(this.a, this.b)
-}
-vec2.prototype.normalize = function(){
-	if (this.b < this.a) {
-		this.a = this.a ^ this.b
-		this.b = this.a ^ this.b
-		this.a = this.a ^ this.b
-	}
-	return this
-}
-vec2.prototype.midpoint = function(){
-	return lerp(0.5, this.a, this.b)
-}
-vec2.prototype.add = function(n){
-	this.a += n
-	this.b += n
-}
-vec2.prototype.sub = function(n){
-	this.a -= n
-	this.b -= n
-}
-vec2.prototype.mul = function(n){
-	this.a *= n
-	this.b *= n
-}
-vec2.prototype.div = function(n){
-	this.a /= n
-	this.b /= n
-}
-vec2.prototype.contains = function(n){
-	return this.a <= n && n <= this.b
-}
-vec2.prototype.intersects = function(v){
-  return (this.a <= v.a && this.b > v.a) ||
-         (v.a <= this.a && v.b > this.a)
-}
-vec2.prototype.union = function(v){
-	if (this.intersects(v)) {
-	  return new vec2( min(this.a,v.a), max(this.b, v.b) )
-	}
-}
-vec2.prototype.intersection = function(v){
-	if (this.intersects(v)) {
-	  return new vec2( max(this.a,v.a), min(this.b, v.b) )
-	}
-}
-
-function rect (x0,y0,x1,y1){
-	if (x0 instanceof vec2) {
-		this.x = x0
-		this.y = y0
-	}
-	else if (x1 === undefined) {
-		this.x = new vec2(x0,x0)
-		this.y = new vec2(y0,y0)
-	}
-	else {
-		this.x = new vec2(x0,x1)
-		this.y = new vec2(y0,y1)
-	}
-	this.translation = new vec2(0,0)
-}
-rect.prototype.clone = function(){
-	return new rect( this.x.clone(), this.y.clone() )
-}
-rect.prototype.center = function(){
-	return new vec2(this.x.midpoint(), this.y.midpoint())
-}
-rect.prototype.normalize = function(){
-	this.x.normalize().add(this.translation.a)
-	this.y.normalize().add(this.translation.b)
-	this.translation.a = this.translation.b = 0
-	return this
-}
-rect.prototype.contains = function(x,y){
-	return this.x.contains(x) && this.y.contains(y)
-}
-rect.prototype.intersects = function(r){
-	return this.x.intersects(r.x) && this.y.intersects(r.y)
-}
-rect.prototype.width = function(){ return this.x.length() }
-rect.prototype.height = function(){ return this.y.length() }
-rect.prototype.fill = function(){
-	ctx.fillRect(this.x.a + this.translation.a, this.y.a + this.translation.b, this.x.length(), this.y.length())
-}
-rect.prototype.stroke = function(){
-	ctx.beginPath()
-	ctx.moveTo(this.x.a, this.y.a)
-	ctx.lineTo(this.x.b, this.y.b)
-	ctx.stroke()
-}
-
-
-
 var canvas = document.createElement("canvas")
 var ctx = canvas.getContext("2d")
 var w = canvas.width = 500
 var h = canvas.height = 500
-document.body.appendChild(canvas)
+document.querySelector("#map").appendChild(canvas)
 
 var rects = [
 	new rect(100,100, 300,300),
@@ -140,27 +40,45 @@ var mouse = new rect(0,0,0,0)
 canvas.addEventListener("mousedown", function(e){
 	var x = e.pageX, y = e.pageY
 	mouse = new rect (x,y)
+	if (e.shiftKey) {
+		mouse.quantize(10)
+	}
 
 	var intersects = rects.filter(function(r){ return r.contains(x,y) })
 	console.log(intersects)
+	
 	if (intersects.length){
 		dragging = intersects[0]
 	}
 	else {
 		creating = true
 	}
+	if (e.shiftKey && dragging) {
+		dragging.quantize(10)
+	}
 
 })
 canvas.addEventListener("mousemove", function(e){
-	mouse.x.b = e.pageX
-	mouse.y.b = e.pageY
+	var x, y
+	if (e.shiftKey) {
+		x = quantize( e.pageX, 10 )
+		y = quantize( e.pageY, 10 )
+	}
+	else {
+		x = e.pageX
+		y = e.pageY
+	}
+
+	mouse.x.b = x
+	mouse.y.b = y
+	
 	if (dragging) {
 		dragging.translation.a = mouse.x.magnitude()
 		dragging.translation.b = mouse.y.magnitude()
 	}
 	else if (creating) {
-		mouse.x.b = e.pageX
-		mouse.y.b = e.pageY
+		mouse.x.b = x
+		mouse.y.b = y
 	}
 	else {
 		mouse.x.a = mouse.x.b
@@ -202,7 +120,13 @@ function draw_ruler(){
 	}
 }
 
-function line (x,y,a,b){
+function line (x,y,a,b,translation){
+	if (translation) {
+		x += translation.a
+		a += translation.a
+		y += translation.b
+		b += translation.b
+	}
 	ctx.beginPath()
 	ctx.moveTo(x,y)
 	ctx.lineTo(a,b)
@@ -210,11 +134,50 @@ function line (x,y,a,b){
 }
 
 function solve_rects(){
+	rects = sort_rects()
+	regions = []
 	var x_intervals = []
 	var y_intervals = []
+	var left, right
 	for (var i = 0; i < rects.length; i++) {
-		
+		left = rects[i]
+		left.regions = []
+		for (var j = 0; j < rects.length; j++) {
+			right = rects[j]
+			if (left.intersects(right)) {
+// 				left.clipTo(right)
+// 				right.clipTo(left)
+			}
+			if (left.x.b < right.x.a) {
+				break
+			}
+		}
 	}
+// 	for (var i = 0; i < rects.length; i++) {
+// 		regions.concat(rect[i].regions)
+// 	}
+	// generate floor and ceiling for some regions
+	// generate walls from surviving regions
+	// generate ceiling-walls where ceiling has discontinuity
+	
+	document.getElementById("intersects").innerHTML = rects.join("<br>")
+}
+function sort_rects(){
+	return rects.sort(function(a,b){
+		if (a.x.a <= b.x.a) {
+			return -1
+		}
+		if (a.x.a > b.x.a) {
+			return 1
+		}
+		if (a.y.a < b.y.a) {
+			return -1
+		}
+		if (a.y.a > b.y.a) {
+			return 1
+		}
+		return 0
+	})
 }
 function draw_regions(){
 }
@@ -225,7 +188,7 @@ function draw_rects(){
 	ctx.setLineDash([1,1]);
 
 	for (var i = 0; i < rects.length; i++) {
-		ctx.fillStyle = "rgba(0,200,220,0.5)"
+		ctx.fillStyle = "rgba(0,200,220,0.2)"
 		rects[i].fill()
 // 			line(rect.x, 0, rect.x, rect.y)
 // 			line(0, rect.y, rect.x, rect.y)
diff --git a/vec2.js b/vec2.js
new file mode 100644
index 0000000..1860179
--- /dev/null
+++ b/vec2.js
@@ -0,0 +1,66 @@
+function vec2(a,b){
+	this.a = a
+	this.b = b
+}
+vec2.prototype.magnitude = function(){
+	return this.b-this.a
+}
+vec2.prototype.length = function(){
+	return abs(this.b-this.a)
+}
+vec2.prototype.clone = function(){
+	return new vec2(this.a, this.b)
+}
+vec2.prototype.normalize = function(){
+	if (this.b < this.a) {
+		this.a = this.a ^ this.b
+		this.b = this.a ^ this.b
+		this.a = this.a ^ this.b
+	}
+	return this
+}
+vec2.prototype.midpoint = function(){
+	return lerp(0.5, this.a, this.b)
+}
+vec2.prototype.add = function(n){
+	this.a += n
+	this.b += n
+}
+vec2.prototype.sub = function(n){
+	this.a -= n
+	this.b -= n
+}
+vec2.prototype.mul = function(n){
+	this.a *= n
+	this.b *= n
+}
+vec2.prototype.div = function(n){
+	this.a /= n
+	this.b /= n
+}
+vec2.prototype.contains = function(n){
+	return this.a <= n && n <= this.b
+}
+// assumes (vec2)v falls to the right of (vec2)this
+vec2.prototype.intersects = function(v){
+  return (this.b > v.a) || (v.b > this.a)
+}
+vec2.prototype.union = function(v){
+	if (this.intersects(v)) {
+	  return new vec2( min(this.a,v.a), max(this.b, v.b) )
+	}
+}
+vec2.prototype.intersection = function(v){
+	if (this.intersects(v)) {
+	  return new vec2( max(this.a,v.a), min(this.b, v.b) )
+	}
+}
+vec2.prototype.toString = function(){
+	return "[" + this.a + " " + this.b + "]"
+}
+vec2.prototype.quantize = function(n){
+	n = n || 10
+	this.a = quantize(this.a, n)
+	this.b = quantize(this.b, n)
+}
+
author	Julie Lala <jules@okfoc.us>	2014-04-11 00:29:49 -0400
committer	Julie Lala <jules@okfoc.us>	2014-04-11 00:29:49 -0400
commit	30d75e82c7649ef2ab9f71fa360f5735eb098bc5 (patch)
tree	92f4b287e250ebfb471d871e41382b5222c0790f
parent	218ba4f20989d05ad24a35fafda6f0d39cfa7b89 (diff)