AUDIOREACTIVE PSEUDO-DATA-GRAPH DISPLACEMENT - TOUCHDESIGNER TUTORIAL

[Music]

w hello hello hello this is your captain Panic speaking and welcome to another touch designer

tutorial um this tutorial will be the last tutorial of 2023 so I want to take this as an a

little opportunity to say thank you for all the support through the year um this

year has been quite a lot and um I wasn't able to continue doing tutorials the way I wanted to

um just because the year was a lot and I've been struggling with depression and

being a neurod Divergent person and yeah even though I wanted to continue doing everything like I did before I

wasn't able to um and only in the past few weeks or

months um I got back on track and I am very happy about that and I'm

very happy to yeah to be back and share my stuff because quite means a lot to me and yeah so thank you for

still supporting me and sending me nice messages and everything and I'm really really happy to

see what you come up with following my tutorials and it's it's quite a pleasure to yeah

to be able to do what I do um so to make it short thanks and let's get actually

started um so um yeah as I mentioned before this is the last tutorial of the year which also means this is the last

tutorial of my Merry crisis serious and the serious meant that I made a tutorial every week in

December um following a reference people sent me and for this

one we are actually creating something of my own reference because I

posted this on my Instagram recently and quite a lot of people asked me to record a tutorial for it and at first I don't

want it to because um I am using some of the techniques I am showing in my last tutorial um but in a new and different

way so I made a little survey on Instagram asking if it's too repetitive to use

some techniques I've shown before in new ways and the majority of people said nope please record it

so um on public demand I am recording this um yeah so actually what we can see here in the background is some

pseudo data graph or line and some plops and some texts which follows this and the whole

line This places um the image or video in the background yeah and everything

is audio reactive um so the line so actually you can't really hear it right now now it might be too

loud but the line Moves In following the audio file um yes so for this tutorial we will cover the um

audio component and we will cover the lines and how you can and make those lines

look different or move more different or make them more messy or or whatever

simple so you can use this in in quite different ways um then we will track text on the lines make those little dots follow the lines as

well and then we will make the displacement and then merge everything into the whole artwork

so yes let's get started and I will see you on my screen all right welcome on my

screen and now let's let's get started so um the first thing we want to

do is is to create our audio setup so first of all we need to bring

in our audio file in and then to be able to actually hear it let's bring in an audio device out

[Music] and now um I will turn this off again because it just distracts me from

from recording but you keep this on and yeah here is the default touch designer sound loaded in if you want to change it just hit this and then change

the sound um yeah all right then I will

create a math and I don't want this to be stereo I want want both of the channels

combined so for this I am going with combine channels and I will do it with

average and after this we will create an

analyze and for this I'm going with maximum I don't want everything analyzed only the

maximum you could also use RMS power I just think that the maximum works works better for me

[Music] and then after this we create a little filter because right now it's a little bit too nervous and too too heavy so we

bring in a filter and we change the filter width to something like 0.2 to

um and yeah that's also something you can play with um later because it's it it kind of influences the video it makes

the movement more smooth or yeah more nervous and then after this we bring in a

speed and we keep everything on default for this and yes that's cool

um also I want to mentioned that I built this little setup based on something I learned from electron

not um so make sure to check his audioactive stuff as well because he goes much more into detail why to do

which operator and I'm just using the ones that I found useful and created this um okay so now let's have a look at

how to use this actually so now we want to make a constant um and as always we're using

this constant to use it as a reference for our resolution we will use later and then also I will make a little

component a channel called speed and I will export this

here and then I will also make one channel for which I will call intersections

oops which will be um the intersections of our line our graph we will use later and then that's head down here so

we only need this constant later and don't have to add back over here okay so now let's make a

noise and this noise will be the base for our line later so the first changes we will have

to make for this noise is turn off monochrome then in the trans PR tab we will use this speed as a translate on

the set axis so just make this speed active and drag it in here chop the reference and then we will connect this to a null which we will make visible in

the background so if you have your sound on you will get that the movement has the

same speed as our sound um okay um now for this

noise we need to set the resolution but instead of using this resolution we use the intersections so make sure you don't confuse this chop the reference here

because this resolution will only be used in our render setup which will be the resolution of our

artwork in the end and this intersections will be the resolution

for our setup which we then render so

make sure to not confuse this okay so um now it is a little bit hard to imagine

what this will look as a line so the first thing we will do is make our line so we can actually see what's happen happening and to do that

we will use this null and convert it to a chop so drag this null into a top

two chop and now you can see our different values for r g and B and for our setup

we only use r& G so you could also use pixel form it RG here um yeah let's actually do

this or nope let's not do this let's just do it like this it it really doesn't matter and it gives us more ways to manipulate this image to have all of

the channels so make sure to use 32-bit float for this

noise okay and then we need to make this chop into a soap and we will

use the R and G as some coordinates for the X and the Y AIS so in the soop use the chop

to and then drag the chop into it and now we need to change it from TX Ty y TZ to R and G and since we only have two

channels we don't need three attributes so we can delete the last one and now you can actually see our line so this line is based on this noise so

maybe drag it over here so can see it a little bit bit better and now um let's have a look what the things

do so if we set up the period our line gets much more round and smooth

and if we turn up the harmonics it will intersect a little bit more crazy I think so if you turn this

down you have less movement in the intersections if you turn it up you have more movement in every intersection

um also if you turn down the amplitude gets more smooth if you turn it up nothing really happens yeah I think the amplitude

doesn't really matter so let's keep it on 0.5 because it just moves our whole thing on the set axis and moves it far away or closer so the

amplitude and the offset aren't really that important for this so it's more interesting to play with the period and the harmonics for this also the exponent

is quite interesting because it gives it a lot more of a different look so if you want

to play around with the exponent feel free to do so um okay um now let's have a look at another

thing which is quite interesting to manipulate this line which is a limit so let's bring in a

limit after this um this noise and let's have a look at what this does so in the first um parameter tab we don't want to change anything so head

over into the quantise and when we quantise the values of our

color um we get this really interesting geometric look onto our line so the smaller our steps are

um the smaller our geometric intersections get and the bigger we get the bigger the step is and that's

because um we are doing some sort of pixelation on here so the steps from each value are getting bigger so just

like a I don't know a staircase and first you have really little stairs and here the stairs are getting bigger so if

we make this you can you can see what's happening um and that's what's also happening here so the bigger this value

step gets the bigger our steps get which is the same thing I just said um yeah so quite

interesting um um and let's turn it off again and let's have a look at the quanti position which is also quite interesting because by doing

that um we are getting this kind of look um which also plays with the

intersections of our um of our line so the higher our position step gets the less intersections we get and this is a

quite quite good way to get less intersections we could also of course turn down the intersections here but

this um would cause our set up to be less controllable so in case we

want this to be kind of slow we could do it like this but but then if you want to to make any changes to this it also makes the

changes to to the speed um so I decided to go to leave the intersections quite high and then use

this position step to make this um nicer to to manipulate so I think that's easier but

do whatever you like um okay so let's turn this off again for now and let's bring in some some harmonics to make the line more

interesting make this an eveneven number because I am I really hate uneven numbers

um and yeah let's actually render this so connect this chop 2 to an

know and then connect it into a geometry make a camera and then to have this camera

really centered and so it's in the end we can track our numbers easily we need to change this camera from a perspective

camera to a autographic camera then change the auto width to one and change this to bottom left because when we leave it on Center it

just centers on our coordinate system and as you can see our um our graph is only in the

positive values therefore we don't need the negative coordinate system and therefore we need our Center

Point to be the bottom left and not the center so change this bottom left and

then we are sent centered um okay so now let's make a render and for this render we need to

change our resolution to our resolution we have here so this is our render resolution so use

this and then connect this to a null and now let's make this n visible in the background and turn off our noise here so now you can already see we have our

line visible in the background and since it's quite hard to see we need to make a material and I am

using a line material and now let's drag this on here par material and

now we have our line as our material and now um I want to make some changes to the

material so so now I'm changing the width now near and far because we have a TOD line we don't need near and

far and also I want this line to be plain and white so change both of those while use and

yes looks good and now um I want this to be a little bit more more

edgy so let's turn down the intersections to to 50 or maybe even to something like 25 yeah that's

cool and now um because if we go down with the intersections we can see a little bit better where where

the intersections are because I want tiny little dots on every intersection and to do that we will just

copy this whole thing so the go the line and the render so copy this and then let's leave this online and let's call this points so we

can um see the difference a little bit better and then in this point setup turn down the draw lines and head into the

points and draw points and like this we get our points wherever our intersections are and now

we also need to change the geometries in the render so this will be our line render so here drag in the

geometry one and in our second second one we call this points oops OB um don't delete this just keep it

call it points okay and then in the render drag in the

do2 and then we also need to change the pixel format of both renders so take them both change the pixel format 32-bit float

and then in our points because right now our points are quite small you can barely see them let's bring this up to this multiplier up to five to make them bigger and

then comp them together with operation mode over and now you can see we get

tiny little dots on every intersection cool and amazing um so

now we want some more data because we are drawn to science we need numbers to be scientists

um so let's make some text follow our little dots and

lines and to do that we need our top two again so make a little select connect this to our select then

let's head over here and now we need to um select our R our

G and then everyone to to get our our text also out of this graph so let's copy this select three times or two

times so we have it three times and in the first one we only take the r in the

second one we only take the G and in the third one we take everyone [Music]

and then we make um a math after this

R and for this multiply because right now we are still going with the resolution of those 25 intersections and

we need this to be the same resolution as our render setup because our text is based on our render resolution so to do

that we will have to multiply it by our resolution so here head over here again and then make this active and Export our resolution on our

multiply and for our G we need to do the same so just copy this and then drag it in

here and then for this one we will make a new math

and basically this is this is just some pseudo stuff I'm doing because I just want something to generate some numbers

which are based on our stuff so I just decided to um add this RG and B together

so it's like a I don't know a number that represents the addition of all our

channels which is basically some overdramatic um data

BS but I don't really care I just want this to look cool so I'm sorry if you want this to be a little bit more

scientific then I'm I'm not the right person for you um I am a visual artist I just like stuff to look pretty and

there's nothing wrong about things just looking pretty for the sake of prettiness

because personally pretty things give me a lot of joy and joy is a great

thing uh okay um enough philosophy let's continue and now we need to merge all of those together so make a merge and now

make sure that you connect them in the right order so RG and then R1 um because it makes us makes this

whole thing easier to rename so after this make a rename and then you don't have to select every channel and rename it one by one

so you can just type in x y and text because the r will be our x coordinates the G will be our Y

coordinates and this is just our text fantasy um okay so now we need to make

this channel into a DAT so in the DAT select the chop two and then drag it in

include the names and then after this you can make text

and for this text make sure to use the right resolution which is our render resolution so chop the reference

here and then for our specification that we use this so drag it in and now you can

see our value mapped on our dots so right now the the font is a little bit too big so change def font size to 12 or

something like this then let's make a select again and drag it oops over here drag it in and

now you can see that our text is on our dots um

personally I don't like this and I want this to be have a little bit of offset so so I'm bringing in the transform

after our text select and just moving it over a tiny bit so it's

not too much on the pond so yep looks cool and yeah now we have our

line and now we will create our displacement based on that line but for a displacement we don't want the numbers to be in so

I'm just copying this comp and in one comp I will delete the text which I will connect to the background then but I will still keep

this because we will use this as a select later to Overlay it again um but yeah let's create our little

feedback so after this the first thing I want to do because right now the line is very sharp and I want our displacement to be a little bit softer so I'm bringing in a

blur after this and I will keep it on the default settings for

now and then after this I make a comp then I make a feedback which I will connect to a

blur and give us some more space then I will make a level and then let's connect this again change the operation mode to

over and then use this as the target layer so what all of those operators do is when we turn this off

again you can see that our lines stay quite sharp and I want them to

turn blurry from time to time so what this blur does is that it adds a blur with a filter size of seven

every step and yes so on the second on the first step

it has a filter size of seven and then on the second step it adds seven on the already applied seven again so it gets

gets blurry more blurry with every step and the same thing is what the level does so

if we take an opacity of 0.99 the opacity gets less with every

step um and therefore we dis make our line disappear here from step to step um I hope that makes sense and also I want

to be able to reset my feedback quickly so I could just hit pulse here every time but this is a little bit annoying because then I have to head back into the feedback every time so let's make a

keyboard in and connect this here so every time I hit one on the keyboard it just resets

our feedback cool and yeah basically this is the map we will use for our

displacement but in my taste our line is a little bit too fast and I want it to be a little bit smoother and less

nervous so we will slow down our line and to do that we added this math because in our sound setup in the

beginning so let's head back here and when we turn down the multiplier here to something like 0.5

which is half the speed it gets slower and therefore it follows our sound a little bit slower and the effect is less

visible but still visible I think um so I yeah I turned this down but you can just keep it as fast as you like um but

yeah I slowed it down and yeah okay so now we need to bring in

our image we want to displace and therefore I am just using my

flower so these are just some flowers I rendered in Cinema 4D which I'm now

using to manipulate into my artworks um so yeah I'm using this and now for making it visible a little a little

bit better I will connect this to the background now and now I will make some changes to it so for example this is a

different resolution than this one we're using so let's make a after this and we are going to use our render

resolution here again and then I will change this to fit outside and also I want the same pixel

format as our render so change this to 32-bit float okay um so now I want to add a little

bit of movement to this image so I'm adding a displace after this and then I want to displace

this with the same noise which generates our line so let's copy this noise and paste it over

here and now let's also change the resolution to our render resolution here so change this and now let's connect it to the displays

and turn down the displays weight to I don't know something like 0.01 maybe I think this is quite

nice maybe can be a little bit heavier maybe like this and yes looks cool um now I'm

adding some time displacement to make this flower even more distorted before we displace it again with our line so in

my case I went with a texture 3D which I left on default and then I added a time

machine and then I used this one as the second input and I want the offsets to be in frames so I can control it a little bit

better and I decided to have a offset of 2 seconds which in my case is 120 frames because I'm going with 60 frames per

second and then you can already see a little bit of the displacement but I wanted to be even more

visible so in between here I added another noise and made this both of the

inputs and then in the output I changed it to noise and now you can see what it does um it just

adds a little bit of this kind of liquid displacement so you can play

around with the parameters a little bit here um but in my case I will just leave it on default for now maybe turn up the

harmonics a little bit um and maybe maybe do it like this but it really doesn't matter it

just is up to you how you want it to look like um okay now let's give us some

more space here and now let's displace this with um this so make a select I I'm using a lot of selects because it

usually keeps my uh my networks a little bit more organized so I I usually have different

sections for everything I do because I can think better like this so I'm I'm using a lot of select um yeah and now let's add a

displacement after this and use this one as the second input and then turn this down again to yeah maybe

0.07 looks good to me um and also I want to have a little bit of offset weight because I don't want

this lines to be here we could set it to mirror but I also don't want it to be mirrored so you can just I don't know

find the right number but I found out that it usually works quite well if you have the display weight doubled at as

your offset weight so if you just copy this parameter here paste it here and then multiply it with two it usually

works quite good I think um so I'm going with this um but you can also just yeah play

around okay um so now if we want this to be less displac actually cuz I think it's a little bit too heavy now let's make it

0.05 um yeah now we have our displacement going on and now I [Music]

am doing some post stuff to make this look cooler and more abstract so let's bring in some colors and the background and everything and of course um if you are

using an image that already has a background this doesn't really matter to you I am using a PNG without anything in the

background so obviously I will add a background and in my case I am just using a noise

um which I will then make this one the first input and change the output to noise because I just want to use this one as a reference for the resolution

and then I would turn down the harmonics to maybe one or the period to 12 um which gives me this quite big

um ramp or gradient which is a little bit organic through its natural I don't know thing and then

I want to displace this noise with the same thing here so let's add a

displays and let's bring this one in here and now let's turn down or maybe let's delete this again and just copy this displace because we

already made some settings here and let's just connect this F first so this one gets displaced

and now I will just connect this to another noise Make both inputs change the output to noise and then in here I'm

also going quite high with the period and bring in some color and now I will just make a comp

here make it to over and now I have my background like I have my colorful noise in the background and then I am

just messing around with this until I find a color that I like then I want it to be a little bit brighter so I changed the offset to something bigger

make it less saturated turn down the amplitude and yeah basically I won't go too deep into detail about this because I

just want to have some some color in the background but this is so specific for my setup here so if we turn this up

basically we get more Distortion in our background which looks kind of cool but I won't go too deep into detail about

this because it's so specific for my own image and everything but I just wanted to show how

I do it and that's also the same for my for my flower here so usually I am just

adding a noise wow the voice crack um I noise here I don't know change it to something

colorful and then use an insight as a mask

here and then play around here until I find a color that I really like um and then yeah mess around with it

until I think the colors look nice so that's um yeah that's my color setup um I don't really know what's happening to my PC

and why my frame rate sucks like this um maybe it's because I'm recording on my laptop um so

sorry about that um okay um but let's continue um finding a tracking on our lines on this again um

so um we have our displacement going on and now we want to bring in our data we created here so let's make another

select make this one the target for the select bring it over here and then make a

comp and comp this over our thing and now you can see we have

our displacement following our graph and now we want to be able to customize the color of this um this

lines because right now they are plain and white and and for example you want those lines to be blue and for this sake I'm just using a

constant keep everything on default except for the color so if we change the color to green or blue it just multiplies a color

onto our white and therefore you can yeah change the color whenever you like and very

quickly um which is cool and now in our setup we've seen before we also have some blob tracking

going on on our image and in this case I want to track the movement of the displacement within our plop

tracking and to do that um we give us some space here again because we need the blobs before our lines come in here

so let's make a blob track

just throw it in here and now we need to find the top which

is not displaced by our line already so let's head over here which is right before this displays which is our time

machine here and make a select and take this one and then we use this select there

the second input for our plop track and then let's use this one as the first so let's connect this to our comp

here and now you can see that whenever we display something the tracks the plops are

somewhere in that area um because here we don't have the displacement here we have the displacement and the plops find the difference in between this image and

this image which is in this case the this placement um yeah so you can play around

with um I don't know the threshold here um and find something you like also change

the plop color to a color you like I will make this blue yeah this is cool and then I want the blobs to be a little bit smaller as well so I change the

minimum blop size to 0.01 which gives us more blobs in this case and also detects smaller changes I

will also make the max plop size a little bit bit bigger and I will go with a threshold by maybe 0.5 and now and that's something I have

shown in my last tutorial as well we want to bring in the text on our blobs and we will do that just like we did it before with our

lines but in this case we have to use the coordinates from our blobs and to know what the coordinates are we need to have a look

at this um data from our blob tracks to make this visible hit this arrow in the blob track

so you get this St and to know our coordinates we need the U and the V and to have the ID of The Blob which is the number of The

Blob this will be our text just like this is our text here so make a select that here drag it

in um because we don't need every aspect of this this St we only need ID u and v um so you can head in

here and select all rows so this keeps on default and for the columns because we only need columns

we select by name and our first column is the ID and our last is the V so do it like this and at this

point shout out to the person who commented on my last tutorial telling me this because I I messed around with it

so now I know start and end ID u and v and yes now give us some space here again make another

section um now we need some channels out of this St so make a DE to

channel track this in P that and now it it gives us a channel per row we need to change this to channel per

column and the first row is the name here zero row zero is the name and the First Column is also a channel so we

need to change this from First Column is names to values and by doing that we have ID u and v

cool um now we need three selects again so make three of them because we

need to separate the ad the U and the V or actually we only need two because the

U and the V can be combined in one um since we use a square resolution so in case you're using a 16 to9 resolution you need to separately select them but

to do that have a look at my last tutorial um yes um okay I will also link this in

the description so first of all drag this in here and on here and for this we change it to u and v to use on u and v

and for this we change it to ID and then after this just like we did before we make a math and

multiply this one with our resolution just like we did before and then

after this we make a merge bring this and this together make a rename after

it and rename it to x y and text cool and now just like before we

need to convert this to a de again so make a chop to De drag this in include this

names make a text top after this bring the specification de

in change the font size to 12 just as before and then change the resolution to our render resolution

again chop reference and then we have our numbers on our blobs so now make a select top again drag it

in drag this over here to keep our Network organized and now let's make another comp in the

end change this one to over bring this on top and now we have numbers on our blobs um now we have a different color

here and that's because our blobs are blue and change the color just like before make a constant after this and

change the color to blue or whatever you like and now we finished

our setup um I hope your frame rate doesn't suck like mine does

um and now feel free to play around with this so you could for example change the harmonics here to

make the line more diffused and crazy um or change the exponent to make it like this

standard I don't know coordinate system and for this you could also go up with the amplitude because it's scales this up again um I think this is a quite cool

look actually I really enjoy this um or yeah play around with this limit to give yeah you have some more

geometric displacement uh yeah just everything mess around with everything I think this is the best way to survive inside of

touch designer um yeah that's the end of this

tutorial that's the end of this year so therefore I uh I hope everyone had a

year that was okay and I hope everyone is doing okay and

yeah thank you for this year and I am already looking forward to continue next year and for now

Happy New Year I am very proud you're still here and creating stuff with me uh

thank you and you're cool stay creative stay kind see you next year goodbye