I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial


I am having a hard time understanding why does the sketch move when start += inc at 10:00.
I know its related to start += inc but I just don’t understand the logic behind it.


1 Like

Hello, @ibra9, and welcome to the Processing Forum!

Link to video:

Note that on line 15 at 10:00, start is used to set the value of xoff. This happens during every frame. On line 19, in the for loop, xoff is passed to the noise function, and the result is used in the computation of the graph. So, on line 26, when the value of start is increased, that sets the stage for higher beginning values of xoff in the next frame. Consequently, during each frame, the graph begins with a new x position in the noise space, due to updated values of xoff. That is why the sketch moves during each frame.

EDIT (2x on November 7, 2021):

The following is being added for clarification.

When the value of a variable is updated just prior to the end of the draw() function, it may, at first, give the impression that the new value would have no effect on the sketch. This would be true if a call to noLoop() were in place. In that case, draw() would be called once, and the sketch would remain stationary. However, without a call to noLoop(), draw() is called repeatedly. In that case, changes to values of variables made at the end of the draw() function can be used to set the stage for the next frame, when draw() gets called again. That is precisely the logic behind this statement:

  start += inc;

With the arrival of the next frame, the value of start is assigned to xoff, and so the drawn graph reflects a new set of x positions in Perlin space.

1 Like