TouchDesigner Mastery
TouchDesigner Interface
Welcome to the Network
Opening TouchDesigner for the first time reveals a unique workspace. Instead of a blank document or a traditional timeline, you see a grid with a few connected boxes. This is the Network Editor, the heart of TouchDesigner's node-based workflow.
Think of it as a visual flowchart for creating interactive art and media. Each box, called an Operator or node, performs a specific task. You create visuals, sound, and logic not by writing lines of code, but by connecting these nodes together. An output from one node becomes the input for another, creating a flow of data that you can see and manipulate in real time.
The Building Blocks
Every node in TouchDesigner belongs to one of five families. Each family handles a different type of data and is color-coded, which helps you understand a network's function at a glance. You create a new node by pressing the Tab key, which opens a menu of all available operators.
| Family | Name | Data Type | Color |
|---|---|---|---|
| TOP | Texture Operators | Image and video data (pixels) | Purple |
| CHOP | Channel Operators | Numerical data (waveforms, audio, sensors) | Green |
| SOP | Surface Operators | 3D geometry (points, polygons) | Blue |
| DAT | Data Operators | Text, tables, and scripts | Gray |
| COMP | Component Operators | Containers for other networks, UI elements | Dark Blue |
The color-coding isn't just for looks. It's a fundamental guide that tells you what kind of data is flowing through your project.
Navigating Your Workspace
The three main parts of the interface work together. What you do in one area directly affects the others.
The Network Editor is your main canvas. You'll spend most of your time here creating, arranging, and connecting nodes. You can navigate this space intuitively:
- Pan: Click and drag with the middle mouse button.
- Zoom: Use the scroll wheel.
- Connect Nodes: Drag from a node's small output square to another's input square. A wire will form, showing the data connection.
When a node is selected, its editable properties appear in the Parameters window, which is typically on the right. Here, you can change a TOP's resolution, a CHOP's frequency, or a SOP's shape. This is where you fine-tune the behavior of each building block.
Finally, the Timeline at the bottom controls animation and playback. You can press the play button to see your creation in motion, set start and end frames for a loop, and adjust the frames per second (FPS) for your project.
Let's test your understanding of these core concepts.
What is the primary workspace in TouchDesigner called, where you build and connect your node networks?
When a node is selected, its editable properties appear in which part of the interface?
Getting comfortable with this interface is the first and most important step. In the next section, we'll start connecting these operators to create our first visual.