# Creating a gently moving 2D fog effect

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


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.

• Great! Do you have any advice on how to begin changing the level of detail? Sep 29, 2016 at 16:17
• @fluffological_studies Yeah, you do it by mixing multiple octaves of noise together. I added something to the answer about that. Sep 30, 2016 at 1:43
• You can animate the FBM noise also by scrolling the octave textures without the need for extra texture dimension. Sep 30, 2016 at 4:27
• How does that work @JarkkoL
– moi
Nov 4, 2021 at 22:03