Div movement

I was just doing this and it seems unnaturally hard. What am I doing wrong here?

var i = 0;
	$.playground().registerCallback(function(){
		//y must go from 0 to 480
 
		while($("#simple_block").y() <= 456){
			i++;
			$("#simple_block").y(i);
		}
 
	}, 1);

The only explanation I can come up with is, that in one cycle it counts from 0 to 456 and that makes the div go from 0 to 456 in one go. I am however uncertain on how to proceed to actually make the div translate along the y axis. Advice?

selim

There are several problems with this code:

Firstly, as fas as I can tell it doesn't really do what you describe, it moves the block from 0 to 456 by increments of 1 pixel every 1ms (probably every 30 ms since the refresh rate is matched to a multiple of the playground's refresh rate). So you block will keep moving between those two points (0 and 456) so fast that you probably only see it in 456.

And most probably the browser is smart and will skip some of the unnecessary intermediary movement (since they happen so fast it's not even visible).

So I think what you meant was:

var i = 0;
$.playground().registerCallback(function(){
	//y must go from 0 to 456
 
	if($("#simple_block").y() <= 456){
		i++;
		$("#simple_block").y(i);
	} 
}, 30)

Secondly, unless you want your block to move really slowly I wouldn't recommend 1px increments, what you really need to think about is how much time the whole movement has to take and divided this with you increment rate.

This will give you the number of time the function will be called. You can then simply divide the distance to cross by this number and that will give you the distance increment. In this situation if the movement takes 1 seconds 1000/30 = 33 (so 33 call to the callback) will take 32 instead to have a nicer distance increment and 456/32 = 14.25 so 14.25 is our distance increment. This will give us the following code:

var i = 0;
$.playground().registerCallback(function(){
	//y must go from 0 to 456
 
	if(i < 32){
		$("#simple_block").y(14.25, true);
		i++;
	} else {
		return true;
	}
}, 30)

But it's true that ideally there should be a "move to" function that would allow to create a path and let the object move along it. This is one of the features that are planed for the next version of gQ.

Oh I didn't realize that the Refresh Rate did this. I thought it was the number of cycles. Brilliant explanation, thanks Selim.

Howdy, Stranger!

Categories