Difference between revisions of "First Things to Know about TouchDesigner"
|Line 316:||Line 316:|
* [[CHOP#Sweet 16 CHOPs|Sweet Sixteen CHOPs]]
* [[CHOP#Sweet 16 CHOPs|Sweet Sixteen CHOPs]]
* [[TOP#Sweet 16 TOPs|Sweet Sixteen TOPs]]
* [[TOP#Sweet 16 TOPs|Sweet Sixteen TOPs]]
* [[#Sweet 16 SOPs|Sweet Sixteen SOPs]]
* [[DAT#Sweet 16 DATs|Sweet Sixteen DATs]]
* [[DAT#Sweet 16 DATs|Sweet Sixteen DATs]]
Latest revision as of 13:32, 8 March 2018
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.
This page is the transcript for the two beginner videos:
First Things to Know Part 1 - Section 1-17
First Things to Know Part 2 - Section 18-33
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.
- 1 1. Starting TouchDesigner
- 2 2. Pan, zoom and center the Network
- 3 3. Select and move Nodes
- 4 4. TouchDesigner Operators are Generators or Filters
- 5 5. In the Network Editor, add an Operator
- 6 6. Six Families of Operators act on images, motion, 3D and text
- 7 7. Connect Nodes together with Wires
- 8 8. Wires, Data Flow and Cooking
- 9 9. Current Node and Selected Nodes
- 10 10. Make a Viewer Active to Inspect Operator Data
- 11 11. Adjust Parameters of Operators
- 12 12. Value Ladders help you change Parameter values
- 13 13. Navigate into Component Operators that contain Networks
- 14 14. Save your work
- 15 15. Get Media into TouchDesigner
- 16 16. Split Panes and fill with other Pane Types
- 17 17. Operator Flags affect their function and appearance
- 18 18. Parameters and the three "Parameter Modes"
- 19 19. CHOPs output Channels of Samples
- 20 20. Export CHOP Channels to Parameters
- 21 21. Put a Python Expression in a Parameter
- 22 22. Create a Component with an Input, Output and a Network of Operators
- 23 23. A Path is an address of a Node
- 24 24. Render a 3D Scene with a Render TOP
- 25 25. Timeline lets you Play, Pause and Examine
- 26 26. Create Animation Curves with the Animation Editor
- 27 27. DATs are Powerful Text-manipulation Operators
- 28 28. Sweet Sixteen Operators
- 29 29. Explore the Operator Snippets
- 30 30. Get Components from the Palette
- 31 31. Get Components from the .tox Forum
- 32 32. Speeding it Up with the Performance Monitor
- 33 33. Quick Tips and Good Habits
- 34 More...
1. Starting TouchDesigner
To use TouchDesigner, you will need a 3-button mouse with a roller wheel, or the equivalent.
Start by double-clicking the TouchDesigner icon on the desktop (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. Close the palette by clicking the x at its upper right corner.
To pan the network, click and drag the left mouse button (LMB) on an empty area of the network.
To zoom the network, click and hold down the middle mouse button (MMB) and drag it left-and-right. NOTE: If you don't have a middle mouse button, press Alt+Right-click.
Press the "h" key to center it (this is also called homing). To home just the highlighted node, press Shift-h.
In an empty area of the network right-click (RMB) and release the mouse - you will see the network menu. Choose 'Home All'.
3. Select and move Nodes
Left-click on a node and drag it to a new location.
To box-select several nodes, click and hold down the right mouse button in an empty area and drag the mouse over the nodes.
Left-click on any selected node and drag it - the selected nodes move together.
Left-click on the background to un-select the nodes except for the current node in green.
Right-click on one of the nodes - you will see the node menu. Choose 'View' to bring up a floating window. Resize it by clicking-and-dragging the edges. Now you can close the viewer window by clicking it in the corner.
4. TouchDesigner Operators are Generators or Filters
To delete all the nodes, press Control-a, then press Delete.
Double-click on the empty network. The OP Create Dialog appears, where OP means "operator" or "node". Click on Movie File In, then click anywhere on the network to place it.
You can also press Tab. To cancel, click the background.
On the right side of the first node, right-click on its blue output connector, from OP Create click 'Level' and then click to the right to create
level1, which will be connected to
moviefilein1. You have just added an image "filter" (
level1) that modifies the levels of an image "generator" (
On the top-right dialog, move the sliders labeled Black Level and Brightness. These are typical "parameters" in TouchDesigner.
5. In the Network Editor, add an Operator
Once again, double-click on the background. The OP Create Dialog has six headings of what we call Operator Families. Click on 'CHOP' for 'Channel Operators'. Also you can press Tab several times to cycle back to CHOPs.
Darker-colored OPs are generators. Generators create new data or read data from external devices and programs. Lighter colored OPs are filters. Filters modify the data of an incoming operator.
Click on the CHOP type "Pattern" and place it in the network.
Bring up OP Create again. You can find a specific operator by typing its name. Type "noi", click on Noise, and create a Noise CHOP.
6. Six Families of Operators act on images, motion, 3D and text
Press the Tab key to bring up OP Create. At the top right, make sure it is set to "All" versus "Basic" to see all the operators.
Press the Tab key and select COMP. There are three categories of components. From 3D Objects choose a Geometry COMP which prepares SOPs and a Material for 3D rendering.
Press the Tab key again. From the Panels list, choose a Slider COMP, which one of the 2D gadgets for building control panels.
If you want, you can go back to Basic while you are first learning TouchDesigner.
7. Connect Nodes together with Wires
Node inputs are found on their left side, and outputs are on their right. Press Tab and create a TOP called Monochrome, and place it to the right of
Connect the output of
level1 to the input of
mono1 in one of two ways: Click-and-drag-release. Or click-release, move, click-release.
Click and drag the Monochrome TOP to the right to create some space between.
To insert a new node between the two already-connected nodes, right-click the output of the
level1 node and select a Tile TOP and place it. Another way is to right-click on the wire, and select Insert Operator from the menu.
To create a new branch from a node, middle-click on the output of
level1 and select Edge from the Operator menu and place it above.
The connecting lines between nodes are called Wires. Remove a wire by clicking on the input of a connected node,
edge1, and then clicking on empty space in the network. Reconnect
edge1 by clicking on
edge1's input and then
Another way is to right-click on a wire and select Disconnect from the menu. Reconnect
8. Wires, Data Flow and Cooking
You can think of data flowing along these wires, in this case, images. Now watch the wires animate. Click on
level1, go to its Parameter Dialog on the right, and operate the Brightness slider. When the wires are animating it means that data is flowing: a node upstream is cooking and sending its output to the next node.
Middle-click on the tile1 to see how many times it has cooked, and then middle-click on
moviefilein1 and see it has only had to cook once.
The 3D components like Geometrys, Cameras and Lights have connectors and lines on their bottoms and tops which connects them as parent-child in a 3D hierarchy, but no data flows along them.
The 2D components like Sliders, Buttons and Containers also have connectors and lines on their bottoms and tops, which is one way to group them in a panel. Again, no data flows along them, data only flows through the wires on the sides.
9. Current Node and Selected Nodes
Click on one of the nodes to make it "current". This gives it a green border.
Yellow borders around nodes mean they are "selected". |right-click (RMB) on the network and box-pick some other nodes to select them. Shift-click, or Shift-box-pick to add more to the set of selected nodes.
You can act on selected nodes together. Right-click on the network background and select Delete to remove the nodes, then press Ctrl+z to undo (Command+z on macOS). You can also undo via the Edit menu.
To un-select all, click on the background, leaving only the current node.
10. Make a Viewer Active to Inspect Operator Data
Up to now, when you left-click on a node, you move it or make it current. You can only see the data in the viewer. Middle-click shows the common info box, and right-click shows the node menu.
NOTE: If you don't have a middle mouse button, press Alt+Right-click.
Clicking the "Viewer Active" flag at the bottom right of the
level1 TOP removes its border and allows you inspect more closely the contents of the operator's data, or in the case of panels, let you operate the panel. Middle-click and move left-right to zoom the image, and right-click to set a menu of viewing options.
There are three more ways to make the viewer interactive:
- Alt+a key puts all node viewers temporarily in the Viewer Active state.
- Shift+a toggles a global state called "Viewers Always Active", making all viewers in all networks Active. Viewers Always Active is also on the right-click network menu.
- The shortcut key "
a" will set/unset the Viewer Active flag of all selected nodes.
Even when a node has Viewer Active on, you can still access it's common menus. On the name bar at the bottom, middle click to get the node info, and right click to get the common node menu.
11. Adjust Parameters of Operators
Let's adjust parameters. Pick the
noise1 CHOP. Every Operator 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 lower-case
p key to hide the parameter dialog, and
p again to bring it back.
To also see
sphere1's parameters in a floating window, right-click on
sphere1 and select Parameters....
Selecting multiple OPs with the same parameter lets you change the parameter of several OPs at once. Move
noise1 to the left, Click
pattern1, and press Ctrl+c and Ctrl+v to create
pattern2 (Command+c and Command+v on macOS). Change the Type menu of
pattern2 parameter to Ramp. Now select both
pattern2. Increase the parameter Number of Cycles. When you release you see that both OPs' Cycles parameter are set to the same value.
To set parameters back to their default values, there are three ways: right-click on
pattern1 and select Reset all Parameters, or right-click -> Reset on its parameter dialog's "i" icon.
To reset just one parameter, right-click on the Type parameter of
pattern2 and select Reset Parameter from the menu.
12. Value Ladders help you change Parameter values
Now let's adjust parameters with a value ladder. Pick the
noise1 CHOP and zoom in to its viewer with your mouse wheel.
On the Parameter Dialog, left-click on the Period parameter's name or value, holding down the button and waiting a moment. The Value Ladder will pop up a number of increments labeled .001 .01 .1 1 10. With the left-mouse still down, move vertically to one of the increments, then move off to the right/left to increase/decrease the parameter value.
Click on the parameter dialog's Transform page. If the parameter has two or more numbers like the Translate parameter, when you left-click on the number (click the third number), it will change only that single value. However if you click on the name and operate the ladder, you modify all values of the parameter.
And here's a speed-tip: You can bring up the value ladder faster if you middle-click on a parameter name or value.
Let's navigate in and out of components to other networks. Nodes with a grey border are Components. In our network,
slider1 are components.
Every component contains a Network, and every network lives in a component.
To go into
slider1, select it and press Enter or the key "i". To get out of a component, press "u" for up. You can also double-click a component to get in, as long as its Viewer Active is off.
A slicker way is to use the mouse's roller wheel to zoom close to a component. When you mouse-wheel very close to
slider1, you will go inside it. Roll the opposite way to get out.
14. Save your work
Frequently save the state of your work. Under the File menu, choose Create New Project. Change the Project Folder to
Learning, turn on Rename File so that it creates Learning.toe and press Create. It will show you it created a folder on your desktop called Learning containing two identical files Learning.1.toe and Learning.toe, both TouchDesigner Environment files.
The next time you want to save, just choose File -> 'Save' to increment the file name and save. You can also use Ctrl+s to save (Command+s on macOS).
After you quit TouchDesigner, the next time you re-start, you can go to the Learning folder and double-click
Learning.toe, which always starts the latest numbered file.
15. Get Media into TouchDesigner
Let's create an empty Component. Press Tab, in COMP select Base, and place it. Roller-wheel into base1.
On the top menu bar, under the Dialogs menu, select the first item (Explore on Windows).
Go to some media folder and Drag-drop some of your media files from the file browser into the Network Editor.
You can also get files from the desktop and drop them in.
Another way is to create appropriate operators with the Tab menu and then set their File parameter to your media file. Look for operators with File In in their names.
There is also the File -> Import File ... dialog, where you can see more choices on what files are supported.
On the desktop or in a folder in Windows, right-click any of these file, and select Open with..., and choose TouchDesigner. This will start a new TouchDesigner session (a new process) with that file as a node.
NOTE: .toe files are "TouchDesigner Environment" files that contain entire projects. They are not imported, they just started by double-clicking the file (or right-click -> Open With... on the Desktop).
16. Split Panes and fill with other Pane Types
Sometimes you want to be in two places at once. The TouchDesigner window can be split into 2 or more Panes. Split a pane via the pull-down menu at the top-right corner of a pane, selecting Split Left-Right.
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. right-click -> Viewer on nodes give similar views in floating windows.
Adjust its size with the dividing bar, and close the pane. You can also click the Layout or Bookmark icons at the top of a pane to select a multi-pane layout. 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, roll over the headings to see the flag types, and then press
t again to get back. For more details on individual flags, see: Bypass Flag, Display Flag, Lock, Render Flag, Viewer Flag, Viewer Active flag.
END OF PART 1
START OF PART 2
18. Parameters and the three "Parameter Modes"
Operators do all the work of processing and outputting data in TouchDesigner. The output of each operator is affected by: its inputs, its parameters, and in some cases the current time. So let's look at the characteristics of parameters. The most common types of parameters are: (1) integers, (2) floating point numbers (numbers with decimal places), (3) on-off "toggles", (4) menus, (5) text strings, and more ((6) the path to another node, (7) pulses that tell the operator to do something just once)).
Each parameter can have one, two, three or four values. Create a Circle TOP. For example, when a parameter is a color, it has 3 or 4 values: red, green, blue and sometimes alpha.
So each parameter can be in one of three "Parameter Modes", which means each parameter can be controlled in three ways. First is the simplest - "Constant" - On the parameter dialog you just click on a slider, type in a number, pick something by hand from a menu - it sets its "constant" value. The other two "parameter modes" are super-powerful: "Expression Mode" where you can put python expressions (indicated in green), and thirdly "Export Mode", where the parameter is driven by numbers coming from CHOPs. You can switch between all three. First let's look at exporting. For that we need to know more about CHOPs, channels and samples.
19. CHOPs output Channels of Samples
CHOPs output numbers. A Channel Operator creates a set of 1 or more channels, and each Channel is a set of numbers (Sample). Let's create a Constant CHOP and move its slider. It has 1 channel and 1 sample, as you can see if you middle-click on the node and see 1i, where i means sample or index. Click under
chan1 and type
chan2. It is now outputting 2 channels.
Now create a Noise CHOP. This is one Channel with multiple samples. To prove this, zoom in to the node a bit, turn on Viewer Active, right-click on the graph and select Dot per Sample. Now middle-click and drag the mouse right to reveal a dot for every sample. (Be aware that mouse clicks on the node do different things depending on whether the viewer is active or not.)
Press 'h' over the Noise CHOP's graph to home the channel. On the parameter dialog, click the Channel page and change the Channel Names parameter to
chan[1-3]. There are now 3 channels, each with 600 samples. To verify this, middle-click on the bottom strip of the node where then name
noise1 is located, look at the pop-up info and see 600i meaning 600 samples or indexes.
To see CHOPs as numbers, bring up OP Create, click on DAT, and create a "CHOP to" DAT. Then turn on the parameter called "Include Names". Now connect the Noise CHOP to the CHOP to DAT by dragging a node to the CHOP to DAT and to the parameter called "CHOP". Look at the table in the viewer, where each cell is a sample. Now try the Constant CHOP You can drag Constant onto CHOP to.
20. Export CHOP Channels to Parameters
Export sends a value from a CHOP channel to an operator's parameter.
(Click the Transform TOP so you can export to it.) 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 X parameter). Select 'Export CHOP' from the menu that appears to complete the export. Note the parameter goes green, indicating the parameter is in Export mode.
Select the Math CHOP again (box-pick it or click the name-bar at bottom), and then adjust the motion range by selecting the Mult-Add page and adjusting the Multiply parameter.
You can turn off the export by clicking the green dot at the bottom of the CHOP, and the Transform TOP's Translate goes back to its constant mode. Turn on the export again. (See Export for more techniques).
21. Put a Python Expression in a Parameter
Let's look at python expressions in parameters. Expressions are used in parameters and scripts. The preferred language is Python, though you will see Tscript in older work.
Create a new Pattern CHOP and call it
sine1. In the Length parameter, type the expression
200*3. The value now shows as
600 = the expression has been evaluated to
600, and it is now blue to indicate that it is currently in Expression Mode. To reveal more, put your cursor over the parameter name "Length", a + appears, and click anywhere in that area. A new row appears showing the python name of the parameter ('length'), boxes for the three parameter modes, and the optional python expression.
Click the grey box to the left of the blue box. This puts it back into Constant Mode, where the value is at its default value of 1000. This is useful for trying out different values before committing to it. Click the Expression Mode box again.
The third parameter mode is Export Mode, so if you go back to the Transform TOP that holds the export, and click on Translate, you will see
tx is in Export Mode (green) and you can see where the channel comes from. Here you can switch between Constant, Expression and Export Modes.
sine1, in the parameter called Number of Cycles type the expression
me.digits+2. It evaluates to
3 which is the digits in the operator's name plus 2. Select just the text
me.digits and put your cursor over the expression. It will pop up with
1, the value of that part of the expression.
To enlarge the Parameter dialog to get more space: Put your cursor over the left edge of the parameter dialog and get the left-right arrow cursor, click and drag it to the left.
If you press Alt-E with the cursor in a parameter it brings up the current parameter’s expression in the text editor, making it easier to see and edit long expressions.
22. Create a Component with an Input, Output and a Network of Operators
Components is the operator family that holds inside them networks of operators. Let's create a Component with an input and output operator. Press Tab, select COMP, select Container and place it in your network. Go into the Container (roller-wheel forward, or press Enter). Verify your path location in the top of the pane.
Press Tab, select TOP, select Ramp and place it. Right-click on the ramp node's output and select an Out TOP. Press Tab, select CHOP, select the In CHOP. Go back outside the component (press
u or roller-wheel backward) 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. right-click on the output of the container and add a Null TOP. You have now created a custom component with a CHOP input and a TOP output.
(Go back out of this component.)
23. A Path is an address of a Node
A Path is like an address of a node or operator - it describes where a node is located in your TouchDesigner project. Create a Select CHOP and type in the Operator parameter
/project1/pattern1. Many operators have a path parameter that refers to another operator.
Nodes are all in a tree-like hierarchy of components inside components, starting at root, which is named
/. Click the "home" icon to go to root. Click the '
/' and select
project1 to go back to your working network. Look at the Select CHOP:
/ at the start of a path means it's an absolute path.
/project1/pattern1 is an absolute path, where in root (
/) there is a component
project1, and in
/project1 is a node
Here are other forms of a path:
Create a Select TOP and put in its TOP parameter
transform1 is a relative path: when you see an operator name without a prefix, this will be in the current network.
Create an Info CHOP and put in its Operator parameter
container1/out1. This is also a relative path -
container1 is a component in the current network, and
out1 is a node in
container1 component has
./out1 for the background image.
./ means "inside this component", so the path means "inside this component is a node called
container1 and create a Select DAT and put in its first parameter
../ means the parent network, so the path means, in the parent of the current component there is a node called
In python expressions you will often see
parent(), which also refers to the parent node. To locate further up the hierarchy,
../../ is the parent's parent.
24. Render a 3D Scene with a Render TOP
Now let's render something in 3D with the Render TOP. Create a Container component and go into it. Create a Render TOP. Next create three components: a Geometry, a Light and a Camera. 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
* for Geometry means get all Geometry components in this network.
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. The tumbling in the Geometry component viewer is for inspection only. Press
h in the
geo1 viewer to home (reset the tumble).
That is your basic render setup. Now put
absTime.frame in the first field of the Rotate parameter.
absTime.frame is python for the "absolute frame number", which is a number that continues to rise until you quit TouchDesigner.
25. Timeline lets you Play, Pause and Examine
The Timeline is located along the bottom of the main TouchDesigner window. The FPS at the bottom left is the number of frames TouchDesigner will step forward every second. Note that the FPS at the top is the actual number of frames TouchDesigner actually drew in the last second.
The timeline lets you stop (||), start(>) and step (+) the timeline in TouchDesigner.
Shift-spacebar will always stop and start the timeline. (Hold down Shift and press the spacebar.) Every time it steps to another frame, it redraws the screen.
You will see when the timeline reaches the far right, it loops to the beginning of the timeline. But TouchDesigner is mostly event-driven with a free-running clock, so most things you build don't follow the looping timeline and its frame number: For example, create a Constant CHOP, set it to 1 and connect it to a Speed CHOP. It increases its count continuously and does not relate to the timeline. The Speed CHOP restarts when you press its Reset parameter.
Create a Movie File In TOP and on the File parameter select + and select
Count.mov. Movie File In TOP plays in its default Sequential Play Mode continuously regardless of the timeline position.
However if you set its Play Mode menu parameter to "Locked to Timeline", the frame number of the movie and Timeline will stay in sync where the first frame of the movie will be seen at frame 1 always, and you can scrub.
26. Create Animation Curves with the Animation Editor
Create an Animation Component. By default it outputs a CHOP with no channels. Now right-click on the node and select Edit Animation... (or press Edit Animation... in its parameter dialog).
Click Add Channels button and 3 channels will be created,
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. Use the right-mouse-button to box-select. Box-select the curve (not the keyframe dot), and change the Function menu from
linear() to change interpolation type.
Then watch the Timeline at the bottom and the values of the channel in the Animation component 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 first input 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. You can always change Play Mode to Output Full Range to output the full-length channels.
Another way to create an animation component pre-wired is to right-click on a parameter and select Keyframe Parameter in...
27. 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.
Create a Web DAT and assuming you are on the Internet, press the Fetch parameter. This retrieves HTML, but DATs hold any ASCII text, like Glsl Shaders and scripts.
Now create a Monitors DAT which a table of rows and columns of cells, each containing text. Attached to the Monitors DAT Is another DAT containing some Python code that runs when you monitor configuration changes.
This is a bit of a flavor of DATs.
28. Sweet Sixteen Operators
There are a lot of OP types in TouchDesigner, but the most common and useful operators in each family are the Sweet Sixteens. You may want to try some of them out. This includes:
29. Explore the Operator Snippets
One way to learn more about operators is to see them in small examples. Select the menu Help -> Operator Snippets. This will start another TouchDesigner window that contains hundreds of examples using operators from each family. This is a rich resource of tips.
30. Get Components from the Palette
Components from 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.
To display a browser of pre-made Components, toggle off/on the Palette icon. Alternately, click Dialogs -> Palette Browser. Click on a component and drag it to the network. Components on disk are
Watch the video A Movie Player Panel and Building UIs, a tutorial on the basics of panel building.
UI/gal contains a library of 20 pre-made customizable gadgets that can be copy/pasted into your networks and used to make control panels.
31. 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.
32. Speeding it Up with the Performance Monitor
Dialogs -> Performance Monitor will let you see, in one frame, what nodes cook, in what order, and how long they took. Nw be aware, Performance Monitor only shows what cooks on the CPU, not the GPU. But a long bar at the bottom usually means the GPU is still busy finishing rendering a frame and displaying the UI.
middle-click on any node to see if the node is cooking every frame or not, and how long it took the most recent time it cooked.
There is also the Perform CHOP, and you can create Info CHOP and drag any node onto it to see more detail on what happened.
And there is in the palette: Palette -> Tools -> probe, and a wiki page on it: Palette:Probe.
33. Quick Tips and Good Habits
- Click on the bulls-eye circles in a parameter dialog to see which parameters are non-default. This is very useful for understanding other people's networks.
- Color Code Nodes - With your cursor over the network, press "c" to bring up the color swatch. Select some nodes. Click any color in the color swatch. This only affects the node's appearance in the network.
- network overview - With your cursor over the network, press "o" to bring up the a miniature node map at the bottom left of the network. You can click on it to pan the network.
- Ctrl+f (Command+f on macOS) will bring up a Find bar that will let you type node names that you may be looking for. Names that match what you type are highlighted and centered.
- To look at nodes another way, with your cursor over the network, press "t" in the network and it will switch to "table" mode where you see all the nodes in a list. You can pick one via the left column, press "t" again, and to go back to the network and see that node highlighted in the network.
- When you don't have a mouse, zoom and scroll the network editor by pressing the keyboard shortcuts Ctrl+=, Ctrl+-, Ctrl+up, Ctrl+down, Ctrl+left, Ctrl+right (all with Command+ on macOS).
- In OP Create, you can create nodes-in-a-row faster by using Shift-click, and create nodes in a branch using Alt-click on the OP Create menu.
- Node names are case-sensitive, so
leve1is different from
- The idea of "Absolute Time" is a clock that counts up forever and doesn't loop to 0 like the timeline. This gives smooth always-changing values:
- Use Null operators when referencing or exporting - you can then insert additional operators before the Null to modify your network without having to change your reference or export location
- 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 python code
ui.status = 'My message'can be used to place a line in the status bar.)
- use the Info DAT or Info CHOP on a node to see some of its internal states and possibly troubleshoot.
- It is common practice to use Shift-Spacebar to stop, but in Designer Mode, you can use Spacebar.
- You can turn on/off auto-homing in SOP viewers and Geometry viewers. In Preferences -> Geometry turn the options on and then Accept, which makes sure you always see your 3D geometry in-view.
- replace an existing wire by clicking on the output of the new source and clicking on the wire you want to replace.
Now you know the basics. Take a break. Later you can go to More Things to Know about TouchDesigner
Every component contains a network of operators that create and modify data. The operators are connected by wires that define where data is routed after the operator cooks its inputs and generates an output.
A pane type where networks of operators can be created and edited.
Any of the procedural data operators. OPs do all the work in TouchDesigner. They "cook" and output data to other OPs, which ultimately result in new images, data and audio being generated. See Node.
An Operator Family that reads, creates and modifies 3D polygons, curves, NURBS surfaces, spheres, meatballs and other 3D surface data.
An Operator Family that creates, composites and modifies images, and reads/writes images and movies to/from files and the network. TOPs run on the graphics card's GPU.
A state of a node where you can operate the contents of its viewer, like operate the gadgets of a panel in a node viewer, or 3D data in the viewer of a Geometry component. With Viewer Active off you can select, move and delete nodes by clicking/dragging on them, even if the viewer is visible.
The operating system's holder of files and other folders (directories). It does not refer to operators within TouchDesigner. See Network Path.
TOuch Environment file, the file type used by TouchDesigner to save your project.
A custom interactive control panel built within TouchDesigner. Panels are created using Panel Components whose look is created entirely with TOPs.
(1) The TouchDesigner window is made of a menu bar at the top, a Timeline at the bottom, plus one of a choice of Layouts in the middle. A Layout is made on one or more Panes, each Pane can contain a Network Editor, Viewer, Panel, etc. See Pane and Bookmark. (2) Nodes in a network are arranged using Layout commands in the RMB menu.
A text string that contains data (string, float, list, boolean, etc.) and operators (+ * < etc) that are evaluated by the node's language (python or Tscript) and returns a string, float list or boolean, etc. Expressions are used in parameters, DATs and in scripts.
Exporting is the connection of CHOP channels to parameters of operators. The output of each exporting CHOP is one or more channels, active only while the CHOP Viewer is on. The current value of a channel can be exported to a parameter of any operator, overriding that parameter's value. See Parameter.
Parameters in TouchDesigner are an operator's settings (numbers, menus, flags, strings, paths) which the user can alter. Parameters for any operator can be opened by right-clicking on the operator and selecting "Parameters..." A currently selected operator's parameters can be viewed in a Network Editor by pressing the keyboard shortcut 'p'.
The panel at the bottom of TouchDesigner, it controls the current Time of the full system or just one component.
The frame rate that TouchDesigner's Timeline uses. Equal to the Frames per Second value
A frame within the Animation component which holds a channel value, slope, acceleration and interpolation type, used to determine the values of the channel which are not keyframes.
OP Snippets is a set of numerous examples of TouchDesigner operators, which you access via the Help menu. These can be copied/pasted into your projects.
A built-in panel in TouchDesigner that contains a library of components and media that can be dragged-dropped into a TouchDesigner network.
The tool built-in to TouchDesigner that analyzes and displays what TouchDesigner is doing as it generates an image.
The Graphics Processing Unit. This is the high-speed, many-core processor of the graphics card/chip that takes geometry, images and data from the CPU and creates images and processed data.
The line of text at the top of the TouchDesigner window which displays messages from TouchDesigner when certain events succeed or fail.