1 files changed, 45 insertions, 23 deletions

diff --git a/emoji/follow.html b/emoji/follow.html
index 9e4ca59..e612263 100644
--- a/emoji/follow.html
+++ b/emoji/follow.html
@@ -21,9 +21,9 @@
 		left:0;
 		width:100%;
 		height:100%;
-		cursor:move;
+		cursor:none;
 		font-family:sans-serif;
-		background-color: white;
+		background-color: black;
 	}
 	.text {
 		font-size: 100px;
@@ -87,13 +87,23 @@
 	$(window).load(function(){
 		scene.init();
 	});
-	var control = new MX.PivotControl(el){
-		document.addEventListener("mousemove", function(e){
-			var x = e.pageX/window.innerWidth*2 - 1
-			var y = e.pageY/window.innerWidth*2 - 1
-			el.rotationX = x * 30
-			el.rotationY = y * 50
-		})
+	MX.PivotControl = function (){
+		var x = 0, y = 0, el
+		this.init = function(mx){
+			el = mx
+			document.addEventListener("mousemove", move)
+		}
+		var move = function(e){
+			x = e.pageY/window.innerHeight*2 - 1
+			y = e.pageX/window.innerWidth*-2 + 1
+		}
+		this.update = function(){
+			el.x = avg(el.x, y * 400 - 30, 15)
+			el.y = avg(el.y, x * 300 + 50, 10)
+			el.rotationX = avg(el.rotationX, x * 30, 50)
+			el.rotationY = avg(el.rotationY, -y * 38, 30)
+			// el.rotationZ += 1/20
+		}
 	}
 
 	var scene = new function(){}
@@ -105,7 +115,8 @@
 		scene.parent.perspective = 600
 		scene.parent.update()
 
-		scene.control = new MX.RotationControl()
+		scene.control = new MX.PivotControl()
+		scene.control.init(scene.parent)
 
 		hashtags.init()
 
@@ -117,7 +128,6 @@
 				scene.flip()
 			})
 
-			scene.control.init(scene.parent)
 			scene.animate(0)
 		}
 		scene.animate = function (t) {
@@ -141,6 +151,8 @@
 			}
 		}
 
+		// depth of field
+		var z_min = -1000, z_fade = 5000, z_max = 12000, z_shadow = 900
 		var hashtags = new function(){}
 		hashtags.init = function(){
 			this.parent = new MX.Object3D('.mx-rapper')
@@ -155,16 +167,9 @@
 					src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
 					scale: 1.0
 				})
-				var theta = TWO_PI*random()
-				hash.x = sin(theta) * randrange(h/2, h*1.2)
-				hash.y = Math.cos(TWO_PI*random()) * randrange(h/2, h*1.2)
-				hash.z = randrange(z_min, z_max)
-				hash.rotationZ = random()*360
-				hash.el.style.opacity = 1.0
-				hash.dz = randrange(-800,-200)
-				hash.drz = randrange(-1,1)/2
+				hash.reposition()
+				hash.z = randrange(z_max-z_shadow, z_min)
 				hash.addTo(this.parent);
-				hash.update()
 			}
 		}
 		hashtags.show = function(){
@@ -173,7 +178,6 @@
 		hashtags.hide = function(){
 			hashtags.parent.el.style.opacity = 0
 		}
-		var z_min = -1000, z_fade = 2000, z_max = 4000
 		hashtags.animate = function (t) {
 			scene.control.rotationZ += 1
 			var dt = ~Math.sin(t) * 0.1
@@ -183,8 +187,14 @@
 				if (z_min > item.z) {
 					item.loadTexture({
 						src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
+						scale: randrange(0.4, 1.6)
 					})
-					item.z = z_max
+					item.reposition()
+					// var theta = TWO_PI*random()
+					// var w = window.innerWidth, h = window.innerHeight
+					// item.x = sin(theta) * randrange(h/2, h*1.2)
+					// item.y = cos(TWO_PI*random()) * randrange(h/2, h*1.2)
+					// item.z = z_max - randrange(0, 800)
 				}
 				if (item.z >= z_max-z_fade) {
 					item.el.style.opacity = lerp((z_max-item.z)/z_fade, 0.0, 1.0)
@@ -192,6 +202,18 @@
 				item.update()
 			})
 		}
-
+		MX.Image.prototype.reposition = function(){
+			var h = window.innerHeight
+			var theta = TWO_PI*random()
+			this.x = sin(theta) * randrange(0.5, 1.6) * h
+			this.y = cos(TWO_PI*random()) * randrange(0.5, 1.2) * h
+			// this.z = randrange(z_min, z_max)
+			this.z = z_max + randint(z_shadow)
+			this.rotationZ = random()*360
+			this.el.style.opacity = 1.0
+			this.dz = randrange(-800,-400)
+			this.drz = randrange(-1,1)/2
+			// this.update()
+		}
 		</script>
 		</html>