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/_env.js | 18 ++++ assets/javascripts/rectangles/app.js | 177 ------------------------------- assets/javascripts/rectangles/builder.js | 31 ++++++ assets/javascripts/rectangles/clipper.js | 176 ++++++++++++++++++++++++++++++ assets/javascripts/rectangles/draw.js | 2 +- assets/javascripts/rectangles/rect.js | 58 ++++++++++ 6 files changed, 284 insertions(+), 178 deletions(-) create mode 100644 assets/javascripts/rectangles/_env.js delete mode 100644 assets/javascripts/rectangles/app.js create mode 100644 assets/javascripts/rectangles/builder.js create mode 100644 assets/javascripts/rectangles/clipper.js (limited to 'assets/javascripts/rectangles') diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js new file mode 100644 index 0000000..aa7af50 --- /dev/null +++ b/assets/javascripts/rectangles/_env.js @@ -0,0 +1,18 @@ + +var environment = new function(){} +environment.init = function(){ + scene.camera.move({ + "x": 0, + "y": 0, + "z": -1000, + "rotationX": 0.085, + "rotationY": 0.025 + }) + map && map.zoom(3.00) && map.recenter() + + clipper.init() + scene.update() +} +environment.update = function(t){ +} + diff --git a/assets/javascripts/rectangles/app.js b/assets/javascripts/rectangles/app.js deleted file mode 100644 index 071dfe8..0000000 --- a/assets/javascripts/rectangles/app.js +++ /dev/null @@ -1,177 +0,0 @@ -window.ctx = window.rects = window.regions = window.w = window.h = null; - -var app = new function(){ - 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) - - function init(){ - bind() - animate() - } - function animate(){ - requestAnimationFrame(animate) - clear_canvas() - - if (modified) { - solve_rects() - } - draw_ruler() - draw_regions(regions) - draw_mouse(mouse) - z = false - } - - var rects = window.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){ - app.dragging = intersects[0] - } - else { - app.creating = true - } - if (e.shiftKey && app.dragging) { - app.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 (app.dragging) { - app.dragging.translation.a = mouse.x.magnitude() - app.dragging.translation.b = mouse.y.magnitude() - } - else if (app.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 (app.creating) { - if (mouse.height() != 0 && mouse.width() != 0) { - rects.push(mouse.normalize()) - } - } - if (app.dragging) { - app.dragging.normalize() - } - mouse = new rect(e.pageX, e.pageY) - app.creating = app.dragging = false - modified = true - }) - } - - function solve_rects(){ - rects = sort_rects_by_position(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) - } - - 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]]) - } - } - - 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 - - - this.init = init - return this -} - -app.init() diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js new file mode 100644 index 0000000..1c576a5 --- /dev/null +++ b/assets/javascripts/rectangles/builder.js @@ -0,0 +1,31 @@ +var builder = new function(){ + var base = this + base.tube = new Tube () + + var els = [] + + base.tube.on("clipper:update", rebuild) + + function rebuild(){ + clear() + build() + } + function build (){ + clipper.regions.forEach(function(r){ + var walls = r.walls() + walls.forEach(function(el){ + els.push(el) + scene.add(el) + }) + }) + } + function clear (){ + els.forEach(function(el){ + scene.remove(el) + }) + els = [] + } + +} + + 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 +} + diff --git a/assets/javascripts/rectangles/draw.js b/assets/javascripts/rectangles/draw.js index 2785544..8786b0b 100644 --- a/assets/javascripts/rectangles/draw.js +++ b/assets/javascripts/rectangles/draw.js @@ -37,7 +37,7 @@ function draw_mouse(mouse){ ctx.fill(); if (mouse.width() != 0 && mouse.height() != 0) { - if (app.dragging) { + if (clipper.dragging) { mouse.stroke() } else { diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js index 866727f..67abdee 100644 --- a/assets/javascripts/rectangles/rect.js +++ b/assets/javascripts/rectangles/rect.js @@ -181,6 +181,64 @@ window.rect = (function(){ return splits } + rect.prototype.walls = function(){ + var list = [], el = null + + var width = this.x.length() + var depth = this.y.length() + var height = 800 + + if (this.sides & FRONT) { + el = wall('.face.front') + el.scaleX = width + el.scaleY = height + el.z = this.y.a - depth/2 + 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.rotationY = PI + el.z = this.y.a + depth/2 + el.y = height/2 + el.x = this.x.a + 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.type = "Face" + return el + } + + return list + } + return rect })() -- cgit v1.2.3-70-g09d2