diff options
Diffstat (limited to 'emoji/index.html')
| -rw-r--r-- | emoji/index.html | 71 |
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> |