TouchDesigner Tutorial: The User Interface

This post covers the essential elements of the TouchDesigner user interface, helping you get started with this powerful node-based visual programming environment.

What is TouchDesigner?

TouchDesigner is a node-based visual programming environment where you build projects using operators arranged in networks. Instead of writing traditional code, you connect visual nodes to create interactive graphics, audio-visual experiences, and real-time installations.

The Network Editor

The Network Editor is the central workspace where you add and connect operators to build networks. This is where you do the majority of your programming in TouchDesigner.

Navigation:

• Pan: Click and drag on the backdrop to move around
• Zoom: Use the middle mouse button or scroll wheel to zoom in and out

Derivative (the company behind TouchDesigner) highly recommends using a three-button mouse, as the middle mouse button functionality is useful in many different situations.

Parameters Dialog

On the right side of the screen, you’ll find the Parameters Dialog. This panel is docked to the right and changes dynamically as you select different operators. It displays all parameters connected to the selected operator, and these parameters control the output of each operator.

Timeline Controls

Along the bottom of the interface is the Timeline, which controls a global looping time for your project.

Key features:

• Play/Pause: Use the spacebar as a quick shortcut
• FPS Counter: Located on the left portion of the timeline
• Target Frame Rate: Click on the FPS counter to change the target performance rate (commonly set to 60 FPS)

Troubleshooting tip: If your project appears frozen, check the timeline to make sure playback is active.

Top Menu Bar

The top portion of the interface contains menus, quick links, and important controls:

• Power Button: Controls the “cooking” (computation) for your entire project. Use this to stop or start all computation.
• Target Cook Rate: Shows your target frame rate
• Current Performance: Displays actual performance rate

When you change the target frame rate at the bottom, it updates both the target and actual performance indicators at the top.

Pane Layouts

TouchDesigner’s interface is built from a collection of panes. The Pane Layout Bar allows you to quickly switch between different arrangements.

Features:

• Quick shortcuts for common layouts (e.g., side-by-side views)
• Save custom arrangements to return to later
• View the same network from multiple perspectives

The Pane Bar

The Pane Bar provides navigation controls for moving through your project:

• Network Path: Shows your current location within nested components
• Back/Forward Buttons: Navigate like a browser
• Add Operators: Quick access to add new nodes
• Bookmark: Save locations to return to quickly
• Root Button: Jump to the root of your project
• Fullscreen: Expand a single view to fill the screen
• Split/Rearrange: Additional controls for managing your workspace

TouchDesigner projects often contain nested components. The network path helps you understand where you are within the hierarchy. You can zoom all the way out to see the top-level component (typically called “project1”).

The Palette

On the left side of the screen is the TouchDesigner Palette, containing pre-built components you can drag and drop into your projects.

Tips:

• Close the palette to gain more screen space for the Network Editor
• Click the palette button to reopen it when needed

Key Shortcuts Summary

Action	Shortcut
Play/Pause Timeline	Spacebar
Pan Network Editor	Click + Drag
Zoom	Middle Mouse / Scroll Wheel

Getting Started

With these interface basics, you’re ready to start creating your own TouchDesigner projects. The workflow typically involves:

1. Adding operators from the palette or using keyboard shortcuts
2. Connecting operators in the Network Editor
3. Adjusting parameters in the Parameters Dialog
4. Using the timeline to control animation and timing

Understanding these core interface elements will help you navigate TouchDesigner efficiently as you build more complex projects.