merge

6 files changed, 142 insertions, 17 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 191088f..3b7d3e2 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -149,7 +149,8 @@ MX.Movements = function (cam) {
 					case 32: // space
 						moveUp = moveDown = false
 						break
-					
+
+/*					
 					case 48: // 0
 						cam.rotationX = 0
 						cam.rotationY = 0
@@ -157,6 +158,7 @@ MX.Movements = function (cam) {
 						cam.y = viewHeight
 						cam.z = 0
 						break
+*/
 				}
 			})
 			
diff --git a/public/assets/javascripts/mx/extensions/mx.movementsMobile.js b/public/assets/javascripts/mx/extensions/mx.movementsMobile.js
new file mode 100644
index 0000000..994c8d7
--- /dev/null
+++ b/public/assets/javascripts/mx/extensions/mx.movementsMobile.js
@@ -0,0 +1,124 @@
+
+MX.MobileMovements = function (cam) {
+
+	var touching = true,
+			moving = false,
+			startTime = null,
+	    v = 12,
+			vr = Math.PI * 0.012,
+			vx = vy = vz = 0;
+
+	var directionLocked = false,
+	    directionLockThreshold = 5
+
+	var pos = { x: 0, y: viewHeight, z: 0, rotationX: 0, rotationY: 0 }
+
+	var pointX, pointY, deltaX, deltaY, distX = 0, distY = 0, absDistX = 0, absDistY = 0, startTime
+		
+	return {
+
+		init: function () {
+			document.addEventListener("touchstart", function(e){
+				if (e.touches.length == 1) {
+					touching = true
+					
+					startTime = Date.now()
+					
+					var point = event.touches[0]
+					pointX = point.pageX
+					pointY = point.pageY
+					distX = distY = 0
+					pos.x = cam.x
+					pos.z = cam.z
+					pos.rotationY = cam.rotationY
+				}
+			})
+			document.addEventListener("touchmove", function(e){
+				e.preventDefault()
+				if (e.touches.length == 1) {
+
+					var timestamp = Date.now()
+					var point = event.touches[0]
+					deltaX = point.pageX - pointX
+					deltaY = point.pageY - pointY
+					
+					pointX = point.pageX
+					pointY = point.pageY
+
+					distX += deltaX
+					distY += deltaY
+					absDistX = abs(distX)
+					absDistY = abs(distY)
+				}
+			})
+			document.addEventListener("touchend", function(e){
+				e.preventDefault()
+				if (e.touches.length == 0) {
+					touching = directionLocked = false
+					var timestamp = Date.now()
+					var duration = startTime - timestamp
+					if (duration < 300) {
+					}
+				}
+			})
+		},
+		
+		update: function () {
+			if (distX || distY) {
+				var oldDistY = absDistY, oldDistX = absDistX
+				absDistY = avg(absDistY, 0, 5)
+				var dy = (oldDistY - absDistY) * sign(distY) * 2
+
+				absDistX = avg(absDistX, 0, 5)
+				var dx = (oldDistX - absDistX) * sign(distX) * 2
+
+				distY = sign(distY) * absDistY
+				distX = sign(distX) * absDistX
+
+				pos.x -= dy * Math.cos(pos.rotationY + Math.PI / 2)
+				pos.z -= dy * Math.sin(pos.rotationY + Math.PI / 2)
+				pos.rotationY += dx / (window.innerWidth) * Math.PI / 2
+				cam.rotationY = pos.rotationY
+
+				app.tube("move", pos)
+			}
+		},
+		
+		lock: function(){ locked = true },
+		unlock: function(){ locked = false },
+		scale: function(n){ if (n) scale = n; return scale },
+		resetScale: function(n){ scale = DEFAULT_SCALE },
+		gravity: function(g){ return typeof g == "boolean" ? gravity = g : gravity },
+		velocity: function(n){ v = clamp(n, 1, 50) },
+		jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) },
+	}
+
+}
+
+
+// function momentum (current, start, time, lowerMargin, wrapperSize, deceleration) {
+// 	var distance = current - start,
+// 		speed = Math.abs(distance) / time,
+// 		destination,
+// 		duration;
+// 
+// 	deceleration = deceleration === undefined ? 0.0006 : deceleration;
+// 
+// 	destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
+// 	duration = speed / deceleration;
+// 
+// 	if ( destination < lowerMargin ) {
+// 		destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
+// 		distance = Math.abs(destination - current);
+// 		duration = distance / speed;
+// 	} else if ( destination > 0 ) {
+// 		destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
+// 		distance = Math.abs(current) + destination;
+// 		duration = distance / speed;
+// 	}
+// 
+// 	return {
+// 		destination: Math.round(destination),
+// 		duration: duration
+// 	};
+// }
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 278fa1e..a640620 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -14,6 +14,7 @@ MX.Image = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("image")
+		this.el.classList.add("mx-scenery")
 
 		this.el.style.backgroundRepeat = 'no-repeat'
 		
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index cdb92c8..12d3dcb 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -19,10 +19,9 @@ MX.Video = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+		this.el.classList.add("mx-scenery")
   	this.paused = !! this.media.autoplay
 		this.muted = app.muted || !! this.media.mute
-		
-		this.load()
   },
 
   load: function(ops){
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 64d9103..4922519 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -19,11 +19,10 @@ MX.Vimeo = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+		this.el.classList.add("mx-scenery")
   	this.paused = !! this.media.autoplay
 		this.muted = app.muted || !! this.media.mute
 		this.started = false
-		
-		this.load()
   },
 
   load: function (ops) {
@@ -41,23 +40,24 @@ MX.Vimeo = MX.Object3D.extend({
   	this.el.appendChild(preload)
   	this.player = $f(preload)
 
-  	this.player.addEvent('ready', this.ready.bind(this))
+  	this.player.addEvent('ready', $.proxy(this.ready, this))
   },
   
   ready: function(){
   	console.log("vimeo ready")
+
 		this.started = true
 
   	// wait until ready before binding events. other events: play, pause
-  	this.player.addEvent('play', this.onPlay.bind(this))
-  	this.player.addEvent('pause', this.onPause.bind(this))
-  	this.player.addEvent('finish', this.finished.bind(this))
+  	this.player.addEvent('play', $.proxy(this.onPlay, this))
+  	this.player.addEvent('pause', $.proxy(this.onPause, this))
+  	this.player.addEvent('finish', $.proxy(this.finished, this))
 
   	// this is async on vimeo so call it asap
-  	this.player.api('getDuration', function(n){
+  	this.player.api('getDuration', $.proxy(function(n){
   		console.log("vimeo duration", n)
   		this.player.duration = n
-  	}.bind(this))
+  	}, this))
 
 		if (this.media.mute) {
 			this.mute()
@@ -90,9 +90,9 @@ MX.Vimeo = MX.Object3D.extend({
   seek: function(n){
   	// defer seek until we have duration
   	if (! this.duration()) {
-  		setTimeout(function(){
+  		setTimeout($.proxy(function(){
   			this.seek(n)
-  		}.bind(this), 300)
+  		}, this), 300)
   		return
   	}
   	
@@ -108,9 +108,9 @@ MX.Vimeo = MX.Object3D.extend({
 			this.paused = false
 			this.play()
 			this.pause()
-			setTimeout(function(){
+			setTimeout($.proxy(function(){
 				this.pause()
-			}.bind(this), 100)
+			}, this), 100)
 		}
   },
   
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index f7f00aa..873348f 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -19,10 +19,9 @@ MX.Youtube = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+		this.el.classList.add("mx-scenery")
   	this.paused = !! this.media.autoplay
 		this.muted = app.muted || !! this.media.mute
-		
-		this.load()
   },
 
   load: function (ops) {