Perlin noise values in different x, y dimensions all seems to approach 0.5 together as z offset is changed

Question

I created this little animated Bezier sketch with Perlin noise. Any ideas why all of the points (in different 2d space) approach 0 all at once at seemingly regular intervals?

z offset changes by .005 every frame

https://www.khanacademy.org/computer-programming/animated-beziers/4620624260136960

Code looks like this...

noFill();
var noiseY = 0;

var myNoise = function ( x, y ) {
    return map( noise( x, y, noiseY ), 0, 1, -160, 560 );
};

var draw = function () {
    noiseY += 0.005;
    background( 255 );
    beginShape();
    vertex(
        myNoise( 100, 0 ),
        myNoise( 100, 10000 )
    );
    for ( var i = 0; i < 7; i ++ ) {
        bezierVertex(
            myNoise( 100 * i, 20000 ),
            myNoise( 100 * i, 30000 ),
            myNoise( 100 * i, 40000 ),
            myNoise( 100 * i, 50000 ),
            myNoise( 100 * i, 60000 ),
            myNoise( 100 * i, 70000 )
        );
    }
    endShape();
};

The draw() function executes over and over at 60Hz showing the animated beziers.

Answer 1

This seems to be specific to Processing.js or Khan Academy's version of Processing.js.

I do not see the problem if I run your code using the P5.js web editor.

Please note that Processing.js is no longer maintained, and new projects should probably use P5.js or Processing's Java mode.

If you want to track down why this is happening, you should try debugging your code. For example, what is the value of noiseY when the points approach 0?

But if I were you, I would just switch to a newer framework like P5.js.