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

**URL:** <https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383>\
**Category:** Beginners\
**Created:** [November 7, 2021, 4:44pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383 "2021-11-07T16:44:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ibra9](https://avatars.discourse-cdn.com/v4/letter/i/c77e96/32.png) [@ibra9](https://discourse.processing.org/u/ibra9)\
**Post date:** [November 7, 2021, 4:44pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383/1 "2021-11-07T16:44:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [November 7, 2021, 6:19pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383/2 "2021-11-07T18:19:07Z")

</div>

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

Link to video:

[![](https://img.youtube.com/vi/y7sgcFhk6ZM/maxresdefault.jpg "How to Graph Perlin Noise with p5.js") ](https://www.youtube.com/watch?v=y7sgcFhk6ZM)

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:

```auto
  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.

---

<div class="post-metadata">

**Author:** ![WaningJupiter](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Post date:** [January 10, 2024, 6:56pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383/3 "2024-01-10T18:56:17Z")

</div>

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:**

```auto
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:**

```auto
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**

```auto
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.