diff options
Diffstat (limited to 'assets/javascripts/rectangles')
7 files changed, 80 insertions, 25 deletions
diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js index e8ce9c1..972b1fe 100644 --- a/assets/javascripts/rectangles/_env.js +++ b/assets/javascripts/rectangles/_env.js @@ -3,11 +3,13 @@ var environment = new function(){} environment.init = function(){ if (window.scene) { scene.camera.move({ - "x": 1000, + "x": 0, "y": 0, - "z": 250, + "z": 0, "rotationX": 0, // PI/2, "rotationY": PI/2, // PI +// "rotationX": 0, +// "rotationY": PI }) scene.camera.radius = 20 diff --git a/assets/javascripts/rectangles/engine/scenery/image/_image.js b/assets/javascripts/rectangles/engine/scenery/image/_image.js index 767077b..dadb2d2 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/_image.js +++ b/assets/javascripts/rectangles/engine/scenery/image/_image.js @@ -4,7 +4,8 @@ Scenery.image = function (wall, img) { base.wall = wall base.img = img - base.center = wall.center_for(img) + base.dimensions = new vec2(img.width, img.height) + base.center = wall.center() base.bounds = wall.bounds_for(img) // should be proportional to distance from wall @@ -34,13 +35,13 @@ Scenery.image = function (wall, img) { // base.resize.bind() $(base.mx_img.el).bind({ mouseenter: function(e){ - console.log('entered an image') +// console.log('entered an image') // show the resize points for this image Scenery.resize.show(base) Scenery.image.hovering = true }, mouseleave: function(e){ - console.log('left an image') +// console.log('left an image') Scenery.resize.defer_hide(base) Scenery.image.hovering = false } diff --git a/assets/javascripts/rectangles/engine/scenery/image/move.js b/assets/javascripts/rectangles/engine/scenery/image/move.js index 0f6b0d9..e79ede9 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/move.js +++ b/assets/javascripts/rectangles/engine/scenery/image/move.js @@ -60,7 +60,7 @@ Scenery.image.move = function(base){ if (! new_wall.fits(base.img)) return base.bounds = bounds = new_wall.bounds_for(base.img) - base.center = new_wall.center_for(base.img) + base.center = new_wall.center() x = base.center.a z = base.center.b diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js index 52d61bd..a0a98c5 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/resize.js +++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js @@ -5,8 +5,9 @@ Scenery.resize = new function(){ var obj var x, y, z, bounds var dragging = false - - var dots = [], dot + var dimensions, position + + var dots = [], dot, selected_dot base.init = function(){ base.build() @@ -28,8 +29,7 @@ Scenery.resize = new function(){ // generate a dot element base.build_dot = function(side) { var dot = new MX.Object3D('.dot') - dot.width = 10 - dot.height = 10 + dot.width = dot.height = dot_side dot.side = side $(dot.el).on({ mouseenter: function(){ base.hovering = true }, @@ -54,9 +54,9 @@ Scenery.resize = new function(){ // move all the dots to the object's current position base.move_dots = function(){ - x = obj.mx_img.x + sin(rotationY) * 3 + x = obj.mx_img.x + sin(rotationY) * dot_distance_from_picture y = obj.mx_img.y - z = obj.mx_img.z - cos(rotationY) * 3 + z = obj.mx_img.z - cos(rotationY) * dot_distance_from_picture dots.forEach(function(dot){ base.move_dot(dot) @@ -70,18 +70,18 @@ Scenery.resize = new function(){ dot.z = z if (dot.side & TOP) { - dot.y += obj.img.height / 2 + dot.y += obj.mx_img.height * obj.mx_img.scale / 2 } if (dot.side & BOTTOM) { - dot.y -= obj.img.height / 2 + dot.y -= obj.mx_img.height * obj.mx_img.scale / 2 } if (dot.side & LEFT) { - dot.x -= cos(rotationY) * obj.img.width / 2 - dot.z -= sin(rotationY) * obj.img.width / 2 + dot.x -= cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + dot.z -= sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 } if (dot.side & RIGHT) { - dot.x += cos(rotationY) * obj.img.width / 2 - dot.z += sin(rotationY) * obj.img.width / 2 + dot.x += cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + dot.z += sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 } } @@ -118,16 +118,15 @@ Scenery.resize = new function(){ Scenery.mouse.bind_el(dot.el) $(dot.el).bind({ mouseenter: function(e){ - console.log('entered a dot') Scenery.resize.hovering = true }, mouseleave: function(e){ - console.log('left a dot') Scenery.resize.hovering = false base.defer_hide() } }) }) + Scenery.mouse.on("down", down) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) } @@ -136,23 +135,66 @@ Scenery.resize = new function(){ dots.forEach(function(dot){ Scenery.mouse.unbind_el(dot.el) }) + Scenery.mouse.off("down", down) Scenery.mouse.off("drag", drag) Scenery.mouse.off("up", up) } function down (e, cursor){ + var selection = dots.filter(function(dot){return e.target == dot.el}) + if (! selection.length) return + + selected_dot = selection[0] dragging = true - bounds = obj.wall.bounds_for(img) + + dimensions = new vec2(obj.mx_img.width, obj.mx_img.height) + position = new vec3(obj.mx_img.x, obj.mx_img.y, obj.mx_img.z) + + console.log("down on", sidesToString(selected_dot.side)) + document.body.classList.add("dragging") } function drag (e, cursor){ if (! dragging) return // cursor.x.magnitude()*cursor_amp + + var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0 + var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0 + + var translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp ) + + if (selected_dot.side & LEFT_RIGHT) { + obj.mx_img.width = dimensions.a + translation.a + obj.mx_img.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx_img.scale + obj.mx_img.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx_img.scale + } + if (selected_dot.side & TOP_BOTTOM) { + obj.mx_img.height = dimensions.b + translation.b + obj.mx_img.y = position.b - y_sign * translation.b/2 * obj.mx_img.scale + } + +// bounds = obj.wall.bounds_for(dimensions) + +// base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) +// switch (base.wall.side) { +// case FRONT: +// case BACK: +// base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) +// break +// case LEFT: +// case RIGHT: +// base.mx_img.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) +// break +// } + + base.move_dots() + } function up (e, cursor){ dragging = false + selected_dot = null document.body.classList.remove("dragging") } diff --git a/assets/javascripts/rectangles/models/vec3.js b/assets/javascripts/rectangles/models/vec3.js new file mode 100644 index 0000000..4e9f3cb --- /dev/null +++ b/assets/javascripts/rectangles/models/vec3.js @@ -0,0 +1,5 @@ +function vec3(a,b,c){ + this.a = a + this.b = b + this.c = c +} diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js index 854b238..4270551 100644 --- a/assets/javascripts/rectangles/models/wall.js +++ b/assets/javascripts/rectangles/models/wall.js @@ -61,7 +61,7 @@ window.Wall = (function(){ return true } - Wall.prototype.center_for = function(img, offset){ + Wall.prototype.center = function(offset){ offset = offset || 0 diff --git a/assets/javascripts/rectangles/util/constants.js b/assets/javascripts/rectangles/util/constants.js index 8ba6208..58cb1a5 100644 --- a/assets/javascripts/rectangles/util/constants.js +++ b/assets/javascripts/rectangles/util/constants.js @@ -5,7 +5,8 @@ var TOP = CEILING, BOTTOM = FLOOR, TOP_LEFT = TOP | LEFT, TOP_RIGHT = TOP | RIGHT, BOTTOM_LEFT = BOTTOM | LEFT, - BOTTOM_RIGHT = BOTTOM | RIGHT + BOTTOM_RIGHT = BOTTOM | RIGHT, + TOP_BOTTOM = TOP | BOTTOM var height_min = 200, height_max = 2000, @@ -14,9 +15,11 @@ var height_min = 200, resize_margin = 8, cursor_amp = 1.5 -var painting_distance_from_wall = 8 +var painting_distance_from_wall = 8, + dot_distance_from_picture = 3 -var dot_hide_delay = 50 // ms +var dot_hide_delay = 50, // ms + dot_side = 20 var wall_rotation = {} wall_rotation[FRONT] = PI @@ -32,6 +35,8 @@ function sidesToString(sides){ 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 } |