toroidal distribution. keep them mostly horizontal for readability

1 files changed, 47 insertions, 24 deletions

diff --git a/emoji/index.html b/emoji/index.html
index 749fe2d..c33aa3e 100644
--- a/emoji/index.html
+++ b/emoji/index.html
@@ -21,7 +21,7 @@
 		left:0;
 		width:100%;
 		height:100%;
-		cursor:move;
+		cursor:none;
 		font-family:sans-serif;
 		background-color: white;
 	}
@@ -87,25 +87,36 @@
 	$(window).load(function(){
 		scene.init();
 	});
+	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(){}
 	scene.init = function(){
 		MX.rotationUnit = 'deg'
 
-		scene.control = new MX.RotationControl()
-		// scene.control.disableY = true
-		scene.control.lowerBoundY = -50
-		scene.control.upperBoundY = 50
-		scene.control.lowerBoundX = -30
-		scene.control.upperBoundX = 30
-
 		scene.parent = new MX.Object3D("#scene")
 		scene.parent.addTo("#info");
 		scene.parent.perspective = 600
 		scene.parent.update()
 
-		scene.parent.rotationY = -5
-		scene.parent.rotationX = 5
+		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 = 2500, z_max = 18000, z_shadow = 900
 		var hashtags = new function(){}
 		hashtags.init = function(){
 			this.parent = new MX.Object3D('.mx-rapper')
@@ -153,18 +165,10 @@
 			for (var i = 0; count > i; i++) {
 				var hash = new MX.Image({
 					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 +177,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
@@ -184,7 +187,12 @@
 					item.loadTexture({
 						src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
 					})
-					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 +200,21 @@
 				item.update()
 			})
 		}
-
+		MX.Image.prototype.reposition = function(){
+			var h = window.innerHeight
+			var w = window.innerWidth
+			var u = randrange(0, TWO_PI)
+			var v = randrange(0, TWO_PI)
+			this.x = (1.2 + 0.7 * cos(v))*cos(u) * w * 1.5
+			this.y = (1.2 + 0.7 * cos(v))*sin(u) * w * 1.5
+			// this.z = randrange(z_min, z_max)
+			this.z = z_max + randint(z_shadow)
+			this.rotationZ = 100 * (random()-0.5)
+			this.el.style.opacity = 1.0
+			this.dz = randrange(-2300,-1600)
+			this.drz = randrange(-1,1)/2
+			this.scale = randrange(1.5, 4.0)
+			// this.update()
+		}
 		</script>
 		</html>