summaryrefslogtreecommitdiff
path: root/assets/javascripts
diff options
context:
space:
mode:
Diffstat (limited to 'assets/javascripts')
-rw-r--r--assets/javascripts/mx/primitives/mx.image.js25
-rw-r--r--assets/javascripts/rectangles/engine/scenery.js75
-rw-r--r--assets/javascripts/rectangles/models/vec2.js14
-rw-r--r--assets/javascripts/rectangles/models/wall.js75
-rw-r--r--assets/javascripts/rectangles/util/mouse.js37
5 files changed, 167 insertions, 59 deletions
diff --git a/assets/javascripts/mx/primitives/mx.image.js b/assets/javascripts/mx/primitives/mx.image.js
index 46422e5..4f9102a 100644
--- a/assets/javascripts/mx/primitives/mx.image.js
+++ b/assets/javascripts/mx/primitives/mx.image.js
@@ -29,17 +29,18 @@ MX.Image = MX.Object3D.extend({
loadTexture: function(ops){
var layer = this
+ layer.ops = defaults(ops, layer.ops)
var image = new Image()
image.onload = function(){
- layer.scale = ops.scale || 1
+ layer.scale = layer.ops.scale || 1
layer.width = image.naturalWidth
layer.height = image.naturalHeight
- layer.x = ops.x || 0
- layer.y = (ops.y || 0) + layer.scale * layer.height/2 + 1
- layer.z = ops.z || 0
- layer.rotationX = ops.rotationX || 0
- layer.rotationY = ops.rotationY || 0
- layer.rotationZ = ops.rotationZ || 0
+ layer.x = layer.ops.x || 0
+ layer.y = (layer.ops.y || 0) + layer.scale * layer.height/2 + 1
+ layer.z = layer.ops.z || 0
+ layer.rotationX = layer.ops.rotationX || 0
+ layer.rotationY = layer.ops.rotationY || 0
+ layer.rotationZ = layer.ops.rotationZ || 0
layer.el.style.backgroundImage = "url(" + image.src + ")"
layer.el.classList.add('image')
layer.dirty = true
@@ -47,6 +48,16 @@ MX.Image = MX.Object3D.extend({
}
image.src = ops.src;
},
+
+ move: function(ops){
+ var layer = this
+ layer.ops = defaults(ops, layer.ops)
+ for (var i in ops) {
+ layer[i] = ops[i]
+ }
+ layer.dirty = true
+ layer.update()
+ },
toString: function(){
var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ")
diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js
index c9be6ef..4ac03b8 100644
--- a/assets/javascripts/rectangles/engine/scenery.js
+++ b/assets/javascripts/rectangles/engine/scenery.js
@@ -7,6 +7,8 @@ wall_rotation[RIGHT] = -HALF_PI
var scenery = new function(){
var base = this;
+
+ base.mouse = new mouse ()
base.init = function(){
var urls = [
@@ -15,7 +17,6 @@ var scenery = new function(){
"http://2.bp.blogspot.com/-apEunnES6wU/UGdc6skZqzI/AAAAAAAAB3k/D6yO6llpFcg/s1600/Sunny+Side+Duck.JPG",
"http://imagecache.artistrising.com/artwork/lrg//5/559/5UD2000A.jpg",
"http://media-cache-ec0.pinimg.com/736x/fc/a7/31/fca731130ffb964a434fb90edecd22c3.jpg",
-
]
var loader = new Loader(function(){
base.load(loader.images)
@@ -38,41 +39,25 @@ var scenery = new function(){
function new_image (wall, img) {
var x, z
- if (wall.side & FRONT_BACK && wall.rect.x.length() < img.width) {
- return
- }
- if (wall.side & LEFT_RIGHT && wall.rect.y.length() < img.width) {
- return
- }
-
- switch (wall.side) {
- case FRONT:
- x = wall.rect.x.a + wall.rect.x.length()/2
- z = wall.rect.y.a + 10
- break
- case BACK:
- x = wall.rect.x.a + wall.rect.x.length()/2
- z = wall.rect.y.b - 10
- break
- case LEFT:
- x = wall.rect.x.a + 10
- z = wall.rect.y.a + wall.rect.y.length()/2
- break
- case RIGHT:
- x = wall.rect.x.b - 10
- z = wall.rect.y.a + wall.rect.y.length()/2
- break
- }
+
+ if (! wall.fits(img)) return
var mx_img = new MX.Image({
src: img.src,
- x: x,
+ x: 0,
y: clipper.rooms[wall.room].height/2 - img.height/2 - 20,
- z: z,
+ z: 0,
scale: 300/img.naturalWidth,
- rotationY: wall_rotation[ wall.side ],
+ rotationY: 0,
backface: false,
})
+
+ var center = wall.center_for(img)
+ mx_img.move({
+ x: center.a,
+ z: center.b,
+ rotationY: wall_rotation[ wall.side ]
+ })
scene.add(mx_img)
// https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png
@@ -81,15 +66,37 @@ var scenery = new function(){
// should be proportional to distance from wall
var cursor_amp = 1.5
+ var dragging = false
- my_mouse = new mouse ({ el: mx_img.el })
- my_mouse.tube.on("down", function(e, cursor){
+ base.mouse.bind_el(mx_img.el)
+ base.mouse.tube.on("down", function(e, cursor){
+ if (e.target != mx_img.el) return;
+ dragging = true
x = mx_img.x
y = mx_img.y
z = mx_img.z
+ mx_img.el.style.pointerEvents = "none"
bounds = wall.bounds_for(img)
})
- my_mouse.tube.on("drag", function(e, cursor){
+ base.mouse.tube.on("enter", function(e, new_wall, cursor){
+ if (! dragging) return
+ if (new_wall.uid == wall.uid) return
+ if (! new_wall.fits(img)) return
+ bounds = new_wall.bounds_for(img)
+ center = new_wall.center_for(img, cursor.x.magnitude())
+
+ mx_img.move({
+ x: center.a,
+ z: center.b,
+ rotationY: wall_rotation[ new_wall.side ]
+ })
+
+ cursor.x.invert()
+
+ wall = new_wall
+ })
+ base.mouse.tube.on("drag", function(e, cursor){
+ if (! dragging) return
mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
switch (wall.side) {
case FRONT:
@@ -106,7 +113,9 @@ var scenery = new function(){
break
}
})
- my_mouse.tube.on("up", function(e, cursor){
+ base.mouse.tube.on("up", function(e, cursor){
+ dragging = false
+ mx_img.el.style.pointerEvents = "auto"
})
}
diff --git a/assets/javascripts/rectangles/models/vec2.js b/assets/javascripts/rectangles/models/vec2.js
index 7307fca..9b0447c 100644
--- a/assets/javascripts/rectangles/models/vec2.js
+++ b/assets/javascripts/rectangles/models/vec2.js
@@ -13,12 +13,16 @@ vec2.prototype.clone = function(){
}
vec2.prototype.abs = function(){
if (this.b < this.a) {
- this.a = this.a ^ this.b
- this.b = this.a ^ this.b
- this.a = this.a ^ this.b
+ this.invert()
}
return this
}
+vec2.prototype.invert = function(){
+ this.a = this.a ^ this.b
+ this.b = this.a ^ this.b
+ this.a = this.a ^ this.b
+ return this
+}
vec2.prototype.midpoint = function(){
return lerp(0.5, this.a, this.b)
}
@@ -45,7 +49,7 @@ vec2.prototype.div = function(n){
this.b /= n
return this
}
-vec2.normalize = function(){
+vec2.prototype.normalize = function(){
var dim = max(this.a, this.b)
this.a = this.a/dim
this.b = this.b/dim
@@ -85,7 +89,7 @@ vec2.prototype.intersection = function(v){
}
}
vec2.prototype.toString = function(){
- return "[" + this.a + " " + this.b + "]"
+ return "[" + ~~this.a + " " + ~~this.b + "]"
}
vec2.prototype.quantize = function(n){
n = n || 10
diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js
index baaac43..97083c7 100644
--- a/assets/javascripts/rectangles/models/wall.js
+++ b/assets/javascripts/rectangles/models/wall.js
@@ -2,6 +2,7 @@ window.Wall = (function(){
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
@@ -32,6 +33,9 @@ window.Wall = (function(){
base.$walls.bind({
mouseover: function(){
},
+ mouseenter: function(e){
+ scenery.mouse.mouseenter(e, base)
+ },
mousemove: function(e){
},
mousedown: function(){
@@ -45,17 +49,82 @@ window.Wall = (function(){
return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ),
new vec2( img.height/2, clipper.rooms[this.room].height - img.height/2 ) )
}
+ Wall.prototype.fits = function(img){
+ if (this.side & FRONT_BACK && this.rect.x.length() < img.width) {
+ return false
+ }
+ if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) {
+ return false
+ }
+ return true
+ }
+
+ Wall.prototype.center_for = function(img, gravity){
+ var left
+ gravity = gravity || 0
+
+ var major_axis, minor_axis
+ if (this.side & FRONT_BACK) {
+ major_axis = this.rect.x
+ minor_axis = this.rect.y
+ }
+ else {
+ minor_axis = this.rect.x
+ major_axis = this.rect.y
+ }
+
+ // left side addition
+ if (gravity > 0) {
+ console.log("gravity left")
+ left = major_axis.b - img.width/2
+ }
+ // right side addition
+ else if (gravity < 0) {
+ console.log("gravity right")
+ left = major_axis.a + img.width/2
+ }
+ else {
+ left = major_axis.midpoint()
+ }
+
+ switch (this.side) {
+ case FRONT:
+ x = left
+ z = minor_axis.a + 10
+ break
+ case BACK:
+ x = left
+ z = minor_axis.b - 10
+ break
+ case LEFT:
+ x = minor_axis.a + 10
+ z = left
+ break
+ case RIGHT:
+ x = minor_axis.b - 10
+ z = left
+ break
+ }
+
+ return new vec2 (x, z)
+ }
Wall.prototype.color = function(color){
this.$walls && this.$walls.css("background-color", color)
}
- Wall.prototype.randomize_colors = function(){
+ Wall.prototype.siblings = function(){
var base = this
var match = base.side | base.half_side
- var walls = clipper.rooms[this.room].walls.filter(function(w){ return (w.side | w.half_side) & match })
+ var walls = clipper.rooms[this.room].walls.filter(function(w){
+ return (w.side | w.half_side) & match
+ })
+ return walls;
+ }
+
+ Wall.prototype.randomize_colors = function(){
var color = choice(window.colors)
- walls.forEach(function(w){ w.color(color) })
+ this.siblings().forEach(function(w){ w.color(color) })
}
return Wall
diff --git a/assets/javascripts/rectangles/util/mouse.js b/assets/javascripts/rectangles/util/mouse.js
index 87a68fc..3bd5876 100644
--- a/assets/javascripts/rectangles/util/mouse.js
+++ b/assets/javascripts/rectangles/util/mouse.js
@@ -24,10 +24,11 @@ function mouse (opt) {
var base = this
opt = defaults(opt, {
- el: document,
+ el: null,
down: null,
move: null,
drag: null,
+ enter: null,
up: null,
rightclick: null,
propagate: false,
@@ -46,33 +47,42 @@ function mouse (opt) {
opt.down && base.tube.on("down", opt.down)
opt.move && base.tube.on("move", opt.move)
opt.drag && base.tube.on("drag", opt.drag)
+ opt.enter && base.tube.on("enter", opt.enter)
opt.up && base.tube.on("up", opt.up)
opt.rightclick && base.tube.on("rightclick", opt.rightclick)
- var offset = opt.el.getBoundingClientRect()
+ var offset = opt.el ? opt.el.getBoundingClientRect() : null
base.init = function (){
base.bind()
}
base.bind = function(){
- opt.el.addEventListener("mousedown", base.mousedown)
+ if (opt.el) {
+ opt.el.addEventListener("mousedown", base.mousedown)
+ opt.el.addEventListener("contextmenu", base.contextmenu)
+ }
window.addEventListener("mousemove", base.mousemove)
window.addEventListener("mouseup", base.mouseup)
- opt.el.addEventListener("contextmenu", base.contextmenu)
+ }
+ base.bind_el = function(el){
+ el.addEventListener("mousedown", base.mousedown)
+ // todo.. need a way to remove this event potentially?
}
function positionFromMouse(e) {
- var mx = offset.left - e.pageX
- var my = e.pageY - offset.top
-
- return new vec2(mx, my)
+ if (offset) {
+ return new vec2(offset.left - e.pageX, e.pageY - offset.top)
+ }
+ else {
+ return new vec2(-e.pageX, e.pageY)
+ }
}
base.mousedown = function(e){
e.stopPropagation()
-
- offset = opt.el.getBoundingClientRect()
+
+ offset = this.getBoundingClientRect()
var pos = positionFromMouse(e)
@@ -85,7 +95,7 @@ function mouse (opt) {
base.mousemove = function(e){
e.stopPropagation()
- if (! offset) return;
+ if (! offset) return
var pos = positionFromMouse(e)
@@ -106,6 +116,11 @@ function mouse (opt) {
base.tube("move", e, base.cursor)
}
}
+ base.mouseenter = function(e, el){
+ if (! offset) return
+ if (! base.down) return
+ base.tube("enter", e, el, base.cursor)
+ }
base.mouseup = function(e){
var pos, new_cursor
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 17:32:41 +0000