From 3d4a9829797f850fde2b65afbaa4dc45f519c3eb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 15 Apr 2014 17:54:55 -0400 Subject: drawing boxes --- assets/javascripts/rectangles/clipper.js | 176 +++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 assets/javascripts/rectangles/clipper.js (limited to 'assets/javascripts/rectangles/clipper.js') diff --git a/assets/javascripts/rectangles/clipper.js b/assets/javascripts/rectangles/clipper.js new file mode 100644 index 0000000..8cefca3 --- /dev/null +++ b/assets/javascripts/rectangles/clipper.js @@ -0,0 +1,176 @@ +window.ctx = window.w = window.h = null; + +var clipper = new function(){ + var base = this + var canvas = document.createElement("canvas") + var ctx = window.ctx = canvas.getContext("2d") + var w = window.w = canvas.width = 500 + var h = window.h = canvas.height = 500 + var regions = [] + document.querySelector("#map").appendChild(canvas) + + base.init = function (){ + bind() + animate() + } + function animate(){ + requestAnimationFrame(animate) + clear_canvas() + + if (modified) { + solve_rects() + builder.tube("clipper:update") + } + draw_ruler() + draw_regions(base.regions) + draw_mouse(mouse) + z = false + } + + var rects = base.rects = [ + new rect(100,100, 300,300), + new rect(200,200, 400,400), + ] + + this.creating = false + this.dragging = false + + var modified = true + var mouse = new rect(0,0,0,0) + + function bind(){ + 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){ + clipper.dragging = intersects[0] + } + else { + clipper.creating = true + } + if (e.shiftKey && clipper.dragging) { + clipper.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 (clipper.dragging) { + clipper.dragging.translation.a = mouse.x.magnitude() + clipper.dragging.translation.b = mouse.y.magnitude() + } + else if (clipper.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 (clipper.creating) { + if (mouse.height() != 0 && mouse.width() != 0) { + rects.push(mouse.normalize()) + } + } + if (clipper.dragging) { + clipper.dragging.normalize() + } + mouse = new rect(e.pageX, e.pageY) + clipper.creating = clipper.dragging = false + modified = true + }) + } + + function solve_rects(){ + var rects = sort_rects_by_position(base.rects) + + for (var i = 0; i < rects.length; i++) { + rects[i].id = i + rects[i].reset() + } + var 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) + } + + regions = sort_rects_by_area( 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, ii){ + if (yy.intersects(regions[i])) { + if (yy.area() > regions[i].area()) { + regions[i].dupe = true + } + else { + yy.dupe = true + tty.data[ii] = regions[i] + } + } + }) + } + else { + tty.data = [regions[i]] + } + } + else { + ttx.data = new tree (regions[i].y.a, [regions[i]]) + } + } + + base.regions = sort_rects_by_position(regions) + + modified = false + // document.getElementById("intersects").innerHTML = sort_rects_by_position(regions).join("
") + } + + // generate floor and ceiling for some regions + // generate walls from surviving regions + // generate ceiling-walls where ceiling has discontinuity + + return base +} + -- cgit v1.2.3-70-g09d2 From 9c3c0151cb2b0a824f184501ea2672ef9e87a993 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 15 Apr 2014 19:12:16 -0400 Subject: positioning sides (half done) --- assets/javascripts/mx/mx.js | 1 + assets/javascripts/rectangles/_env.js | 17 ++++++---- assets/javascripts/rectangles/builder.js | 1 + assets/javascripts/rectangles/clipper.js | 5 +-- assets/javascripts/rectangles/rect.js | 56 +++++++++++++++----------------- rectangles.html | 5 +++ 6 files changed, 46 insertions(+), 39 deletions(-) (limited to 'assets/javascripts/rectangles/clipper.js') diff --git a/assets/javascripts/mx/mx.js b/assets/javascripts/mx/mx.js index b7d0bca..df9abe7 100644 --- a/assets/javascripts/mx/mx.js +++ b/assets/javascripts/mx/mx.js @@ -389,6 +389,7 @@ var MX = MX || (function (undefined) { var index = parent.children.indexOf(child) if (index !== -1) { parent.children.splice(index, 1) + parent.el.removeChild(child.el) child.parent = undefined } }) diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js index aa7af50..e2e8e31 100644 --- a/assets/javascripts/rectangles/_env.js +++ b/assets/javascripts/rectangles/_env.js @@ -2,17 +2,22 @@ var environment = new function(){} environment.init = function(){ scene.camera.move({ - "x": 0, - "y": 0, - "z": -1000, - "rotationX": 0.085, - "rotationY": 0.025 + "x": 240, + "y": -1000, + "z": 240, + "rotationX": -PI/2, + "rotationY": 0 // PI }) map && map.zoom(3.00) && map.recenter() + clipper.rects.push( new rect(100,100, 200,300) ) + clipper.rects.push( new rect(200,300, 300,500) ) + + clipper.rects.push( new rect(300,100, 600,300) ) + clipper.rects.push( new rect(400,200, 700,400) ) + clipper.init() scene.update() } environment.update = function(t){ } - diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js index 1c576a5..ef0a28c 100644 --- a/assets/javascripts/rectangles/builder.js +++ b/assets/javascripts/rectangles/builder.js @@ -20,6 +20,7 @@ var builder = new function(){ }) } function clear (){ + console.log(els.length) els.forEach(function(el){ scene.remove(el) }) diff --git a/assets/javascripts/rectangles/clipper.js b/assets/javascripts/rectangles/clipper.js index 8cefca3..5bbc155 100644 --- a/assets/javascripts/rectangles/clipper.js +++ b/assets/javascripts/rectangles/clipper.js @@ -27,10 +27,7 @@ var clipper = new function(){ z = false } - var rects = base.rects = [ - new rect(100,100, 300,300), - new rect(200,200, 400,400), - ] + var rects = base.rects = [] this.creating = false this.dragging = false diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js index 67abdee..3c6eedc 100644 --- a/assets/javascripts/rectangles/rect.js +++ b/assets/javascripts/rectangles/rect.js @@ -186,52 +186,50 @@ window.rect = (function(){ var width = this.x.length() var depth = this.y.length() - var height = 800 + var height = 500 if (this.sides & FRONT) { el = wall('.face.front') - el.scaleX = width - el.scaleY = height - el.z = this.y.a - depth/2 + el.width = width + el.height = height el.x = this.x.a - el.y = height/2 - list.push(el) - } - if (this.sides & LEFT) { - el = wall('.face.left') - el.rotationY = -HALF_PI - el.scaleY = height - el.scaleZ = depth - el.x = this.x.a - width/2 - el.z = this.y.a - el.y = height/2 - list.push(el) - } - if (this.sides & RIGHT) { - el = wall('.face.right') - el.rotationY = HALF_PI - el.scaleY = height - el.scaleZ = depth - el.x = this.x.a + width/2 - el.y = height/2 el.z = this.y.a list.push(el) } if (this.sides & BACK) { var el = wall('.face.back') - el.scaleX = width - el.scaleY = height + el.width = width + el.height = height el.rotationY = PI - el.z = this.y.a + depth/2 - el.y = height/2 el.x = this.x.a + el.z = this.y.a + depth list.push(el) } - + +// if (this.sides & LEFT) { +// el = wall('.face.left') +// el.rotationY = -HALF_PI +// el.height = height +// el.width = depth +// el.z = this.y.a - depth/2 +// el.x = this.x.a +// list.push(el) +// } +// if (this.sides & RIGHT) { +// el = wall('.face.right') +// el.rotationY = HALF_PI +// el.height = height +// el.width = depth +// el.z = this.y.a - depth/2 +// el.x = this.x.b +// list.push(el) +// } + function wall(klass){ var el = new MX.Object3D(klass || ".face") el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1 el.z = el.y = el.x = 0 + el.y = height/2 el.type = "Face" return el } diff --git a/rectangles.html b/rectangles.html index 99862de..b4671bf 100644 --- a/rectangles.html +++ b/rectangles.html @@ -3,6 +3,7 @@ -- cgit v1.2.3-70-g09d2