Motion (vuo.motion)

Nodes for making numbers change over time, useful for animations.

Several of these nodes work with easing curves. An easing curve (easing function) is a curve that describes an object’s speed over a period of time — for example, whether it starts moving slowly and picks up speed or it starts moving quickly and slows down.

When you select an easing curve, you pick from two sets of options that control the shape of the curve:

• Type of curve
  • Linear — A straight line. As time changes, the speed stays the same (and the position changes in direct proportion to time).
  • Quadratic — A gradual curve. As time changes, the speed changes in proportion to time (and the position changes in proportion to time squared).
  • Cubic — A slightly steeper curve. As time changes, the speed changes in proportion to time squared (and the position changes in proportion to time cubed).
  • Circular — An even steeper curve. As time changes, the position changes in proportion to a quarter circle.
  • Exponential — A very steep curve. As time changes, the position changes in proportion to a function with time in the exponent.
• Type of easing
  • In — The curve is shallowest near the start and steepest near the end.
  • Out — The curve is shallowest near the end and steepest near the start.
  • In + Out — The curve is shallowest near the start and end, and steepest near the middle.
  • Middle — The curve is shallowest in the middle and steepest near the start and end.

See this page for more information on easing curves.

Example compositions:

• Compare Easing Curves: Compares different easing curves used to control an animated object's speed as it moves from one point to another.
• Compare Smoothed Data: Compares the different ways of smoothing a jittery series of numbers.
• Compare Smoothed Motion: Compares the different ways of smoothing an animated object's movement from one point to another.
• Crossfade Rectangle Sizes: Crossfades between two different sizes of rounded rectangle in response to button presses.
• Draw Curve: Moves a layer along a curved path, leaving a trail where the layer has been.
• Explode Clay: This composition uses the Curve node and some 3D object filters to demonstrate a way to make a repeating, multi-segment animation.
• Offset Oscillations: Animates 3 soft ovals. The Wave node's Phase port is used to place the blue oval slightly ahead of the white oval, and to place the red slightly behind the white oval.
• Rotate in Sequence: Rotates the top square, then, as soon as that animation completes, rotates the bottom square.
• Spring Back: Makes a layer spring back to the center of the window after it's dragged with the mouse.
• Wave Circle: Animates a circle that moves side-to-side in a wave motion. Move the mouse up or down to change the circle's speed.

Nodes:

• Crossfade (vuo.motion.crossfade): Smoothly changes between 2 values.
• Curve (vuo.motion.curve): Calculates a position along an easing curve.
• Smooth with Duration (vuo.motion.smooth.duration): Smoothly transitions from one position to another.
• Smooth with Inertia (vuo.motion.smooth.inertia): Smoothly transitions from one position to another.
• Smooth with Rate (vuo.motion.smooth.rate): Smoothly transitions from one position to another.
• Smooth with Spring (vuo.motion.smooth.spring): Smoothly transitions from one position to another, with a springing motion when it reaches the second position and comes to rest.
• Wave (vuo.motion.wave): Calculates the height of a waveform at a given time.