The Interactive & Immersive HQ

Notch for Brand New Beginners, Part 2

Notch is well known as a powerful tool for creating incredible real time graphics and interactive projects. Whether you’ve worked with similar tools or are new to the field, Notch can seem like a pretty complex tool to jump into for the first time. In the last article, we covered some first steps in setting up a cool vintage computer graphics-inspired scene, as a way of introducing the software. In Part 2, we’ll take it even further by modifying clone positions, as well as adding more geometry, a camera, and post FX!

Quick Recap

Note: this article builds on the content of the previous article, Notch for Brand New Beginners, Part 1. Make sure that you’ve completed the steps outlined in that article before you jump into this one!

In the last article, after diving into some quick basics about the Notch user interface, we set up a Cloner node, a Shape 3D node, and a Continuous Modifier node to create the animation below.

In this article, we’re going to take things further by introducing effectors, a camera, and post FX. Let’s jump in!

Effectors

The very regular, even spacing of the Cloner grid we’ve got set up is nice, but wouldn’t it be cool to add some randomness into those positions? That’s where Effectors come in to play!

Effectors are specifically used for modifying the position values of clones. To add some randomness to the positions of our clones, we can use Randomise Effector. Let’s add one to our nodegraph!

Connect the output of the Randomise Effector to the first input of the Cloner node. If you hover over this input, you’ll notice it’s labelled “Effectors”.

Now that we’ve connected it to the Cloner node, let’s head over to the Properties window to start modifying some of the parameters. First, set the Falloff Mode parameter to Infinite.

The Randomise Effector has the ability to add falloff, which allows for the intensity of the effect to decrease as the distance from the original object increases. When we set the Falloff Mode to Infinite, we are effectively turning the falloff functionality off. This means that the random transformations will be applied to all of the boxes created by the Cloner node.

Next, scroll down the Properties list and find the Effector Transform section. Here, we’ll change the Position X and Position Y parameters to 5. This will add a random offset to our clone positions in the X and Y direction. Mission accomplished! Our even grid spacing is no more.

One additional property we can modify to add a little more randomness to the scene is the Seed. This parameter allows you to define the seed that the random transformations are generated from. Modifying this value effectively gives you different variations of the random positions. Try experimenting with different values for the seed setting, and pick a value that gives you a composition that you like! I chose 45.

Adding More Geometry

Now that we’ve got our boxes set up, let’s increase the complexity of the scene a little bit and add more visual interest by adding a second Cloner setup. To make things easy, we’ll just copy and paste the set of nodes we’ve just been working on.

Now that we’ve got the second set of nodes added to the nodegraph, we need to connect the Cloner to the Root node to render these components. Click on the Cloner node and hit Ctrl + R.

Once the Cloner is connected to the root note, you should see additional cubes appearing in the scene.

We’ll continue by removing the second Continuous Modifier and connecting the one we set up previously to the Rotation Heading and Rotation Bank inputs. This way, both sets of clones will rotate together.

Boxes -> Planes

To add a little more variety to the scene, we’re going to modify the second Shape 3D so that it produces green planes instead of white boxes. Start by clicking on the Shape 3D node.

In the Properties window, set the Position X to 0. Then, set the Shape Type to Plane.

To add a little more variety, let’s increase the size of the plane. Set the Size X and Size Y parameters to 5. Finally, reduce the Subdivisions X and Subdivisions Y to 0. This should leave you with large square wireframes in the scene.

Before we move on from this node, let’s also set the colour to something other than white. Scroll down in the Properties list to Colour (under the Lines dropdown) and choose a colour you like. I went with a desaturated green.

Now, since these planes currently have the same Cloner and Effector settings as the boxes, the composition is starting to move back into the simple grid territory. Let’s change that by modifying the Cloner and Effector.

In the Cloner, set the Position Z to 5, the Grid Size X to 100, the Grid Size Y to 10, and the Grid Size Z to 100.

In the Randomise Effector, under the Effector Transform section, set the Position X to 2.5, the Position Y to 15, the Position Z to 5, and the Rotation Heading to 180. Your scene should look something like the image below.

Great! We are all set with the geometry for this scene. Let’s move on to adding a camera and post FX.

Adding a Camera

Next, we’re going to add a camera to our scene, which will allow us to precisely compose the view of our scene that we see in the viewport. Head to the node list and search for “Camera”, add a Camera node to the network and hit Ctrl + R.

Now that we’ve connected the Camera to the Root node, we can actually look through it in the viewport and start to modify its position.

At the top of the viewport are a number of different toolbars. Near the centre is a collection of buttons called the Camera Options. Here you can choose the view you want to see in the viewport.

By default, Orbit View (the center button with (5) on it) should be active. To the right of that button are a number of Scene Camera options. If you’ve added multiple cameras to your scene, these buttons will allow you to choose between them. For the Scene Camera 1 – 4 options, the order is decided by when you add the camera to the nodegraph.

Since we only have a single camera in our scene, we could actually choose any of the options, but let’s stick with Scene Camera 1, in case you decide to add another camera at some point.

Now that we’re looking through the camera in the viewport, you can start to adjust the position and immediately see the results! Head to the Properties window and adjust the Position X, Y, and Z parameters, as well as the Rotation Heading, Pitch, and Bank parameters until you find a composition you like.

Post FX

Now for one of the most fun parts of the series, adding post FX! We’re going to add four different effects to our scene, but as always feel free to experiment and add more.

Frame Feedback

Let’s start by adding a Frame Feedback node. Frame Feedback overlays the previous frame on top of the current frame. It’s a classic video technique that can be used to add trail effects to the image.

Add the Frame Feedback node to the network, placing it below the root node. Hit Ctrl + R to connect it to the root node.

In the Properties window, set the following:

  • Previous Frame Feedback: 0.65
  • Feedback Scale X: 0.9
  • Feedback Scale Y: 0.9
  • Feedback Rotation: 0.05

With these changes, the effect will be overlaying a scaled and slightly rotated version of the previous frame over and over again, resulting in a cool effect where we see slightly offset/scaled versions of the scene geometry. Your results should look something like the image below.

Glow

Next, let’s add a Glow effect. This will simulate the effect of blown out highlights in our image. Search for “Glow” in the node list and add a Glow node to the network. Make sure to place it below the Frame Feedback node. As we’ll see in the Node Position Matters section below, the positioning of this node impacts the order that the effects are applied.

In the Properties window, set the Threshold to 0.05 to tone down the effect a bit. Your results should look something like the image below.

Feedback Blur

Next, we’ll use Feedback Blur to add a trailing blur across the bottom of the image. Add the Feedback Blur node below the Feedback Frame and Glow nodes.

In the Properties window, make the following changes:

  • Previous Frame Feedback: 1
  • Rotation: 9
  • Stretch Position: 0.92
  • Stretch Falloff: 0.1

Once you’ve made those changes, you should see a cool warped/blurry effect on the bottom edge of the viewport.

Tilt Shift

For our final effect, we’re going to add Tilt Shift. Tilt Shift is an interesting effect that can be used to simulate depth of field by adding blur to the top and bottom of the image. Start by adding the Tilt Shift node to the network below the previous post FX nodes.

In this case, we can leave the properties at their default settings. The results should look something like the video below.

Congratulations, you have now officially made your first scene in Notch! Woo! Before we close out this post, we have one more important thing to cover: the impact of node position.

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.

Node Position Matters

Since we’ve just added a variety of post FX nodes to the nodegraph, one important thing to point out is that the actual position of the node in the graph matters. The processing order of the nodes is based on the Y position of the node, or the X position if the Y positions are the same. Nodes process from top to bottom, and from left to right if the nodes have the same Y position.

This means that you can actually change the order in which the effects are applied to the scene. Let’s say you want to have the glow effect applied before frame feedback. All you have to do is move the node up in the graph, so that it is above frame feedback. Remember that nodes at the top will process first, which means that post FX nodes at the top of the stack will be applied before the nodes below. You can achieve different looks by changing the order that the post FX are applied. Try it!

Wrap Up

That’s it for the Notch for Brand New Beginners series! In this post, we continued working through some of the fundamentals of Notch, and finished our vintage computer graphics inspired scene. We looked at adding effectors, a camera, and some really fun post FX. With Notch being such a flexible and powerful tool, there’s plenty of room to continue building on the scene we’ve worked through in these posts, or even start one from scratch! Either way, this article should have given you some of the foundation needed to start creating cool visuals with Notch.