Creating a gently moving 2D fog effect

Question

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);
    }
}

Answer 1

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.