diff options
Diffstat (limited to 'chobani/money.html')
| -rw-r--r-- | chobani/money.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/chobani/money.html b/chobani/money.html new file mode 100644 index 0000000..ae0a5e1 --- /dev/null +++ b/chobani/money.html @@ -0,0 +1,237 @@ +<!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:none; + 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://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 * 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 emojis = [ + // flying money + 542, + + // bag of money + 534, + + // money stacks +// 538, + 539, +// 540, +// 541, + + // world + 185, + 186, + 187, + ] + 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 + } + } + + // 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') + 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/' + choice(emojis) + ".png", + }) + 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 + } + 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/' + choice(emojis) + ".png", + }) + 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 w = window.innerWidth + var u = randrange(0, TWO_PI) + var v = randrange(0, TWO_PI) + this.x = (1.2 + 0.9 * cos(v))*cos(u) * w * 1.5 + this.y = (1.2 + 0.9 * 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(3.5, 4.0) + // this.update() + } + </script> + </html> |