💡 Idiot Mode: OFF
Complete Beginner Guide — Every Click Explained

TouchDesigner
from zero.

Two real projects. Every step expanded. A secret "Idiot Mode" toggle (top right ↗) that adds even more explanation when you get lost.

Project 01 — Noise Visual Project 02 — Webcam → Audio FX 💡 Idiot Mode Toggle Expandable Steps
// 00 — Before Anything Else

Understanding the Interface

Open TouchDesigner. Before touching anything, let's name every part of the screen. You can't follow instructions if you don't know what they're pointing at.

💡 Idiot Mode — What is TouchDesigner? TouchDesigner is free software for making interactive visuals, sound-reactive art, and live performances. You download it from derivative.ca/download. When it opens, you see a dark screen with a grid — that's your workspace. Everything you'll ever make lives in that grid. Think of it like a very unusual drawing app, except instead of drawing shapes you connect boxes together, and data flows between the boxes like water through pipes.
TouchDesigner — Annotated Interface Overview
FileEditViewDialogsHelp ● Non-Commercial
① NETWORK EDITOR — your canvas (the big grid)
CHOP
slider1
CHOP
math1
TOP
noise1
COMP
window1
② PARAMETER PANEL — selected node settings
Type
Sparse
Period
1.0
Translate X
op('math1')[0]*5
Amplitude
1.0
Monochrome
On
60 FPSGPU: 12%RAM: 340MB ③ STATUS BAR — performance info
①

Network Editor

The big dark grid. This is where you build everything. Double-click to add nodes. Middle-mouse-drag to pan. Scroll to zoom in/out.

②

Parameter Panel

The panel on the right side. Shows the settings for whatever node you've clicked. All configuration happens here. Press P to show/hide it.

③

Status Bar

Bottom strip showing FPS and GPU/RAM usage. You want FPS to stay at 60. If it drops to 10-20 your patch is too heavy for your computer.

💡 Idiot Mode — What are nodes? A "node" is just a box on the screen. Each box does one specific job — like "generate a noise texture" or "read the webcam" or "play audio". Nodes have coloured tops: blue = image/video, green = numbers/audio channels, orange = containers/windows, pink = text/data. You connect nodes by dragging a wire from the right side of one box to the left side of another. The data flows through the wire from left to right, like water in a pipe. That's literally all it is.
The One Rule Data always flows left → right through wires. A node on the left feeds data into a node on the right. You'll never need to break this rule.
// 00-B — Essential Skills

Five Skills You Need Before Building

Master these five interactions and you can build anything. Click each to expand the full how-to.

A
Adding a Node
How to create any operator from the OP Create Dialog
+
1
Click inside the Network Editor to focus it
The Network Editor is the large dark grid. Click anywhere on it once so it's the active panel. You'll see a subtle highlight on the border.
💡 Why click first?TouchDesigner has multiple panels and keyboard shortcuts only work in the panel that's "active" (focused). If you press a key and nothing happens, it's usually because you forgot to click the panel first to focus it.
2
Double-click on empty space in the network
Double-click on the empty dark grid area
A popup search dialog appears — this is the OP Create Dialog. "OP" = Operator, which is just the technical name for a node. You can also press Tab to open it.
💡 Nothing happened?Make sure you actually double-clicked (two fast clicks) on the empty grid, not on an existing node. If the grid is zoomed very far out you might accidentally be clicking on a node you can't see. Try scrolling to zoom in, or press H to reset the view to home.
3
Type the node name and press Enter
Type: noise  → press Enter
As you type, the list filters in real time. When you see the node you want, press Enter or click it once. The node appears right where you double-clicked.
✓ What you should seeA coloured box appears on the canvas with a small preview thumbnail in its lower half.
B
Connecting Two Nodes (Wiring)
How to run data from one node into another
+
1
Hover your mouse over the right edge of the source node
Hover over the right side of a node until you see a small dot/circle
Every node has output ports on its right edge. When you hover near the edge a small circle appears — that's the port.
💡 Can't find the port?Zoom in on the node first (scroll wheel to zoom). The ports are very small dots. For a node you just placed, hover your mouse slowly from the centre of the node toward its right edge. The dot appears when your cursor is right at the edge. If you accidentally move too far right you'll be outside the node — try again slowly.
2
Click and drag from that output port
Hold left mouse button on the output dot and start dragging. A line will appear following your cursor. If you've done it correctly, the wire comes out from the right side of the source node.
3
Drop the wire onto the destination node
Release mouse over the left edge or centre of the destination node
The wire snaps to the input port. The destination node immediately updates its preview.
💡 Wire disappeared / not connecting?You have to release the mouse while hovering over the destination node itself. If you release on empty grid space the wire cancels. Try again: click-hold on the source's right edge → drag slowly → hover over the middle of the destination node → release. You'll feel a "snap" as it connects.
✓ What you should seeA solid line connects the two nodes. The right node's thumbnail preview updates to show it's now receiving data from the left node.
C
Editing Parameters
How to change any setting on any node
+
1
Single-click the node you want to configure
Single-click any node
The node gets a selection border. The Parameter Panel on the right side of the screen instantly updates to show that node's settings.
💡 Don't see the Parameter Panel?Press P on your keyboard while the network editor is focused. That toggles the parameter panel on and off. It should appear as a tall panel on the right side of your screen. If the screen is very narrow it might be hiding — try making the TouchDesigner window wider.
2
Find the parameter you want to change — check the tabs
Parameters are grouped into tabs at the top of the panel (e.g. "Transform", "Common", "Info"). Click each tab to see its group. Parameters appear as rows: label on the left, value field on the right.
3
Click the value field and type a new number, then press Enter
Click the number/field on the right side of a parameter row
The field turns active/blue. Type a value and press Enter to confirm. You can also click and drag left/right directly on the parameter's label text to scrub the value up or down — useful for quickly exploring ranges.
✓ What you should seeThe node's preview thumbnail updates the moment you confirm the change.
D
Expression Mode — Linking Parameters to Other Nodes
How to make a parameter automatically follow another node's value
+
💡 What is an expression?A TouchDesigner "expression" is a tiny piece of Python code you type directly into a parameter field. Instead of setting "Speed = 2.5" and leaving it fixed, you set "Speed = whatever slider1 is currently outputting". So every frame, TouchDesigner checks the slider's value and uses that as the speed. This is how you make things respond to other things in real time. It sounds scary but the expressions you need for these projects are very simple — basically just "read the value from this other node".
1
Click the parameter value field you want to automate
Click a numeric value field in the Parameter Panel
The field activates and shows the current number.
2
Press the equals key ( = ) to switch to Expression mode
Press: =
The field turns purple/violet. That colour means it's now in Python expression mode. Whatever code you type here runs every single frame.
💡 Field didn't turn purple?Make sure the parameter field is active first (click it to highlight it), then press =. If it still won't turn purple, try right-clicking the parameter label and looking for "Expression" in the menu that appears — some parameters use a slightly different workflow.
3
Type your expression to reference another node
Type: op('slider1')[0]
This reads channel 0 (the first value) from the node named slider1. The name in quotes must exactly match the actual node name. To check a node's name: click it, look at the very top of the Parameter Panel — the name is shown there.
4
Press Enter to confirm
If valid: field stays purple and updates live. If it turns red: there's an error — double-check the node name in quotes, the brackets, and that there's no extra spaces. The most common mistake is a typo in the node name.
✓ What you should seeThe purple field shows a number that changes when you interact with the source node (e.g. moving the slider).
E
Viewing Node Output (Viewer Active)
How to see what a node is producing in real time
+
1
Click a node once to select it, then press V
Click node → press V
The node expands to show a live preview of its output on the canvas. For image nodes (TOPs) you see the picture. For number nodes (CHOPs) you see a scrolling waveform graph of the values.
💡 What's a waveform graph?When a CHOP node is in Viewer Active mode, you'll see a scrolling line graph — like a heart rate monitor or a music visualiser. The line goes up when the value is higher and down when it's lower. If you're looking at a slider CHOP, the line will be flat until you drag the slider. This lets you see whether your data is actually changing before you wire it anywhere.
2
Or open a floating viewer window
Look for the tiny viewer icon in the bottom-left corner of any node tile
Clicking it opens a separate floating window showing the node's full output. You can resize and reposition it. It stays open while you work on other nodes.
✓ What you should seeFor image nodes: live video/texture inside the node tile. For CHOP nodes: a scrolling number graph. Move a slider or wave at the webcam to see values change.
// PROJECT 01 — Inputs & Outputs

Build a Slider-Controlled
Animated Noise Visual

A live animated texture whose speed and contrast are controlled by two on-screen sliders. This teaches you the core TD loop: input (CHOP) → process (TOP) → output (Window). Every connection is explained click-by-click.
// 01 — Project One

Build It — Step by Step

Work through these in order. Each builds on the last. Expand each step for the full instructions.

// Final node chain for Project 01
CHOP
Slider
──▶
CHOP
Math
──▶
TOP
Noise
──▶
TOP
Level
──▶
COMP
Window
💡 What are we building exactly? Imagine a slider on screen — you drag it with your mouse. That slider produces a number (0 to 1). We feed that number through a "Math" node that stretches it to a bigger range (0.1 to 5). Then we use that stretched number to control how fast an animated noise texture scrolls. Another slider will control the contrast of that texture. Finally, we output the result to a window you can make fullscreen. When it's done: drag the sliders, the visual changes in real time. That's it. You're an artist now.
01
CHOPCreate a Slider CHOP
Add an on-screen slider — your first input control
+
1
Open a fresh TouchDesigner project
Launch TouchDesigner. Go to File → New in the top menu. You'll see an empty grid canvas.
💡 First time opening TD?When TouchDesigner first opens it might show a demo project or a welcome screen. Close any floating windows (click the X on them). Then go to File → New at the top. You should now see just an empty dark grid. If you see coloured boxes already on the grid from a previous session, go File → New again to clear it.
2
Double-click on empty space in the network to open the OP Create Dialog
Double-click anywhere on the empty dark grid
A popup appears with a search bar at the top.
💡 The dialog isn't appearing?First, make sure you've clicked on the dark grid once (to focus the panel). Then try double-clicking — that's two clicks in quick succession. If the dialog appears and then immediately disappears, you might be accidentally clicking outside it. When it opens, stop moving your mouse and type immediately.
3
Type "slider" and press Enter
Type: slider → Enter
The list filters. You'll see "Slider" highlighted. Press Enter to place it. A green-topped node called slider1 appears on your canvas.
4
Enable Viewer Active to see the slider UI
Click slider1 once to select it
Press V
A vertical slider bar appears inside the node. Drag it up and down — you'll see the output value changing between 0 and 1. That number is your input data.
✓ What you should seeA green-topped node labelled slider1. With Viewer Active on, a draggable slider handle is visible inside it. Moving it changes the value between 0.0 and 1.0.
Finding node namesClick any node, look at the top of the Parameter Panel on the right — the name is shown there (like slider1). You'll use this name in expressions. Rename it by clicking the name and typing.
02
CHOPAdd a Math CHOP to Remap the Range
Stretch the 0–1 slider value into a more useful 0.1–5.0 speed range
+
💡 Why do we need a Math CHOP?The slider outputs 0 to 1. But a speed of "0.3" and "1.0" aren't very different visually — the range is too small to feel like much. The Math CHOP remaps that 0–1 range to a bigger range like 0.1–5. So when the slider is at minimum you get speed 0.1 (very slow) and at maximum you get speed 5 (quite fast). It's like a translator between the slider's language (0 to 1) and the visual's language (0.1 to 5).
1
Double-click to the RIGHT of slider1 to place a new node
Double-click in empty space to the right of slider1
Type: math → Enter
A Math CHOP appears. This node can remap, add, multiply, and transform numeric channel values.
2
Wire slider1 into math1
Hover over the right edge of slider1 until you see the output dot appear
Click and drag from that dot → release on top of math1. A connecting line appears.
💡 Can't find the output dot?The output port is a very small circle or dot that appears on the RIGHT edge of the node when your cursor is near it. Try zooming in on slider1 first (scroll wheel up). Then slowly move your mouse from the centre of slider1 toward its right edge. The dot appears right at the edge. Once you see it, click and hold, then drag right to math1 and release over math1's body.
3
Click math1 to select it, then find the Range tab in the Parameter Panel
Click math1 to select it
In the Parameter Panel on the right, look for tabs near the top — find the one labelled Range and click it.
💡 Can't see the Range tab?The tabs in the Parameter Panel are small text labels at the top of the panel. They might say things like "OP", "Range", "Post", "Common". If you can't see them, the parameter panel might be very narrow — try dragging its left edge to make it wider. The Range tab is where you tell the Math CHOP "take input from X to Y and output from A to B".
4
Set the From Range (input) and To Range (output)
You'll see two rows: From Range and To Range, each with a min and max field.

Set From Range min to 0 and From Range max to 1
Set To Range min to 0.1 and To Range max to 5
Click each number field, type the value, press Enter to confirm
✓ What you should seeWith Viewer Active on math1, drag slider1 up and down. The math1 output should now range from 0.1 (slider at bottom) to 5.0 (slider at top).
03
TOPCreate a Noise TOP and Link Speed to the Slider
Generate an animated texture that scrolls at the speed you control
+
💡 What is a Noise TOP?A Noise TOP generates a moving cloudy/smoky texture using a mathematical algorithm. It looks like clouds or marble or brain matter depending on the settings. It's animated — meaning it changes over time without you doing anything. We're going to control how fast it changes using the slider. Think of it like a lava lamp that you can speed up or slow down.
1
Double-click to the right of math1 and create a Noise TOP
Double-click in empty space to the right of math1
Type: noise → Enter
A blue-topped Noise TOP appears. Its preview already shows a grey animated texture — it's already moving!
2
Click noise1 and open the Transform tab in the Parameter Panel
Click the Noise TOP to select it
In the Parameter Panel, click the Transform tab. You'll see parameters like Translate, Rotate, Scale.
3
Click the Translate X value field and press = to enter Expression mode
Click the X field next to "Translate"
Press: =
The field turns purple.
💡 What does Translate do?In the Noise TOP, the "Translate" parameter moves the "camera" through the noise space. If you increase Translate X over time, it looks like the texture is scrolling sideways. By linking it to our slider value times the current time, the texture scrolls continuously — and the slider controls how fast that scroll happens. It's like dragging a view window across an infinite noise painting at a speed you choose.
4
Type the expression to link speed to math1's output
Type: op('math1')[0] * absTime.seconds
Press Enter. The field stays purple. Move your slider — the noise now scrolls faster or slower!
💡 Breaking down that expression op('math1') = "look up the node named math1"
[0] = "read its first channel (channel number 0)"
* = multiply
absTime.seconds = "the total number of seconds since TouchDesigner started"
So the whole thing says: take the slider value (remapped by math1), multiply it by the current time. This gives a number that keeps getting bigger over time — and the bigger it is, the further the noise has scrolled. Slider high = it grows fast = scrolls fast.
✓ What you should seeThe Noise TOP preview shows a scrolling grey texture. Move slider1 — it scrolls faster or slower. If it's static, check the Translate X field is purple (not red) and the expression references math1 exactly.
04
TOPAdd a Level TOP + Second Slider for Contrast
Wire in a second slider to control how punchy the texture looks
+
1
Create a second Slider CHOP — place it below slider1
Double-click in empty space below slider1
Type: slider → Enter
A second slider named slider2 appears. This will control contrast.
2
Create a Level TOP to the right of noise1
Double-click to the right of noise1
Type: level → Enter
A Level TOP appears. This adjusts brightness, contrast, and gamma of any image.
3
Wire noise1 into level1
Drag from noise1's right output → release over level1
level1's preview now shows the noise texture.
4
Select level1, find the Contrast parameter, enter expression mode
Click level1 to select it
Find Contrast in the Parameter Panel. Click its value field.
Press = then type: op('slider2')[0] * 3
Press Enter. Now slider2 controls contrast from 0 (flat grey) to 3 (super punchy black and white).
💡 What does contrast actually do?Contrast pushes dark areas darker and bright areas brighter. At contrast=0 everything looks flat grey. At contrast=3 you get bold black and white patches with sharp edges. Try dragging slider2 to the extremes to see the difference. Most visually interesting results are somewhere in the middle — around 1.2 to 2.
✓ What you should seeTwo sliders. slider1 = scrolling speed. slider2 = contrast. Moving them both produces different visual results in real time.
05
COMPOutput to a Window — See it Fullscreen
Send your visual to a proper display window
+
1
Create a Window COMP to the right of level1
Double-click to the right of level1
Type: window → Enter
An orange-topped Window COMP appears. This creates a separate operating system window for output.
💡 What is a Window COMP?A Window COMP creates a separate moveable window on your screen — like a video player window. It can show any image from any TOP. This is how you display your visuals on a projector or second screen. You don't wire audio into it — it's purely for images/video output.
2
Select window1 and set its TOP source to level1
Click window1 to select it
In the Parameter Panel, find the field labelled TOP. Click that field and type level1, then press Enter. Alternatively you can drag the level1 node directly into that field.
💡 The TOP field — what is it?The Window COMP needs to know "which image do you want to display?" The TOP parameter is where you tell it. You type the name of any TOP node and the Window will show that node's output. If you type the wrong name or a name that doesn't exist, the Window will show black.
3
Click "Open" in the Window COMP parameters
In window1's Parameter Panel, click the "Open" button near the top
A separate window opens showing your animated noise. It's live — drag your sliders and watch it change.
4
Fullscreen with F6
Click the output window to focus it
Press F6
Toggles fullscreen. Press F6 again to exit. Press Ctrl+S to save your work as a .toe file.
✓ Project 01 Complete!A separate window shows your scrolling noise texture. Two sliders control speed and contrast in real time. You've built your first TouchDesigner patch — an input → process → output signal chain.
// PROJECT 02 — Webcam → Audio Effects

Your Body Controls
the Sound

A motion-detection pipeline reads your webcam, collapses the entire moving image to a single number, and routes that number into audio effect parameters in real time. Move and the room opens up. Stay still and the sound goes dark.
// 02 — Project Two

Build It — Step by Step

Two separate chains run in parallel — one handles motion detection (visual chain), the other handles audio effects (audio chain). They connect via expressions in the audio effect parameters.

// Visual chain — webcam to control value
TOP
Video Device In
──▶
TOP
Frame Diff
──▶
TOP
Threshold
──▶
CHOP
TOP to CHOP
──▶
CHOP
Filter
// Audio chain — mic to speakers (parameters controlled by Filter CHOP above)
CHOP
Audio Device In
──▶
CHOP
Audio Reverb
──▶
CHOP
Audio Filter
──▶
CHOP
Audio Device Out
💡 Two chains — what? In Project 1 everything was one straight chain left to right. This project has two separate chains that live on the same canvas but don't wire into each other directly. Instead, the Filter CHOP (end of the visual chain) is referenced by name in expressions inside the audio effect nodes. Think of it like this: the visual chain is a thermometer measuring how much you're moving. The audio effects are like a thermostat — they read the thermometer and adjust the sound temperature. The thermometer and thermostat don't need to be physically connected; the thermostat just needs to be able to read the thermometer's display.
Start freshEither continue in the same file (scroll to an empty area of the canvas) or open a new file via File → New.
01
TOPBring in Your Webcam — Video Device In TOP
Connect your camera and get a live image feed
+
1
Double-click on empty network space and create a Video Device In TOP
Type: videodevin → Enter
(or type "video device") — A blue-topped Video Device In TOP appears.
2
Select it and choose your webcam from the Device dropdown
Click the node to select it
In the Parameter Panel, find the Device dropdown. Click it — a list of all connected cameras appears. Select your webcam.
💡 Which device do I pick?Your webcam might be listed as "FaceTime HD Camera" (Mac built-in), "HD Webcam" or similar. If you're not sure which one, pick the first one and look at the node's preview thumbnail. If you see a live image of yourself, that's the right one. If you see black or an error, try the next device in the list.
3
Set the resolution to 640×360 for performance
In the parameters find the Resolution setting. Set width to 640 and height to 360. We don't need 4K for motion detection — smaller resolution means faster processing.
💡 Why lower the resolution?Processing a 4K webcam frame (8 million pixels) 60 times per second would crush most computers. We only need to detect whether you're moving or not — even 320×240 is more than enough resolution for that. 640×360 gives us a good balance between accuracy and performance.
PermissionsIf the node shows black or an error about camera access: Mac → System Settings → Privacy & Security → Camera → enable TouchDesigner. Windows → Settings → Privacy → Camera → allow desktop apps. Restart TD after granting permission.
✓ What you should seeA live image from your webcam in the node thumbnail. Wave your hand — the image updates in real time.
02
TOPDetect Motion — Frame Difference TOP
Subtract last frame from current frame — movement becomes bright pixels
+
💡 How does frame differencing work?Every frame (60 times per second) the camera takes a photo. The Frame Diff node compares this photo to the previous one and asks "which pixels are different?" Wherever a pixel changed (because something moved), that pixel gets painted white in the output. Where nothing changed, it gets painted black. If you sit completely still, the output is pure black. Wave your hand and you'll see a white blob where your hand was moving. It's like a motion-revealing X-ray.
1
Double-click to the right of your webcam node and create a Frame Diff TOP
Type: framediff → Enter
(or search "frame diff")
2
Wire the webcam node into the Frame Diff TOP
Drag from videodevin1's right output → drop on framediff1
3
Enable Viewer Active and test it
Click framediff1, press V
Stay completely still — the preview should be almost entirely black. Now wave your arm — white/grey blobs appear showing motion.
✓ What you should seeMostly dark image. When you move in front of camera: bright white/grey patches appear wherever pixels changed. Still = dark. Moving = bright.
03
TOPClean the Signal — Threshold TOP
Remove camera noise — only real intentional movement passes through
+
💡 What's camera noise?Even when you're sitting completely still, the webcam's image sensor produces tiny random variations in pixel values — called sensor noise. This means the Frame Diff image isn't fully black when nothing moves; there are faint grey speckles everywhere. The Threshold node fixes this: any pixel below a set brightness level gets forced to pure black. Only pixels brighter than the threshold survive. This cleans out the noise and only leaves real, intentional motion.
1
Create a Threshold TOP to the right of framediff1
Type: threshold → Enter
2
Wire framediff1 into threshold1
Drag from framediff1's right output → drop on threshold1
3
Select threshold1 and set the Threshold value to 0.08
Click threshold1 to select it
Find the Threshold parameter. Set it to 0.08.

This means: only pixels brighter than 8% pass through as white. Sensor noise is usually below this level, so it gets eliminated.
💡 How do I know if 0.08 is the right value?View threshold1's output (click it, press V). Sit completely still and watch the preview — it should be pure black with no speckles. Now wave your arm — clear white shapes should appear. If you still see random speckles when still, increase threshold to 0.12. If your movements aren't registering at all (no white appears when you move), decrease to 0.04. Adjust until: still = all black, moving = clear white blobs.
✓ What you should seeCompletely black when still. Clean white patches when you move. No random speckles during stillness.
04
CHOPConvert Image to a Number — TOP to CHOP
Collapse the entire motion image into one value between 0 and 1
+
💡 Why do we need this conversion?Audio effect parameters are controlled by numbers (like "set reverb room size to 0.7"). But right now we have a whole image — hundreds of thousands of pixels. We can't plug an image into an audio effect. We need to collapse that entire image into a single number: "how much white is in this image overall?" The TOP to CHOP node does this averaging — it takes every pixel, averages them all together, and outputs a single number between 0 (no white at all = no motion) and 1 (entire image is white = maximum motion). Now we have something we can use.
1
Create a TOP to CHOP to the right of threshold1
Type: toptochop → Enter
(or search "top to chop") — A green-topped bridge node appears.
2
Wire threshold1 into toptochop1
Drag from threshold1's right output → drop on toptochop1
3
Select toptochop1 and configure it to average all pixels
Click toptochop1 to select it
In the Parameter Panel:
• Set Select to Average Pixels
• Ensure Channel includes r (red channel = brightness for greyscale)
💡 Where is the Select dropdown?It's in the Parameter Panel after clicking toptochop1. It might be labelled "Select" or "Include". Look for a dropdown that has options like "Average Pixels", "All Pixels", "One Channel". Choose "Average Pixels". For the Channel field — you might see options like "r", "g", "b", "a" or a text field. Make sure "r" is selected or listed. Since our image is greyscale, red, green and blue are all the same value, so any channel works.
4
View the output to confirm you see a changing number
Click toptochop1, press V
A graph appears. Sit still — the line is near 0. Move your arm — the line rises. This is your motion control signal.
✓ What you should seeA scrolling waveform graph near zero. When you move in front of camera it rises. When you stop it drops back to near zero.
05
CHOPSmooth the Signal — Filter CHOP
Raw motion data jitters wildly — smoothing gives gradual, musical movement
+
💡 Why smooth it?Raw motion data looks like a seismograph during an earthquake — constantly spiking up and down unpredictably. If you connected that directly to an audio reverb parameter, the reverb size would be jumping from tiny to huge 60 times per second, producing a horrible stuttering effect. The Filter CHOP averages the last X seconds of values, producing a smooth curve that rises and falls gradually. Think of it like stirring a thick soup — the spoon (raw data) moves fast, but the soup (filtered output) moves slowly and smoothly.
1
Create a Filter CHOP to the right of toptochop1
Type: filter → Enter
Wire toptochop1 into filter1:
Drag from toptochop1's right output → drop on filter1
2
Select filter1 and set Filter Width to 0.4
Click filter1 to select it
Find Filter Width (sometimes just called "Width") in the Parameter Panel. Set it to 0.4.

This averages the last 0.4 seconds of values.
💡 How do I know what value to use?Try different values and watch the waveform with Viewer Active on filter1. With Filter Width = 0.1: the signal still looks quite spiky (responsive but jittery). With 0.4: smooth, gradual changes. With 1.0: very smooth but slow to respond — big sweeping gestures with your arms. For most musical/performance uses, 0.3–0.5 is ideal. You can even control this parameter with a Slider if you want to adjust it in real time!
Important — note the node nameThis Filter CHOP is the node you'll reference by name in all your audio expressions. Click it and check its name in the Parameter Panel (probably filter1). Use exactly that name in the next steps.
✓ What you should seeA smooth, gently curving waveform — rises when you move, slowly falls back to zero when you stop. The node is named filter1 (confirm this by clicking it).
06
CHOPSet Up Audio Input — Audio Device In CHOP
Bring your microphone or audio interface into TouchDesigner
+
1
Create an Audio Device In CHOP in a new area BELOW your visual chain
Double-click in empty space below your existing nodes
Type: audiodevicein → Enter
Place it clearly separated from the visual chain — this starts your parallel audio chain.
💡 Why separate areas?There's no technical reason the chains need to be spatially separated — they just need to exist on the canvas. But keeping them in separate rows (visual chain on top, audio chain below) makes the patch much easier to read and debug. You'll thank yourself later when things go wrong and you need to trace the signal.
2
Select it and choose your microphone from the Device dropdown
Click audiodevicein1 to select it
Find the Device dropdown. Select your microphone or audio interface. If unsure, try each one while watching the node's preview — the correct device will show a live waveform when you speak.
3
Test it — enable Viewer Active and speak
Click audiodevicein1, press V
Speak or clap — a live audio waveform should appear in the preview. Silence = flat line. Sound = wavy line.
Mac UsersSystem Settings → Privacy → Microphone → allow TouchDesigner. Windows: Settings → Privacy → Microphone → allow desktop apps. Restart TD after granting permission.
✓ What you should seeAn active waveform in the node preview when you make noise near the mic.
07
CHOPAdd Reverb — Audio Reverb CHOP
Apply reverb to the audio and link room size to your motion signal
+
💡 What is reverb?Reverb is the sound of a space. Clap your hands in a small bathroom — you hear a short, tight echo. Clap in a cathedral — the sound decays for several seconds. Reverb in audio production simulates this. "Room Size" is a parameter between 0 and 1 that simulates the size of the virtual space. We're going to link this parameter to our motion value — when you move, the virtual room gets bigger. When you're still, it shrinks back to a small tight space.
1
Create an Audio Reverb CHOP to the right of audiodevicein1
Type: audioreverb → Enter
2
Wire audiodevicein1 into audioreverb1
Drag from audiodevicein1's right output → drop on audioreverb1
Audio now flows from your mic through the reverb effect.
3
Select audioreverb1 and find the Room Size parameter
Click audioreverb1 to select it
In the Parameter Panel look for Room Size.
4
Enter expression mode and link to filter1
Click the Room Size value field
Press = then type: op('filter1')['r']
Press Enter. The field turns purple. Now body movement controls reverb room size 0→1.
💡 Why ['r'] instead of [0]? The TOP to CHOP node named its output channels after the colour channels of the image: 'r' (red), 'g' (green), 'b' (blue). Using ['r'] reads the channel named 'r' by name. You could also write [0] to read channel 0 (first channel) — they refer to the same data for our greyscale image. Both work; ['r'] is more readable.
5
Also link the Wet/Dry mix parameter
Find the Wet or Mix parameter. Click it, press =:
op('filter1')['r'] * 0.9
This keeps maximum reverb at 90% wet, preserving some dry signal so the sound doesn't become completely smeared.
// Expressions for Audio Reverb CHOP Room Size: op('filter1')['r']
// 0 = dry/small room. 1 = huge reverberant cathedral

Wet/Mix: op('filter1')['r'] * 0.9
// Caps at 90% wet to keep original signal audible
08
CHOPAdd a Filter — Audio Filter CHOP (Low Pass)
Motion opens the filter — stillness makes the sound dark and muffled
+
💡 What is a low-pass filter?All sound is made of different frequencies — bass frequencies (deep thumps, rumbles) are low, treble frequencies (bright highs, presence) are high. A low-pass filter lets low frequencies pass through while cutting high frequencies above a "cutoff" point. Lower the cutoff → more muffled and dark (like listening through a wall). Raise the cutoff → brighter and fuller (all frequencies pass). By linking the cutoff to motion: standing still = muffled, moving a lot = full bright sound. Your body is literally the EQ knob.
1
Create an Audio Filter CHOP to the right of audioreverb1
Type: audiofilter → Enter
Wire audioreverb1 into audiofilter1:
Drag from audioreverb1's right output → drop on audiofilter1
2
Set the Filter Type to Low Pass
Click audiofilter1 to select it
Find Filter Type dropdown — set it to Low Pass.
3
Link Cutoff Frequency to the motion signal
Find Cutoff Frequency. Click it, press =:
op('filter1')['r'] * 8000 + 300
Press Enter.

When still: 0 × 8000 + 300 = 300 Hz — very muffled.
When fully moving: 1 × 8000 + 300 = 8300 Hz — wide open, bright.
💡 How do I check it's working?Watch the Cutoff Frequency field. It should show a number. Now wave your arms — the number should rise toward 8000+. When you stop moving it should drop back toward 300. If you can hear your mic through headphones, you should hear the sound getting brighter when you move. If the number isn't changing, check that your filter1 node is named exactly "filter1" (click it to confirm the name in the Parameter Panel).
// Expression — Audio Filter CHOP → Cutoff Frequency op('filter1')['r'] * 8000 + 300
// still = 300 Hz (muffled bass)
// moving = 8300 Hz (full frequency range)
09
CHOPSend Audio to Speakers — Audio Device Out CHOP
Route your processed audio to headphones or speakers
+
1
Create an Audio Device Out CHOP to the right of audiofilter1
Type: audiodeviceout → Enter
Wire audiofilter1 into audiodeviceout1:
Drag from audiofilter1's right output → drop on audiodeviceout1
2
Select your output device (speakers or headphones)
Click audiodeviceout1 to select it
Set Device to your speakers or headphones. Audio should start flowing immediately.
3
Put on headphones and test the full patch
Speak or sing into the mic. Stand still — muffled, reverberant sound. Now wave your arms slowly — the reverb expands and the filter opens, bringing in more frequencies. Your body is the instrument.
💡 I can hear myself but nothing's changingCheck three things: (1) Is filter1's Viewer Active showing values that change when you move? If not, the motion detection chain has an issue — go back to Step 3 and recheck the threshold. (2) Are the expressions in audioreverb1 and audiofilter1 showing purple fields? If they're white/grey, you haven't entered expression mode properly. Click the field, press =, retype. (3) Does the expression reference filter1 exactly? That name must match the actual node name precisely, including the number.
Feedback WarningIf your speakers are near your mic you'll get a loud feedback loop. Always use headphones when monitoring, or plug in an external microphone far from the speakers.
✓ Project 02 Complete!Your webcam feeds motion data through detection → a single control number → drives reverb size and filter cutoff on live microphone audio in real time. This is a functional live AV instrument.
// 02-B — Reference

More Expressions to Try

Once your patch works, experiment with these. Paste any of them into an audio effect parameter field after pressing = to enter expression mode.

💡 How to use these expressionsFind any audio effect parameter (like Room Size, Cutoff Frequency, Volume). Click its value field. Press = (the field turns purple). Delete whatever's there. Type one of the expressions below. Press Enter. The parameter now follows that formula every frame. Try different formulas in different parameters to get different relationships between your movement and the sound.
// Inverted — stillness = maximum reverb 1 - op('filter1')['r']
// 0 motion → 1.0 output (maximum). 1.0 motion → 0 output (dry)
// Exponential — small moves barely register, big gestures are dramatic op('filter1')['r'] ** 2 * 8000 + 200
// ** 2 = squared. Creates a curved response rather than linear
// Safe clamp — value can never go below 0 or above 1 clamp(op('filter1')['r'], 0, 1)
// Add LFO rhythm — oscillates automatically AND responds to motion math.sin(absTime.seconds * 2) * 0.3 + op('filter1')['r'] * 0.7
// Combines rhythmic oscillation with motion response
// Threshold-style jump — below 0.1 = 0, above 0.1 = jumps straight to full 1.0 if op('filter1')['r'] > 0.1 else 0.0
// On/off behaviour — effect either fully off or fully on
// 03 — Help

When Things Go Wrong

These are the most common issues beginners hit. Find your symptom and expand for the fix.

!
A node has a red border or red error dot
Something is misconfigured or an input is missing
+
1
Hover over the red dot in the node's corner to read the error message
TouchDesigner shows error text as a tooltip when you hover. Read it carefully — it usually names the exact problem.
💡 Common error messages decoded "Input required" or "No input" → the node needs a wire coming in. Look at the left side of the node — is there a wire connected? If not, drag one from the correct source node.

"Can't find operator 'xyz'" → an expression references a node named 'xyz' but no such node exists. Check the name in the expression matches the actual node name exactly (including the number like filter1 vs filter2).

"Device not found" → a hardware device (webcam, mic, audio output) isn't connected or has been disconnected. Check USB connections.
2
If an expression field is red — the Python code has an error
Click the red parameter field. Look carefully: is there a typo in the node name? Is there a missing bracket? Are the quotes around the node name? op('filter1') is correct. op(filter1) is wrong (missing quotes). op('filter1'[) is wrong (mismatched bracket).
!
No audio — I can't hear anything
Audio Device Out or chain issue
+
1
Check every wire in the audio chain is connected
The chain must be: audiodevicein1 → audioreverb1 → audiofilter1 → audiodeviceout1. Click each node and look for a solid line coming in from the left. If any link is missing, drag a new wire.
💡 How to check a wire connectionClick the destination node (e.g. audioreverb1). Look at its left side. Is there a wire coming in? If you see just an empty left edge with no connection, that node has no input. Go to the previous node in the chain (audiodevicein1), find its right output dot, and drag a wire to this node.
2
Check audiodeviceout1 has the right output device selected
Click audiodeviceout1 → check Device parameter
Make sure it says your headphones or speakers — not "None" or a disconnected device.
3
Check audiodevicein1 is receiving signal from the mic
Click audiodevicein1, press V
Speak or clap. If the waveform is completely flat: wrong device selected, or mic permissions are blocked. Try all devices in the dropdown until one shows activity.
!
Motion detection always stays at zero — nothing responds
Threshold too high, poor lighting, or chain issue
+
1
Check the visual chain step by step
Press V on each node from left to right: videodevin1 → framediff1 → threshold1 → toptochop1 → filter1. At each node, wave your arm. Find the first node where the preview doesn't change when you move — that's where the chain is broken.
2
Lower the Threshold value in threshold1
Click threshold1 → reduce Threshold to 0.03
Wave your arm again. Do white areas appear now? If yes, your original threshold was too high. Find the lowest value where the image stays black when you're still but lights up when you move.
💡 My threshold has to be really low to detect anythingThis usually means your lighting is poor. The camera needs to see a contrast between you and the background to detect motion well. Try: turning on a light source that illuminates you from the front, moving to a brighter area, wearing clothes with a different colour to your background wall, or reducing the Threshold value further (even 0.01 can work in dim conditions).
3
Make sure the visual chain is fully wired
videodevin1 must wire into framediff1, which wires into threshold1, which wires into toptochop1, which wires into filter1. Click each node and look for an incoming wire on its left side.
!
TouchDesigner is running slowly (low FPS)
Reduce resolution or viewer windows
+
1
Lower the webcam resolution to 320×240
Click videodevin1 → set Resolution to 320 wide × 240 tall
Motion detection doesn't need high resolution. Half the width and height = 75% fewer pixels to process every frame.
2
Close all floating viewer windows
Every open viewer window renders every frame. Close any that you're not actively using. Right-click a floating viewer window → close it, or press V on the node again to toggle off the inline viewer.
3
Close other heavy applications
TouchDesigner uses the GPU heavily. Video browsers, games, or screen recording software all compete for GPU resources. Closing them can free up significant performance.
!
I accidentally deleted a node / messed something up
Undo with Ctrl+Z
+
1
Press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo
TouchDesigner supports multiple levels of undo. Press it several times to step back through recent actions. It works for deleted nodes, broken wires, and parameter changes.
💡 How to avoid accidentally deleting nodesThe most common accidental delete: pressing Delete or Backspace while a node is selected. TouchDesigner deletes the selected node without warning. If you're typing in a parameter field and accidentally click on a node (selecting it) then press Backspace, it can delete the node. Get in the habit of pressing Ctrl+Z immediately if something disappears. Also: save regularly with Ctrl+S — that way worst case you reload the last save.