First Things to Know about TouchDesigner
These are the basics to help you become skilled in working with the TouchDesigner interface. This will take you about 1-2 hours if you work through it sequentially. Afterwards you will hopefully be more proficient and comfortable with exploring TouchDesigner on your own.
TIP: If the meaning of a term in TouchDesigner is unclear, you can look it up in the TouchDesigner Glossary or Search for it, both found in the menus to the left..
It follows these 3 beginner videos:
1. Starting TouchDesigner
Double-click the TouchDesigner desktop icon (or begin via the Windows Start menu).
2. Pan, zoom and center the Network
You see the network editor on the right when you first start TouchDesigner. The palette browser is on the left. Click x at its upper right to close it.
To pan the network, click and drag the left mouse button (LMB) on an empty area of the network. Click the middle mouse (MMB) to zoom the network.
Press the "h" key to center it (also called homing). Now click/drag MMB to pull back on the node
3. TouchDesigner is all about Generators and Filters
On the right side of
moviein1, right-click on its blue output connector to display the OP Create Dialog. Click 'Level' and then click anywhere on the grid to create
level1, connected to
movie1. You have just added an image "filter" (
level1) that modifies the levels of a "generator" (
On the top-right dialog, move the sliders labeled Black Level and Brightness. These are typical "parameters" in TouchDesigner.
4. Select and move Nodes
Left-click on a node and drag it to a new location.
Right-click (RMB) and release the mouse on the empty network area - you will see the network menu. Choose 'Home All'.
To box-select several nodes, either hold shift and use left mouse button or just use right mouse button in an empty area and drag the mouse over the nodes.
Left-click on a selected node and drag it - the selected nodes move together.
Right-click on a node itself - you will see the node menu. Choose 'Viewer' to get a floating window, then choose 'Reset All Parameters'. Now you can close the viewer window.
5. In the Network Editor, add an Operator
Darker-colored OPs are generators (they create or read data in your project). Lighter colored OPs are filters (they modify the data).
Click on one CHOP type (choose Wave) and then click on any empty place in the network to create a new Wave CHOP.
You can find a specific operator by typing its name while the OP Create Dialog is open. For example, double-click the network again and type "noi", click on Noise, and click on the network to place the Noise CHOP.
6. Six Families of Operators act on images, motion, 3D and text
Press Tab again to bring up the six families of Operators (OPs), and choose the suggested ones to see more samples:
- Texture Operators (TOPs) work with images. (choose the Text TOP)
- Channel Operators (CHOPs) are for motion, audio and control signals. (choose a Trigger CHOP)
- Surface Operators (SOPs) work with 3D surfaces. (choose Torus SOP)
- Material Operators (MATs) shade the 3D objects. (Phong MAT)
- Data Operators (DATs) manipulate text and tables. (Web DAT, and press Connect, Fetch)
- Components (COMPs) contain networks and hold control panel gadgets and 3D objects. (Geometry COMP)
7. Connect Nodes together
Node inputs are found on their left side, outputs are found on their right. Select the output of a node (the Wave CHOP) by left clicking on the notch on its right side. Connect it to the input of another node by clicking on a notch on the left side of another node of the same family (the Trigger CHOP).
To connect an output to a new node, middle click on the output and select from the Operator menu.
To insert a new node between two already-connected nodes, right-click the output of a node. Another way is to right-click on the wire, and select Insert Operator from the menu.
Remove a wire by clicking on the input of a connected node and then clicking empty space in the network. Another way is to right-click on a wire and select Disconnect from the menu.
The 3D components like Camera, Light and Geometry have connectors on their bottoms and tops which connects them as parent-child in a 3D hierarchy.
The 2D components like Container, Button and Slider have connectors on their bottoms and tops which groups them into a panel. Create a Container component, then Middle-click on its bottom to add several gadgets (Button and Slider) to one container.
8. Current Node and Selected Nodes
Click on one node to make it "current". A green border around a node means it is current.
Yellow borders around one or more nodes mean they are "selected". RMB box-pick nodes to select them, and Shift-box-pick to add to the set of selected nodes. The RMB network menu affects selected nodes: You can move, delete and act on selected nodes together, like change their parameters together. Ctrl+Z to undo, or undo via the Edit menu.
9. Node Viewers show operators' control panels or output data
A node viewer shows the current output of a node. For example, the Movie File In TOP's viewer shows the image that the TOP read from a file.
10. Viewers that are Active can be operated as Panels
"Viewer Active" means that clicking on an node's viewer will operate the panel or let you inspect the contents of the operator's viewer.
Normally Viewer Active is off, so when you left-click a node, you move it or select it. You can only see the data in the viewer. Middle-click shows the info box, and right-click shows the node menu.
These actions make the viewer interactive:
- While the Alt key is pressed, all node viewers are temporarily in the Viewer Active state.
- Alt+a toggles the global "Viewers Always Active" state. It makes all viewers in all networks Active.
- Viewers Always Active is also on the RMB network menu.
- All nodes have their own Viewer Active flag on the bottom right corner of the node. Setting the Viewer Active flag keeps the node in an state where the viewer can always be operated.
- The shortcut key "
a" will set/unset the Viewer Active flag of all selected nodes (yellow borders).
11. Adjust Parameters of Operators
Every OP in TouchDesigner has a set of Parameters that allow you to affect its output. Normally the Parameter Dialog is open and docked in the upper right corner of a Network. Press the
p key to hide the parameter dialog, and
p again to bring it back.
Selecting any OP will show its parameter dialog. To see it in a floating window, right-click on any node and select Parameters....
Text and numerical values can be entered directly into a parameter with the keyboard. Other parameters have sliders, color pickers or other widgets that allow them to be changed using the mouse.
Selecting multiple OPs with the same parameter lets you change the parameter of several OPs at once.
To set parameters back to their default values, there are three ways: right-click on the node and select Reset all Parameters, or right-click on the parameter dialog's 3-letter icon, or right-click on a single parameter and select Reset Parameter from its menu.
12. Value Ladders help you change Parameter values
Value Ladders allow you to change the value of numerical parameters with a mouse.
Middle-click on a parameter name and hold down the button. The Value Ladder will pop up as a power-of-10 thing labeled .01 .1 1 10 100. With middle-mouse still down, move to one of the powers of 10, then move off to the right/left to increase/decrease the value.
If the parameter has two or more numbers like an X and Y value, when you middle-click on the number, it will change only that single value.
Every component contains a Network, and every network lives in a component.
Nodes with a grey border are Components. When you press Tab, component choices are under COMP. Choose "Field".
To go into a component, pick it and press Enter or the key "i". To get out of a component, press "u" for up. You can also double-click a non-Active component to get in.
A slicker way: Use the mouse's roller wheel to zoom back and then closer to a component. When you mouse-wheel very close to a component, you will go inside it. Roll the opposite way to get out.
14. Get Media into TouchDesigner
- Drag-drop some of your media files from the Windows desktop or Windows Explore into the Network Editor.
- Use the File -> Import File ... dialog, where there are more choices on what operators are created for the file.
- On the desktop or in a folder in Windows, RMB click the file, go Open with..., and choose TouchDesigner. This will start a new TouchDesigner session (a new process).
- Create appropriate operators with the Tab menu and then set their File parameter to your media file.
NOTE: .toe files are "TouchDesigner Environment" files that contain entire projects. They are not imported, they just started by double-clicking the file (or RMB -> Open With... on the desktop).
15. Save your work
Frequently save the state of your work. Under the File menu, choose New Project. Change the text
Learning and press Create. It will show you it created a folder on your desktop called Learning containing Learning.1.toe, a TouchDesigner Environment file.
The next time you want to save, just choose File -> 'Save Project .toe' to increment the file name and save. You can also use Ctrl+S to save.
After you quit TouchDesigner, the next time you re-start, go to the Learning folder and double-click
Learning.toe, which always starts the latest numbered file.
16. Split Panes and fill with other Pane Types
You don't need to know about panes right away, so you can skip this. The TouchDesigner window can be split into 2 or more Panes. Split a pane via the top-right corner of a pane. You can also click the Layout or Bookmark icons at the top of a pane to select a multi-pane layout.
Panes get filled with pane types via a pane's top-left corner menu. The Network Editor pane type is what you have been working in so far. The pane type "Panel" lets you interact with panel components. Pane type Geometry Viewer lets you interact with 3D scenes and objects. RMB -> Viewer on nodes give similar views. See Pane for more.
17. Operator Flags affect their function and appearance
Operator Flags surround a node in the network. The flags on the left are common to all operator families, and the ones at the bottom are specific to a family.
To see the complete set of flags, press
t in the network pane, and
t again to get back. For more details on individual flags, see: Bypass Flag, Display Flag, Lock, Render Flag, Viewer Flag, Viewer Active flag.
18. CHOPs create Channels
A Channel is a sequence of numbers (samples) that represents a motion, an audio signal or a control signal in TouchDesigner. A CHOP may have many channels (Clock CHOP), many samples (Wave CHOP), a single sample (Constant CHOP). See: Channel, CHOP.
19. Export CHOP Channels to Parameters
Exporting causes any operator's parameter to get its value from a CHOP channel.
Click the node that you want to export to (Transform TOP). Left-click the channel in the Math CHOP's viewer and drag it to a parameter in the Parameter Dialog (say, the Transform TOP's Translate parameter). Select 'Export CHOP' from the menu that appears in the parameter window to complete the export.
You can then adjust the range of the motion via the Range page of the Math CHOP parameter dialog (set its To Range to -1 and 1). See Export for more topics like removing an export.
20. Create a simple Component
Press Tab, select COMP, select Container and place it in your network. Go into the Container (roller-wheel, or press Enter). Press Tab, select TOP, select Ramp. RMB on the ramp node's output and select an Out TOP. Press Tab, select CHOP, select In CHOP. Go back outside the component (press
u) and create a Beat CHOP by right-clicking on the component's input. This connects the new Beat CHOP to the input of the component.
Go back into the component and export the In CHOP channel to the Phase parameter of the Ramp TOP. Go back outside the component. On the container's Panel page in the Background TOP parameter, put
./out1. You should see a rising ramp. Now play with the parameters in the Beat CHOP.
21. Component viewers show panels, geometry, viewers of OPs
You can skip this section at first. The viewer area of any component can contain a choice of things: Normally, Panel Components show their internal gadgets, and Object viewers contain views of their 3D objects. But in the component viewer you can put the viewer of any other operator, or the component's parameters, or an interactive view of the component's network. It's all managed with the Node View menu on the Misc page of the component's parameters.
22. Clones are Components kept in sync with a Master Clone
A clone is a copy of a master component, with the additional feature that any time the master is changed (including the wiring and parameters of nodes inside it), all of its clones are changed.
Pick any component, like
container1 created above, put its name (
container1) in the Clone parameter on the Misc page, and copy/paste (Ctrl-C Ctrl-V, or via the network menu) the component twice. Make each clone's inputs different. You will see each clone's outputs are unique.
23. Render a 3D Scene with a Render TOP
Create a Container component and go into it. Press Tab -> TOP -> Render TOP. Press Tab -> COMP and create 1 Geometry, 1 Light and 1 Camera component. The dashed lines mean that parameters of the Render TOP already refer to these components. In the Render TOP's Camera parameter, you see
cam1, which means "get your camera from the node
cam1". This is a "path reference", which is used throughout TouchDesigner to tie nodes together.
Go to the parameters of the
geo1 Geometry node and Rotate the torus in Z (the third field of Rotate). The Render TOP changes. Now click the Viewer Active flag of
geo1 and click/move the torus to tumble it. Note the render stays the same. Press
h in the
geo1 viewer to home (reset the tumble). Now put $F in the first field of the Rotate parameter. F is a variable whose value is the current frame number.
24. Timeline lets you play, pause and examine
The Timeline is located along the bottom of the main TouchDesigner window. It lets you stop, start, scrub and rewind the playback in TouchDesigner. When the timeline reaches the far right, it loops to the beginning of the timeline. Use the spacebar to start and stop the timeline.
Many things in TouchDesigner (like triggers, filters and counters) will not work properly unless you are moving forward in time: feed a Constant CHOP into a Filter CHOP, and change the Constant's value while playing forward, and then while stopped.
Some things follow the timeline, but with TouchDesigner being event-driven, many things don't follow the timeline: A Constant CHOP set to 1 connected to a Speed CHOP increases its count and does not relate to the timeline. A default Movie File In TOP playing any movie in Sequential Play Mode will play regardless of the timeline position, or the Movie File In TOP can be set to "Locked to Timeline" Play Mode and the frame number of the movie and Timeline will stay in sync (allowing scrubbing).
25. Create Animation Curves with the Animation Editor
Create an Animation Component, then RMB menu -> Edit Animation... (or press Edit Animation... in its parameter dialog).
( Click Add Channels button and 3 channels will be created, tx, ty, and tz. Keyframes are the dots on the channels. Click on any keyframe and move it anywhere. To add additional keyframes to any channel, use alt+LMB and click on the location you want the keyframe)
Then watch the Timeline at the bottom and the values of the channel in the CHOP viewer. Note the channel values follow the timeline.
If you want more control of the timing, connect an animated channel to the Animation component's input: Create a Beat CHOP and wire it to Animation COMP's input. Set the Animation COMP's Play Mode to "Use Input Index" and the Input Index Unit parameter menu to "Fraction". Then create a Constant CHOP, wire it to the Animation COMP and move the Constant's chan1 slider. In both cases, the 0-1 value will control which part of the animation curve is output, de-coupling the Animation COMP from the timeline.
26. An Expression is a math function that reduces to a single number
An expression can result in a number or a text string. If an expression is sqrt(16), the expression value is 4. Expressions are used in parameters and scripts. Some expressions are "string expressions", and result in a non-numeric string. See: Tscript Expression, Tscript Command, Parameter
27. Variables are vary-able
A variable is a named string that holds a numeric value or text string in TouchDesigner. Variables are identified in TouchDesigner by a prefix '$'. There are built-in variables like $F (frame number), $T (time) and $PI, and there are user-defined variables. TouchDesigner also picks up Windows' environment variables. If an expression is (($F-1)/2) and the variable $F is 11, the expression value is 5.
28. Bullseye for non-Default Parameters
Click on the bullseye in a parameter dialog to see which parameters are non-default. This is very useful for understanding other people's networks.
29. Hints are on the Status Bar
The Status Bar is located at the top right of TouchDesigner's main window and provides information about recent operations. It may display a message to indicate success/failure of events, or display a hint to tell you how to use a tool. Keep an eye on it. (The
status command can be used to place a line in the status bar.)
30. DATs are powerful text-manipulation operators
DATs are "Data Operators" that allow you to store and manipulate text in your TouchDesigner networks. Text DATs are used to write scripts that can be run when some event occurs. Text DATs can also be used to hold raw text in nodes, like help messages.
Make a button that triggers a sound by doing the Script Example here: DAT.
DATs can also exist as tables that hold rows and columns (cells) of text. When a Table DAT is combined with other DATs like Merge, Select and Evaluate, they form a powerful way to manage data in TouchDesigner. You can try the Table Example here: DAT. See also tab(), tabcell Command, type Command
31. Get Components from the Palette
Components fro the Palette Browser contain pre-made networks and some have a custom control panel. You can also store Components you create in the Palette for easy access and reuse them elsewhere your projects. Component palettes save you the work of making your own tools from scratch.
Click Dialogs -> Palette Browser to display a browser of pre-made components. Click on a component and drag it to the network. Components on disk are .tox files.
32. Get Components from the .tox Forum
Press [ EXAMPLES ] on the TouchDesigner menu bar to go to the .tox Component forum at www.derivative.ca/forum. You can click a .tox on the forum web page to start it in a new TouchDesigner session. You can also download the .tox file to your computer and then drag-drop it into TouchDesigner. Double-clicking any .tox starts it in a new TouchDesigner process as well.
/uig (uig.tox) is one home-made component on the forum and palette, but once it's loaded into TouchDesigner, contains a library of 40 pre-made customizable gadgets that can be drag-dropped into your networks and used to make control panels.
33. Custom User Interfaces are built with with Panel Components
Looking at .tox examples in the forum and Palette is most useful, and Building Control Panels is an introductory tutorial on the basics of panel building.
34. TouchDesigner crashes or hangs - what to do
Some day, TouchDesigner will crash or hang. If it crashes, it may prompt you to save the CrashAutoSave.toe file, which you can restart right away to get back to your work before the crash. The crash may ask you if you want a .dmp file, accept it and send the file to us. Don't bother sending the Microsoft crash files.
If TouchDesigner is full-screen with no borders, first try to press Esc with the cursor over the window. It may eliminate or shrink the window and allow you to save or restart. If you can get up the Task Manager, you can kill any TouchDesigner process there is in the Process section. If the Ctrl-Alt-Del key combination (or Ctrl-Shift-Esc ) doesn't give you the Task Manager or if nothing is killable, then you may need to reboot.
Now you know the basics. Take a break. Later you can go to More Things to Know about TouchDesigner