/**
    This Perlin Noise example is a bit more complex, and creates an interesting image
    of flowing colors on screen using the 3D noise method. We'll use the X and Y coordinates
    on screen for our first two parameters, and time as our third parameter.
*/

// how much should our X and Y shift with each pixel
float noiseDelta = 0.02;

// at what value should the X and Y noise parameters start
float noiseStep = 0.0;

// which frame are we at, we use this so we can have a more distinct
// visual cue as to what is happening on screen
int frameStepSpot = 0;

void setup() {

    // setup the environment
    size(200, 200);  
}

void draw() {

    // clear the background
    background(0);
    
    // load the pixels[] array
    loadPixels();
        
    // define the X noise value
    float xval = 0.0;
    
    // Set how deep we want the noise detail to be, try playing with this value
    noiseDetail(2);
    
    for (int x = 0; x < width; x++) {
    
        // at each step increment our X noise value
        xval += noiseDelta;
        
        // define the Y noise value
        float yval = 0.0;
        
        for (int y = 0; y < height; y++) {
        
            // at each step increment the Y noise value
            yval += noiseDelta;
            
            /*
              We're generating three noise values, one for each color element Red,
              Green and Blue. We shift the X and Y values using division, and maintain
              the same time value for each noise call. Each return value is scaled to
              a value between 0 and 255.
            */
            float rcolorVal = noise(xval, yval, noiseStep) * 255.0;
            float gcolorVal = noise(xval / 2.0, yval / 2.0, noiseStep) * 255.0;
            float bcolorVal = noise(xval / 3.0, yval / 3.0, noiseStep) * 255.0;
            
            // set our new color at this pixel
            pixels[x + y * width] = color(rcolorVal, gcolorVal, bcolorVal);
        }
    }
    
    // Update our time
    noiseStep += 0.01;
    
    // draw the pixels to screen
    updatePixels();
    
    // Draw our progress bar at the bottom
    stroke(255, 255, 255, 128);
    fill(0, 0, 0, 128);
    rect(0, height - 2, width, 2);
    set(frameStepSpot, height - 2, color(255));
    frameStepSpot++;
    if (frameStepSpot > width - 1) {
        frameStepSpot = 1;
    }
}