# Connecting Perlin noise waves

**URL:** <https://discourse.processing.org/t/connecting-perlin-noise-waves/33359>\
**Category:** Coding Questions\
**Created:** [November 6, 2021, 9:15am UTC](https://discourse.processing.org/t/connecting-perlin-noise-waves/33359 "2021-11-06T09:15:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![basielcole](https://avatars.discourse-cdn.com/v4/letter/b/bbe5ce/32.png) [@basielcole](https://discourse.processing.org/u/basielcole)\
**Post date:** [November 6, 2021, 9:15am UTC](https://discourse.processing.org/t/connecting-perlin-noise-waves/33359/1 "2021-11-06T09:15:19Z")

</div>

Hi everyone, I have been trying to connect two or more waves generated with the noise() function. The idea is to get one continuous wave with specific areas having more/less noise added to them. Is there a simple way to connect two or more waves?

I would think it either requires interpolating the ending point of the first wave and the starting point of the next, or making sure that each of the waves starts and ends at the same spot. However, I have not been able to figure out both.

A simple piece of code illustrating the problem is shown below:

```auto
void setup() {
  size(800, 800);
}

void draw() {
  
  float x = 0;

  while (x < width/2) {
    point(x, 300 + 200 * noise(x / 30));
    x = x + 1;
  }
  
  while (x >= width/ 2 & x < width) {
    point(x, 300 + 100 * noise(x / 30));
    x = x + 1;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 6, 2021, 4:20pm UTC](https://discourse.processing.org/t/connecting-perlin-noise-waves/33359/2 "2021-11-06T16:20:54Z")

</div>

Hello,

I was able to do this as follows:

- Separate the plots along the x-axis  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/db8bfd70cfa4a4ff352c99de7caef897c66b89db.png)

- Determine endpoint of first plot px1, py1  
Determine starting point of second plot px2, py2  
Draw a line between the two to verify  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b3187a778a169913415a5e7d291cf4bcf72d8632.png)

- The map function was used to transition the noise factor (nf \* noise) between the ranges (px1, px2) and (200, 100) along a plot from p1 to p2  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0458605fa0ce14f2bf961a9504c1059a449d3470.png)

Some incomplete code (was helpful for me) to get you started:

> **Processing Code**
>
> ```auto
> void settings() 
> {  
> size(600, 300); 
> }
> 
> void setup() 
> {
> strokeWeight(2);
> noLoop();
> }
> 
> void draw() 
> {
> background(0);
>     
> float x = 0;
> float y = 0;
>   
> stroke(255, 0, 255);
> while (x < width/2) 
> {
> y = 100+200 * noise(x / 30);  
> point(x, y);
> x = x + 1;
> }
> 
> stroke(255, 255, 0);
> while (x >= width/ 2 & x < width) 
> {
> y = 100+100 * noise(x / 30);  
> point(x+100, y);
> x = x + 1;
> } 
> } 
>   
> void keyPressed()
> {    
> int seed = millis();
> //println(seed);
> noiseSeed(seed);
> redraw();  
> }
> 
> ```

A lot of `println()` statements were used in writing my code for testing and debugging.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 7, 2021, 12:21pm UTC](https://discourse.processing.org/t/connecting-perlin-noise-waves/33359/3 "2021-11-07T12:21:32Z")

</div>

Hello,

I found it much simpler to:

- create one loop from 0 to width
- transition the noise factor from 200 to 100 with a simple `if()` statement:

```auto
    if (x>200 && x<300) //from 200 to 299 
      {
      nf = nf-1; // Same as nf--
      }

```

And voila!

I added color to show where it was transitioning:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b30438927c40a4e8e4c8e2d622651a82f50966e6.png)

`:)`