Hearts following mouse

<!-- this script got from http://free-javascript-codes.blogspot.com/--><br /> <br /><div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot1" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot2" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot3" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot4" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot5" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><div id="dot6" style="position: absolute; height: 11; width: 11;"><br /> <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11><br /></div><br /><br /><script LANGUAGE="JavaScript"><br /><!-- hide code<br /><br />var nDots = 7;<br /><br />var Xpos = 0;<br />var Ypos = 0;<br /><br /> // fixed time step, no relation to real time<br />var DELTAT = .01;<br /> // size of one spring in pixels<br />var SEGLEN = 10;<br /> // spring constant, stiffness of springs<br />var SPRINGK = 10;<br /> // all the physics is bogus, just picked stuff to<br /> // make it look okay<br />var MASS = 1;<br />// Positive XGRAVITY pulls right, negative pulls left<br />// Positive YGRAVITY pulls down, negative up<br />var XGRAVITY = 0;<br />var YGRAVITY = 50;<br />// RESISTANCE determines a slowing force proportional to velocity<br />var RESISTANCE = 10;<br /> // stopping criterea to prevent endless jittering<br /> // doesn't work when sitting on bottom since floor<br /> // doesn't push back so acceleration always as big<br /> // as gravity<br />var STOPVEL = 0.1;<br />var STOPACC = 0.1;<br />var DOTSIZE = 11;<br /> // BOUNCE is percent of velocity retained when <br /> // bouncing off a wall<br />var BOUNCE = 0.75;<br /><br />var isNetscape = navigator.appName=="Netscape";<br /><br /> // always on for now, could be played with to<br /> // let dots fall to botton, get thrown, etc.<br />var followmouse = true;<br /><br />var dots = new Array();<br />init();<br /><br />function init()<br />{<br /> var i = 0;<br /> for (i = 0; i < nDots; i++) {<br /> dots[i] = new dot(i);<br /> }<br /> <br /> if (!isNetscape) {<br /> // I only know how to read the locations of the <br /> // <LI> items in IE<br /> //skip this for now<br /> // setInitPositions(dots)<br /> }<br /> <br /> // set their positions<br /> for (i = 0; i < nDots; i++) {<br /> dots[i].obj.left = dots[i].X;<br /> dots[i].obj.top = dots[i].Y;<br /> }<br /> <br /> <br /> if (isNetscape) {<br /> // start right away since they are positioned<br /> // at 0, 0<br /> startanimate();<br /> } else {<br /> // let dots sit there for a few seconds<br /> // since they're hiding on the real bullets<br /> setTimeout("startanimate()", 1000);<br /> }<br />}<br /><br /><br /><br />function dot(i) <br />{<br /> this.X = Xpos;<br /> this.Y = Ypos;<br /> this.dx = 0;<br /> this.dy = 0;<br /> if (isNetscape) { <br /> this.obj = eval("document.dot" + i);<br /> } else {<br /> this.obj = eval("dot" + i + ".style");<br /> }<br />}<br /><br /><br />function startanimate() { <br /> setInterval("animate()", 20);<br />}<br /><br /><br />// This is to line up the bullets with actual LI tags on the page<br />// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why<br />// Still doesn't work great<br />function setInitPositions(dots)<br />{<br /> // initialize dot positions to be on top <br /> // of the bullets in the <ul><br /> var startloc = document.all.tags("LI");<br /> var i = 0;<br /> for (i = 0; i < startloc.length && i < (nDots - 1); i++) {<br /> dots[i+1].X = startloc[i].offsetLeft<br /> startloc[i].offsetParent.offsetLeft - DOTSIZE;<br /> dots[i+1].Y = startloc[i].offsetTop +<br /> startloc[i].offsetParent.offsetTop + 2*DOTSIZE;<br /> }<br /> // put 0th dot above 1st (it is hidden)<br /> dots[0].X = dots[1].X;<br /> dots[0].Y = dots[1].Y - SEGLEN;<br />}<br /><br />// just save mouse position for animate() to use<br />function MoveHandler(e)<br />{<br /> Xpos = e.pageX;<br /> Ypos = e.pageY; <br /> return true;<br />}<br /><br />// just save mouse position for animate() to use<br />function MoveHandlerIE() {<br /> Xpos = window.event.x + document.body.scrollLeft;<br /> Ypos = window.event.y + document.body.scrollTop; <br />}<br /><br />if (isNetscape) {<br /> document.captureEvents(Event.MOUSEMOVE);<br /> document.onMouseMove = MoveHandler;<br />} else {<br /> document.onmousemove = MoveHandlerIE;<br />}<br /><br /><br />function vec(X, Y)<br />{<br /> this.X = X;<br /> this.Y = Y;<br />}<br /><br />// adds force in X and Y to spring for dot[i] on dot[j]<br />function springForce(i, j, spring)<br />{<br /> var dx = (dots[i].X - dots[j].X);<br /> var dy = (dots[i].Y - dots[j].Y);<br /> var len = Math.sqrt(dx*dx + dy*dy);<br /> if (len > SEGLEN) {<br /> var springF = SPRINGK * (len - SEGLEN);<br /> spring.X += (dx / len) * springF;<br /> spring.Y += (dy / len) * springF;<br /> }<br />}<br /><br /><br />function animate() { <br /> // dots[0] follows the mouse,<br /> // though no dot is drawn there<br /> var start = 0;<br /> if (followmouse) {<br /> dots[0].X = Xpos;<br /> dots[0].Y = Ypos; <br /> start = 1;<br /> }<br /> <br /> for (i = start ; i < nDots; i++ ) {<br /> <br /> var spring = new vec(0, 0);<br /> if (i > 0) {<br /> springForce(i-1, i, spring);<br /> }<br /> if (i < (nDots - 1)) {<br /> springForce(i+1, i, spring);<br /> }<br /> <br /> // air resisitance/friction<br /> var resist = new vec(-dots[i].dx * RESISTANCE,<br /> -dots[i].dy * RESISTANCE);<br /> <br /> // compute new accel, including gravity<br /> var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,<br /> (spring.Y + resist.Y)/ MASS + YGRAVITY);<br /> <br /> // compute new velocity<br /> dots[i].dx += (DELTAT * accel.X);<br /> dots[i].dy += (DELTAT * accel.Y);<br /> <br /> // stop dead so it doesn't jitter when nearly still<br /> if (Math.abs(dots[i].dx) < STOPVEL &&<br /> Math.abs(dots[i].dy) < STOPVEL &&<br /> Math.abs(accel.X) < STOPACC &&<br /> Math.abs(accel.Y) < STOPACC) {<br /> dots[i].dx = 0;<br /> dots[i].dy = 0;<br /> }<br /> <br /> // move to new position<br /> dots[i].X += dots[i].dx;<br /> dots[i].Y += dots[i].dy;<br /> <br /> // get size of window<br /> var height, width;<br /> if (isNetscape) {<br /> height = window.innerHeight + window.pageYOffset;<br /> width = window.innerWidth + window.pageXOffset;<br /> } else { <br /> height = document.body.clientHeight + document.body.scrollTop;<br /> width = document.body.clientWidth + document.body.scrollLeft;<br /> }<br /> <br /> // bounce off 3 walls (leave ceiling open)<br /> if (dots[i].Y >= height - DOTSIZE - 1) {<br /> if (dots[i].dy > 0) {<br /> dots[i].dy = BOUNCE * -dots[i].dy;<br /> }<br /> dots[i].Y = height - DOTSIZE - 1;<br /> }<br /> if (dots[i].X >= width - DOTSIZE) {<br /> if (dots[i].dx > 0) {<br /> dots[i].dx = BOUNCE * -dots[i].dx;<br /> }<br /> dots[i].X = width - DOTSIZE - 1;<br /> }<br /> if (dots[i].X < 0) {<br /> if (dots[i].dx < 0) {<br /> dots[i].dx = BOUNCE * -dots[i].dx;<br /> }<br /> dots[i].X = 0;<br /> }<br /> <br /> // move img to new position<br /> dots[i].obj.left = dots[i].X; <br /> dots[i].obj.top = dots[i].Y; <br /> }<br />}<br /><br />// end code hiding --><br /></script><br /><br /><font face="Tahoma"><a target="_blank" href="http://free-javascript-codes.blogspot.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Codes</span></a></font><br />