JavaScript Beehive
This page contains an odd little JavaScript routine that
animates a swarm of multicolored 'bees' flying around the
mouse pointer. Pretty cool!
Here's the code listing, if you want to play with it (although the
easiest thing for you to do is just save this page as an HTML
file):
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head> <title>JavaScript Beehive</title>
<STYLE TYPE="text/css">
<!-- Begin CSS
A:link{color:#0033FF;text-decoration:none;}
A:visited{color:#0033FF;text-decoration:none;}
A:active{color:#FF66FF;}
A:hover {color:#FF66FF;}
#a { position: absolute; top: 10px; left: 10px; visibility: visible }
#b { position: absolute; top: 10px; left: 10px; visibility: visible }
#c { position: absolute; top: 10px; left: 10px; visibility: visible }
#d { position: absolute; top: 10px; left: 10px; visibility: visible }
#e { position: absolute; top: 10px; left: 10px; visibility: visible }
#f { position: absolute; top: 10px; left: 10px; visibility: visible }
#g { position: absolute; top: 10px; left: 10px; visibility: visible }
End CSS -->
</style>
</head>
<BODY BGCOLOR="black" TEXT="WHITE">
<layer name="a0" left=10 top=10 visibility=show bgcolor="#0000FF" clip="0,0,2,2"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#FF66FF" clip="0,0,2,2"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#0000FF" clip="0,0,2,2"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#FF66FF" clip="0,0,2,2"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#0000FF" clip="0,0,2,2"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#FF66FF" clip="0,0,2,2"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#0000FF" clip="0,0,2,2"></layer>
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:2px;height:2px;background:#0000FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#FF66FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#FF66FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#FF66FF;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background:#0000FF;font-size:2px;visibility:visible"></div>
</div>
<script language="JavaScript">
<!-- Begin
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all) {
function MoveHandler(){
Xpos = document.body.scrollLeft + event.x;
Ypos = document.body.scrollTop + event.y;
}
document.onmousemove = MoveHandler;
} else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
} else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for (i = 0 ; i < starsDiv.all.length; i++) {
starsDiv.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
starsDiv.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
} else if (document.layers) {
for (j = 0; j < 7; j++) { //7 is number of NS layers!
var templayer="a" + j;
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 10);
}
animateLogo();
// End -->
</script>
]]>