Reputation: 5099
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.
Upvotes: 0
Views: 274
Reputation: 42174
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.
Upvotes: 1