TouchDesigner Tutorial: Image Displacement Techniques

This tutorial covers image displacement techniques in TouchDesigner, demonstrating how to use the Displace TOP to transform and distort images for creative effects.

Understanding the Displace TOP

The Displace TOP works by distorting a source image (input 0) using a displace image (input 1). When you first add a Displace TOP, you’ll see an error because it requires both inputs to function.

Basic Setup

1. Add a Circle TOP as your source image (set radius to 0.1 x 0.1)
2. Add a Constant TOP as your displace image
3. Set the Constant color to 0.5 x 0.5 (50% gray)
4. Connect Circle to input 0 and Constant to input 1

The 50% gray color is crucial because it represents no displacement - this matches the Source Midpoint parameter.

Key Parameters

Horizontal and Vertical Source

These parameters control which color channels drive displacement:

• Horizontal Source: Red channel (default)
• Vertical Source: Blue channel (default)

Some users prefer using Green for vertical displacement since it’s commonly associated with Y-axis values.

Source Midpoint

Set to 0.5 x 0.5 by default. This specifies the color values that result in no displacement. Any values above or below this midpoint will cause displacement in the corresponding direction.

How Displacement Works

• Red channel above 0.5: Samples pixels from the right, displacing the image left
• Red channel below 0.5: Samples pixels from the left, displacing the image right
• Blue channel above 0.5: Displaces the image downward
• Blue channel below 0.5: Displaces the image upward

Note: The Green channel has no effect unless you configure it as a displacement source.

Creating a Water Ripple Effect

Setup

1. Add a Movie File In TOP with your source image
2. Add a Noise TOP with:
   • Monochrome: Off (to get red and blue channel variation)
   • Resolution: Match your source image (e.g., 1280 x 720)
3. Connect Movie File In to input 0 and Noise to input 1 of a Displace TOP

Displace Weight

The Displace Weight parameter controls the amount of displacement:

• Higher values = more dramatic distortion
• Lower values = subtle effects
• Try 0.05 x 0.05 for a subtle water-like ripple

Animating the Noise

On the Noise TOP’s Transform page, add an expression to Translate TZ:

absTime.seconds * 0.15

Adjust the multiplier for faster or slower animation.

Noise Period

Increase the Period parameter on the Noise TOP for larger, more organic warps and warbles.

Handling Edge Artifacts

The Extend parameter on the Displace TOP controls how edges are handled:

• Hold: Stretches edge pixels (can cause visible artifacts)
• Zero: No pixels at edges (creates a flag-blowing effect)
• Mirror: Mirrors pixel values for cleaner edges (recommended)

Vignette Displacement Effect

To apply displacement only to the edges of an image (like a camera lens distortion):

1. After your Noise TOP, insert a Circle TOP
2. Set the Circle’s Fill Color to 0.5 x 0.5 (matching the Source Midpoint)
3. Increase Softness to around 0.15 for a gradual transition
4. Reduce Noise Amplitude to 0.2 for a more subtle effect

This creates displacement only at the edges while keeping the center undistorted.

Channel Mask

On the Common page, the Channel Mask parameter lets you selectively apply displacement to specific channels:

• Toggle off Red to create chromatic aberration effects
• The displacement will affect Green, Blue, and Alpha while leaving Red unchanged

UV Weight for Chromatic Aberration

The UV Weight parameter creates additional distortion effects:

• Values close to 1.0: Normal behavior
• Values approaching 0: Zooms into the displacement
• Try 0.95 for a subtle chromatic aberration effect

Practical Tips

• Use middle mouse button for precise parameter adjustments
• Start with subtle displacement values and increase as needed
• Combine slow noise animation (0.05 - 0.1 multiplier) for atmospheric, cinematic effects
• The combination of edge-only displacement with slow animation creates a “Euphoria-like” dreamy aesthetic