PDA

View Full Version : Stop motion for beginners

tootsieprog
01-10-2011, 11:17 AM
saw a code in the internet and translated it for beginners

<script type="text/javascript">
var a=0;
var t;
var counter=0
function runone()
{
a=a+1;
t=setTimeout("runone()",500);
two();
}
function runtwo()
{
i=a%32;
runthree();
}
function stopit()
{
clearTimeout(t);
counter=0;
}
function runthree()
{
if(i==1)
{
document.getElementById('b1').src="first.jpg";
}
else if (i==2)
{
document.getElementById('b1').src="second.jpg";
}
else if (i==3)
{
document.getElementById('b1').src="third.jpg";
}
else if (i==4)
{
document.getElementById('b1').src="fourth.jpg";
}
else if (i==5)
{
document.getElementById('b1').src="fifth.jpg";
}
else if (i==6)
{
document.getElementById('b1').src="sixth.jpg";
}
else if (i==7)
{
document.getElementById('b1').src="seventh.jpg";
}
else if (i==8)
{
document.getElementById('b1').src="eighth.jpg";
}
else if (i==9)
{
document.getElementById('b1').src="ninth.jpg";
}
else if (i==10)
{
document.getElementById('b1').src="tenth.jpg";
}
else
{
document.getElementById('b1').src="eleventh.jpg";
}

}
</script>

works for me. comment if ther's anything wrong.
NoeG
01-10-2011, 11:49 PM
what does it do?
siberia-man
01-11-2011, 11:30 AM
Spagetti code. Hell for programmers. Learn loops and arrays as soon as possible! Do you really think that if you will be having 10 and more values you will check all of them one by one using by this monstruous code?


if(i==1)
..
else if (i==2)
..
else if (i==10000)
...
jmrker
02-14-2011, 04:52 AM
I'm a bit suprised that it works for you using the setTimeout function as it must be repeatedly called to work.
I would have thought using the setInterval function would be better for the animated displays.

At the minimum I would change the following:

var imgList = ['first.jpg','second.jpg','third.jpg','fourth.jpg',
'fifth.jpg','sixth.jpg','seventh.jpg','eighth.jpg',
'ninth.jpg','tenth.jpg','eleventh.jpg'
];
// easier to code if images were renamed as:
// var imgList = ['1.jpg','2.jpg','3.jpg',.....'11.jpg'];

function runthree() {
document.getElementById('b1').src = imgList[i];
}

You could probably combine the runone() and runtwo() function into one function.
And, the modulo value of 32 should probably be 11 for your example.
Also, I see no reason for the "counter" variable as you only define it and never use it.
Eleos
02-19-2011, 03:16 AM
works for me. comment if ther's anything wrong.

I don't see how it did work because your two(); function is not defined.

Anyway, once I fixed that error and ran it on some test images, it seems your code cycles through some images, then pauses for a few seconds after the last image is displayed and then starts the cycle again. I've rehashed the code to the way I would do that.

On page load, this code cycles through the images at 1 sec intervals. After the last image is displayed, the cycling stops and after another 3 seconds the cycle starts again.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg']
var oPics = new Array();
for(i=0; i < picPaths.length; i++){
oPics[i] = new Image();
oPics[i].src = picPaths[i];
}
var curPic = -1;
var timer;
function swapImage(){
if(++curPic < oPics.length){ //not at end of picPaths array yet
oB1.src = oPics[curPic].src;
setTimeout(swapImage, 1000);
} else { //have reached end of picPaths array, so start cycle again in 3 seconds
curPic = -1;
setTimeout(swapImage, 3000); //restart after 3 seconds
}
}
window.onload=function(){
oB1 = document.getElementById('b1');
swapImage();
}
</script>
</head>
<body>
<div>
<img src="" alt="" id="b1" />
</div>
</body>
</html>