FLIES IN MOTION
ADVANCED JAVASCRIPT TRICKS
This exercise demonstrates how to simulate motion.
Hover over the fly to animate flies around the window.
How is this achieved?
Firstly, DOM's createElement is used to dynamically create the flies.
The images are appended to a DIV container.
A while loop is used to decide how many flies to create.
var img=document.createElement("img")//create img element shorthand
img.src="../images/fruitfly.gif";//src of img attribute
img.id="fly" + flyNmb; // append unique id
img.style.position="absolute"; // append absolute position inside parent element
img.style.left='500px'; // append top position
img.style.top ='500px'; // append left position
img.title = 'fly'+ flyNmb; // assign a unique title to the fly
fly_box.appendChild(img);//append to fly box div
var currentFly = "fly" + flyNmb; // placeholder for the current created fly
totalFlies.push(currentFly); // places current fly inside the totalFlies array for stocktake
Math.random is applied to emulate compass directions. The value is stored for later DOM use.
var em = document.getElementById('fly'+iteration);
direction = new Array(); // this contains the directions the flies will take
direction[0] = "em.style.top";
direction[1] = "em.style.right";
direction[2] = "em.style.bottom";
direction[3] = "em.style.left";
var rand =Math.floor(Math.random()*4); // random direction is created here!!
in the body of Javascript, a function needs to be called with a delay for each iteration.
It is important not to place the interval inside the function. The while loop DOES NOT stop for the process in the setInterval() method, nor does it stop for the interval delay.In theory, the while loop could iterate 100 or 1000 times (depending on processor speed ) before the delay kicks in.
timer = setInterval(function(){flyMotion()}, 20); // establishes the motion delay the next function will use to simulate
function flyMotion(action) {
// stuff in here
}
THE TRICKY BIT
How do you animate more than one image with its own AI?
function flyMotion(action) {
distance = 20000; // establishes how far the flies will travel before they stop
iteration = 0; // use this value to count through flies in the flyMotion function
if (distance>=0)
{
if (rand == 0) {
var flyPosition = parseInt(em.style.top); // gets the position location of fly as a number
flyPosition+=3; // travel X pixels distance
distance=distance-3; // remove x pixels from distance
em.style.top=flyPosition+"px"; // moves extra distance
iteration++ // add one to the iteration and move to next fly
} else
{
clearInterval(timer); // clears timer set in previous function
distance=-1; // failsafe to stop function
alert("stop");
return
}
}
}
SUMMATION
By using setInterval() and applying the motion process inside the function, once an iteration within the function finishes, the script waits for the delay before it executes the function again.
The script actually stops with one iteration of the function. It is the setInterval() delay that ressurects the process loop.
The setInterval() flyMotion() combination is powered by the "distance" variable. In this case there will be 20,000 iterations before the function ceases to be called.
Through the combination of math.random to emulate compass directions and DOM to simulate motion by mapping map the x and y coordinates you too can produce cool effects.