Marlene fichtner Marlene fichtner

Glowing Butterfly Visual – Audio Reaction in TouchDesigner (Beginner)

Welcome to my first TouchDesigner tutorial!
In this series, we will explore TouchDesigner step by step — starting from the absolute basics. Whether you're an artist, designer, VJ, or simply curious about real-time visuals, this guide is designed to help you build a solid foundation, even if you're completely new to the software.

I will explain each concept in detail, using real projects and examples, so you can understand not only how things work, but also why. The goal is not to copy steps blindly — but to give you the confidence to create your own visual systems from the ground up.

Let’s begin with Lesson 1: understanding how TouchDesigner thinks — and how you can start building your first visual project today.

🎛️ What is TouchDesigner?

TouchDesigner is a real-time visual programming tool used for:

  • 🎧 VJing and DJ performances

  • 🖼️ Interactive installations

  • 📽️ Projection mapping

  • 🌀 Motion graphics

  • 🎮 Experimental visuals

It works with nodes, also called operators, connected in networks — like remixing visuals live.

🔣 The 5 Operator Families

Each operator belongs to one of these five families. They each have a unique color and purpose:

  1. COMP – Component Operator

    • Yellow icon

    • Acts like a folder or container

    • You actually start every project inside a COMP

    • The default /project1 is your first COMP

    • Inside it, you add all other nodes (TOPs, CHOPs, etc.)

💡 When do we create new COMPs?

You add new COMPs when you want to:

  • Organize your network (keep things clean)

  • Reuse setups (e.g. custom effects)

  • Build control panels (sliders, buttons)

  • Modularize your project (one COMP per scene or idea)

  • Control logic/rendering separately

  1. TOP – Texture Operator

    • Pink icon

    • For images, video, and 2D effects

  2. CHOP – Channel Operator

    • Light blue icon

    • For audio, animation, and changing values over time

  3. SOP – Surface Operator

    • Green icon

    • For 3D geometry and shapes

  4. DAT – Data Operator

    • Purple icon

    • For text, scripts, and data tables

🔄 How Data Flows in TD

Each node (operator):

  • Takes input

  • Modifies the data

  • Passes it to the next node

🧪 Basic Example – TOP Chain:

Let’s build a simple visual pipeline using TOPs:

  1. Movie File In (loads a video or image)

  2. Level (adjusts brightness and contrast)

  3. Null (a clean endpoint, used often for safety)

  4. Out (sends the result to the screen or another process)

💡 Tip: Always end with an Out TOP if you want to display visuals to the final screen.

Let's dive into your first mini TouchDesigner project — simple but powerful. This will help you understand the flow, practice using TOPs, and see instant visual results.

🎬 Mini Project: A Glowing, Transforming Image Chain

🧰 What You’ll Build:

A visual pipeline that:

  • Loads an image

  • Adjusts its brightness and contrast

  • Applies a zoom or shift effect

  • Ends with a clean output display

🪜 Step-by-Step Instructions

✅ 1. Start Clean

  • Open TouchDesigner

  • You’ll see /project1 — this is your COMP. Stay inside it.

✅ 2. Add Nodes (TOPs)

  1. Press Tab → go to TOP tab → Add Movie File In

    • This loads an image or video

    • By default, it might show the TouchDesigner logo or movie

  2. Add Level TOP

    • Connect the output of Movie File In → into Level

    • Use Level to adjust brightness, contrast, gamma

  3. Add Transform TOP

    • Connect Level → into Transform

    • Change Scale (zoom in/out)

    • Try changing Translate X or Y to move the image

  4. Add Null TOP

    • Connect Transform → into Null

    • Null is like a "safe output" — a clean checkpoint before final steps

  5. Add Out TOP

    • Connect Null → into Out

    • Now your final visual is rendered to the

🎧✨ TouchDesigner Audio-Reactive Butterfly Project (Beginner Tutorial)

Goal:

Create a glowing butterfly animation that reacts to sound using audio input in TouchDesigner.

tutorial video coming soon … in progress…

✅ Step 1: Import the Image

1. Press Tab → choose TOP tab → add a Movie File In.

2. Load your butterfly (or any image/video) by clicking the File parameter and selecting your file.

✅ Step 2: Enhance Brightness

3. Add a Level TOP to adjust brightness:

• Connect from moviefilein1 → level1

• In level1, increase Brightness and/or Contrast as needed.

✅ Step 3: Add Glow

4. Add a Bloom TOP:

• Connect from level1 → bloom1

• Tweak:

• Bloom Fill: 1

• Intensity: 1

• Radius values for strong glow (Min/Max)

• Threshold to control highlight triggering

5. Optionally add another Level TOP after bloom1 to fine-tune.

✅ Step 4: Apply Transform Animation

6. Add a Transform TOP:

• Connect from the last level → transform1

• This will be animated with sound later (e.g. scale, rotate, or translate).

✅ Step 5: Audio Setup

7. Add an Audio File In CHOP (not Device In):

• Load your .mp3 or .wav file (Artlist or personal file)

8. Add an Audio Spectrum CHOP or Audio Analysis CHOP:

• Connect from audiofilein1 → to one of these

• This extracts volume or frequency data

✅ Step 6: Connect Audio to Animation

9. In the Audio Spectrum/Analysis CHOP, find a good channel (e.g. chan2)

10. Drag chan2 directly to the Transform TOP’s parameter:

• Try connecting to Scale Y or Translate Y

• Choose Export CHOP (not reference) so it’s live-updating

✅ Step 7: Final Output

11. Add a Null TOP at the end of the transform chain (e.g. null1)

12. Turn on the viewer display (click bottom-right square on null1) to see it in full resolution

Read More