How TouchDesigner works
About this app
A network of operators with live previews renders real-time graphics: noise, audio-reactive rings, feedback spirals and thousands of instances. Move the view to an intermediate node or cut a wire and see how TouchDesigner only cooks what is requested. Six families, converters, references and cost per frame.
What it is about
TouchDesigner is a node-based development environment by Derivative for real-time graphics, interactive installations, projection work and live visuals. A project is a network of operators in six families: TOPs for images and textures, CHOPs for channels such as audio or sensor data, SOPs for geometry, DATs for text, tables and Python, MATs for materials and COMPs for containers and 3D objects. Evaluation is pull-based: each frame the output requests its inputs, and an operator only cooks when it is requested and something has changed or it depends on time.
What the app shows
Five example networks render real-time graphics: a basic TOP chain, audio-reactive rings, a feedback loop with spirals, instancing with thousands of copies and a data-driven network. Every node has a live preview, and converters and references link the families. The cook panel shows frame by frame which operators cook, which serve from cache and which stay idle, with modelled costs against a budget of about 16.7 ms at 60 fps. The app is an independent teaching illustration, not part of TouchDesigner.
Try it yourself
Select a node and change its parameters. Double-tap an intermediate node to make it the display: everything downstream is no longer requested and goes dark. Cut a wire or bypass an operator and watch the cook panel as the cost per frame shifts. In the feedback network, try breaking the loop once to see what it was doing.
Frequently asked questions
- What is TouchDesigner?
- TouchDesigner is a node-based development environment by Derivative for real-time graphics, interactive installations, projection work and live visuals. A project is built as a network of operators that pass data along wires, each showing a live preview. Logic and control can be added with Python expressions and scripts.
- What do TOP, CHOP, SOP, DAT, MAT and COMP stand for in TouchDesigner?
- They are the six operator families: TOPs process images and textures on the GPU, CHOPs handle channels such as audio, sensor data or animation curves, SOPs handle geometry and DATs hold text, tables and Python. MATs are materials and shaders, COMPs are containers and 3D objects such as Geometry, Camera and Light. Wires only connect operators of the same family; converters such as CHOP to TOP or parameter references move data between families.
- What does “cooking” mean in TouchDesigner?
- Cooking means an operator recomputes its result. Each frame the output requests its operator, which requests its inputs and referenced operators, all the way back to the source. An operator only cooks if it is requested and an input or parameter has changed or it is time-dependent; otherwise it returns its cached result.
- What can I try out in this app?
- You pick one of five example networks and watch the output render in real time. You can change parameters, set the display to an intermediate node, cut wires or bypass operators, and the cook panel shows the modelled cost per frame. The app is an independent teaching illustration, not part of TouchDesigner.
Subject: Film & media
More from Film & media
A VisuApp by heyprof: interactive, free in your browser, no sign-up. What is a VisuApp? · All apps