datenspuren 2012: derbug.js
This commit is contained in:
parent
1ddc227aff
commit
af7b9dba3e
BIN
content/static/datenspuren/2012/images/derbug.png
Normal file
BIN
content/static/datenspuren/2012/images/derbug.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.0 KiB |
128
content/static/datenspuren/2012/script/derbug.js
Normal file
128
content/static/datenspuren/2012/script/derbug.js
Normal file
|
@ -0,0 +1,128 @@
|
||||||
|
var MOUSE_TIMEOUT = 1000;
|
||||||
|
var mouseTimeout;
|
||||||
|
|
||||||
|
$('body').mousemove(function() {
|
||||||
|
hideAll();
|
||||||
|
|
||||||
|
if (mouseTimeout)
|
||||||
|
clearTimeout(mouseTimeout);
|
||||||
|
mouseTimeout = setTimeout(onMouseTimeout, MOUSE_TIMEOUT);
|
||||||
|
});
|
||||||
|
|
||||||
|
function onMouseTimeout() {
|
||||||
|
canSpawn();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var MAX_BUGS = 5;
|
||||||
|
var bugs = [];
|
||||||
|
var SPAWN_INTERVAL = 2000;
|
||||||
|
var spawnInterval;
|
||||||
|
function canSpawn() {
|
||||||
|
if (!spawnInterval)
|
||||||
|
spawnInterval = setInterval(spawn, SPAWN_INTERVAL);
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawn() {
|
||||||
|
bugs = bugs.filter(function(bug) {
|
||||||
|
return !bug.shouldHide;
|
||||||
|
});
|
||||||
|
/*console.log("spawn", bugs.length, "/", MAX_BUGS);*/
|
||||||
|
if (bugs.length >= MAX_BUGS)
|
||||||
|
return;
|
||||||
|
|
||||||
|
bugs.push(new Bug());
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideAll() {
|
||||||
|
if (spawnInterval) {
|
||||||
|
clearInterval(spawnInterval);
|
||||||
|
spawnInterval = null;
|
||||||
|
hideAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
for(var i = 0; i < bugs.length; i++) {
|
||||||
|
bugs[i].shouldHide = true;
|
||||||
|
}
|
||||||
|
bugs = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function Bug() {
|
||||||
|
this.alpha = 0;
|
||||||
|
this.rotation = 0;
|
||||||
|
this.x = $('body').scrollLeft() + Math.floor(window.innerWidth * Math.random());
|
||||||
|
this.y = $('body').scrollTop() + Math.floor(window.innerHeight * Math.random());
|
||||||
|
this.selectTarget();
|
||||||
|
|
||||||
|
this.el = $('<img src="images/derbug.png">');
|
||||||
|
this.el.css({ position: 'absolute',
|
||||||
|
width: "32px",
|
||||||
|
height: "32px"
|
||||||
|
});
|
||||||
|
$('body').append(this.el);
|
||||||
|
/*console.log("new bug", this, this.x, this.y);*/
|
||||||
|
|
||||||
|
this.think();
|
||||||
|
}
|
||||||
|
Bug.prototype = {
|
||||||
|
update: function() {
|
||||||
|
this.el.css({ left: Math.floor(this.x) + "px",
|
||||||
|
top: Math.floor(this.y) + "px",
|
||||||
|
opacity: this.alpha,
|
||||||
|
transform: "rotate(" + this.rotation + "rad)",
|
||||||
|
'-webkitTransform': "rotate(" + this.rotation + "rad)",
|
||||||
|
'-mozTransform': "rotate(" + this.rotation + "rad)"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectTarget: function() {
|
||||||
|
this.targetRotation = 2 * Math.PI * (Math.random() - 0.5);
|
||||||
|
this.targetSteps = 5 + Math.ceil(10 * Math.random());
|
||||||
|
},
|
||||||
|
think: function() {
|
||||||
|
if (this.shouldHide && this.alpha > 0) {
|
||||||
|
/* fading out */
|
||||||
|
this.alpha -= 0.1;
|
||||||
|
} else if (this.shouldHide) {
|
||||||
|
this.el.remove();
|
||||||
|
/* destroy
|
||||||
|
* HACK: Avoid nextTick() */
|
||||||
|
return;
|
||||||
|
} else if (this.alpha < 1) {
|
||||||
|
/* fading in */
|
||||||
|
this.alpha += 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var dr = this.targetRotation - this.rotation;
|
||||||
|
if (Math.abs(dr) > 1) {
|
||||||
|
this.rotation += Math.random() * dr / 10;
|
||||||
|
}
|
||||||
|
if (this.targetSteps > 0) {
|
||||||
|
this.targetSteps--;
|
||||||
|
this.x += Math.sin(this.rotation);
|
||||||
|
this.y -= Math.cos(this.rotation);
|
||||||
|
|
||||||
|
/* Emergency suicide: */
|
||||||
|
if (this.x < 16 ||
|
||||||
|
this.x > $('body').innerWidth() - 16 ||
|
||||||
|
this.y < 16 ||
|
||||||
|
this.y > $('body').innerHeight() - 16) {
|
||||||
|
this.shouldHide = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.selectTarget();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
nextTick(this.think.bind(this));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var nextTick =
|
||||||
|
window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
window.msRequestAnimationFrame ||
|
||||||
|
window.oRequestAnimationFrame ||
|
||||||
|
function(f) {
|
||||||
|
window.setTimeout(f, 40);
|
||||||
|
};
|
|
@ -251,6 +251,9 @@
|
||||||
<script type="application/javascript" src="script/play-resources.js" defer="defer">
|
<script type="application/javascript" src="script/play-resources.js" defer="defer">
|
||||||
<xsl:text> </xsl:text>
|
<xsl:text> </xsl:text>
|
||||||
</script>
|
</script>
|
||||||
|
<script type="application/javascript" src="script/derbug.js" defer="defer">
|
||||||
|
<xsl:text> </xsl:text>
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
</xsl:template>
|
</xsl:template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user