<p>Animated noise can be created by using time as an extra dimension. So instead of 2D noise, you'd use 3D noise with time as the z-axis position, like <code>ofNoise(x, y, time)</code>.</p>

<p>To control the level of detail, you'd use octaves of noise: multiple noise layers with different scales and amplitudes, mixed together. The basic Perlin routines just generate a single octave, so you can re-invoke it with scaled coordinates to add more detail, something like:</p>

<pre><code>float noise = ofNoise(x, y, time);          // first octave
noise += 0.5 * ofNoise(2*x, 2*y, 2*time);   // second octave
noise += 0.25 * ofNoise(4*x, 4*y, 4*time);  // third octave
</code></pre>

<p>and so on. The more octaves you put in, the more detailed the noise will be. The article you linked describes this in more detail if you scroll down to <a href="http://flafla2.github.io/2014/08/09/perlinnoise.html#working-with-octaves" rel="nofollow">Working with Octaves</a>.</p>

CC BY-SA 3.0
2016-09-29T16:17:22.883Z
Great! Do you have any advice on how to begin changing the level of detail?
aceslowman
CC BY-SA 3.0
2016-09-30T01:43:10.010Z
@fluffological_studies Yeah, you do it by mixing multiple octaves of noise together. I added something to the answer about that.
Nathan Reed
CC BY-SA 3.0
2016-09-30T04:27:03.880Z
You can animate the FBM noise also by scrolling the octave textures without the need for extra texture dimension.
JarkkoL
CC BY-SA 4.0
2021-11-04T22:03:24.003Z
How does that work @JarkkoL
moi
CC BY-SA 3.0
2016-09-29T05:20:27.477Z
2016-09-30T01:42:46.207Z
2016-09-30T01:42:46.207Z
Nathan Reed
<p>I am trying to create a fog-like effect, similar to that found using perlin noise. I know where I can find information about that effect, but it's harder for me to tell if it's an efficient route for what I want to achieve. A similar effect can be seen here, although I'd imagine what I want is much lower in detail: <a href="https://www.youtube.com/watch?v=csYzDia5Ckw" rel="nofollow noreferrer">Animated perlin noise | youtube.com</a></p>

<p>I am currently working in openframeworks. What I have done so far is build a grid of noise values, and have worked towards linearly interpolating in-between those. I feel like I am on the right track, but it very blocky, which makes me wonder if my approach is totally off-mark. This page on Perlin noise has been helpful: <a href="http://flafla2.github.io/2014/08/09/perlinnoise.html" rel="nofollow noreferrer">Understanding Perlin Noise | flafla2.github.io</a></p>

<pre><code>for(int x = 0; x &lt; grid.getWidth(); x++){
    if(x % g_size == 0){
        for(int y = 0; y &lt; grid.getHeight(); y++){
            if(y % g_size == 0){
                noise = ofNoise(x,y,ofGetElapsedTimef());
                grid.setColor(x,y,ofFloatColor(noise));
            }
        }
    }
}

ofVec2f g1, g2, g3, g4;
float f1, f2, f3, f4, u, v, t_1, t_2;

for(int x = 0; x &lt; grid.getWidth(); x++){
    for(int y = 0; y &lt; grid.getHeight(); y++){
        //find neigboring grid points
        g1 = ofVec2f(x-(x % g_size),y-(y % g_size));
        g2 = ofVec2f(g1.x + g_size,g1.y);
        g3 = ofVec2f(g1.x,g1.y + g_size);
        g4 = g1 + g_size;

        //get noise values from the grid neighbors
        f1 = grid.getColor(g1.x,g1.y).r;
        f2 = grid.getColor(g2.x,g2.y).r;
        f3 = grid.getColor(g3.x,g3.y).r;
        f4 = grid.getColor(g4.x,g4.y).r;

        u = (float)(x % g_size)/g_size;
        v = (float)(y % g_size)/g_size;

        t_1 = ofLerp(f1,f2,u);
        t_2 = ofLerp(f3,f4,u);

        ofColor average = ofLerp(t_1,t_2,v);

        fog.setColor(x,y,average);
    }
}
</code></pre>

<c++><interpolation><noise>
Creating a gently moving 2D fog effect
aceslowman
# Creating a gently moving 2D fog effect

(Asked by: username_0 on 2016-09-28)

I am trying to create a fog-like effect, similar to that found using perlin noise. I know where I can find information about that effect, but it's harder for me to tell if it's an efficient route for what I want to achieve. A similar effect can be seen here, although I'd imagine what I want is much lower in detail: [Animated perlin noise | youtube.com](https://www.youtube.com/watch?v=csYzDia5Ckw)

I am currently working in openframeworks. What I have done so far is build a grid of noise values, and have worked towards linearly interpolating in-between those. I feel like I am on the right track, but it very blocky, which makes me wonder if my approach is totally off-mark. This page on Perlin noise has been helpful: [Understanding Perlin Noise | flafla2.github.io](http://flafla2.github.io/2014/08/09/perlinnoise.html)

```
for(int x = 0; x < grid.getWidth(); x++){
    if(x % g_size == 0){
        for(int y = 0; y < grid.getHeight(); y++){
            if(y % g_size == 0){
                noise = ofNoise(x,y,ofGetElapsedTimef());
                grid.setColor(x,y,ofFloatColor(noise));
            }
        }
    }
}

ofVec2f g1, g2, g3, g4;
float f1, f2, f3, f4, u, v, t_1, t_2;

for(int x = 0; x < grid.getWidth(); x++){
    for(int y = 0; y < grid.getHeight(); y++){
        //find neigboring grid points
        g1 = ofVec2f(x-(x % g_size),y-(y % g_size));
        g2 = ofVec2f(g1.x + g_size,g1.y);
        g3 = ofVec2f(g1.x,g1.y + g_size);
        g4 = g1 + g_size;

        //get noise values from the grid neighbors
        f1 = grid.getColor(g1.x,g1.y).r;
        f2 = grid.getColor(g2.x,g2.y).r;
        f3 = grid.getColor(g3.x,g3.y).r;
        f4 = grid.getColor(g4.x,g4.y).r;

        u = (float)(x % g_size)/g_size;
        v = (float)(y % g_size)/g_size;

        t_1 = ofLerp(f1,f2,u);
        t_2 = ofLerp(f3,f4,u);

        ofColor average = ofLerp(t_1,t_2,v);

        fog.setColor(x,y,average);
    }
}

```

**Tags:** c++, interpolation, noise


---

## 1 answers

### Answer by username_1 on 2016-09-29. Score: 3 | Accepted answer

Animated noise can be created by using time as an extra dimension. So instead of 2D noise, you'd use 3D noise with time as the z-axis position, like `ofNoise(x, y, time)`.

To control the level of detail, you'd use octaves of noise: multiple noise layers with different scales and amplitudes, mixed together. The basic Perlin routines just generate a single octave, so you can re-invoke it with scaled coordinates to add more detail, something like:

```
float noise = ofNoise(x, y, time);          // first octave
noise += 0.5 * ofNoise(2*x, 2*y, 2*time);   // second octave
noise += 0.25 * ofNoise(4*x, 4*y, 4*time);  // third octave

```

and so on. The more octaves you put in, the more detailed the noise will be. The article you linked describes this in more detail if you scroll down to [Working with Octaves](http://flafla2.github.io/2014/08/09/perlinnoise.html#working-with-octaves).

> **Comments:**
> **username_0**: Great! Do you have any advice on how to begin changing the level of detail?  
> **username_1**: @fluffological_studies Yeah, you do it by mixing multiple octaves of noise together. I added something to the answer about that.  
> **username_2**: You can animate the FBM noise also by scrolling the octave textures without the need for extra texture dimension.  
> **username_3**: How does that work @username_2  

---

