Accelerated motion algorithm. Perhaps you can turn that into a Tween?

[killroy]

You asked for a demo posted to the forums on Twitter, so here it is.

 

The important bit is this function:

const calcAccel = (x, v, maxA, dt) => {
  if(dt === 0) return 0;
  const signX = (x < 0)?-1:1;
  const a = signX * (Math.sqrt(Math.abs(1 + (2 * x) / (maxA * dt * dt))) * maxA - (v * signX) / dt - maxA);
  return Math.min(maxA, Math.max(-maxA, a));
}

It takes a distance, velocity, maximum acceleration and time delta and returns the acceleration that needs to be applied to reach the destination and stop there given acceleration and velocity constraints.

 

The attractive part of this is that the destination can be changed at will and the formula will always work out. And if the acceleration and velocity constraints are such as to prevent exactly stopping on the target, it will simply overshoot and correct.

 

I've come to this after first trying to apply tweening to my problem. But perhaps this can be wrapped into a custom tween.

 

Basic demo: 

Real-world demo: 

See the Pen MJvGLW by killroy (@killroy) on CodePen

 

I've developed it for various applications in an RTS game (such as turning turrets and ship motion), but I constantly find other applications for it.

 

Cheers!

See the Pen jyaKYo by killroy (@killroy) on CodePen

[GreenSock]

Thanks for sharing, killroy. It looks a lot like what ThrowPropsPlugin does, but your implementation requires a lot more processing on each tick. Are you familiar with ThrowPropsPlugin? It'll let you set an initial velocity (heck, it'll even track moment-by-moment velocity of any property) and smoothly glide to a stop at any destination value, conserving initial velocity. So like your spinning wheel, you can have it naturally stop at any spot. In fact, it'll even figure out the natural stopping point and let you alter that from the very beginning. Even feed in an array of potential ending values and it'll select the closest natural one based on initial velocity. 

 

Anyway, perhaps I misunderstood the goal of the technique you shared. Is there a particular benefit it delivers that isn't possible with ThrowPropsPlugin?

[killroy]

I'm not familiar with that How can it do that with less processing? Are you talking about mathematical operations? I mean there are only a couple of divides and multiplies, really. And does the ThrowPropsPlugin work if the distance or velocity is arbitrarily changed during any frame?

 

Perhaps a better demonstration of the algorithm is the 3D RTS I'm working on: https://twitter.com/killroy42/status/818436958816993280

The turning thrusters are simply read out from the acceleration value. The target point is the mouse cursor, and the algorithm is applied to linear distance and angular distance for turning.

[GreenSock]

ThrowPropsPlugin isn't intended to accommodate constantly changing distance/velocity inputs on-the-fly, but you could absolutely create new tweens when the values changed and it'll pick right up where it left off. If you're literally doing that like 30-60 times every second, it wouldn't make a lot of sense - in that case you're not really looking for a tweening engine; you're looking for a physics engine. Rendering loops for a physics engine vs. a tweening engine are radically different. There are pros and cons of each. 

 

But yeah, the rendering loop for ThrowPropsPlugin (the part that runs on every tick) was roughly 2-10x faster (depending on the browser). That probably doesn't matter much, though, real-world-wise unless you're pushing things really hard and animating a ton of elements simultaneously. 

[OSUblake]

Your ship demo reminds me of some experiments I did with additive animations. Instead of overwriting a tween, they run concurrently creating a smooth continuous animation.

 

Simple demo. If you click around the screen, you'll notice that it doesn't abruptly change direction.

See the Pen PPmJpL by osublake (@osublake) on CodePen

 

A better demo reacting to mouse movement.

See the Pen GpmPGy by osublake (@osublake) on CodePen

 

.