bugs.txt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Bugs</title>

<body>

<div id="bug0" style="position: absolute; visibility: hidden; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug1" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug2" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug3" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug4" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug5" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>
<div id="bug6" style="position: absolute; height: 16; width: 42;"><img src="bug.gif" height=16 width=42></div>

<script LANGUAGE="JavaScript">
<!-- hide code

// Global Constants
var DUCKSIZEX = 42;
var DUCKSIZEY = 16;
var SPRINGK = 10;
var SPRINGL = 10;
var VISCOSITY = 10;
var TIME = .01;
var V_WINDOW = 0.1;
var A_WINDOW = 0.1;
var MASS = 1;
var ELASTICITY = 0.75
var GRAVITY = 50;

// Global vars
var number = 7;
var MouseX = 0;
var MouseY = 0;
var isNetscape = navigator.appName=="Netscape";

var bugs = new Array();

init();

function init()
{
    var i = 0;
    for (i = 0; i < number; i++) {
        bugs[i] = new bug(i);
        bugs[i].obj.left = bugs[i].X;
        bugs[i].obj.top = bugs[i].Y;
    }
    
    setInterval("animate()", 20);

    if (isNetscape) {
        document.captureEvents(Event.MOUSEMOVE);
        document.onMouseMove = MoveHandler;
    } else {
        document.onmousemove = MoveHandlerIE;
    }

}

function bug(i) 
{
    this.X = MouseX;
    this.Y = MouseY;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {	
        this.obj = eval("document.bug" + i);
    } else {
        this.obj = eval("bug" + i + ".style");
    }
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    MouseX = e.pageX;
    MouseY = e.pageY;	  
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    MouseX = window.event.x + document.body.scrollLeft;
    MouseY = window.event.y + document.body.scrollTop;	  
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// Calculate effect of spring
// adds force in X and Y to spring for bug[i] on bug[j]
function springForce(i, j, spring)
{
    var dx = (bugs[i].X - bugs[j].X);  	//extension of spring x
    var dy = (bugs[i].Y - bugs[j].Y);	//extension of spring y
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SPRINGL) {				// If bigger than resting state
        var springF = SPRINGK * (len - SPRINGL);  // Spring force = k*x
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

function animate() {	
    bugs[0].X = MouseX;
    bugs[0].Y = MouseY;	
    
    for (i = 1 ; i < number; i++ ) {
        // adjust position of bug becasue of all the various forces
        var spring = new vec(0, 0);

	  // The force of the bug below pulling down
        if (i > 0) {
            springForce(i-1, i, spring);
        }

	  //  The force of the bug above pulling up
        if (i < (number - 1)) {
            springForce(i+1, i, spring);
        }
        
        // A viscosity adjustment
        var vis = new vec(-bugs[i].dx * VISCOSITY,
            -bugs[i].dy * VISCOSITY);
        
        // Deal with the acceleration of bugs in motion
        var acc = new vec((spring.X + vis.X)/ MASS,  // Fx = m*a
            (spring.Y + vis.Y)/ MASS + GRAVITY);	// Fy + g = m*a
        
        // compute new velocity kludge.  Instead of saying ds = 1/2 a*dt^2,
        // we say ds = a*dt because 1/2 dt'^2 = k = dt
  
        bugs[i].dx += (TIME * acc.X);
        bugs[i].dy += (TIME * acc.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(bugs[i].dx) < V_WINDOW &&
            Math.abs(bugs[i].dy) < V_WINDOW &&
            Math.abs(acc.X) < A_WINDOW &&
            Math.abs(acc.Y) < A_WINDOW) {
            bugs[i].dx = 0;
            bugs[i].dy = 0;
        }
        
        // move to new position
        bugs[i].X += bugs[i].dx;
        bugs[i].Y += bugs[i].dy;
        
        // Look out for the window boundry
        // Get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {	
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        
        // If past bottom, bring bug back
        if (bugs[i].Y >=  height - DUCKSIZEY - 1) {
            if (bugs[i].dy > 0) {
                bugs[i].dy = ELASTICITY * -bugs[i].dy;
            }
            bugs[i].Y = height - DUCKSIZEY - 1;
        }

	  //  If past right side, bring bug back
        if (bugs[i].X >= width - DUCKSIZEX) {
            if (bugs[i].dx > 0) {
                bugs[i].dx = ELASTICITY * -bugs[i].dx;
            }
            bugs[i].X = width - DUCKSIZEX - 1;
        }

	  //  If past left side, bring bug back
        if (bugs[i].X < 0) {
            if (bugs[i].dx < 0) {
                bugs[i].dx = ELASTICITY * -bugs[i].dx;
            }
            bugs[i].X = 0;
        }
        
        // Implement new position
        bugs[i].obj.left = bugs[i].X;			
        bugs[i].obj.top =  bugs[i].Y;		
    }
}

// end code hiding -->
</script>

<center>
<h1>Bugs following your mouse</h1>

This needs JavaScript enabled in your browser.

<p><a href="bugs.txt">source code</a>
</center>

</body>
</html>
Back