Touchdesigner Tutorial: Particle Displacement based on Music and Video (optimized version)

*Camera Constraint*
For anyone wondering: There is no more "constraint to" option in the newer versions, but a dropdown called "parent transform source". Click it and chose "specify object". Than your can input the null :)
I recently uploaded the same tutorial, but have since optimized it, so the visual will run wayy smoother/faster on your computer. So here is the optimized version. (Also the tutorial is shorter and easier).
_____________________________
In this Touchdesigner tutorial i'm showing you, how to displace particles, based on video and music input. Don't let yourself be intimidated by the length of this tutorial, i'm including some useful information here in there, but in the end the project ist not that complicated :)
(pardon the inconsistend pronunciation of "z" :D)
Chapters:
00:00 Intro
00:53 Side Note: OptimChanges in this optimized version
01:32 Intro Touchdesigner Project
02:44 Preparing the Network / UI
03:47 Instancing & Rendering Setup
08:22 Instance Preparation (IP)
09:57 IP (TOPs)
14:28 IP (SOP Grid)
14:59 Explanation Z-displacement
16:24 Using TOPs for Z-displacement
18:35 Instancing
21:43 Music Reactivity
25:21 Cam Movement
30:25 Post Effects
33:38 End
Mentioned Links:
Crazy Radio Channel: @CrazyRadiofilm
Function Store Channel: @FunctionStore
Shuffle explanation: interactiveimmersive.io/blog/...
My Instagram: / freivonstil
My Tiktok: / freivonstil
Drone Video by @nils.vo (IG): / nils.vo
Track: MEMBA & WiDE AWAKE - Vexed (feat. Xo Man)

[@andrekaique6480]

We always need another touchdesigner tutorial channel please keep doing

[@arkhamengineer]

this is a fantastic tutorial! I love how you include little bits of info on what each parameter does and why you adjust specific ones.

[@lucasspataro894]

This video was immensely helpful. As a total TouchDesigner noob i managed to follow along and even tweak some parameters to my own taste. Thank you very much for sharing your knowledge, hope to see more from you in the future to keep learning. Cheers from Argentina!

[@freivonstil]

thanks for the ind words :)

[@drippinsauce1915]

Wow, this is incredible. exactly the type of visuals i've been imagining. Hella stoked to learn it.

[@knast7093]

So nice! Very very well done for your first tutorial!

[@stront]

even though you said it wasn't for beginners, i thought the tutorial was a lot more clear then most of the tutorials out there. you did everything step by step, with a not-so-fast pace, so i could easily follow along and you explained why you did what you did. ended up tweaking some stuff to my liking and adding a webcam as the input, end result is awesome. thanks!

[@freivonstil]

I'm glad you liked it :) And i'd love to see your result :)

[@chrisaristedou773]

danke schön!

[@sasemoimusic]

Great tutorial and well explained/easy to follow, thank you!

[@julianbain137]

Awesome tutorial! Very clear and easy to follow. Thank you so much!

[@superthoughts]

I watch a lot of TD tutorials and this is one of the best I've seen so far. I really appreciate your pacing with this and all the added information that ties it all together and answers the "why" your using specific operators. Wonderful job! Follow!

[@freivonstil]

Thank you so much for the kind words! :)

[@Misanthropix]

That was amazing, thank you so much for sharing.

[@joshluttrell7883]

Thank you so much for sharing your knowledge. With everything being commodified these days, its wonderful to see people still willing to teach and share for free.

[@freivonstil]

thanks for your kind words :)

[@dhakerbadri8040]

Best onee out here yet, as a newbie I wanted to thank you for the effort. It was so entertaining that I watched without following up :') Tommorrow will try it, I have soooo much ideas. Thanks keep on sharing knowledge.

[@freivonstil]

Thanks!

[@jollydod]

very very very great video! thank you so much for sharing this knowledge

[@ThePyramid21]

Thanks for explaining step by step functions and consequences , we noobs need that more than anything.. Awesome work

[@freivonstil]

love to help and love the feedback :)

[@phule5966]

you are amazing.

[@muhammadjiddanh880]

I LOVE YOUR VIDEOS BRO! THANKS FOR THIS AWESOME TUTORIAL! KEEP IT UP!!!

[@freivonstil]

Thank you for the kind words! :)

[@elekurio1369]

Thank you sooo much from Italy :)

[@alecfop4950]

Amazing tutorial man looking forward to more

[@freivonstil]

soon ;)

[@gianniskaragiannis4300]

amazing work amazing tutorials!!! KEEP IT UPPP

[@freivonstil]

will do ;)

[@pataguan]

Muchas gracias por compartir tus conocimientos, me ha servido para seguir aprendiendo, abrazos

[@freivonstil]

de nada :)

[@tempiranyat]

Omg. Man it soooo cooool. Thx.

[@m4teo_borges]

im in love with u thx for existing

[@freivonstil]

haha thanks :D

[@user-np6th6ws1k]

nice! thankyou

[@0x1E4]

Danke für dieses Tutorial!! Damit hab ich einen visualizer gemacht :) Sehr hilfreich!

[@freivonstil]

Freut mich! Wenn du die Visuals postest, freue ich mich über eine Verlinkung :)

[@0x1E4]

@@freivonstil kzbin.info/www/bejne/fYqun6FnZrSHgbcsi=YorpcVKmbTSRSqy3 !!

[@AMYLUXamylux]

thank u so much for this

[@yvann.mp4]

amazing, thanks a lot !!!

[@GerardoHernandez-zh9id]

Thank u so much!

[@matigekunstintelligentie]

Very nice!

[@ASSAKKER]

Hammer Tutorial Danke dafür!!!!!!!!!!!!!!!!!!!!! Mehr davon Bitte!!!!

[@freivonstil]

Na immer doch! Und danke dir :)

[@jcy4rza]

Amazing video, I am currently experiencing an issue in the @16:36, when I connect the Chop to Top and change to square and RGB, I see a Red, blue green and yellow squares dividing the view equally. If I zoom, I get the same shapes divided in triangles. Any idea on how to fix this? Edit: After tweaking and testing, since my comp is 16:9, the Grid had to be also in that ratio. The dimension of the grid was too big (instead of using 1:1 or 1.6 to .9, I used 16:9). It was too big for the chop to to fit it properly to the pos. At least, that's how I've come to understand the issue. Now it works!

[@Knaps_]

Awesome video! For the UV map you make at 15:30 I would recommend using vertical and horizontal ramp tops > reorder > math instead of the SOP > CHOP > TOP. Its the exact same result with an offset UV grid but all within the TOP domain so IMO its a little cleaner (maybe less cpu intensive?). The grid is nice for the tutorial as a way of visualizing though! Keep up the good work :)

[@freivonstil]

I know, i chose to use a grid exactly for that reason: to demonstrate the displacement part with the colors :) So a little more complication for the sake of explanation :D

[@Knaps_]

@@freivonstil Gotcha its way easier to visualize for sure! Forgive me for nit picking I just heard you mention optimization several times and figured I might as well suggest it lol :)

[@timurm.4839]

Awesome!

[@gueisenguei7785]

fxxk that's too amazing, it may help me a lot when i try to do some visual things in the underground club😋 thank you !!!! Highest respect from China

[@alexbalentine9792]

this is literally my first touchdesign tutorial and you make everything very clear and concise :). one issue, the resolution of my video doesnt fill out the screen like yours does and i get a smaller version of my video surrounded by much more black than yours is, not really sure on how to fix it and im worried that i might break something lol. this software is very cool and i would love to learn more in the future from you, thank you

[@freivonstil]

ou can use a transform top to zoom the video in. If your grid is too small in th render top, you can move the camera closer (z-direction) :)

[@nurhanguney2965]

thank you soooooooooooooo so much and you are so sweet!!!!!!!!!!!!!!

[@spatheitspatheit8846]

great tutorial, thanks for sharing :) if you want to make a follow up - i'd love to see how you programmed the cube - looks great aswell

[@freivonstil]

By cube you mean the installation with the particle field controlled by body movement?

[@spatheitspatheit8846]

@@freivonstil no i meant the subdevided cube from line and phong material, i imagine the other one being quite a long tutorial 😅

[@freivonstil]

@@spatheitspatheit8846 good idea, it's actually not that complicated :) ( i think easier than this one here)

[@visualguerillaFILMs]

DANKE für das ausführliche Tutorial! Kann gerne auch mal ein deutschsprachiges online gehen ;) Keep on rockin'

[@Monja191]

Damn!! 🤩🤩🤩

[@smyrkphace]

I cant believe I found this tut, I literally just used the crazy radio setup to build something similar a few days ago using points. I think this way is much cleaner than what I did! I want to spawn secondary particles off of the cubes, but when I do it they are treated as one block, so the turbulence doesn't treat them as a cloud. Do you think its possible to have the displaced grid vertices spawn points, so we get a sort of trail? cheers!

[@freivonstil]

Can you specify, what you mean? (If you want, you can also send the tox to me ([e-mail]) and i can take a look). For Spawning secondary particles i suggest taking a look into the particles GPU. There you have diffuse particles, i think they can provide, what you're looking for. @noones.img has a really good tutorial for the particles gpu :)

[@smyrkphace]

Hey thanks for the reply, I mean using the geo node points as a source for particles to spawn from. I fail in getting that geo as a source using particles or gpuparticles. it just spawns one point or a line. @@freivonstil

[@freivonstil]

@@smyrkphace I think this isn't possible, since the geo comp doesen't have a geometry out (or at least not an instanced geometry output) - meaning you can't use the Instanced position information out of the geo comp. Maybe there is a workaround, but i don't know of any

[@slumberspeak]

AWESOME tut! I followed to the end and everything was working great! I went to change the Video on "movie file in", but for some reason it's not updating to show the newly linked video? Any ideas?

[@freivonstil]

Thanks :) This should normally work, does it work if you just drag and drop the new video into touchdesigner and then connect that to the network?

[@slumberspeak]

I'm an idiot. mistake is too embarrassing to describe lol. thank you for replying, and again amazing tut! @@freivonstil

[@yashasv.doodles]

Hi! this is a super fine tutorial :D, I do, however, get stuck at the moment when you put in the 'pos' operator into the instancing translate op box. There comes a pop up dialog box stating a Vulcan device error?? and asks me to install my latest graphics driver, which i do have. The pop up mentions that I need to simplify my shader code to express it but instancing shouldn't be an issue? I'm running the 2023 experimental version of TD, is there a reason why I might be experiencing this?

[@freivonstil]

This seems to be a driver issue with some of your internal hardware. It's not an issue in the touchdesigner network. I suggest googeling your vulcan error, there is lots of error discussions on the derivative forums (Touchdesigner community) :)

[@marcdavis4412]

Lieeebs bitte bitte mehr :D Wenn du irgendwann Zeit hast würde ich total gern mit dir über TD schreiben ich kenne auch niemanden der es verwendet x:

[@helloseas]

Hey there ! Thanks for this tutorial, i'm currently trying to put the alpha at zero in 4th tab as you do @18:00 but it's not showing any alpha on my reorder OP, does anyone have a clue about this ? Thanks ! :) Edit : in the Reorder OP, the Common tab wasn't set to the right pixel format (RGBA) thanks again! :)

[@freivonstil]

did you leave the input at "Input 1"?

[@helloseas]

@@freivonstil sure, same as you did :) I’m making some research rn and will let u know if I find something ! Thanks for being reactive

[@thomasneild3224]

great tutorial, so far I have run into 2 problems and cant find a solution anywhere (im a beginner). the movie file in operator has a yellow error icon. Also, my out TOP has a red cross error. Can anyone help with this?

[@freivonstil]

clicking on the operators will show the error. The yellow one just means, that your video sourve is limited to 1280x1280 pixels (maximum in the free version). So it will still work. The other one can't be generalized, its propably some wrong input into the top or something like this :)

[@thomasneild3224]

@@freivonstil thanks for the reply! I have solved the red cross but i'm still not getting anything from the viewer. currently going back through the video again to see if i've missed anything:)

[@thomasneild3224]

i have went through 5 times to try and fix but cant spot anything im doing wrong for the particle system not being visable after render. would be so happy if i could get it to work, can anyone think of ways of troubleshooting this?

[@Monja191]

Great stuff. What if I want to inject ambient sound through a mic instead of using an Audio File In?! TY 😅

[@freivonstil]

Then you use a audio device in and chose your microphone ;)

[@Monja191]

...got it, also needed a math for multiplication power btw the audio device in and the audio analysis 🍺

[@Whatnexttttt]

some how i got Error: All OPs must generate the same number of instances touch dessigner when i get to the instancing part any one help please?

[@freivonstil]

That happens, when the number of instances is inconsistent between operators. You propably dont have the same resolution on all ops. When you use two operators (e.g. one for position and another one for color), they need to have the same resolution. Otherwise the Geo Comp will not render. Thats why i used the Constant chop for a singular resolution, i input into everything ;)

[@0x1E4]

Ich hatte eine Frage, Wie würde ich das alles konvertieren damit es funktioniert auf 16:9 (sagen wir mal 1920x1080)? Falls es nicht geht dann is es auch ok! Aber danke schon mal voraus!

[@freivonstil]

Grid SOP auf eine 16:9 Auflösung (Reihen und Spalten), Video input oder FIT Top auf eine 16:9 Auflösung. Dann steuerst du die X und Y Resolution nicht mehr mit dem "Res" Chop (09:27), sondern manuell. Das einzig Wichtige ist, dass dein Grid, dein position Top und dein Color Top alle die gleiche Auflösung haben :)

[@0x1E4]

@@freivonstil danke ! ❤️❤️

[@cynergy]

Hallo! Bis jetzt ein super Tutorial, aber ich habe Probleme damit, den "bass_AMP" node in den "math2" node zum Multiply-Parameter zu stecken. Es zeigt diesen Fehler: "Error: TypeError: float() argument must be a string or a real number, not 'td.nullCHOP Context: (Parameter: Multiply) (/project1/math2)" Was kann ich tun? Ich benutze übrigens TD 2023.

[@freivonstil]

Hi Synergy, du musst den bass_AMP viewer active machen (mit dem kleinen Plus in der unteren rechten Ecke vom CHOP). Dann ziehst du den Inhalt per drag & drop auf den math 2 OP (CHOP Reference). Du hast den ganzen Operator in den Math OP gezigen, dubrauchst aber nur die (CHOP) Referenz.

[@cynergy]

@@freivonstil Jetzt klappt's! Danke dafür! Übrigens, die deutschen Anleitungen würden mich auch interessieren, da hast du was im Video erwähnt, oder? :)

[@user-vg8nm7su2k]

May I ask why my camera component does not constrain to?

[@freivonstil]

There still is, it's now a dropdown called "parent transform source", there you can chose "specify object" :)

[@user-vg8nm7su2k]

@@freivonstil

[@kotarianter]

Please make tutorial in Russian, and I will give you princese's contact;) have fun, братан.❤