diff options
Diffstat (limited to 'public/assets/javascripts')
11 files changed, 465 insertions, 165 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index dfabc86..f321f71 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -7,7 +7,7 @@ } else { MX = require('../../../../../../test/mocks/mx.js') - scene = MX.scene + scene = MX.Scene Rooms = require('./_rooms') sort = require('../../util/sort') FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 @@ -43,7 +43,7 @@ if (window.scene) { base.clear() base.build() - base.bind_walls() + Rooms.grouper.build() } } @@ -62,18 +62,7 @@ }) }.bind(this)) } - - base.bind_walls = function (){ - Rooms.forEach(function(room){ - room.walls = room.group_mx_walls() - room.walls.forEach(function(wall){ - Rooms.walls[ wall.id ] = wall - wall.bind() - wall.randomize_colors() - }) - }) - } - + base.clear = function (){ els.forEach(function(el){ scene.remove(el) @@ -84,7 +73,6 @@ this.build_walls = function (region) { var room = Rooms.list[ region.id ] - var list = [], el = null var width = region.x.length() @@ -305,7 +293,7 @@ el.side = 0 el.rect = null el.destroy = function(){ - this.el = this.rect = null + this.el = this.rect = this.face = null } // possible if walls are opaque diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js new file mode 100644 index 0000000..4ad3bd8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -0,0 +1,153 @@ +(function(){ + + var vec2, Rect, Rooms, UidGenerator, Wall, Surface, sort + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + Surface = window.Surface + Rooms = window.Rooms + UidGenerator = window.UidGenerator + Wall = window.Wall + sort = window.sort + } + else { + Rooms = require('./_rooms') + UidGenerator = require('../../util/uid') + vec2 = require('../../models/vec2') + Rect = require('../../models/rect') + Wall = require('../../models/wall') + Surface = require('../../models/surface') + sort = require('../../util/sort') + FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 + PI = Math.PI + HALF_PI = PI/2 + TOP = CEILING, BOTTOM = FLOOR + function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s + } + } + + Rooms.grouper = new function(){ + + var base = this + + base.list = {} + + base.uid = new UidGenerator(base.list) + + base.build = function (){ + var walls = [] + var collections = base.collect() + base.cull(collections) + base.group(walls, collections, FRONT) + base.group(walls, collections, BACK) + base.group(walls, collections, LEFT) + base.group(walls, collections, RIGHT) + Rooms.walls = walls + base.bind() + } + base.collect = function(){ + var collections = {} + collections[FRONT] = [] + collections[BACK] = [] + collections[LEFT] = [] + collections[RIGHT] = [] + + Rooms.forEach(function(room){ + room.mx_walls.forEach(function(mx){ + var side = mx.side || mx.half_side + collections[side].push(mx) + }) + }) + + base.cull(collections) + + return collections + } + base.cull = function(collections){ + [FRONT, BACK, LEFT, RIGHT].forEach(function(side){ + var collection = collections[side] + var useX = side & FRONT_BACK + var useA = side & (FRONT | RIGHT) + var last_mx + var widthVec, heightVec + + collection.sort( useX ? sort.compare_zx : sort.compare_xz ) + collection.forEach(function(mx){ + if (last_mx && last_mx.rect.eq(mx.rect)) { + if (last_mx.rect.id == mx.rect.id) { + last_mx.height += mx.height/2 + last_mx.y += mx.height/4 + last_mx.face.y.b += mx.height/2 + } + last_mx.side = side + mx.culled = true + mx.destroy() + scene.remove(mx) + return + } + widthVec = mx.rect[useX ? 'x' : 'y'].clone() + heightVec = new vec2( mx.y - mx.height/2, mx.y + mx.height/2 ) + mx.face = new Rect( widthVec, heightVec ) + last_mx = mx + }) + }) + return collections + } + base.group = function(walls, collections, side){ + var collection = collections[side] + var wall + var useX = side & FRONT_BACK + var useA = side & (FRONT | RIGHT) + + // collection.sort( useX ? sort.compare_zx : sort.compare_xz ) + + collection.forEach(function(mx){ + if (mx.culled) return + var coplanar = wall && wall.edge == mx.rect[useX ? 'y': 'x'][useA ? 'a': 'b'] + + if (wall && coplanar) { + if (useX && wall.vec.b == mx.rect.x.a) { + wall.vec.b = mx.rect.x.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + else if (! useX && wall.vec.b == mx.rect.y.a) { + wall.vec.b = mx.rect.y.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + } + wall = new Wall ({ + id: base.uid(), + side: side, + mx: [ mx ], + surface: new Surface( mx.face ), + vec: mx.rect[ useX ? 'x' : 'y' ].clone(), + edge: mx.rect[ useX ? 'y' : 'x' ][ useA ? 'a' : 'b' ], + }) + walls.push(wall) + }) + + return walls + } + + base.bind = function(){ + Rooms.walls.forEach(function(wall){ + wall.bind() + wall.randomize_colors() + }) + } + + } + +})() diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index c96885c..c43ef14 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -12,25 +12,29 @@ var Scenery = new function(){ base.resize.init() } - base.add = function(wall, media, id){ + base.add = function(opt){ var scene_media switch (media.type) { case 'image': - scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.image (opt) break case 'video': case 'youtube': case 'vimeo': - scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.video (opt) break } base.list[scene_media.id] = scene_media return scene_media } - base.addNextToWall = function(wall){ - var media = base.add(wall, base.nextMedia) + base.addNextToWall = function(wall, mx){ + base.add({ + wall: wall, + media: base.nextMedia, + mx: mx + }) base.nextMedia = null return media } @@ -69,7 +73,11 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ var wall = Rooms.walls[data.wall_id] - var scene_media = base.add(wall, data.media, data.id) + var scene_media = base.add({ + wall: wall, + media: data.media, + id: data.id + }) scene_media.deserialize(data) }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index c3f78d7..fa247e1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -87,7 +87,7 @@ Scenery.move = function(base){ function switch_wall (e, new_wall, cursor){ if (! dragging) return - if (new_wall.uid == base.wall.uid) return + if (new_wall.id == base.wall.id) return if (! new_wall.fits(base.media, base.scale)) return var old_wall_side = base.wall.side diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 66e0faf..46bc0e7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -12,7 +12,7 @@ Scenery.types.base = Fiber.extend(function(base){ this.scale = this.media.scale if (opt.wall) { - this.set_wall(opt.wall) + this.set_wall(opt.wall, opt.mx) } }, @@ -60,7 +60,7 @@ Scenery.types.base = Fiber.extend(function(base){ } }, - set_wall: function(wall){ + set_wall: function(wall, mx){ this.wall = wall || this.wall this.bounds = this.wall.bounds_for(this.media, this.scale) this.center = this.wall.center() diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 3f94740..5952f6a 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -111,6 +111,9 @@ Rect.prototype.eq = function(r){ return this.x.eq(r.x) && this.y.eq(r.y) } + Rect.prototype.fits = function(v){ + return this.x.length() >= v.a && this.y.length() >= v.b + } Rect.prototype.zero = function(){ this.a.zero() this.b.zero() diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index aa18f6d..33a94d0 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -93,83 +93,7 @@ }) }) } - - Room.prototype.group_mx_walls = function(){ - var base = this - var side_groups = {}, walls = [] - - // group the walls by side - base.mx_walls.forEach(function(wall){ - - // ignore half-walls for now - var side = wall.side || wall.half_side - - if (side_groups[side]) { - side_groups[side].push(wall) - } - else { - side_groups[side] = [wall] - } - }) - - // sort the subgroups, and then combine mx objects under wall objects - pairs(side_groups).forEach(function(pair){ - var side = pair[0], els = pair[1] - - if (side & LEFT_RIGHT) { - els.sort(sort.compare_rect_x) - } - else if (side & FRONT_BACK) { - els.sort(sort.compare_rect_y) - } - - // wall holds state for the last wall we created/saw.. - // right now we keep walls subdivided where there are half-walls to simplify - // calculations involving placing media on walls, calculating wall boundaries, etc.. - // one consequence of this is we can't place things on the walls above "doorways". - // in the future, we should have more robust placement algorithm, which takes - // this into account, and only use one wall "object" per plane - var wall - els.forEach(function(el){ - if (el.half_side) { - wall = new_wall(el) - walls.push(wall) - wall = null - } - else if (! wall) { - wall = new_wall(el) - walls.push(wall) - } - else if (side & FRONT_BACK && wall.rect.x.b == el.rect.x.a) { - wall.rect.x.b = el.rect.x.b - wall.mx.push(el) - } - else if (side & LEFT_RIGHT && wall.rect.y.b == el.rect.y.a) { - wall.rect.y.b = el.rect.y.b - wall.mx.push(el) - } - else { - wall = new_wall(el) - walls.push(wall) - } - }) - }) - - function new_wall (el) { - return new Wall ({ - id: base.id + "_" + (el.side | el.half_side) + "_" + walls.length, - room: base.id, - side: el.side | el.half_side, - half_side: el.half_side, - rect: el.rect.clone(), - el: el, - }) - } - - return walls - } - Room.prototype.clipTo = function(r){ // for each of this rect's regions split the region if necessary var regions = this.regions diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js new file mode 100644 index 0000000..171376f --- /dev/null +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -0,0 +1,179 @@ +(function(){ + + var vec2, Rect + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + } + + var Surface = function (face){ + this.width = 0 + this.height = 0 + this.faces = [] + if (face) { + this.add(face) + } + } + Surface.prototype.add = function(rect){ + this.faces.push(rect) + this.width += rect.width() + this.height = Math.max(this.height, rect.height()) + } + Surface.prototype.fits_scale = function(v, scale){ + v = v.clone().mul(scale) + return this.fits(v) + } + Surface.prototype.fits = function(v){ + var faces = this.faces + var scratch + if (this.width < v.a || this.height < v.b) { + return null + } + for (var i = 0; i < faces.length; i++) { + if (faces[i].fits(v)) { + return faces[i] + } + } + scratch = new Rect (0,0,0,0) + for (var i = 0; i < faces.length; i++) { + if (faces[i].y.length() < v.b) { + continue + } + scratch.x.a = faces[i].x.a + scratch.x.b = faces[i].x.b + scratch.y.a = faces[i].y.a + scratch.y.b = faces[i].y.b + SEARCH: for (var j = i+1; j < faces.length; j++) { + if (faces[j].y.a > scratch.y.a) { + scratch.y.a = faces[j].y.a + } + if (faces[j].y.b < scratch.y.b) { + scratch.y.b = faces[j].y.b + } + if (scratch.y.b <= scratch.y.a || scratch.y.length() < v.b) { + break SEARCH + } + scratch.x.b = faces[j].x.b + if (scratch.fits(v)) { + return scratch + } + } + } + return null + } + Surface.prototype.place = function(v, index){ + var face, faces = this.faces + } + Surface.prototype.bounds = function(index){ + var bounds = faces[index].clone() + var height = faces[index].height() + bounds.first = bounds.last = index + + for (var i = index-1; i >= 0; i--) { + var face = faces[i] + if (face.y.length() < height) { + continue + } + if (face.y.a > bounds.y.a) { + continue + } + if (face.y.b < bounds.y.b) { + continue + } + bounds.x.a = bounds.x.a + bounds.first = i + } + + for (var i = index+1; i < faces.length; i++) { + var face = faces[i] + if (face.y.length() < height) { + continue + } + if (face.y.a > bounds.y.a) { + continue + } + if (face.y.b < bounds.y.b) { + continue + } + bounds.x.b = bounds.x.b + bounds.last = i + } + return bounds + } + Surface.prototype.clamp = function (bounds, dimension, position, dx, dy) { + // we start out with a set of boundaries where we know the object should fall + // we then check if we've moved the box off any edge of the bounds + // if so, check if the new position is valid with respect to the surface. + // for horizontal movement, this means checking the height and boundaries of + // faces with adjacent indexes + var p = position.clone(), nextIndex, nextFace, newBounds + p.a += dx + p.b += dy + + // left edge + if (p.a < bounds.x.a) { + if (bounds.first == 0) { + p.a = bounds.x.a + } + else { + nextIndex = bounds.first - 1 + nextFace = this.faces[nextIndex] + if (nextFace.y.a <= p.b && p.b + dimension.b <= nextFace.y.b) { + // it appears the div to the left will accomodate this element + } + else { + p.a = bounds.x.a + } + } + } + // right edge + else if (p.a + dimension.a > bounds.x.b) { + if (bounds.last == this.faces.length-1) { + p.a = bounds.x.b - dimension.a + } + else { + nextIndex = bounds.last + 1 + nextFace = this.faces[nextIndex] + if (nextFace.y.a <= p.b && p.b + dimension.b <= nextFace.y.b) { + // it appears the div to the right will accomodate this element + } + else { + p.a = bounds.x.b - dimension.a + } + } + } + + // for vertical movement, this means checking the height and boundaries of + // elements in the set of bounds' indexes + if (p.b < bounds.y.a) { + for (var i = Math.min(nextIndex, bounds.first), last = Math.max(nextIndex, bounds.last); i < last; i++) { + face = this.faces[i] + // loop over each of the faces in the list + // given a face, figure out if the new top-left is in its bounds + // if so, find which one contains its right edge + // get the lowest height of this set + // then clamp to that lowest height + // additionally, this is the new center-index + // recalculate the bounds +// if (face.x.b < p. +// for (var j = bounds.first+1; j < bounds.last + } + } + // bottom edge, so we can clamp here trivially + else if (p.b + dimension.b > bounds.y.b) { + p.b = bounds.y.b - dimension.b + } + // if we're able to move out of bounds in that direction, recalculate the bounds + } + + if ('window' in this) { + window.Surface = Surface + } + else { + module.exports = Surface + } +})() diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 6e2c728..f015a44 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -1,21 +1,28 @@ -window.Wall = (function(){ +(function(){ + var vec2, Rect, sort + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + sort = window.sort + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + UidGenerator = require('../util/uid') + } + var Wall = function(opt){ this.id = opt.id - this.uid = Uid() - this.room = opt.room - this.rect = opt.rect || new Rect (0,0,0,0) - this.rect.sides = opt.side + this.vec = opt.vec + this.edge = opt.edge this.side = opt.side - this.mx = [] - this.els = [] - if (opt.el) { - this.mx.push(opt.el) - } + this.surface = opt.surface + this.mx = opt.mx } Wall.prototype.toString = function(){ - return this.rect.toString() + return this.vec.toString() } Wall.prototype.reset = function(){ @@ -25,39 +32,42 @@ window.Wall = (function(){ this.mx.forEach(function(mx){ mx.destroy && mx.destroy() }) - this.room = this.rect = this.mx = this.els = null + this.room = this.vec = this.mx = null } Wall.prototype.bind = function(){ var base = this base.$walls = $( this.mx.map(function(mx){ return mx.el }) ) - base.$walls.bind({ - mouseover: function(){ - }, - mouseenter: function(e){ - Scenery.mouse.mouseenter(e, base) - }, - mousemove: function(e){ - }, - mousedown: function(){ - // base.randomize_colors() - // console.log(sidesToString(base.side)) - if (Scenery.nextMedia) { + + this.mx.forEach(function(mx){ + $(mx.el).bind({ + mouseover: function(){ + }, + mouseenter: function(e){ + Scenery.mouse.mouseenter(e, base, mx) + }, + mousemove: function(e){ + }, + mousedown: function(){ + // base.randomize_colors() + // console.log(sidesToString(base.side)) + if (Scenery.nextMedia) { var scenery = Scenery.addNextToWall(base) - UndoStack.push({ - type: 'create-scenery', - undo: { id: scenery.id }, - redo: scenery.serialize(), - }) - } - else if (Scenery.nextWallpaper) { - base.wallpaper() + UndoStack.push({ + type: 'create-scenery', + undo: { id: scenery.id }, + redo: scenery.serialize(), + }) + } + else if (Scenery.nextWallpaper) { + base.wallpaper() + } + else { + app.controller.hideExtras() + } } - else { - app.controller.hideExtras() - } - } + }) }) this.outline() } @@ -72,6 +82,12 @@ window.Wall = (function(){ new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } + Wall.prototype.bounds_for_mx = function(img, scale, mx) { + // + } + Wall.prototype.fits_mx = function(img, scale, mx) { + } + Wall.prototype.fits = function(img, scale){ if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { return false @@ -144,32 +160,30 @@ window.Wall = (function(){ var ctx = canvas.getContext('2d') var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) + var mx = this.mx - var sortedWalls = this.siblings().reduce(function(a,w){ - return a.concat(w.mx) - }, []).sort( useX ? sort.compare_x : sort.compare_z ) - - if (shouldFlip) { - sortedWalls = sortedWalls.reverse() + // console.log( sidesToString(this.side), mx.length ) + if (! shouldFlip) { + mx = mx.reverse() } - var len = sortedWalls.length + var len = this.mx.length zz = window.zz || 0 - sortedWalls.forEach(function(mx, i){ + mx.forEach(function(mx, i){ if (mx.outlined) return mx.outlined = true canvas.width = mx.width canvas.height = mx.height - ctx.fillStyle = "rgba(255,255,255,0.9)" + ctx.fillStyle = "rgba(255,255,255,0.95)" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "rgba(0,0,0,1.0)" - // all walls except top-half walls get bottom lines + // all walls get bottom lines ctx.fillRect(0, 0, canvas.width, 1) - // all walls except bottom-half walls get top lines + // all walls get top lines ctx.fillRect(0, canvas.height-1, canvas.width, 1) // walls on initial sides get left lines @@ -181,32 +195,27 @@ window.Wall = (function(){ // walls on terminal sides get right lines.... // if their right edge lines up with the rect edge if (i == len-1) { - // ctx.fillStyle = "rgba(255,0,0,1.0)" ctx.fillRect(canvas.width-1, 0, 1, canvas.height) } var dataUrl = canvas.toDataURL() mx.el.style.backgroundImage = "url(" + dataUrl + ")" }) - window.zz += 1 } Wall.prototype.siblings = function(){ - var base = this - var match = base.side | base.half_side - var walls = Rooms.list[this.room].walls.filter(function(w){ - return (w.side | w.half_side) & match && w.$walls - }) - return walls + return this +// var base = this +// var match = base.side | base.half_side +// var walls = Rooms.list[this.room].walls.filter(function(w){ +// return (w.side | w.half_side) & match && w.$walls +// }) +// return walls } Wall.prototype.randomize_colors = function(){ var color = window.grayColors[ this.side | this.half_side ] - var siblings = this.siblings() - siblings.forEach(function(w, i){ - if (! w.$walls) return - w.color(color) - }) + this.color(color) } Wall.prototype.stroke_colors = function(){ @@ -226,6 +235,12 @@ window.Wall = (function(){ }) } - return Wall + if ('window' in this) { + window.Wall = Wall + } + else { + module.exports = Wall + } + })() diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 95827cc..16d34dd 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -58,7 +58,8 @@ select.blur() }) - window.colors = color_palettes[select ? select.value : 'alphaQuad'] + window.colors = color_palettes[select ? select.value : 'colors'] +// window.colors = color_palettes[select ? select.value : 'alphaQuad'] window.grayColors = {} _.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.alphaQuad).map(function(pair){ window.grayColors[pair[0]] = pair[1] diff --git a/public/assets/javascripts/rectangles/util/sort.js b/public/assets/javascripts/rectangles/util/sort.js index 7aa40a2..cf8d6b1 100644 --- a/public/assets/javascripts/rectangles/util/sort.js +++ b/public/assets/javascripts/rectangles/util/sort.js @@ -95,9 +95,38 @@ return a.x < b.x ? -1 : a.x == b.x ? 0 : 1 } sort.compare_z = function (a,b){ - return a.z > b.z ? -1 : a.z == b.z ? 0 : 1 + return a.z < b.z ? -1 : a.z == b.z ? 0 : 1 } - + sort.compare_xz = function(a,b){ + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + return 0 + } + sort.compare_zx = function(a,b){ + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + return 0 + } if ("window" in this) { window.sort = sort } |