Footsteps animation along path

Discussions
1

Hey there,

I’m looking for a way to create walking footprints along a predefined path.

It should be very simplistic. Only white footprints on black background.

Kinda like this:

The individual footprints (images) should really ‘walk’ on the screen and not gradually appear like this:

Any ideas how I can make something like this?

Kind regards and thanks in advance,
quote

2

Hi, @quote. There are various ways you could accomplish a footsteps animation in Vuo. I’ve attached compositions demonstrating some approaches.

Common features of all of these compositions:

  • The footprint image is brought into the composition using Fetch Image.
  • Each footstep is a layer created with Make Scaled Layer.
  • A new footstep appears each time Fire Periodically fires.

Footsteps-1EnqueueLayers.vuo — This composition uses a predefined list of points for the locations of the footsteps (see Get Item from List drawer). When it creates the layer for each footstep, it adds that layer to a list of layers (Enqueue) that is rendered. Maintaining a list of layers is useful if you want to modify the footsteps individually (for example, making them disappear one by one) after they’ve appeared.

Footsteps-2ImageFeedback.vuo — This composition also uses predefined points for the footstep locations. Instead of accumulating a list of layers, one for each footstep, as in the previous composition, this composition uses Blend Image with Feedback to add the most recent footstep image onto the previous ones. I think this is a little simpler than the previous composition.

Footsteps-3GeneratePointLists.vuo — Rather than using a predefined list of points where I had to type in each one, this composition generates them using the Make Points Along Curve and Spread List Item Groups nodes. I like to use Make Points Along Curve when I have a start and end position in mind and I want to draw equally spaced points between them, which is the case for the x-values. I’m using Spread List Item Groups to alternate between 2 y-values and 2 rotations.

Footsteps-4GeneratePointsIndividually.vuo — Unlike the previous composition, which generates all of the footstep points when the composition starts, this composition generates them one at a time, each time Fire Periodically fires. Same outcome, just different ways of thinking about the problem. This composition uses the Count node to generate each x-value and the Cycle through List nodes to alternate between y-values and rotations.

Hopefully those give you a starting point. If there’s some different way you want the footsteps to look and you don’t see how to accomplish it, feel free to post a follow-up question. (This question was originally posted in Q&A, but I moved it to Discussions since it doesn’t have a definitive answer and there might be some back-and-forth.)

Footsteps 2016-11-14.zip (12 KB)

1 Like
3

Thanks for the exhaustive answer.
I hope I will have time on the weekend to try them out.

Kind regards from Austria

1 Like