From 30d75e82c7649ef2ab9f71fa360f5735eb098bc5 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Fri, 11 Apr 2014 00:29:49 -0400
Subject: shift to quantize

---
 assets/javascripts/util.js |   1 +
 assets/stylesheets/css.css |   2 +
 rect.js                    |  60 +++++++++++
 rectagnesl-drag.html       | 246 ---------------------------------------------
 rectangles-drag.html       | 246 +++++++++++++++++++++++++++++++++++++++++++++
 rectangles.html            | 189 ++++++++++++++--------------------
 vec2.js                    |  66 ++++++++++++
 7 files changed, 451 insertions(+), 359 deletions(-)
 create mode 100644 rect.js
 delete mode 100644 rectagnesl-drag.html
 create mode 100644 rectangles-drag.html
 create mode 100644 vec2.js

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/rectagnesl-drag.html
deleted file mode 100644
index 086ce27..0000000
--- a/rectagnesl-drag.html
+++ /dev/null
@@ -1,246 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
-<style type="text/css">
-body > div {
-	float: left;
-}
-</style>
-</head>
-<body>
-
-<div id="map"></div>
-<div id="info">
-	<span id="intersects"></span>
-</div>
-
-</body>
-<script type="text/javascript" src="assets/javascripts/util.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.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.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)
-
-var rects = [
-	new rect(100,100, 300,300),
-	new rect(200,200, 400,400),
-]
-
-var creating = false, dragging = false
-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)
-
-	var intersects = rects.filter(function(r){ return r.contains(x,y) })
-	console.log(intersects)
-	if (intersects.length){
-		dragging = intersects[0]
-	}
-	else {
-		creating = true
-	}
-
-})
-canvas.addEventListener("mousemove", function(e){
-	mouse.x.b = e.pageX
-	mouse.y.b = e.pageY
-	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
-	}
-	else {
-		mouse.x.a = mouse.x.b
-		mouse.y.a = mouse.y.b
-	}
-})
-document.addEventListener("mouseup", function(e){
-	if (creating) {
-		if (mouse.height() != 0 && mouse.width() != 0) {
-			rects.push(mouse.normalize())
-		}
-	}
-	if (dragging) {
-		dragging.normalize()
-	}
-	mouse = new rect(e.pageX, e.pageY)
-	creating = dragging = false
-})
-
-function animate(){
-	requestAnimationFrame(animate)
-	ctx.fillStyle = "#fff"
-	ctx.fillRect(0,0,w,h)
-	
-	solve_rects()
-	draw_ruler()
-	draw_rects()
-	draw_mouse()
-}
-animate()
-
-function draw_ruler(){
-	ctx.strokeStyle = "rgba(80,80,80,0.5)"
-	ctx.lineWidth = 1
-	var len = 5
-	for (var i = 0.5; i < w; i += 10) {
-		line(i, 0, i, len)
-		line(0, i, len, i)
-	}
-}
-
-function line (x,y,a,b){
-	ctx.beginPath()
-	ctx.moveTo(x,y)
-	ctx.lineTo(a,b)
-	ctx.stroke()
-}
-
-function solve_rects(){
-	var x_intervals = []
-	var y_intervals = []
-	for (var i = 0; i < rects.length; i++) {
-		
-	}
-}
-function draw_regions(){
-}
-function draw_rects(){
-	ctx.strokeStyle = "rgba(80,80,80,0.5)"
-	ctx.lineWidth = 1
-	// ctx.setLineDash([randint(5)+2,randint(2)+2]);
-	ctx.setLineDash([1,1]);
-
-	for (var i = 0; i < rects.length; i++) {
-		ctx.fillStyle = "rgba(0,200,220,0.5)"
-		rects[i].fill()
-// 			line(rect.x, 0, rect.x, rect.y)
-// 			line(0, rect.y, rect.x, rect.y)
-	}
-}
-function draw_mouse(){
-	ctx.fillStyle = "rgba(255,0,0,0.4)";
-	ctx.beginPath();
-	ctx.arc(mouse.x.b, mouse.y.b, 5, 0, 2*Math.PI, false);
-	ctx.fill();
-
-	if (mouse.width() != 0 && mouse.height() != 0) {
-		if (dragging) {
-			mouse.stroke()
-		}
-		else {
-			ctx.fillStyle = "rgba(255,255,0,0.5)"
-			mouse.clone().normalize().fill()
-		}
-	}
-}
-
-</script>
-</html>
diff --git a/rectangles-drag.html b/rectangles-drag.html
new file mode 100644
index 0000000..086ce27
--- /dev/null
+++ b/rectangles-drag.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
+<style type="text/css">
+body > div {
+	float: left;
+}
+</style>
+</head>
+<body>
+
+<div id="map"></div>
+<div id="info">
+	<span id="intersects"></span>
+</div>
+
+</body>
+<script type="text/javascript" src="assets/javascripts/util.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.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.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)
+
+var rects = [
+	new rect(100,100, 300,300),
+	new rect(200,200, 400,400),
+]
+
+var creating = false, dragging = false
+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)
+
+	var intersects = rects.filter(function(r){ return r.contains(x,y) })
+	console.log(intersects)
+	if (intersects.length){
+		dragging = intersects[0]
+	}
+	else {
+		creating = true
+	}
+
+})
+canvas.addEventListener("mousemove", function(e){
+	mouse.x.b = e.pageX
+	mouse.y.b = e.pageY
+	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
+	}
+	else {
+		mouse.x.a = mouse.x.b
+		mouse.y.a = mouse.y.b
+	}
+})
+document.addEventListener("mouseup", function(e){
+	if (creating) {
+		if (mouse.height() != 0 && mouse.width() != 0) {
+			rects.push(mouse.normalize())
+		}
+	}
+	if (dragging) {
+		dragging.normalize()
+	}
+	mouse = new rect(e.pageX, e.pageY)
+	creating = dragging = false
+})
+
+function animate(){
+	requestAnimationFrame(animate)
+	ctx.fillStyle = "#fff"
+	ctx.fillRect(0,0,w,h)
+	
+	solve_rects()
+	draw_ruler()
+	draw_rects()
+	draw_mouse()
+}
+animate()
+
+function draw_ruler(){
+	ctx.strokeStyle = "rgba(80,80,80,0.5)"
+	ctx.lineWidth = 1
+	var len = 5
+	for (var i = 0.5; i < w; i += 10) {
+		line(i, 0, i, len)
+		line(0, i, len, i)
+	}
+}
+
+function line (x,y,a,b){
+	ctx.beginPath()
+	ctx.moveTo(x,y)
+	ctx.lineTo(a,b)
+	ctx.stroke()
+}
+
+function solve_rects(){
+	var x_intervals = []
+	var y_intervals = []
+	for (var i = 0; i < rects.length; i++) {
+		
+	}
+}
+function draw_regions(){
+}
+function draw_rects(){
+	ctx.strokeStyle = "rgba(80,80,80,0.5)"
+	ctx.lineWidth = 1
+	// ctx.setLineDash([randint(5)+2,randint(2)+2]);
+	ctx.setLineDash([1,1]);
+
+	for (var i = 0; i < rects.length; i++) {
+		ctx.fillStyle = "rgba(0,200,220,0.5)"
+		rects[i].fill()
+// 			line(rect.x, 0, rect.x, rect.y)
+// 			line(0, rect.y, rect.x, rect.y)
+	}
+}
+function draw_mouse(){
+	ctx.fillStyle = "rgba(255,0,0,0.4)";
+	ctx.beginPath();
+	ctx.arc(mouse.x.b, mouse.y.b, 5, 0, 2*Math.PI, false);
+	ctx.fill();
+
+	if (mouse.width() != 0 && mouse.height() != 0) {
+		if (dragging) {
+			mouse.stroke()
+		}
+		else {
+			ctx.fillStyle = "rgba(255,255,0,0.5)"
+			mouse.clone().normalize().fill()
+		}
+	}
+}
+
+</script>
+</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)
+}
+
-- 
cgit v1.2.3-70-g09d2


From 6f895c8db89ce8ae6295db1dc93284cdb521217c Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Fri, 11 Apr 2014 10:20:57 -0400
Subject: notes

---
 rect.js         | 30 ++++++++++++++++++++++++++++++
 rectangles.html |  2 +-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/rect.js b/rect.js
index dcf2d33..f643b6f 100644
--- a/rect.js
+++ b/rect.js
@@ -58,3 +58,33 @@ rect.prototype.quantize = function(n){
 	this.x.quantize(n)
 	this.y.quantize(n)
 }
+rect.prototype.reset = function(){
+	var copy = this.clone()
+	copy.sides = 0xf
+	this.regions = [ copy ]
+}
+rect.prototype.clipTo = function(r){
+	// for each of this rect's regions split the region if necessary
+	for (var i = 0, len = regions.length; i < len; i++) {
+		if (regions[i] && regions[i].intersects(r)) {
+			var splits = regions[i].split(r)
+			regions.concat(splits)
+			regions[i] = null
+		}
+	}
+}
+rect.prototype.split = function(r){
+	var splits = []
+
+	
+
+	// 1 split (horizontal)
+	// 1 split (vertical)
+	// 2 splits (top left)
+	// 2 splits (top right)
+	// 2 splits (bottom left)
+	// 2 splits (bottom right)
+	// 3 splits (center)
+
+	return splits
+}
diff --git a/rectangles.html b/rectangles.html
index aa31344..7acc52b 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -141,7 +141,6 @@ function solve_rects(){
 	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)) {
@@ -156,6 +155,7 @@ function solve_rects(){
 // 	for (var i = 0; i < rects.length; i++) {
 // 		regions.concat(rect[i].regions)
 // 	}
+	// handle when two walls are coplanar
 	// generate floor and ceiling for some regions
 	// generate walls from surviving regions
 	// generate ceiling-walls where ceiling has discontinuity
-- 
cgit v1.2.3-70-g09d2