top of page

Exclusive Touchdesigner tutorial

Writer: acrylicode berlin
acrylicode berlin
Nov 6, 2021
3 min read

Updated: Jul 23, 2023

Hi, we are Acrylicode, a Berlin-based couple making generative art and enjoying the journey. We created this exclusive tutorial for generativehut and we hope you like it.


You will learn how to create this:


Enjoy! If you liked this tutorial, please consider subscribing to our Youtube channel and following us on Instagram to support us.


We will first introduce the steps and then we will show them in the video tutorial below.


We will create this animation with TouchDesigner. TouchDesigner is a node-based visual programming language for real-time interactive multimedia content. There is a free license and the software is free to download. You can achieve this tutorial with the free license. You can download it from here.


1. The main idea of the project starts with creating a line SOP (surface operator). In the parameter window, we are going to set the number of points to 600, point A to -6, and point B to 6, so that we have a long line stretching horizontally through the whole render screen.


2. From here we will pass the line SOP to CHOP. We do this because some transformations are easier done on CHOPs and so we are able to deform the line in the y-Axis to achieve the effect of a noisy line. We are going to do the transformations in between and afterwards convert it to SOPs again.


3. After the CHOP TO operator add a geometry, a camera and lights. Connect all three to a render and the render to the Out.


4. At this point we will get a warning in the render. This can be easily fixed by adding a Constant Material. Once we add the Material we drag and drop it onto the Geometry and select Parameter Material. From now we are able to see the line on the render screen.


5. Here we are going to change the background color to black by creating a transform right before the Out. In the parameter window, set the alpha parameter to 1 and turn on Comp Over Background Color.


6. Create a Noise CHOP and in the parameter window change the channel name to ’ty’ (the transformation in the y-Axis). Add a Replace CHOP and connect it to the Noise. This will immediately transform the line to a noisy line.


7. Before the Out, add a Feedback TOP, a Transform TOP and a Composite TOP. On the parameter window of the Composite we’re going to set the operation to ‘add’. Drag and Drop the Composite to the Feedback to automatically set the Target Top to Composite. On the parameter window of the Transform we lower the scale and increase the Translate y value.


8. After the Noise TOP, create a Math Top and connect it to the Noise. In the Math parameter window go to Multi-Add and we’re going to set the Pre-Add to -0,5.


9. For the last step we’re going to animate the noise. We’re going to click on the Noise Node and in the parameter window, we’re going to click on Transform and set the Translate z parameter to ‘absTime.seconds * 10’.


And these were all the steps to achieve the animation. Render away and improvise with the values and colors to have different variations. For more go watch our over an hour long techno mix with a sound reactive version of this animation here: https://www.youtube.com/watch?v=cuWHHNhlfk8&t=961s





You can contact us via Instagram DM or just leave a comment in our most recent Youtube video, we appreciate any feedback, suggestions, etc.


Don't forget to check out our previous tutorial for Generative Hut here.


50 Comments


Hindi world
Oct 29

Many everyday government tasks now involve checking information or completing steps online. Exploring Government Service Portals can help citizens discover relevant resources and identify official websites for their particular administrative requirements.

Like

Hindi world
Oct 28

I found the UP Bhu Naksha article helpful for understanding online land maps. The explanation is simple and organized. It provides useful background for readers who want to explore digital mapping services and related property information.

Like

Hindi world
Oct 28

The Uidai information is presented in an accessible manner. I appreciate the clear structure and simple English. It is a helpful introduction for readers who want to learn about Aadhaar services and locate trustworthy information online.

Like

linkedin
Oct 12

The step where you convert the line SOP to CHOP and back is a nice way to handle the y-axis deformation. I wonder if the same logic could be used for other shapes beyond a simple line.

Like

Genie Para
Oct 12

Great tutorial. Using the Feedback TOP with the Composite set to add is a neat way to get that glowing trail effect from a simple noisy line. I'm curious to try animating the noise with absTime and tweaking the colors. esimx travel data

Like

©2023 by Generative Hut.

bottom of page