Page 1 of 1

JavaScript and vectors?

Posted: Thu Feb 24, 2005 1:50 pm
by Chris Corbyn
Hi,

Whenever I've used JavaScript to do a bit of playing with DHTML and I've wanted to move an object from A to B I've used setInterval() or setTimeout() and essentially created hundreds of frames to do it moving the object by X pixels each interval.

This is a bit slow in Moz....

What I wondered was if there was a far more efficient way to do using vectors much like Macromedia Flash does it. So instead of saying move object M by X pixels to the right every 50 millisecs and repeat 100 times, I'd say move M from A to B over 5.0 seconds.

I've searched around for this kinda thing but I don't really know what to search for. Most examples of moving things use the method I'm already using. If somebody could nudge/kick me in the right direction or tell me to forget it because it's not possible it'd be great.

I've seen things move smoothly in moz on other sites (but I can't find any now) so there must be a better way than my current method. When I do it, all the colors flicker around and it's very slow (only in moz).

Thanks for any help here :?

Posted: Thu Feb 24, 2005 2:30 pm
by feyd
it's the exact same thing, just switching out a few names and things.. in the end it does the same thing, although using floating point is most often slower than integers.. but that depends on the Javascript engine implementation and the processor it's being run on.

Posted: Thu Feb 24, 2005 3:21 pm
by Chris Corbyn
Thanks... so if I try to keep to integers and reduce the number of repitions I may be able to speed things up... Probably just my poor coding thats making it slow.

Practise makes perfect as they say. I'll keep at it :lol:

Usually best to use flash/actionscript for some of the fancier things but I like to avoid it if it's unnecesarry.

Posted: Fri Feb 25, 2005 6:27 am
by Chris Corbyn
So I'm doing this at the moment (to move an object to the left)

Code: Select all

//Commands the movement of an object to the left
// st=start pos, pix=num of pixels to move (changes), j is same as pix but wont change, dist=end pos, t=interval in ms

function moveLeft(obj, st, pix, j, dist, t) {
	el = document.getElementById(obj)
	el.style.left = (st-pix)+'px'
	if (pix < dist) &#123;
		setTimeout(function() &#123; moveLeft(obj, st, pix+j, j, dist, t) &#125;, t)
	&#125;
&#125;
It just calls itself over and over, increasing the number of pixels until the distance given has been covered.

I call it as follows (for a relatively positioned object).

Code: Select all

<img id="mover" style="position:realtive; left:300px" src="mover.gif">
<p>
<input type="button" value="Move it, move it" onClick="moveLeft('mover', 300, 2, 2, 100, 15)">
It works but as I say, it's a bit slow (have to play around with t, pix and j to tweak it). Is it a demanding function and is there a more efficient way to do it?

Thanks :lol:

Posted: Fri Feb 25, 2005 7:04 am
by timvw

Posted: Fri Feb 25, 2005 7:11 am
by Chris Corbyn
That's pretty cool. I'll look into that. Cheers