Today’s lesson will focus on the possibility to merge together multiple files, created in the past weeks, and create a more complex file that includes multiple visuals. The UI is designed to enable users to selecting examples by simply clicking on their preview.
Let’s start by opening the file 02_FEEDBACK_LOOP_LAYOUT.toe and extract one by one the different containers which includes the different feedback loop. We might need to make some changes in order to assign a new container to the Panel CHOP, so that we can interact with multiple visuals from the same container which is visualizing the final result.
So let’s create the container first which will be placed in the middle of the /project1 layout. From there we can then use the Panel CHOP operator and feed it inside each different visual.
To create an inlet for each visual / container we can go inside the Container COMP and add an In CHOP, in this way all the channels will enter inside the example visual and we have to select the channels “u”, “v” and “select” in order to control each different visual from the same Panel CHOP.
In the same way we need to output the visual TOP outside the Container COMP. To do so we can use a TOP operator called Out TOP.
Each individual visual goes out of the container and enters in a Switch TOP. The switch will enable us to switch between different index and let pass the selected visual.
To switch the index we will use some simple python expression and use a Chopexec DAT to run the script. The trigger that is going to change the index of the Switch TOP is the channel select coming from the Panel CHOP of the visual’s preview.
The simple script op(“/project1/switch1”).par.index = 0 can be added inside the def function included in the Chopexec DAT script.
This method enables users to act on the same parameter from multiple position, this is one of the values of using python scripts to edit values inside an operator’s parameters.
We have already positioned each single visual container inside the bigger /project1 layout and we used the method in python “Copy Parameter” and then “Paste Reference”.
Let’s now use another button with a simple script to act on the parameter Display of the COMP Container named “visual1”.
Let’s see no a more advanced python script to shorten our previous series of commands. So instead of typing for each container a new line of command, like:
op(“visual1”).par.display = 1
op(“visual2”).par.display = 1
op(“visual3”).par.display = 1
etc…
We could type a “for loop” which starts by defining an array of numbers and then you can apply that array to a unique command, with f-string:
for i in range(1, 9):
op(f”visual{i}”).par.display = 0
or more simply in this way:
for i in range(1, 9):
op(“visual” + str(i)).par.display = 0
Another value that comes from using python is that you can list a series of changes you want to obtain after clicking on the button and have them group as a “preset”.
For example we can create a Toggle button to Maximise the window dimension and position. We first need to understand manually which are the values needed.
Something else we can do in order to have an eye on the incoming music channels, is to visualize the CHOP that receives the audio input and show it in the control monitor by using an OPViewer COMP.
Just position it and enable the borders to be visible by selecting Border A for each side of the COMP.
Last but not least I’ll show you how you can build you own UI modules that you can use over and over in multiple files. We can create a container COMP and layout some sliders and buttons so that you can use it as single block of controls, get inspired by its structure and develop your own UI controls.
Inside this container there are many sliders and each of them is funneling inside a Merge CHOP that creates a list of channels and through an Out CHOP brings them one level above.
As final result we have a fully functional interactive system able to switch from a visual to another and you can now take your time to create some more changes by using those new sliders and buttons we just created.
This is the most complex file we built together and is also thanks to you that we could arrive to such a great result in only 12 online meetings, a beginner course that started from knowing nothing about Touchdesigner that brought you now here, understanding how to create complex interactive systems.
Thank you and see you soon online!
To get support outside of the live session, please join our discord server with this invite:
https://discord.gg/F7cXRMYUK7