summaryrefslogtreecommitdiff
path: root/emoji/follow2.html
diff options
context:
space:
mode:
authorJules <jules@asdf.us>2014-05-22 02:25:49 -0400
committerJules <jules@asdf.us>2014-05-22 02:25:49 -0400
commit852e24f5493615000350c28d953d4a91b1ce05e2 (patch)
tree610299504087f831c1532928f98732cd007310b8 /emoji/follow2.html
parent57a162951cdce66dd78fb726676f50e3828c3e38 (diff)
toroidal distribution. keep them mostly horizontal for readability
Diffstat (limited to 'emoji/follow2.html')
-rw-r--r--emoji/follow2.html218
1 files changed, 0 insertions, 218 deletions
diff --git a/emoji/follow2.html b/emoji/follow2.html
deleted file mode 100644
index f379cda..0000000
--- a/emoji/follow2.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!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>
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-02-21 02:49:20 +0000