TouchDesigner POPs Tutorial: Sweep Text using Particles

Welcome to the Superfast Touch Designer tutorial series. In this tutorial, we're

tutorial series. In this tutorial, we're going to learn how to create a particle transition using any text. To achieve

this, we'll rely on simple particle system techniques made possible by the new pop family in Touch Designer. What I

want to emphasize is that I'll explain the simplest approach I've found to solve this type of effect so that you can take these ideas further and develop your own variations. With that said, let's do a quick review of what we'll

cover. Chapter one, overview. Before we

cover. Chapter one, overview. Before we

begin, let's take a look at how this network is structured. This network is divided into four main sections. At the

top, we have the control section where we'll create a keyboard in to reset the particles whenever we want to test something or change a parameter. We'll

also add a slider that will control the overall behavior of the particle transition. In the texttop section,

transition. In the texttop section, we'll create a simple logic to send text into the pop universe, converting it from an image texture into points that we can then use as particle emitters.

The particle system section will focus on using the new particle system pop, a high performance operator that lets us build basic particle systems extremely efficiently. Here we'll make our text

efficiently. Here we'll make our text act as the emitter for the system.

Finally, in the render section, we'll use a PBR material and a single light to add depth with shadows. In the

post-process area, we'll use screen space ambient occlusion to enhance the visual depth even more. All right, with that overview done, let's jump into the actual tutorial. A quick pause. If we

actual tutorial. A quick pause. If we

haven't met yet, I'm Okamir Rufu and my life's purpose is to create, inspire, and educate through my work as a creative technologist focused on touch designer. I'm jumping in just for a

designer. I'm jumping in just for a moment to let you know that I've built a growing community on school where you'll find beginner and intermediate courses, exclusive tutorials, and a library of

downloadable project files, including special bundles you won't find anywhere else. But more than that, it's an

else. But more than that, it's an active, thriving space. For example, in one of the exclusive tutorials I uploaded recently, there are already tons of people interacting, sharing

project files, asking questions, and helping each other. It goes far beyond a traditional academic setting. I've put a lot of energy into making it practical, efficient, and fun. And the best part,

this space is slowly integrating all the value I've already built on Patreon, all in one place for the same price. I truly

hope to see you there sharing knowledge, experimenting together, and asking the questions that help us all grow. I'll

leave all the links in the description.

Chapter 2, network. We'll start by creating the chop operators for the control section. First, create a

control section. First, create a keyboard in and leave all parameters as default.

Next, create a slider. If this is your first time using it, you can find it under the coom category.

After creating the slider, connect a math operator to it.

Leave this first math operator with default values. Now duplicate this math

default values. Now duplicate this math operator twice.

In the first and second math operators, keep the from range as 0 to one. For the

second math, set the two range to 2 to 50.

For the third one, set it to 0 to 360.

We'll reference these values later. I'll

explain what each one is for when we use them. Finally, activate the viewer on

them. Finally, activate the viewer on the slider so you have it visible while working.

Next, let's create the text to os section. Start with a texttop and work

section. Start with a texttop and work with your project's resolution. In my

case, since I always record tutorials in vertical format, I'll use 720x 1,280.

Use this same resolution for the rest of the operators in this section when it's necessary. Write any text you like. I'll

necessary. Write any text you like. I'll

use the one already in my project file.

Enable word wrap.

Then in the font options, select bold if your font allows it and set the font size to 100.

Adjust the horizontal align to left.

And if your text gets cut off, lower the font size. Let's try 80.

font size. Let's try 80.

Now everything looks well aligned to the left. So move the text position about 20

left. So move the text position about 20 pixels to the right.

Create a top to pop followed by a transform and then a delete operator.

The first one top to pop should be left as is. The transform is used to align

as is. The transform is used to align the mesh to the Y-axis. Move the X position by 0.5 to the right.

Now use the delete operator to remove the black background that the top to pop generates by default. This step is important because otherwise it will create thousands or even millions of

unnecessary points. Go to attribute,

unnecessary points. Go to attribute, select color, and set the threshold to 0.01.

This removes all the black background.

Now you should see a mesh made from your text.

Keep in mind that this method can work not only with text, but also with images, videos, webcam inputs, or any texture you can imagine. Once everything

is ready, connect a particle pop to this network.

Set maximum particles to 100,000 and reference that same value in the birth rate parameter.

You can leave life variance at one and change random seed to 10.

At this point, no further adjustments are needed. Now, let's connect our

are needed. Now, let's connect our controllers. Start by referencing the

controllers. Start by referencing the output of the keyboard in which by default corresponds to key1 and link it to the initialize and start parameters of the particle operator.

Next, reference the second math, the one with the range from 2 to 50 to the speed parameter of the particles.

Connect a group pop and in the attributes tab select P 0 which corresponds to the X-axis coordinates.

Now reference the first math to this parameter. This will control which

parameter. This will control which portion of the particles will be activated based on their X-axis position.

If you move the slider right now, you won't see anything yet.

For that, we need one more operator.

Create a noise followed by a null. You

can name this null end.

Reference this end inside the particle pop in the corresponding input parameter.

Now the noise is creating feedback along with the particle positions. Inside the

noise, select the name of the group we created earlier, which by default is group one.

As you can see, when moving the slider, the noise only affects the points belonging to that group.

Because the group is selecting points based on the slider values, we get a sweeping effect. Personally, I prefer

sweeping effect. Personally, I prefer the sweep from right to left. So, I'll

activate invert.

Now, let's fine-tune the noise. Set

harmonic gain to 0.5 and amplitude to 0.005. 005.

0.005. 005.

Finally, animate the noise using abs time seconds divided by 15.

Everything should be working nicely now.

Every time you move the slider, particles are activated from their origin, influenced by the noise movement, and then return.

We're controlling the particle speed with the slider, which can be done in different ways, but this is the fastest method for now. Let's move on to the render section. Connect a random to this

render section. Connect a random to this null.

We'll use it to generate random rotation movement for the boxes we'll create later with a copy. Set random size and parameter size to three.

and reference the last math the one from 0 to 360 in the value B field.

Name the output rotation.

Now create a box separately.

Use a small uniform scale of 0.008.

Connect a copy and plug the random into the second input.

In the template section of the copy, enable template rotate and select the parameter we just created.

As you can see, our particles are now tiny boxes, giving the system a greater sense of depth. Connect everything to a geo. Create a PBR material and drag it

geo. Create a PBR material and drag it inside the geo.

Add a camera, a light, and a render top.

Set the render top to match our project resolution and switch the background color to black.

Create a select at the end to visualize the output.

At first, you'll only see black until we complete the render setup. Set the

camera to orthographic projection and the ortho width to one.

Lower the metallic value in the PBR material to make the text more visible and easier to align.

For the light, increase the dimmer to three. Keep it white and switch it to

three. Keep it white and switch it to distant light.

Turn on soft shadows and adjust the camera until you notice more depth in the render. The shadows enhance the

the render. The shadows enhance the overall realism.

You can also move the slider to observe how the particles behave in motion.

To add more detail, apply screen space ambient occlusion.

Feel free to experiment with its parameters or consult the touch designer wiki to understand how each one works.

Finally, let's create a line to emphasize the sweeping motion. Create a

rectangle, connect it to a geo component, and assign a constant material with a red color.

Set the rectangle's size to 0.005 x 1.7.

Reference the first math operator to control the rectangle's x position. This

synchronizes the movement of the line with the particle sweep.

Perfect. Now all the network is working.

And remember, just as we used a top as a particle emitter, you can replace it with anything else you imagine. I hope

you've successfully completed this tutorial. If you enjoyed this video,

tutorial. If you enjoyed this video, don't forget to subscribe to the channel and smash the like button. If you have any questions, feel free to ask in the comments.