follow2 .. a better handle on motion control

author: Jules <jules@asdf.us> 2014-05-22 00:52:14 -0400
committer: Jules <jules@asdf.us> 2014-05-22 00:52:14 -0400
commit: 57a162951cdce66dd78fb726676f50e3828c3e38 (patch)
tree: 76e1260945b81e1f0969764b5997f3e628d86242 /emoji
parent: d449bd94768871cc7db6f453a159e93d0b14bb44 (diff)
1 files changed, 218 insertions, 0 deletions
diff --git a/emoji/follow2.html b/emoji/follow2.html
new file mode 100644
index 0000000..f379cda
--- /dev/null
+++ b/emoji/follow2.html
@@ -0,0 +1,218 @@
+<!doctype>
+<html>
+<head>
+	<title>rain</title>
+	<style type="text/css">
+	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+	.mx-object3d { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
+	html,body{ margin: 0; padding: 0; width:100%;height:100%;}
+	body {
+		-webkit-perspective: 600px;
+		-moz-perspective: 600px;
+		perspective: 1000px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		-o-user-select: none;
+		user-select: none;
+		overflow:hidden;
+		position:fixed;
+		top:0;
+		left:0;
+		width:100%;
+		height:100%;
+		cursor:move;
+		font-family:sans-serif;
+		background-color: black;
+	}
+	.text {
+		font-size: 100px;
+		color: white;
+	}
+	#flip{
+		display:none;
+	}
+	#bg {
+		pointer-events: none;
+		position: fixed;
+		width: 100%;
+		top: 0;
+		height: 100%;
+		z-index: 0;
+		cursor:move;
+		left:0;
+	}
+	</style>
+	<body>
+		<div id="info"></div>
+		<div id="flip">FLIP</div>
+		<div id="bg"></div>
+	</body>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-1.10.2.min.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-nodoubletapzoom.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.min.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.gyroControl.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.rotationControl.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.scene.js"></script>
+	<script type="text/javascript" src="http://asdf.us/dither/js/util.js"></script>
+	<script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/image.js"></script>
+	<script type="text/javascript">
+	(function( ua ) {
+      ua = ua.toLowerCase();
+      var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+        /(msie) ([\w.]+)/.exec( ua ) ||
+        0 > ua.indexOf("compatible")  && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+        [];
+      var matched = {
+        browser: match[ 1 ] || "",
+        version: match[ 2 ] || "0"
+      };
+      browser = {};
+      if ( matched.browser ) {
+          browser[ matched.browser ] = true;
+          browser.version = matched.version;
+      }
+      // Chrome is Webkit, but Webkit is also Safari.
+      if ( browser.chrome ) {
+        browser.webkit = true;
+      } else if ( browser.webkit ) {
+        browser.safari = true;
+      }
+      $.browser = browser;
+      return browser;
+    })( navigator.userAgent );
+	
+	$(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 * 600, 15)
+			el.y = avg(el.y, x * 600, 10)
+			el.rotationX = avg(el.rotationX, x * 30, 50)
+			el.rotationY = avg(el.rotationY, -y * 40, 30)
+			// el.rotationZ += 1/20
+		}
+	}
+
+	var scene = new function(){}
+	scene.init = function(){
+		MX.rotationUnit = 'deg'
+
+		scene.parent = new MX.Object3D("#scene")
+		scene.parent.addTo("#info");
+		scene.parent.perspective = 600
+		scene.parent.update()
+
+		scene.control = new MX.PivotControl()
+		scene.control.init(scene.parent)
+
+		hashtags.init()
+
+		//   if (is_mobile) {
+			//     hashtags.parent.scale = 0.8
+			//   }
+
+			$("#flip").click(function(){
+				scene.flip()
+			})
+
+			scene.animate(0)
+		}
+		scene.animate = function (t) {
+			requestAnimationFrame(scene.animate)
+			t /= 500
+
+			scene.control.update()
+			scene.parent.update()
+
+			hashtags.animate(t)
+		}
+		scene.reverse = false
+		scene.flip = function(){
+			scene.reverse = ! scene.reverse
+			var rotation = scene.control.rotationY % 180;
+			if (scene.reverse) {
+				scene.control.rotationY = scene.control.rotationY - rotation + 180 * 3
+			}
+			else {
+				scene.control.rotationY = scene.control.rotationY - rotation - 180 * 3
+			}
+		}
+
+		var hashtags = new function(){}
+		hashtags.init = function(){
+			this.parent = new MX.Object3D('.mx-rapper')
+			this.parent.addTo(scene.parent)
+
+			this.children = []
+
+			var count = $.browser.mozilla ? 50 : 100
+			var w = window.innerWidth, h = window.innerHeight
+			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
+				})
+				hash.reposition()
+				hash.z = randrange(z_max-z_shadow, z_min)
+				hash.addTo(this.parent);
+			}
+		}
+		hashtags.show = function(){
+			hashtags.parent.el.style.opacity = 1
+		}
+		hashtags.hide = function(){
+			hashtags.parent.el.style.opacity = 0
+		}
+		var z_min = -1000, z_fade = 5000, z_max = 9000, z_shadow = 900
+		hashtags.animate = function (t) {
+			scene.control.rotationZ += 1
+			var dt = ~Math.sin(t) * 0.1
+			hashtags.parent.children.forEach(function(item){
+				item.z -= ~~(item.dz*dt)
+				item.rotationZ += item.drz
+				if (z_min > item.z) {
+					item.loadTexture({
+						src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
+						scale: randrange(0.4, 1.2)
+					})
+					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)
+				}
+				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(-600,-300)
+			this.drz = randrange(-1,1)/2
+			// this.update()
+		}
+		</script>
+		</html>
author	Jules <jules@asdf.us>	2014-05-22 00:52:14 -0400
committer	Jules <jules@asdf.us>	2014-05-22 00:52:14 -0400
commit	57a162951cdce66dd78fb726676f50e3828c3e38 (patch)
tree	76e1260945b81e1f0969764b5997f3e628d86242 /emoji
parent	d449bd94768871cc7db6f453a159e93d0b14bb44 (diff)