Animations 103 – going back
January 6th, 2010 | 2 Comments »After looking at movement paths involving three points, let’s go back to the case of two points:
![]()
Now, once you arrive at B you are asked to go back to A. A straightforward solution would look like this:
![]()
With the velocity graph for the overall travel:
![]()
What about being asked to go back to A before you get to B?
![]()
Extending the previous solution, the first approach would be
![]()
However, just as in the previous entry (with three points), when you are asked to change direction while you’re still moving, you need to account for your current momentum /inertia. In this case, it will take you some time to slow down – while still going towards B, and then you can start moving back to A:
![]()
And the corresponding velocity graph looks like this:
![]()
The movement paths in the previous entry remind us that the moving body is in most cases not symmetric around the Z axis, and so needs to take an actual turn – unless it’s a train bogie with driver cabs on both sides:
![]()
And the velocity graph with the turn does not have a zero-velocity point in the middle:
![]()
Going back to the case where you don’t need to take the turn (train bogie or other examples that will be discussed in the next installments), notice that you’re travelling more after being asked to turn back:
![]()
If X time units have passed since you left A and until you were asked to turn, and you are asked to get back to A in the same X time units, this means that you will need to travel faster:
![]()
with the actual speed depending on how much does it take you to decelerate once you’ve been asked to go back, and how much distance do you have to cover before getting to A.
Now, let’s extend this example to three points:
![]()
Here, you were asked to go to C while you were moving towards B, and are asked to change direction once again as you are moving towards C. The movement path will include you making a right turn towards A – creating a complex two-dimensional trajectory:
![]()
What if you’re asked to move to B instead?
![]()
In this case you’re going to take a left turn towards B:
![]()
Or, if you’re a big fan of right turns (or have a problem with your steering wheel), you can take the right turn:
![]()
In any case, the real world does not have segmented paths
![]()
All the examples in this series have talked about everyday movements of physical objects. Next, i’m going to talk how the same principles apply to the objects and entities displayed on the screen.
To be continued tomorrow.
Related posts:
- Animations 102 – changing direction The examples in the previous entry talked about moving from point A to point B...
- Animations 201 – color After seeing how the rules of the physical world constrain and shape movements of real...
- Animations 101 – from point A to point B Movement is all around us in the physical world. We take it for granted since...
- Animations 202 – scrolling After seeing how the rules of physical world can be applied to animating colors, it’s...
Hi Kiril,
I totally enjoy reading your blog and I’ve learned a lot about Swing, graphics rendering and animation from it.
I don’t mean to be picky, but could you clarify what do you mean by ‘velocity’? In my mind, we have the primitive metrics of ‘time’ and ‘distance’. Speed and velocity are first and second derivatives of distance over time (speed is the rate at which travelled distance changes, velocity is the rate at which speed changes).
This would mean that flatline velocity above zero would be constant acceleration, yet from the textual description it appears otherwise.
Dimitar,
Velocity and speed are synonyms – both being the first derivative of traveled distance. Acceleration is the second derivative of traveled distance – and the first derivative of velocity / speed. Velocity and speed are used interchangeably throughout this series.
Thanks
Kirill