diff options
Diffstat (limited to 'public/assets/javascripts')
8 files changed, 79 insertions, 31 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 2aee962..e27346d 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -69,9 +69,9 @@ var Map = function(opt){ break } - base.resize = function(){ - canvas.width = base.dimensions.a = window.innerWidth - canvas.height = base.dimensions.b = window.innerHeight + base.resize = function(w, h){ + canvas.width = base.dimensions.a = w || window.innerWidth + canvas.height = base.dimensions.b = h || window.innerHeight // resize here - esp if 2d-hires } diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 5e09fab..f78fb91 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -14,6 +14,7 @@ PI = Math.PI HALF_PI = PI/2 TOP = CEILING, BOTTOM = FLOOR + $ = { browser: { mozilla: false } } function sidesToString(sides){ var s = "" if (sides & FRONT) s += "front " diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 6c64128..609a2c8 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,3 +1,7 @@ +// A Polyline is a set of points inputted by the user using the V2 editor to trace a blueprint. +// Additionally, it manages a set of MX objects which correspond to the walls in 3D. +// In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 71f19d8..663f3fd 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -1,36 +1,58 @@ +// This algorithm takes the polylines from ShapeList as input and produces +// a set of Rooms which can be used by the existing V1 mover and editor. + +// The algorithm assumes that +// 1) all angles are orthogonal +// 2) all polylines are closed + var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions RegionList.build = function(){ + + // first, get the segments sorted right to left & top to bottom var segments = RegionList.getSortedSegments() var rooms = [] var seen_rooms = {} var open_segments = [] - var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped, seen_segments + // first pass: generate rooms from the vertical segments only for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } + + // check all the "open segments" we know about, i.e. rooms where we've only found + // the right wall. overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] + + // if these two segments overlap each other, then there is a room between them. if (segment.y.overlaps(open_segment.y)) { overlapped = true - closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) + // the X part of the room will be the span between these two vertical segments' + // X components. the Y part of the room is the "split" or subdivision between + // the two horizontal vectors. + + // the split function is non-commutative, + // so we need to call A split B and B split A, + // then dedupe the segments we got back.. x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} + // check each of the splits.. if the two segments overlap, then we definitely + // have a room here. y_segments.forEach(function(seg){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) @@ -46,7 +68,8 @@ var RegionList = (function(){ j++ }) - y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + // splitting the other way.. + y_segments = segment.y.split(open_segment.y, 0, 0) y_segments.forEach(function(seg){ if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) @@ -55,6 +78,9 @@ var RegionList = (function(){ }) } } + + // if we have overlap, then re-sort the open segments Y-wise + // and (again) dedupe.. if (overlapped) { open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } @@ -74,6 +100,7 @@ var RegionList = (function(){ } } } + // if we don't have any overlap, then this is a new open segment. else { open_segments.push(segment) } @@ -81,11 +108,15 @@ var RegionList = (function(){ var splits, splitter + // second pass: now that we have a bunch of rooms, assign sides to all of them. + // sides are used in the "mover" script to do bounds checking. for (var i = 0; i < segments.length; i++) { segment = segments[i] var horizontal = segment.isHorizontal(), vertical = segment.isVertical() for (var r = 0; r < rooms.length; r++){ room = rooms[r] + + // vertical segments determine the left and right edges of the room, fairly simply. if (vertical) { if (segment.y.containsVec(room.y)) { if (segment.x.a == room.x.a) { @@ -96,6 +127,8 @@ var RegionList = (function(){ } } } + + // horizontal segments determine the front and back edges of the room. if (horizontal) { if (segment.x.containsVec(room.x)) { if (segment.y.a == room.y.a) { @@ -105,28 +138,30 @@ var RegionList = (function(){ room.sides |= BACK } } - - else if (segment.y.a == room.y.a || segment.y.a == room.y.b) { - if (room.x.overlaps(segment.x)) { - splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) - rooms.splice(r--, 1) - console.log(splits) - for (var k = 0; k < splits.length; k++) { - splitter = splits[k] - var new_room = new Rect( splitter[0], room.y ) - new_room.sides = 0 - new_room.sides |= splitter[1] | ( room.sides & FRONT_BACK ) - if (segment.x.overlaps( splitter[0] )) { - if (segment.y.a == new_room.y.a) { - new_room.sides |= FRONT - } - if (segment.y.a == new_room.y.b) { - new_room.sides |= BACK - } + + // however, since we did not split on horizontal segments, our rooms may + // only have partial overlap with these segments, in which case we need to + // split the rooms apart. + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.overlaps(segment.x)) { + + // split the room across the segment. preserve whether or not we know the + // room borders a segment on the left or right. + splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) + rooms.splice(r--, 1) + for (var k = 0; k < splits.length; k++) { + splitter = splits[k] + var new_room = new Rect( splitter[0], room.y ) + new_room.sides = splitter[1] | ( room.sides & FRONT_BACK ) + if (segment.x.overlaps( splitter[0] )) { + if (segment.y.a == new_room.y.a) { + new_room.sides |= FRONT + } + if (segment.y.a == new_room.y.b) { + new_room.sides |= BACK } - rooms.unshift(new_room) - r++ } + rooms.unshift(new_room) + r++ } } @@ -137,6 +172,8 @@ var RegionList = (function(){ return { rooms: rooms } } + + // Gets a list of polylines from the ShapeList and sorts the segments. RegionList.getSortedSegments = function(){ // get a list of all segments from these polylines var segments = shapes.getAllSegments() diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 4373caf..90714c2 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,3 +1,5 @@ +// The ShapeList manages the list of polylines which form a V2 layout. + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 226e56f..8942d92 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -214,13 +214,13 @@ } vec2.prototype.toString = function(){ - return "[" + round(this.a) + " " + round(this.b) + "]" + return "[" + Math.round(this.a) + " " + Math.round(this.b) + "]" } vec2.prototype.exactString = function(){ return "[" + this.a + " " + this.b + "]" } vec2.prototype.serialize = function(){ - return [ round(this.a), round(this.b) ] + return [ Math.round(this.a), Math.round(this.b) ] } vec2.prototype.deserialize = function(data){ this.a = data[0] diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 13f5cd7..9d4650b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -10,6 +10,11 @@ vec2 = require('./vec2') Rect = require('./rect') UidGenerator = require('../util/uid') + wall_rotation = {} + wall_rotation[FRONT] = PI + wall_rotation[BACK] = 0 + wall_rotation[LEFT] = HALF_PI + wall_rotation[RIGHT] = -HALF_PI } var Wall = function(opt){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 39cf62e..a341a24 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -62,8 +62,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ if (this.parent.orbiting) { scene.width = window.innerWidth/2 scene.height = window.innerHeight - this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2 - this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight + this.parent.map.resize( window.innerWidth/2, window.innerHeight ) this.parent.map.canvas.style.display = "block" } else { @@ -119,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // -// map.draw.regions(this.rooms.rooms, colors, "#000") + map.draw.regions(this.rooms.rooms, colors, "#000") // this.rooms.rooms.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] |