From d6e459e2808ea16a4a0715e294182bafe74d310c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 15 Apr 2014 16:08:40 -0400 Subject: rearranging things --- assets/javascripts/rectangles/rect.js | 186 ++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 assets/javascripts/rectangles/rect.js (limited to 'assets/javascripts/rectangles/rect.js') diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js new file mode 100644 index 0000000..866727f --- /dev/null +++ b/assets/javascripts/rectangles/rect.js @@ -0,0 +1,186 @@ +window.rect = (function(){ + var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8 + + var rect = function (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) + this.sides = FRONT | BACK | LEFT | RIGHT + this.focused = false + this.id = 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.area = function(){ + return this.x.length() * this.y.length() + } + 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(){ + // if (! this.sides) return this + ctx.fillRect(this.x.a + this.translation.a, this.y.a + this.translation.b, this.x.length(), this.y.length()) + return this + } + rect.prototype.stroke_sides = function(){ + if (this.sides & FRONT) line(this.x.a, this.y.a, this.x.b, this.y.a) + if (this.sides & BACK) line(this.x.a, this.y.b, this.x.b, this.y.b) + if (this.sides & LEFT) line(this.x.a, this.y.a, this.x.a, this.y.b) + if (this.sides & RIGHT) line(this.x.b, this.y.a, this.x.b, this.y.b) + + function line(a,b,c,d){ + ctx.beginPath() + ctx.moveTo(a,b) + ctx.lineTo(c,d) + ctx.stroke() + } + return this + } + rect.prototype.stroke = function(){ + ctx.beginPath() + ctx.moveTo(this.x.a, this.y.a) + ctx.lineTo(this.x.b, this.y.b) + ctx.stroke() + return this + } + rect.prototype.perimeter = function(){ + line( this.x.a, this.y.a, this.x.b, this.y.a, this.translation ) + line( this.x.a, this.y.b, this.x.b, this.y.b, this.translation ) + line( this.x.a, this.y.a, this.x.a, this.y.b, this.translation ) + line( this.x.b, this.y.a, this.x.b, this.y.b, this.translation ) + } + rect.prototype.toString = function(){ + var sides = "" + if (this.sides & FRONT) sides += "front " + if (this.sides & BACK) sides += "back " + if (this.sides & LEFT) sides += "left " + if (this.sides & RIGHT) sides += "right " + var s = this.id + " " + "[" + this.x.toString() + " " + this.y.toString() + "] " + sides + if (this.focused) return "" + s + "" + return s + } + rect.prototype.quantize = function(n){ + this.x.quantize(n) + this.y.quantize(n) + } + rect.prototype.reset = function(){ + var copy = this.clone() + copy.sides = FRONT | BACK | LEFT | RIGHT + copy.focused = this.focused + copy.id = this.id + this.regions = [ copy ] + } + rect.prototype.clipTo = function(r){ + // for each of this rect's regions split the region if necessary + var regions = this.regions + var splits + + for (var i = 0, len = regions.length; i < len; i++) { + if (regions[i] && regions[i].intersects(r)) { + splits = regions[i].split(r) + regions = regions.concat(splits) + regions[i] = null + } + } + this.regions = regions + } + rect.prototype.split = function(r){ + var rz = this + var splits = [] + var split_contains = 0 + var x_intervals = [], y_intervals = [] + var sides = this.sides + + // Split vertically + if (this.x.contains(r.x.a) && r.x.contains(this.x.b)) { + x_intervals.push([ new vec2( this.x.a, r.x.a ), LEFT ]) + x_intervals.push([ new vec2( r.x.a, this.x.b ), RIGHT ]) + split_contains |= RIGHT + } + + else if (r.x.contains(this.x.a) && this.x.contains(r.x.b)) { + x_intervals.push([ new vec2( this.x.a, r.x.b ), LEFT ]) + x_intervals.push([ new vec2( r.x.b, this.x.b ), RIGHT ]) + split_contains |= LEFT + } + + else if (this.x.contains(r.x.a) && this.x.contains(r.x.b)) { + x_intervals.push([ new vec2( this.x.a, r.x.a ), LEFT ]) + x_intervals.push([ new vec2( r.x.a, r.x.b ), 0 ]) + x_intervals.push([ new vec2( r.x.b, this.x.b ), RIGHT ]) + split_contains |= LEFT | RIGHT + } + + else { // if (r.x.contains(this.x.a) && r.x.contains(r.x.b)) { + x_intervals.push([ new vec2( this.x.a, this.x.b ), LEFT | RIGHT ]) + split_contains |= LEFT | RIGHT + } + + // Split horizontally + if (this.y.contains(r.y.a) && r.y.contains(this.y.b)) { + y_intervals.push([ new vec2( this.y.a, r.y.a ), FRONT ]) + y_intervals.push([ new vec2( r.y.a, this.y.b ), BACK ]) + split_contains |= BACK + } + + else if (r.y.contains(this.y.a) && this.y.contains(r.y.b)) { + y_intervals.push([ new vec2( this.y.a, r.y.b ), FRONT ]) + y_intervals.push([ new vec2( r.y.b, this.y.b ), BACK ]) + split_contains |= FRONT + } + + else if (this.y.contains(r.y.a) && this.y.contains(r.y.b)) { + y_intervals.push([ new vec2( this.y.a, r.y.a ), FRONT ]) + y_intervals.push([ new vec2( r.y.a, r.y.b ), 0 ]) + y_intervals.push([ new vec2( r.y.b, this.y.b ), BACK ]) + split_contains |= FRONT | BACK + } + + else { // if (r.y.contains(this.y.a) && this.y.contains(r.y.b)) { + y_intervals.push([ new vec2( this.y.a, this.y.b ), FRONT | BACK ]) + split_contains |= FRONT | BACK + } + + x_intervals.forEach(function(x){ + y_intervals.forEach(function(y){ + var rn = new rect(x[0], y[0]) + rn.id = rz.id + rn.sides = ((x[1] | y[1]) & sides) + if (r.intersects(rn)) { + rn.sides = 0 + } + rn.focused = rz.focused + splits.push(rn) + }) + }) + return splits + } + + return rect + +})() -- cgit v1.2.3-70-g09d2 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 (limited to 'assets/javascripts/rectangles/rect.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 From 9c3c0151cb2b0a824f184501ea2672ef9e87a993 Mon Sep 17 00:00:00 2001 From: Jules Laplace <jules@okfoc.us> 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/rect.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 @@ <head> <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css"> <style type="text/css"> +body { background: black; } body > div { float: left; } @@ -17,6 +18,10 @@ body > div { .face { background-color: #fff; } +.front { background-color: #f00; } +.back { background-color: #800; } +.left { background-color: #00f; } +.right { background-color: #008; } </style> </head> <body> -- cgit v1.2.3-70-g09d2