TouchDesigner Tutorial: Working with COMPs

This tutorial introduces COMPs (Component Operators) in TouchDesigner. COMPs are unique compared to other operator families because they can contain other networks inside them, making them essential for organizing complex projects.

Understanding COMPs

The Four Sub-Families

COMPs are organized into four sub-families:

1. 3D Objects - For 3D rendering (Camera, Geometry, Light)
2. Panels - For user interface elements (Container, Button, Slider)
3. Other - Utility components (Window)
4. Dynamics - For physics simulations

Building a 3D Render Network

Adding Multiple Operators

To add multiple operators at once:

1. Press Tab to open the OP Create dialog
2. Hold Ctrl and click on multiple operators (Camera, Geometry, Light)
3. Release Ctrl and add a Render TOP from the TOP family

How Rendering Works

The Render TOP uses:

• The Camera as its perspective viewpoint
• Geometry components for 3D objects
• Lights to illuminate the scene

Transforming Geometry

To rotate geometry:

• Middle mouse click on the rotate parameter
• Use the Value Ladder to select your increment
• Drag left or right to change values

Exploring Inside Components

The geometry you see (like a Torus) is actually located inside the Geometry COMP:

• Use the mouse scroll wheel or press I to zoom inside a component
• Inside, you’ll find the actual SOP network that defines the geometry
• Use the scroll wheel to zoom back out

This nested structure is what makes COMPs powerful for organization.

Building User Interfaces with Panels

Container Components

Containers are how we organize UI elements in TouchDesigner:

• Every container has an associated Panel - a canvas for laying out interface elements
• Panels can be interacted with to capture user input

Panel CHOP for Interaction Data

To capture panel interaction:

1. Add a Panel CHOP from Channel Operators
2. Drag your Container onto the Panel CHOP
3. Make the container Viewer Active using the A key or the viewer active flag

The Panel CHOP provides:

• U/V position - Where the cursor is located
• Inside U/V - Position when inside the panel
• Select channels (lselect, mselect, rselect) - Which mouse button is pressed

Adding UI Elements

To add buttons and sliders:

1. Add a Button or Slider component
2. Use the top/bottom connectors to create hierarchy
3. Connect UI elements to the Container to make them appear inside

Arranging UI Elements

When UI elements stack on top of each other:

1. Make the Container non-viewer active first
2. Select the Container
3. Go to the Children page in parameters
4. Use Align options (left to right, right to left)
5. Set Justification (horizontal or vertical)

Window Component for Output

Creating Floating Windows

The Window component displays operators in separate windows:

1. Add a Window component from the “Other” sub-family
2. Add content (like a Movie File In TOP)
3. Click and drag the operator onto the Window’s operator parameter
4. Select which monitor to display on
5. Click Open as Separate Window

Window Options

You can customize the window:

• Toggle borders on/off
• Display TOPs (texture operators) or other components
• Use UI containers as window content for custom interfaces

Key Takeaways

1. COMPs contain networks - They can hold other operators inside, enabling modular organization
2. Four sub-families - 3D Objects, Panels, Other, and Dynamics serve different purposes
3. Geometry lives inside - 3D objects are defined by networks inside Geometry COMPs
4. Containers for UI - Use containers and their children alignment options to build interfaces
5. Panel CHOP - Captures interaction data from container panels
6. Window COMP - Creates floating windows for output display

COMPs are fundamental to building organized, modular projects in TouchDesigner, whether you’re creating 3D scenes or user interfaces.