summaryrefslogtreecommitdiff
path: root/emoji
diff options
context:
space:
mode:
Diffstat (limited to 'emoji')
-rw-r--r--emoji/follow.html68
-rw-r--r--emoji/index.html71
-rw-r--r--emoji/white.html (renamed from emoji/follow2.html)67
3 files changed, 115 insertions, 91 deletions
diff --git a/emoji/follow.html b/emoji/follow.html
index 9e4ca59..e612263 100644
--- a/emoji/follow.html
+++ b/emoji/follow.html
@@ -21,9 +21,9 @@
left:0;
width:100%;
height:100%;
- cursor:move;
+ cursor:none;
font-family:sans-serif;
- background-color: white;
+ background-color: black;
}
.text {
font-size: 100px;
@@ -87,13 +87,23 @@
$(window).load(function(){
scene.init();
});
- var control = new MX.PivotControl(el){
- document.addEventListener("mousemove", function(e){
- var x = e.pageX/window.innerWidth*2 - 1
- var y = e.pageY/window.innerWidth*2 - 1
- el.rotationX = x * 30
- el.rotationY = y * 50
- })
+ 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(){}
@@ -105,7 +115,8 @@
scene.parent.perspective = 600
scene.parent.update()
- scene.control = new MX.RotationControl()
+ 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 = 5000, z_max = 12000, z_shadow = 900
var hashtags = new function(){}
hashtags.init = function(){
this.parent = new MX.Object3D('.mx-rapper')
@@ -155,16 +167,9 @@
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 +178,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
@@ -183,8 +187,14 @@
if (z_min > item.z) {
item.loadTexture({
src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
+ scale: randrange(0.4, 1.6)
})
- 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 +202,18 @@
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(-800,-400)
+ this.drz = randrange(-1,1)/2
+ // this.update()
+ }
</script>
</html>
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>
diff --git a/emoji/follow2.html b/emoji/white.html
index f379cda..749fe2d 100644
--- a/emoji/follow2.html
+++ b/emoji/white.html
@@ -23,7 +23,7 @@
height:100%;
cursor:move;
font-family:sans-serif;
- background-color: black;
+ background-color: white;
}
.text {
font-size: 100px;
@@ -87,36 +87,25 @@
$(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.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.control = new MX.PivotControl()
- scene.control.init(scene.parent)
+ scene.parent.rotationY = -5
+ scene.parent.rotationX = 5
hashtags.init()
@@ -128,6 +117,7 @@
scene.flip()
})
+ scene.control.init(scene.parent)
scene.animate(0)
}
scene.animate = function (t) {
@@ -165,9 +155,16 @@
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)
+ 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.addTo(this.parent);
+ hash.update()
}
}
hashtags.show = function(){
@@ -176,7 +173,7 @@
hashtags.hide = function(){
hashtags.parent.el.style.opacity = 0
}
- var z_min = -1000, z_fade = 5000, z_max = 9000, z_shadow = 900
+ 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
@@ -186,14 +183,8 @@
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)
+ item.z = z_max
}
if (item.z >= z_max-z_fade) {
item.el.style.opacity = lerp((z_max-item.z)/z_fade, 0.0, 1.0)
@@ -201,18 +192,6 @@
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.51.0) at 2025-12-10 18:17:09 +0000