An introduction to gradient noise, and how to create a simple Vuo composition to simulate natural-looking 2-dimensional motion

Vuo Tutorial — Gradient Noise

or view it on YouTube: 


Hi, I'm Alane, and I'm one of Vuo's programmers. I want to explain how to use Vuo's gradient noise nodes in a composition and various applications of gradient noise.

Gradient noise is a type of noise that looks smooth and natural, like this. In Vuo, you might want to use gradient noise to make a realistic texture or terrain, create a sound, or display an object that moves along a natural-looking path, which is what we will do in this tutorial.

Here are the gradient noise nodes in Vuo. As you can see, there is one for one, two, three, and four dimensions. Which one you use depends on what kind of input you are giving the node. If your input is just a real number, such as seconds, you would use the one-dimensional node. If your input is a location on a two-dimensional coordinate plane, you would use the two-dimensional node. Adding more dimensions, such as time, would change which node you use. All four nodes give one real number as their output, called "value." You can also choose between the types of gradient noise, which are Perlin and Simplex.

Here is a composition that places an image in the center of the screen. Right now it's stationary. We'll add the gradient noise node to make it move on a natural-looking path. The first thing we'll do is add a Fire Periodically node. This will let us update the location of the image over time. To make it run smoothly, the intervals should be low, so let's just use the typical frame rate, which is .04 seconds.

Next we'll add a Count node. We have to make sure we're using the "Real" count node, not the "Integer" one. The gradient noise function has to take a real input because it is always zero for integers. Let's add 0.01 each time we update the node.

Next we'll add a Make Gradient Noise node (put node on screen), and we'll add the one dimensional one, because the input is going to be Count, which is a real number, not a point. For now, let's just use Perlin noise.

Eventually we want to make a point that will be the center of this image, in the Place Image in Scene node. So let's add a Make 3D Point node. We'll connect the value output of the Gradient Noise function to the x-value of the 3D point.

Now let's add another gradient noise node. But this time we'll do the exact same thing we did with the other one, except we'll connect its value to y-value of this 3D point.

Ok, it started moving, but, as you can see, it's moving along a diagonal path. That's because the x and y values here are exactly the same. Because these 2 nodes are doing the exact same computation with the same inputs. So what we need to do is make sure this node is outputting a different value; so we need to make sure that it's input is different than the other one. So, what we can do to solve that is put a computation between these two nodes. What I'm going to do is subtract one from count before inputting it into position.

Again, we need to make sure we're using the "real" subtract node, not the "integer" one. Now, you can see that it looks like it's moving on a natural looking path! This can be useful for simulating something like a insect flying around, a person walking, or any other natural, random movement.

You might be wondering what it would look like if we were to use Simplex instead of Perlin noise. So I'm going to create a new composition and compare them side by side.

Let's change both of these to simplex. As you can see, it really doesn't look that different. For large amounts of data or dimensions, Simplex is slightly faster, but that doesn't affect compositions like this one. Simplex noise is the better choice these days (but you might still use Perlin noise if you need the exact sequence of numbers for which Ken Perlin won the Academy Award).

Thanks for exploring Vuo's gradient noise nodes. If you'd like to learn more about Vuo development or our plans for Vuo, you can check out We hope you'll consider becoming a part of the Vuo community and supporting Vuo by purchasing a subscription. Thank you so much for checking out Vuo, and we look forward to seeing what you create!

Tutorial category: