TouchDesigner Tutorial: Working with TOPs

This tutorial introduces TOPs (Texture Operators) in TouchDesigner. In computer graphics, the term “texture” refers to a 2D image asset, so TOPs are essentially how we work with images and video in TouchDesigner.

Getting Started with TOPs

Adding Operators

To begin working with TOPs:

1. Press the Tab key to open the OP Create dialog
2. Add operators like Movie File In, Circle TOP, and Composite TOP to your network

Loading Images

To change the image in a Movie File In operator:

• Click the plus icon in the parameters panel
• This opens a file selection dialog where you can choose your image

Connecting Operators

You can connect operators in two ways:

• Connect them one at a time
• Box select multiple operators by right-clicking and holding, then connect them simultaneously to another operator

Understanding Resolution and Aspect Ratio

Checking Operator Info

When compositing images, resolution mismatches can cause unexpected results. To check an operator’s resolution:

• Click on the operator
• Go to the parameters dialog and click the Info button
• Alternatively, use middle mouse button click and hold for quick info popup

Fixed Layer Parameter

The Fixed Layer parameter on the Transform page of the Composite TOP determines which input defines the resolution and aspect ratio of the output:

• By default, it may use a smaller resolution (e.g., 256x256 from a Circle TOP)
• Change it to Input 1 to use the resolution of your main image

Prefit Overlay Options

The Prefit Overlay parameter controls how images are combined:

• Fill: Stretches the other input to fill the fixed layer
• Fit options: Various fitting modes to match your desired look
• Native Resolution: Preserves exact pixel dimensions from both inputs

Working with the Circle TOP

Setting Resolution

On the Common page of the Circle TOP, you can set custom resolution:

• Example: 1024 x 1024 for higher quality circles

Adjusting Size

To change the circle radius:

• Enter values directly (e.g., 0.3 by 0.3)
• Use the Value Ladder: Middle mouse click and hold to drag-select the increment (thousands, tenths, or whole units)
• Middle mouse click on the parameter name to change both X and Y values simultaneously

Transform TOP and Channel Masks

Transform Operations

The Transform TOP allows various image transformations:

• Rotation (spinning)
• Translation (moving left/right, up/down)

Channel Mask Feature

The Channel Mask on the Common page is a powerful feature for selective transformations:

• By default, transformations apply to all channels: Red, Green, Blue, and Alpha
• You can disable specific channels to exclude them from the transformation
• Example: Disable Red channel, and only Green, Blue, and Alpha will be transformed

This creates interesting visual effects where different color channels are offset from each other, useful for:

• Chromatic aberration effects
• RGB split effects
• Channel-specific processing

Key Takeaways

1. TOPs are Texture Operators - They handle all 2D image and video processing in TouchDesigner
2. Resolution matters - Always check the Fixed Layer setting when compositing to ensure correct output resolution
3. Value Ladder - Middle mouse button provides quick value adjustment with selectable precision
4. Channel Masks - Enable selective processing of individual color channels for creative effects
5. Info popup - Middle mouse click and hold on any operator for quick resolution and aspect ratio info

This tutorial covers just the basics of TOPs, but provides a solid foundation for working with images and video in TouchDesigner.