How to enqueue multiple user-triggered animations ?

[digEmAll]

Hi All,

I am new to this forum so I hope I didn't break any rule writing my question here...

My problem is probably trivial but I'm not sure how to implement it correctly.

Basically I have a project where users can trigger some 90° box rotations (implemented as animations) by clicking on a button.

Rotations work as expected, but problems arise when user clicks multiple times before previous rotations have completed. In this case, obviously, the following rotations start while the box is in the middle of previous movements therefore the final position of the box is not a multiple of 90° with respect to the initial position.

I made a playground example to reproduce the problem: http://babylonjs-playground.com/#1NSSHK#0

I think I should use the callback function of the rotation, but I'm not sure how (I'm pretty new to javascript...)

 

Thanks in advance

 

 

 

 

[iiceman]

Hi there digEmAll and welcome to the forum.

How about something like that: http://babylonjs-playground.com/#1NSSHK#1

The idea is not to add to the current rotation but to the current target rotation. This way the clicks still add up. Does it work for you like that? Alternatively you could try to prevent another click if the animation is already in progress, should be easy, too. Maybe something like that: http://babylonjs-playground.com/#1NSSHK#2

[digEmAll]

Thanks iiceman for your solutions, but I don't want to disable the button because user should be able to create a "chain" of rotations, and I can't use the first solution as well because that means the second (or third, forth.. ) rotation will start before the end of the previous.

Probably I oversimplified my example, but basically in the real case, box can rotate by 90° in different directions (around x, y or z) and different rotations cannot be "combined", but only "chained".

My quick'n'dirty solution is to use an array as rotations queue, as shown here :  http://babylonjs-playground.com/#1NSSHK#3

but I'm not expert enough in javascript to be sure this approach is safe.

For example, is there a risk for a stack overflow due to the recursion?

Are the operations "atomic" enough such that I'm sure that nothing can happen between the status boolean change and the status boolean check ?

Thanks again

 

 

 

 

[RaananW]

37 minutes ago, digEmAll said:

 

Are the operations "atomic" enough such that I'm sure that nothing can happen between the status boolean change and the status boolean check ?

 

Haven't checked the demo (on mobile), just wanted to comment on the last question you had - JavaScript is single threaded, all operations are technically atomic. You just need to sort your code correctly :-)

Oh, and this is totally the right place for this question. Especially with a playground already included ?

[iiceman]

I am no expert either, but I am pretty sure that should work. And as far as I know using a queue is a common approach. I don't believe that something can interfere between the flag change and reading the flag, that happens pretty much right after another as far as I can tell. About the stack overflow: how many clicks do you plan on putting in the queue?  

I found this on... well, stackoverflow: 

http://stackoverflow.com/questions/2805172/what-are-the-js-recursion-limits-for-firefox-chrome-safari-ie-etc

http://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

Maybe you can limit your queue to 1000 items or something like that to be on the save side? But who would be clicking a 1000 times on a rotate button?

 

[digEmAll]

4 hours ago, iiceman said:

I am no expert either, but I am pretty sure that should work. And as far as I know using a queue is a common approach. I don't believe that something can interfere between the flag change and reading the flag, that happens pretty much right after another as far as I can tell. About the stack overflow: how many clicks do you plan on putting in the queue?  

I found this on... well, stackoverflow: 

http://stackoverflow.com/questions/2805172/what-are-the-js-recursion-limits-for-firefox-chrome-safari-ie-etc

http://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

Maybe you can limit your queue to 1000 items or something like that to be on the save side? But who would be clicking a 1000 times on a rotate button?

 

Thanks, for the research

Actually these "rotations" might happen also programmatically, so it's easier to reach a greater number than user-clicked only, anyway I don't think I would never reach 100 times.

Thanks to all for the help !