A Beginners Guide to Feedback Loops - TouchDesigner Tutorial
Have you ever been at a gig when the sound of the microphone rings and grows ever louder to the point of unbearable sound. This is feedback, and it very much applies to visuals, especially node based animations as the visual code wireframe set up allows us to create these loops, and create these feedback effects. Today I will be letting you in on a trusted staple of TouchDesigner, feedback loops.
Feedback in TouchDesigner can seem a little confusing at first, however once you get the basic concept, it does open up a wide range of possibilities for exploration. I do believe this is a fundamental lesson, as it can lead to some really interesting and dynamic visual effects, which is why I am covering this quite early on in my educational series.
What is feedback?
Feedback is a recursive infinite loop for creating generative art, in the case specifically in TouchDesigner.
How does Feedback work in TouchDesigner?
In basic terms, you have a source animation that is linked to a feedback operator, then you overlay the feedback and animation together using a composite operator. The feedback effect occurs when you send the composite information back into the feedback operator, which will generate the recursive loop.
It all looks easy enough, so let’s have a go!
Feedback Loop Tutorial
Start by pressing Tab and in the TOP menu, insert a circle TOP. Then click on the Common tab on your parameters panel, and set the resolution to 1280x720 pixels. Whilst still on the parameters panel, head over to the Circle tab and set the size of the circle to 0.03 by 0.03, to reduce the size of the circle.
Now lets add constant TOP to create a black background by setting all 3 RGB values to 0.
We can now composite these two TOPs together using Over TOP. We could also use a Composite TOP in this situation by setting the blend value to over, and ensuring the inputs are in the correct order, however for speed and accessibility, the Over TOP is perfect for this situation.
Now that we have our dot or ball in the frame with a picture, let's set the data for our mouse to control the position of the ball.
Let’s go ahead and add a MouseIn CHOP, and then copy and paste it, so you have two MouseIn CHOPs. If we had a square resolution for example 1280x1280 pixels, then we could suffice with just one MouseIn CHOP, however we are using a rectangular resolution, so the reason for using two will be clearer shortly. We will start by building with just one MouseIn CHOP to illustrate this.
In the MouseIn1 CHOPs parameter panel, notice the tx and ty positions, these will give you the x and y parameters that your mouse is tracking in 2D.
We want to be able to control and dial in these parameters, to do this add a Math CHOP and in the Range tab, set your From Range to 0 and 0.9, and then leave the To Range values to 0 and 1. Then click Alt-N to create a Null CHOP.
We can now reference this mouse data by clicking the Viewer Active button on the bottom right of the Null CHOP, then click on the Circle TOP, as we are wanting this to react with the mouse control. You can drag the Null TOP tx parameter into the Center x and selecting CHOP Reference, repeat this with the ty parameter for y of the Center controls for the Circle.
Let's have a look at what this is doing. Click on the Comp TOP and add a Null TOP and put this somewhere further down the right to give yourself space to add more operators. We can rename this “bg” and set it as our background by pressing the first small dot in the bottom right of the background node.
Notice how we can drag around the circle and it works well on the x axis, but doesn’t quite meet the bottom and top of the resolution for the y axis. This is why we have included a second MouseIn TOP to allow us to make modifications to the Math CHOP to make these adjustments to suit the height resolution.
For both MouseIn CHOPs go ahead and delete tx from the MouseIn2 CHOP, so you are left with just the y axis.
Add a Math and Null CHOP just like we did before, however set the Math From Range to 0 and 0.9, and the To Range to 0 and 2. Now go ahead and replace the y value of the Center in the in the Circle parameters to the MouseIn2 ty CHOP reference.
Great! Now that is set up, go to the Over TOP and add a Feedback TOP.
Then add a Comp TOP that links to both the Feedback and Over TOP, and set this to Add. Then to create the feedback loop, grab the Comp TOP and drag it on the Feedback TOP, so that there should be a dotted link now showing. This should create a trail on the end of the circle as you are dragging around. This loop is infinite as it is recursively referencing or repeating itself as you are moving around. We want to create fade for this for a stylistic look.
To do this, add Level TOP between the Feedback and Comp TOP, and also add a Blur TOP. On the Post tab of the Level TOP set the Opacity to 0.98, and on the Blur TOP set the Filter size to 16.
To get the colours to change as I showed, click back to the Circle TOP and reference the Mouse x and y channels to the R G B in the Filter Color section. This will allow the colour values to change as you move around.
See, we have created this effect already, see how easy this was!
Final Thoughts?
Although this setup uses CHOPs to take the data from the movement of a mouse, you can however use a number of different methods to move the ball around, such as Noise CHOPs or LFOs, the options are limitless! However the mouse option is very playful and I think it is a fun tool to use, as it encourages interactive and immersive play of the visual code in realtime. This is something we are very keen on exploring here at Cyanea Studio, as we aim to encourage immersive engagement in the visual art to encourage human connection to others using new media technologies.
Make sure to subscribe to our newsletter, so you can keep updated with more educational content and projects in the future!
