diff options
Diffstat (limited to 'rectangles.html')
| -rw-r--r-- | rectangles.html | 189 |
1 files changed, 76 insertions, 113 deletions
diff --git a/rectangles.html b/rectangles.html index b6f4ca9..882b862 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.abs = 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.abs().add(this.translation.a) - this.y.abs().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,26 +40,44 @@ 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 @@ -201,7 +119,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) @@ -209,11 +133,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] + 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) +// } + // 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 + + 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(){ } @@ -224,7 +187,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) |
