The Interactive & Immersive HQ

Effortless TouchDesigner Techniques For Quick Content Creation

Greetings, TouchDesigner developers! In today’s post we will be going over some simple techniques that can help out when looking to create background and content visuals. These can be especially useful when running against the clock, and despite being “simple” networks the results can be quite charming. Let’s get to it!

TouchDesigner Beginner Tutorial Series

If you’re a TouchDesigner Beginner, check out our TouchDesigner Tutorial Series!

We teach you all the basics of how to use TouchDesigner, including mouse controls, hotkeys, parameters, the operator families, and more.

Origin

The projects we are about to examine are part of the HQ’s Instagram content, and were created in order to promote our playlists on Spotify.

Now, one way to think about the creative process behind these is: the making of quick sketches where favorable results are processed further, and dissatisfactory results are rapidly discarded. This can be a bit of a challenge when we are used to saving most of the work we produce, if not all of it. At the same time it’s relieving to just close a project that is not flowing and start fresh!

Now, let’s look at the results that made the cut!

Instancing and Displacement

Here is the first piece we will be building:

Let’s get started with a simple instancing setup.

TouchDesigner Content Instagram

In this case we want to instance a Torus SOP along the points of a Line SOP. However, this Line SOP will have point coordinates of 0, 0, 0 for points A and B. This will place all the Tori (plural for Torus) in the center of our project, as well as on top of each other.

TouchDesigner Content Instagram

Now, let’s use a Pattern CHOP with the type set to Ramp and reference it to our Scale OP in our instancing page. This allows us to see all the Tori, and by animating the Pattern CHOP’s Phase we can give it some movement.

By Multiplying our geometry and a Circle we are able to quickly get rid of that jumping end of the Ramp CHOP. Also, some Level and HSV Adjust specifications come in handy for making the piece pop out.

Next up we’re going to Composite a few transformations of our image, in order to get a more complex piece. Some simple stretching and multiplying!

TouchDesigner Content Instagram

Now let’s distort the image by displacing it with a Noise whose Z translate is animated.

TouchDesigner Content Instagram

At this point we have our top layer ready! Let’s get to the background of the piece.

By using a Noise and a circular Ramp we now have a grainy texture for our background, and furthermore we can displace it with the same Noise we used to displace our top layer. This makes both layers behave the same way, movement-wise. Also, by multiplying our image with yet another circle we can further shape our scene.

TouchDesigner Content Instagram

Lastly, all we have to do is Composite our top and background layers! And that’s it!

Round Two: Ramps

Here’s what we’re making next. It is so simple you won’t believe!

Let’s start by pointing out that in this case we will benefit from whatever video footage we have at our disposal. Footage of an old project of yours you’ve never used before or found footage will suffice!

Let’s begin by multiplying our footage with a Circle TOP and leaving just a small circle visible in the middle.

TouchDesigner Content Instagram

At this point it’s a good idea to further process the video footage with simple effects like feedback and other image filters. We are only using a small area of our video but ,in my case, the whole video looks like this:

Okay, we have our first layer. Now let’s work on a simple background. In this case we are going to use a simple Composite of different Ramp and Noise TOPs. Here is what my network looks like but I encourage you to find a pattern you enjoy!

TouchDesigner Content Instagram

And that’s about it! With a simple Composite we merge our top and background layers to complete the piece. Done!

Thoughts

As you can see it can be easy to come up with simple yet striking ideas, especially when you are on the run and need to create some content speedily. Here are some of my recommendations in order for you to improve your flow and save time with simple projects:

  • Know your tools. When using powerful operators like Noise, Ramps, and Patterns, be sure to be aware of their capabilities and functionality. A quick read of TouchDesigner’s documentation for the operator can unlock plenty of ideas!
  • Re-use footage/ideas. In this case we used video footage to add an extra layer to our piece. Be sure to keep in mind abandoned footage or projects that don’t stand on their own and see if it works well with another layer of creation.
  • Quick Sketching. The ideas we just went over were the result of many other quick attempts at getting textures and images. Don’t be afraid to give an idea a try and see if it starts to work, if not… force yourself to not even save it and start something fresh.

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

Playlists

If you are not following our playlists on Spotify you are missing out! Here are the links to three sound moods to accompany your TouchDesigner creative sessions!

Wrap Up

I hope going over these simple examples inspires you to make some “easy” graphics and background content. More importantly I hope it helps you save time when in need of such content. Don’t doubt that this type of unassuming techniques can help you out in a moment of need, and your workflow will significantly expand the more you practice this.

Be sure to tag us in your posts, we are looking forward to seeing the ideas you come up with!

Until next time!