improving main version

author: Jules <jules@asdf.us> 2014-05-08 13:33:36 -0400
committer: Jules <jules@asdf.us> 2014-05-08 13:33:36 -0400
commit: 7c9b5982520b5c52c658ff88fea53cbf63268897 (patch)
tree: ba26276a039be3726b6af1f012bcb5b2b2c24c7a
parent: c1d78cb5d8b507576fb53f544ff804336ced232e (diff)
2 files changed, 181 insertions, 6 deletions
diff --git a/1/index.html b/1/index.html
new file mode 100644
index 0000000..e27da93
--- /dev/null
+++ b/1/index.html
@@ -0,0 +1,177 @@
+<!doctype>
+<html>
+<head>
+	<title>IT'S RAINING WEEDLEAVES!!!!!!!!!!!!!</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: 600px;
+		-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: white;
+	}
+	.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://okfoc.us/beentrill/shirts/assets/js/vendor/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 ) ||
+        ua.indexOf("compatible") < 0 && /(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();
+	});
+
+	var scene = new function(){}
+	scene.init = function(){
+		MX.rotationUnit = 'deg'
+
+		scene.control = new MX.RotationControl()
+		scene.control.disableX = true
+
+		scene.parent = new MX.Object3D("#scene")
+		scene.parent.addTo("#info");
+		scene.parent.perspective = 800
+		scene.parent.update()
+		hashtags.init()
+
+		//   if (is_mobile) {
+			//     hashtags.parent.scale = 0.8
+			//   }
+
+			$("#flip").click(function(){
+				scene.flip()
+			})
+
+			scene.control.init(scene.parent)
+			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)
+
+			function rand(){ return Math.random()*2-1 }
+			function randrange(a,b) { return Math.random()*(b-a)+a }
+			this.children = []
+
+			var count = $.browser.mozilla ? 50 : 100
+			for (var i = 0; i < count; i++) {
+				var hash = new MX.Image({
+					src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Cannabis_leaf_2.svg/200px-Cannabis_leaf_2.svg.png',
+					scale: randrange(0.3,0.6)
+				})
+				hash.y = rand() * 800
+				hash.x = rand() * window.innerWidth/2
+				hash.z = rand() * 400
+				hash.rotationY = rand()*30
+				hash.dy = randrange(-100,-30)
+				hash.addTo(this.parent);
+				hash.update()
+			}
+		}
+		hashtags.show = function(){
+			hashtags.parent.el.style.opacity = 1
+		}
+		hashtags.hide = function(){
+			hashtags.parent.el.style.opacity = 0
+		}
+		hashtags.animate = function (t) {
+			// scene.control.rotationY += 1
+			var dt = ~Math.sin(t) * 0.1
+			hashtags.parent.children.forEach(function(item){
+				item.y -= ~~(item.dy*dt)
+				item.update()
+				if (item.y < -500) item.y = 1000
+			})
+		}
+
+		</script>
+		</html>
diff --git a/index.html b/index.html
index 6a74122..e27da93 100644
--- a/index.html
+++ b/index.html
@@ -144,17 +144,15 @@
 
 			var count = $.browser.mozilla ? 50 : 100
 			for (var i = 0; i < count; i++) {
-				var speed = randrange(40,150)
 				var hash = new MX.Image({
 					src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Cannabis_leaf_2.svg/200px-Cannabis_leaf_2.svg.png',
-					scale: 0.5
+					scale: randrange(0.3,0.6)
 				})
 				hash.y = rand() * 800
 				hash.x = rand() * window.innerWidth/2
 				hash.z = rand() * 400
-				hash.rotationY = rand()*360
-				hash.el.style.fontSize = speed
-				hash.dy = -speed - 10
+				hash.rotationY = rand()*30
+				hash.dy = randrange(-100,-30)
 				hash.addTo(this.parent);
 				hash.update()
 			}
@@ -166,7 +164,7 @@
 			hashtags.parent.el.style.opacity = 0
 		}
 		hashtags.animate = function (t) {
-			scene.control.rotationY += 1
+			// scene.control.rotationY += 1
 			var dt = ~Math.sin(t) * 0.1
 			hashtags.parent.children.forEach(function(item){
 				item.y -= ~~(item.dy*dt)
author	Jules <jules@asdf.us>	2014-05-08 13:33:36 -0400
committer	Jules <jules@asdf.us>	2014-05-08 13:33:36 -0400
commit	7c9b5982520b5c52c658ff88fea53cbf63268897 (patch)
tree	ba26276a039be3726b6af1f012bcb5b2b2c24c7a
parent	c1d78cb5d8b507576fb53f544ff804336ced232e (diff)