TouchDesigner Tutorial: Working with Time in Interactive Systems

This tutorial explores how to work with time in interactive systems using TouchDesigner. The Timer CHOP is one of the most powerful operators for managing time-based behaviors in installations and experiences.

Understanding the Timer CHOP

The Timer CHOP provides several built-in channels for tracking time:

• Timer Fraction - A 0 to 1 representation of elapsed time
• Ready - Indicates the timer is initialized and waiting to start
• Running - Shows when the timer is actively counting (enable on Outputs page)
• Done - Signals when the timer has completed

Basic Timer Setup

1. Add a Timer CHOP to your network
2. Set the duration (e.g., 2 seconds)
3. Start the timer to see the fraction run from 0 to 1
4. Initialize to reset to ready state

Building a Timer State Indicator

To create a visual representation of timer states:

Step 1: Extract State Channels

Add a Select CHOP to isolate the three state channels:

• ready
• running
• done

Step 2: Combine Channels

Add a Fan CHOP and set it to “fan in” mode. This combines the three input channels into a single output channel where:

• 0 = Ready state
• 1 = Running state
• 2 = Done state

Step 3: Rename for Clarity

Add a Rename CHOP to give the channel a meaningful name like “timer_state”.

Step 4: Create Visual Feedback

1. Add three Text TOPs with labels: “Standby”, “Running”, “Done”
2. Connect all three to a Switch TOP
3. Make the Null CHOP viewer active, drag the channel onto the Switch TOP’s index parameter
4. Set as CHOP reference

Now the display automatically switches based on timer state - useful for tracking installation or experience states.

Creating Cycling Animations

The Timer CHOP’s cycle parameter enables repeating animations.

Building a Text Ticker

1. Add a Text TOP with “Hello World” text
2. Set resolution to 1280x720 and font size to 100
3. Add a Transform TOP connected to the Text TOP
4. Connect the timer fraction to the Transform’s TX parameter
5. On the Transform TOP’s Tile page, set Extend to “repeat”

Cycle Options

Fixed Cycles:

• Enable the cycle parameter
• Set maximum cycles (e.g., 4)
• Animation runs the specified number of times then stops

Perpetual Cycling:

• Turn off cycle limit
• Animation runs indefinitely until manually stopped

Stopping Cycled Animations

Two methods to end a cycling animation:

Go to Done:

• Use the “go to done” parameter
• Immediately snaps to the end position

Exit Segment at End:

• Use “exit segment at end of cycle”
• Completes the current cycle before stopping
• Ideal for loading animations that need graceful endings

Interactive Control with Buttons

Start Button Setup

1. Add a Button Component
2. Label it “Start” and set to momentary mode
3. Connect the button output to the Timer’s second input (start trigger)

Exit Cycle Button with Parameter Execute DAT

For callback-based control:

1. Add another Button Component labeled “Exit Cycle” (momentary)
2. Add a Parameter Execute DAT
3. Set the operator to watch as your button
4. Set the parameter to “value0”
5. Add this Python code in onValueChange:

if par.eval():
    op('timer2').par.exitsegaliasendcycle.pulse()

The pulse() method simulates clicking the pulse parameter, allowing programmatic control of the exit cycle behavior.

Key Concepts

• Timer CHOP is essential for time-based interactive systems
• State channels (ready, running, done) help track timer status
• Fan CHOP can combine multiple state channels into a single index
• Cycle parameter enables repeating animations
• Exit segment at end provides graceful animation completion
• Parameter Execute DAT enables callback-based timer control
• pulse() method programmatically triggers pulse parameters

These techniques form the foundation for building time-aware interactive installations and experiences in TouchDesigner.