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

p5.js Beginners
1

Hello,

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.

Thanks.

1 Like
2

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.

2 Likes
3

Hi,
I want to add some examples to javagar’s answer.

One crucial aspect to grasp is that the draw() function is a loop itself unless you invoke the noLoop() function. The Perlin Noise in p5 is a tale of two nested loops and how the variables within them evolve.
Here are three examples:

  1. Static graph:
let y;

function setup(){
  createCanvas(800,800); 
}

function draw(){
  background(225); 
  noFill();
  beginShape();
    for( let x = 0; x < width; x++){
        y = noise(x)*100; 
        vertex(x, y); 
      }
   endShape();
}
  • This code creates a noise graph based on the varying y positions due to the increasing x value within the for...loop.
  • However, x does not change when it is redrawn by draw(). This implies that y is not influenced by the draw() loop : the graph remains static.

2. Animated graph:

let moving = 0; 
let y ; 

function setup(){
  createCanvas(800,800); 
}

function draw(){
  background(225); 
  noFill();
     beginShape();
      for(let x = 0; x < width; x++){
	    y = map(noise(moving), 0,1,0,height/4); 
        vertex(x, y); 
        moving += 0.005
      }
     endShape();
}
  • Like the first example, this code generates a noise graph based on the different y positions due to the increasing x value within the for loop.
  • Every time the draw() function redraws the for...loop, the moving variable continues to increase based on its last value rendered in the for...loop. So every draw will be different, that’s why the graph is animated.

3. The example from The Coding Train Channel

let moving = 0; 
let y; 
function setup(){
  createCanvas(800,800); 
}
function draw(){
  background(225); 
  noFill();
  beginShape();
      let offset = moving; 
      for(let x = 0; x < width; x++){
	    y = map(noise(offset),0, 1, 0, height/2); 
        vertex(x, y); 
        offset += 0.005
    }
    endShape();
    moving += 0.01;
}
  • Like the previous two examples, this code generates a noise graph based on the varying y positions due to the increasing x value within the for loop.
  • When the draw() loop redraws the for loop, the offset variable does not increase based on its last value rendered within the for loop (as in the second example) but instead based on the value of moving. The moving’s value is exclusively influenced by the draw() loop: moving += 0.01 when the draw loop executes.
  • Every iteration of the draw loop, the value of offset must be reset to moving. As a result, the current vertex’s value y (not the x position literally) is continuously replaced by the previous vertex’s y value, resulting in the illusion of animation.
  • Note that offset is declared and assigned within the draw() function.