diff options
Diffstat (limited to 'rectangles.html')
| -rw-r--r-- | rectangles.html | 280 |
1 files changed, 8 insertions, 272 deletions
diff --git a/rectangles.html b/rectangles.html index c8b3c82..d64e30b 100644 --- a/rectangles.html +++ b/rectangles.html @@ -26,276 +26,12 @@ body > div { </body> <script type="text/javascript" src="assets/javascripts/util.js"></script> -<script type="text/javascript" src="tree.js"></script> -<script type="text/javascript" src="rect.js"></script> -<script type="text/javascript" src="vec2.js"></script> -<script type="text/javascript"> - -window.z = true; - -(function(){ - var color_palettes = { - alpha: [ - "rgba(0,0,0,0.1)", - ], - redblue: [ - "rgba(0,0,0,0.2)", - "rgba(255,0,0,0.2)", - "rgba(0,0,255,0.2)", - "rgba(0,255,0,0.2)", - ], - gray: [ - "rgba(0,0,0,0.1)", - "rgba(0,0,0,0.2)", - "rgba(0,0,0,0.3)", - "rgba(0,0,0,0.4)", - ], - colors: [ - "rgba(255,0,0,0.5)", - "rgba(255,128,0,0.5)", - "rgba(128,255,0,0.5)", - "rgba(0,255,0,0.5)", - "rgba(0,255,128,0.5)", - "rgba(0,128,255,0.5)", - "rgba(0,0,255,0.5)", - "rgba(128,0,255,0.5)", - "rgba(255,0,255,0.5)", - "rgba(255,0,128,0.5)", - ] - } - - var select = document.querySelector("#palette") - select.addEventListener("change", function(){ colors = color_palettes[select.value] }) - - window.colors = color_palettes[select.value] -})() - -var canvas = document.createElement("canvas") -var ctx = canvas.getContext("2d") -var w = canvas.width = 500 -var h = canvas.height = 500 -document.querySelector("#map").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) - if (e.shiftKey) { - mouse.quantize(10) - } - - var intersects = rects.filter(function(r){ return r.focused = 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){ - 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 = x - mouse.y.b = y - } - 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,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) - ctx.stroke() -} - -function solve_rects(){ - rects = sort_rects() - - for (var i = 0; i < rects.length; i++) { - rects[i].id = i - rects[i].reset() - } - regions = [] - - var left, right - for (var i = 0; i < rects.length; i++) { - left = rects[i] - for (var j = i+1; 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 = regions.concat(rects[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 - - // regions = shuffle( regions.filter(function(r){ return !!r }) ) - regions = regions.filter(function(r){ return !!r }) - -// var ty = new tree (regions[0].y.a, [regions[0]]) -// var tx = new tree (regions[0].x.a, ty) -// var ttx, tty -// -// for (var i = 1; i < regions.length; i++) { -// ttx = tx.add (regions[i].x.a, null) -// if (ttx.data) { -// tty = ttx.data.add (regions[i].y.a, null) -// // duplicate polygon? -// if (tty.data) { -// tty.data.forEach(function(yy){ -// if (yy.x.eq(regions[i].x) && yy.y.eq(regions[i].y) ) { -// yy.sides = 0 -// regions[i].sides = 0 -// } -// }) -// } -// else { -// tty.data = [regions[i]] -// } -// } -// else { -// ttx.data = new tree (regions[i].y.a, [regions[i]]) -// } -// } - z = false - for (var i = 0; i < regions.length; i++) { - ctx.fillStyle = colors[i % colors.length] - regions[i].fill().stroke_sides() - } - - document.getElementById("intersects").innerHTML = regions.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(){ -} -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.2)" -// 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() - } - } -} - -document.body.addEventListener("mousedown", function(){ z = true }) - -</script> +<script type="text/javascript" src="assets/javascripts/rectangles/colors.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/debug.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/tree.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/rect.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/vec2.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/draw.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/sort.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/app.js"></script> </html> |