Random JS Animation [Archive]

Bobafart

02-10-2007, 12:47 PM

Hello,

I am trying to make a <div> follow a random path -- it is supposed to be a random path that a person will walk within a 600x600 grid.

Once I create one then I hope to create 5-10 different "people" walking randomly at different acceleration speeds throughout this div.

But for now I am trying to figure out how to make one div/person walk in a random path across the div. I managed to animate the div from right to left.. and i added in a random function but I am unsure how to proceed from here.

Any advice?

<html>
<head>
<style type="text/css">

body {
font:76% normal verdana,arial,tahoma;
}

h1, h2 {
font-size:1em;
}

#moveMe {
/* simple box */
position:absolute;
left:0px;
top:8em;
width:5em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

</style>
<script type="text/javascript">

var moveDiv = null; // object
var maxXaxis = '600px';
function doMove() {
// alert(moveDiv.style.left);
if (moveDiv.style.left != maxXaxis) {

// var randomnumber=Math.floor(Math.random()*11) // random number between 1 and 10
moveDiv.style.left = parseInt(moveDiv.style.left)+1+'px'; // pseudo-property code: Move right by 1px
setTimeout(doMove,20); // call doMove in 20msec
}

}

function init() {

moveDiv = document.getElementById("moveMe"); // get the "moveDiv" object
moveDiv.style.left = '0px'; // set its initial position to 0px
doMove(); // start animating
}

window.onload = init;

</script>
</head>
<body>
<div id="wrapper" style="background: #eee; height: 600px; width: 600px; overflow: hidden;">

<div id="moveMe">foo</div>

</div>
</body>
</html>

BarrMan

02-10-2007, 01:55 PM

Try this:
<html>
<head>
<style type="text/css">

body {
font:76% normal verdana,arial,tahoma;
}

h1, h2 {
font-size:1em;
}

#moveMe {
/* simple box */
position:absolute;
left:0px;
top:8em;
width:5em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

</style>
<script type="text/javascript">

var moveDiv = null; // object
var maxXaxis = '600px';
var x,y,randCount = 0;
function doMove() {
// alert(moveDiv.style.left);
if(randCount == 0)
{
x = Math.floor(Math.random()*2);
y = Math.floor(Math.random()*2);
if(x == 0)
x = -1
if(y == 0)
y = -1
}
randCount += 1;
if(randCount == 10)
randCount = 0;
if (moveDiv.style.left != maxXaxis) {

// var randomnumber=Math.floor(Math.random()*11) // random number between 1 and 10
moveDiv.style.left = parseInt(moveDiv.style.left)+x+'px'; // pseudo-property code: Move right by 1px
moveDiv.style.top = parseInt(moveDiv.style.top)+y+'px';
setTimeout(doMove,20); // call doMove in 20msec
}

}

function init() {

moveDiv = document.getElementById("moveMe"); // get the "moveDiv" object
moveDiv.style.left = '0px'; // set its initial position to 0px
moveDiv.style.top = '0px';
doMove(); // start animating
}

window.onload = init;

</script>
</head>
<body>
<div id="wrapper" style="background: #eee; height: 600px; width: 600px; overflow: hidden;">

<div id="moveMe">foo</div>

</div>
</body>
</html>