path finding + smarter animations
What do I mean by smarter? Let's say each of our blocks has a position in a grid, [x, y]. (It's actually a 3D grid, so [x, y, z], but we can ignore the z for now)
The positions map to the block's index in z/y/x arrays. This means that a block's position can only be an integer like 1 or 2, but never a float like 1.25 or 2.81.
So a position like [0, 0] is fine but [0.5, 0] is not.
However, in order to animate between positions we need to interpolate that position, right?
The (very old) trick is to give the block an "offset" and then find the block's "draw position" by adding the two together. In the image below, both blocks have the same "position" but the one on the right has an offset that causes it to "draw" at a different place.
So to animate a block, the process is:
1) move the block to its new position,
2) set its offset so that it draws at its old position...
And then 3) animate the offset back to zero.
Throw in some delay after each animation cycle and you've got your animating blocks!
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.