JavaScript and vectors?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

JavaScript and vectors?

Post 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 :?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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:
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

That's pretty cool. I'll look into that. Cheers
Post Reply