Flowing Perlin noise effect

advanced
#1

I’m looking to use Perlin noise to create a flowing, 2D, fog-like effect. I understand that ofNoise is Perlin noise, but I am trying to figure out the right way to implement it and scale it properly.

What I have done so far is build a grid of noise pixels, spaced out using a modulus calculation. Then there is a different ofPixels object, and I am interpolating values in-between those noise values. This feels close, it’s moving, it’s obviously noise… but it’s incredibly rough and appears to be unreasonably CPU intensive. Does anyone have some advice? Below is the main snippet, and then some pastebin links to the full code. I have been using this page as a reference: 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);
    }
}

http://pastebin.com/GyBrYKJr

#2

Hi there!

Good old CPU expensive noise. :smiley:

Yep, better go with GPU. You can check the source code for different types of GLSL noise, here.

And I can give you some old files (NoiseExample.zip), which implement and let you play a bit with the classic noise, classic periodic and simplex noise from the previous reference. These are compatible with OF 093, so you just need to create a new project with ofxGui.

Two other things you should read: noise octaves and Brownian noise.

Have fun!

2 Likes
#3

This is great, thank you so much, I’ll be digging through that. I’ve spent a lot of my day reading up about octaves and fbm, and that has helped me think of so many new ideas, but I’ll be able to pick apart these examples and start learning how to implement it.

I’m still curious, was my approach on course for CPU implementation? At least in the process of getting the noise, distributing it, and interpolating between those values?