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/app.js | 57 ---------- assets/javascripts/environments/app.js | 2 +- 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 ++++++++++ assets/javascripts/util.js | 34 ++---- assets/javascripts/vendor/polyfill.js | 80 ++++++++++++++ editor.html | 1 + rectangles.html | 50 +++++++-- 12 files changed, 414 insertions(+), 272 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 create mode 100644 assets/javascripts/vendor/polyfill.js diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 862ea62..05f7455 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -1,61 +1,4 @@ - -// Check if supports 3D transforms -function has3d(){ - var el = $('

')[0], $iframe = $(''), has3d, t, - transforms = { - 'webkitTransform': '-webkit-transform', - 'OTransform': '-o-transform', - 'msTransform': '-ms-transform', - 'transform': 'transform' - }; - - // Add it to the body to get the computed style - // Sandbox it inside an iframe to avoid Android Browser quirks - $iframe.appendTo('body').contents().find('body').append( el ); - - for (t in transforms) { - if (el.style[t] !== undefined) { - el.style[t] = 'translate3d(1px,1px,1px)'; - has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); - } - } - - $iframe.remove(); - - return has3d !== undefined && has3d.length > 0 && has3d !== "none"; -} - - - -// Identify browser based on useragent string -(function( ua ) { - ua = ua.toLowerCase(); - var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || - /(webkit)[ \/]([\w.]+)/.exec( ua ) || - /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || - /(msie) ([\w.]+)/.exec( ua ) || - ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || - []; - var matched = { - browser: match[ 1 ] || "", - version: match[ 2 ] || "0" - }; - browser = {}; - if ( matched.browser ) { - browser[ matched.browser ] = true; - browser.version = matched.version; - } - // Chrome is Webkit, but Webkit is also Safari. - if ( browser.chrome ) { - browser.webkit = true; - } else if ( browser.webkit ) { - browser.safari = true; - } - $.browser = browser; - return browser; -})( navigator.userAgent ); - var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)); var is_ipad = (navigator.userAgent.match(/iPad/i)); var is_android = (navigator.userAgent.match(/Android/i)) diff --git a/assets/javascripts/environments/app.js b/assets/javascripts/environments/app.js index 9070881..4a4ccd6 100644 --- a/assets/javascripts/environments/app.js +++ b/assets/javascripts/environments/app.js @@ -12,7 +12,7 @@ environment.init = function(){ "rotationX": 0.085, "rotationY": 0.025 }) - map && map.zoom(2.50) && map.recenter() + map && map.zoom(3.00) && map.recenter() // // intro floor, models, etc 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("<br>") - } - - // 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("<br>") + } + + // 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 })() diff --git a/assets/javascripts/util.js b/assets/javascripts/util.js index 81103aa..c56131d 100644 --- a/assets/javascripts/util.js +++ b/assets/javascripts/util.js @@ -12,6 +12,7 @@ var E = Math.E var PI = Math.PI var PHI = (1+Math.sqrt(5))/2 var TWO_PI = PI*2 +var HALF_PI = PI/2 var LN10 = Math.LN10 function clamp(n,a,b){ return n<a?a:n<b?n:b } function norm(n,a,b){ return (n-a) / (b-a) } @@ -112,6 +113,14 @@ function weave(a){ reverse(aa[1]).forEach(function(el){ b.push(el) }) return b } +function range(m,n,s){ + var a = [] + s = s || 1 + for (var i = m; i <= n; i += s) { + a.push(i) + } + return a +} var guid_syllables = "iz az ez or iv ex baz el lo lum ot un no".split(" ") var guid_n = 0 @@ -139,28 +148,3 @@ function smarten(a) { a = a.replace(/--/g, "\u2014"); // em-dashes return a }; - -(function() { - var lastTime = 0; - var vendors = ['ms', 'moz', 'webkit', 'o']; - for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; - window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] - || window[vendors[x]+'CancelRequestAnimationFrame']; - } - - if (!window.requestAnimationFrame) - window.requestAnimationFrame = function(callback, element) { - var currTime = new Date().getTime(); - var timeToCall = Math.max(0, 16 - (currTime - lastTime)); - var id = window.setTimeout(function() { callback(currTime + timeToCall); }, - timeToCall); - lastTime = currTime + timeToCall; - return id; - }; - - if (!window.cancelAnimationFrame) - window.cancelAnimationFrame = function(id) { - clearTimeout(id); - }; -}()); diff --git a/assets/javascripts/vendor/polyfill.js b/assets/javascripts/vendor/polyfill.js new file mode 100644 index 0000000..f97e438 --- /dev/null +++ b/assets/javascripts/vendor/polyfill.js @@ -0,0 +1,80 @@ +// Check if supports 3D transforms +function has3d(){ + var el = $('<p>')[0], $iframe = $('<iframe>'), has3d, t, + transforms = { + 'webkitTransform': '-webkit-transform', + 'OTransform': '-o-transform', + 'msTransform': '-ms-transform', + 'transform': 'transform' + }; + + // Add it to the body to get the computed style + // Sandbox it inside an iframe to avoid Android Browser quirks + $iframe.appendTo('body').contents().find('body').append( el ); + + for (t in transforms) { + if (el.style[t] !== undefined) { + el.style[t] = 'translate3d(1px,1px,1px)'; + has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); + } + } + + $iframe.remove(); + + return has3d !== undefined && has3d.length > 0 && has3d !== "none"; +} + +// Identify browser based on useragent string +(function( ua ) { + ua = ua.toLowerCase(); + var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || + /(webkit)[ \/]([\w.]+)/.exec( ua ) || + /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || + /(msie) ([\w.]+)/.exec( ua ) || + ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || + []; + var matched = { + browser: match[ 1 ] || "", + version: match[ 2 ] || "0" + }; + browser = {}; + if ( matched.browser ) { + browser[ matched.browser ] = true; + browser.version = matched.version; + } + // Chrome is Webkit, but Webkit is also Safari. + if ( browser.chrome ) { + browser.webkit = true; + } else if ( browser.webkit ) { + browser.safari = true; + } + $.browser = browser; + return browser; +})( navigator.userAgent ); + + +// rAF shim +(function() { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); diff --git a/editor.html b/editor.html index b522478..3655551 100644 --- a/editor.html +++ b/editor.html @@ -24,6 +24,7 @@ <script src="assets/javascripts/vendor/tween.js"></script> <script src="assets/javascripts/vendor/tube.js"></script> <script src="assets/javascripts/vendor/loader.js"></script> +<script src="assets/javascripts/vendor/polyfill.js"></script> <script src="assets/javascripts/mx/mx.js"></script> <script src="assets/javascripts/mx/mx.quaternion.js"></script> <script src="assets/javascripts/mx/mx.minimap.js"></script> diff --git a/rectangles.html b/rectangles.html index d64e30b..99862de 100644 --- a/rectangles.html +++ b/rectangles.html @@ -9,23 +9,42 @@ body > div { #info { padding: 30px; } +#hud { + position: absolute; + top:0;left:0; + z-index: 10; +} +.face { + background-color: #fff; +} </style> </head> <body> + <div id="bg"></div> + <div id="scene"></div> -<div id="map"></div> -<div id="info"> - <select id="palette"> - <option>colors</option> - <option>redblue</option> - <option>gray</option> - <option selected>alpha</option> - </select> - <div id="intersects"></div> -</div> + <div id="hud"> + <div id="map" style="display: block"> + </div> + <div id="info"> + <select id="palette"> + <option>colors</option> + <option>redblue</option> + <option>gray</option> + <option selected>alpha</option> + </select> + <div id="intersects"></div> + </div> + </div> + </body> +<script src="assets/javascripts/vendor/jquery.min.js"></script> +<script type="text/javascript" src="assets/javascripts/vendor/tube.js"></script> +<script type="text/javascript" src="assets/javascripts/vendor/loader.js"></script> +<script type="text/javascript" src="assets/javascripts/vendor/polyfill.js"></script> <script type="text/javascript" src="assets/javascripts/util.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></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> @@ -33,5 +52,14 @@ body > div { <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> +<script type="text/javascript" src="assets/javascripts/rectangles/builder.js"></script> +<script type="text/javascript" src="assets/javascripts/rectangles/clipper.js"></script> + +<script src="assets/javascripts/mx/mx.js"></script> +<script src="assets/javascripts/mx/mx.quaternion.js"></script> +<script src="assets/javascripts/mx/extensions/mx.scene.js"></script> +<script src="assets/javascripts/mx/extensions/mx.movements.js"></script> +<script src="assets/javascripts/mx/primitives/mx.scaleBox.js"></script> +<script src="assets/javascripts/app.js"></script> + </html> -- cgit v1.2.3-70-g09d2