Synesthesia: Audio-Reactive Visuals for Beginners (TouchDesigner Tutorial 02)

Turn music into motion / visual loop using Touch Designer

Go to TOP > Movie File In, and change the default banana video to the one below. It’s completely FREE and was created using Leonardo AI.

FREE download 👆

Now, you can follow along with me.

This is a very simple project.

STEP 1: Adjusting Levels

Add a Level TOP.

On the right side of the Level parameters, adjust the contrast and brightness.

You can copy my settings for now, and later tweak the numbers until you get the best result.

STEP 2: Add Noise & Null

Next, add a Noise TOP, which will be used for displacement later.

Then add a Null TOP and rename it to null_image.

STEP 3: Transform Settings

Now, add a Transform TOP.

You can name it something like transform_hold.

Don’t worry about the Translate values yet — we’ll come back to that later.

Under the Common tab of the Transform TOP, enable Custom Resolution, and set it to 1280 x 720

— especially if you’re using the free version of TouchDesigner.

STEP 4: Add Displace

Next, add a Displace TOP.

This will help us create that flowing, animated distortion effect.

We’ll come back to tweak the Displace parameters later.

Now, add a Null TOP and rename it to null_displace.

STEP 5: Final Output Chain

Then, add another Level TOP — to refine the final look —

followed by a Null TOP and finally an Out TOP to complete the visual output chain.

STEP 6: Add Audio

Now let’s bring in the music.

Go to CHOP > Audio File In, and import your audio file.

In the node viewer, if you see the music waveform moving, that means it’s working —

even if you don’t hear sound yet.

To hear the music, connect it to an Audio Device Out.

STEP 7: Analyze the Audio

Next, add an Analyze CHOP and connect it to the Audio File In or Audio Device Out.

Then, go back to the Displace TOP, drag channel 1 from the Analyze CHOP and drop it onto the Displace Weight parameter.

Choose the first option in the menu (probably Export CHOP or chop reference depending on your setup).

Now the Analyze and Displace nodes are connected!

STEP 8: Add Math & Lag

Next, add a Math CHOP.

Adjust the range in the Math parameters to better control the values.

We’ll later connect this Math CHOP to the Transform TOP for some movement.

Then, add one more Math CHOP — because we’ll be using two audio channels to control X and Y motion.

After that, add a Lag CHOP — this helps smooth out the audio response so it feels more natural.

STEP 9: Audio Spectrum (Optional)

Finally, you can add an Audio Spectrum CHOP if you want a visual representation of your sound frequencies —

it’s helpful for debugging or creating more advanced effects.

And now — your project is done! 🎉

You’ve built a basic audio-reactive visual loop using TouchDesigner.

TouchDesigner tutorial for beginners, audio reactive TouchDesigner, TouchDesigner visual project, music visualizer tutorial, VJ visuals, digital art with sound, free TouchDesigner project download, Leonardo AI visuals, CHOP and TOP tutorial, Synesthesia TouchDesigner

Learn how to create an audio-reactive visual loop in TouchDesigner with this beginner-friendly tutorial. In “Synesthesia,” you’ll build reactive visuals using CHOPs, TOPs, and displacement effects. A free sample video is included for download.

🎬 Neon Dancing Butterfly 🦋 — Audio-Reactive Visuals for Beginners in TouchDesigner

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.

🎛️ 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.)

     2. TOP – Texture Operator

   • Pink icon

   • For images, video, and 2D effects

   3. CHOP – Channel Operator

   • Light blue icon

   • For audio, animation, and changing values over time

   4. SOP – Surface Operator

   • Green icon

   • For 3D geometry and shapes

   5. DAT – Data Operator

   • Purple icon

   • For text, scripts, and data tables

Let’s create a vibrant neon butterfly that pulses, rotates, and mirrors in sync with audio.

Below butterflies is Free download / or you can use your TD default butterflies.

💡 After clicking the download button, tap the ⬇️ icon in the top-right corner to save the video to your device. Then open TouchDesigner, add a Movie File In TOP, and start your first tutorial project ✅

OK, let’s begin 🦋

🎬 Touch Designer Tutorial 01 / Audio-Reactive

Neon Dancing Butterflies

Scripts;

First, go to TOP > Movie File In. This loads TouchDesigner’s default banana image. You can use either an image or a video to try this audio-reactive project.

Next, replace the banana with one of the default butterfly images. There are three butterflies to choose from — today, I’m using the third one.

Then, add a Level TOP. This adds more neon effects and glow, and increases contrast. You can adjust the parameters on the right side of the Level TOP to get the visual result you prefer.

Go to the Transform TOP first. The Transform TOP is used to resize, rotate, or move the image. In this project, it makes the image grow or shrink with the music, which brings the butterflies to life.

Then we adjust other TOPs:

HSV Adjust TOP is for hue shift — it’s one of the most fun to play with!

• The Hue range goes from 0 to 1, representing the full color wheel.

• 0 means no change,

• 0.5 flips the colors (red turns to cyan, green turns to magenta),

• and 1 is the same as 0 — it loops back.
  S stands for saturation, just like in Photoshop. Increasing it makes the image more vibrant.
  V stands for value (brightness). Raising it makes the entire image brighter.

Next is the Mirror TOP. Using Mirror creates beautiful symmetry and gives your visuals an abstract, artistic vibe.

We add the Bloom TOP because it enhances the glow effect, making the neon colors pop even more.

Finally, we add the Null TOP and Out TOP.

• The Null TOP doesn’t change anything, but it helps keep the output stable.

• The Out TOP marks the final output of your visual chain — it’s the end point of your network.

Now for the last part — we add the audio.

Start by adding an Audio File In CHOP. You’ll see the default music playing visually in the CHOP viewer, but there’s no sound yet. To hear it, add an Audio Device Out CHOP.

Next, add an Audio Spectrum CHOP. This reacts to the higher-pitched parts of the music and creates layered motion effects.

Then, connect the Audio File In CHOP to an Analyze CHOP. This allows the audio to drive visual changes. The Audio File In CHOP has two channels, which means you’re working with stereo audio — left and right.

Drag the Analyze CHOP output onto the Transform TOP, and drop it on the X parameter. This links sound to movement.

Only use one channel (left or right); using both can cause the visuals to move in two directions and look messy.

Next, add a Math CHOP. This controls the range of motion. You can play around with the numbers — more practice and observation will help you improve your visuals and learn faster.

Now the project is complete — I hope you liked it!