<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
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
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.

> **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 @JarkkoL  

---

