# Please help with Perlin Noise problem

**URL:** <https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160>\
**Category:** Coding Questions\
**Created:** [May 22, 2020, 10:32am UTC](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160 "2020-05-22T10:32:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 22, 2020, 10:32am UTC](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160/1 "2020-05-22T10:32:13Z")

</div>

Hi good people,  
I have been looking for this solutions in days now. I hope you can show me the light how to get it done.  
So I found this image in the internet:

 ![Screenshot 2020-05-22 at 6.22.18 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0225f473473024743c81b8e15e1ffbe6235e8256.png)  
I try to replicate the image above using p5js, with perlin noise algorithms  
This is my code:

```auto
var yoff = 0.0;
//var alpha = 0;

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

function draw() {
  background(0);
  translate(width / 2, height / 2);
  noFill();
  beginShape();
  for (var radius = 0; radius < 250; radius += 5) {
    stroke(255, 204, 0, 255);
    var xoff = 0;
    for (var a = 0; a < TWO_PI; a += 0.05) {
      var offset = map(noise(xoff, yoff), 0, 1, -50, 50);
      var r = radius + offset;
      //var r = radius;
      var x = r * cos(a);
      var y = r * sin(a);
      vertex(x, y);
      xoff += 0.1;
    }
  }
  endShape(CLOSE);
}

```

But the result is not the same and I also want to make the stroke is fading from the center.

Any suggestion?

Thanks

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 23, 2020, 12:23am UTC](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160/2 "2020-05-23T00:23:15Z")

</div>

Hi,

Few advice :

- If it’s going to be a static image, you should consider using `noLoop()` at the end of the `draw()` function so it’s not re displaying it each frame

- Consider using [`curveVertex()`](https://p5js.org/reference/#/p5/curveVertex) to smooth the lines

- In your reference image, the smallest shape is not a point so don’t start initialize the `radius` variable to `0`, instead use `10`

- Since each shape is closed, put the `beginShape()` and `endShape()` functions inside the `radius` for loop

- The noise is used in two dimensions so using a second value `yoff` is a good solution ! Update it after you completed a shape so each shape has an offset.

- For the opacity, use the `map()` function to interpolate the value with the radius (closer mean less alpha)

- Play with the `noiseDetail()` function to change how sharp the noise is

- The center shapes displacement is too strong so they are overlapping, we can multiply the radius by a factor so bigger shapes have more displacement

- If you want to have a cyclic shape, checkout this video of the coding train : [https://www.youtube.com/watch?v=ZI1dmHv3MeM](https://www.youtube.com/watch?v=ZI1dmHv3MeM)

Try to solve the problem alone but this is my solution 😉 :

```auto
// Yoff value
var yoff = 0.0;

// Min and max radius of shapes
var min_radius = 10;
var max_radius = 250;

// Increment for angle defining number of points for curveVertex
var angle_incr = 0.1;

// Max intensity of noise
var max_noise = 100;

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

function draw() {
  background(0);
  translate(width / 2, height / 2);
  
  noiseDetail(1, 0.8);
  
  noFill();
  
  for (let radius = min_radius; radius < max_radius; radius += 5) {
    // Stroke alpha
    let alpha = map(radius, min_radius, max_radius, 255, 50);
    stroke(255, alpha);
    
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle_incr) {
      // Compute xoff and yoff values
      let xoff = cos(a) + 1;
      let offset = map(noise(xoff, sin(a) + 1 + yoff), 0, 1, -max_noise, max_noise);
      
      // Multiply the radius by an factor in order to control displacement
      let r = radius + (offset * map(radius, min_radius, max_radius, 0.1, 1));
      let x = r * cos(a);
      let y = r * sin(a);
      
      
      curveVertex(x, y);
    }
    endShape(CLOSE);
    
    yoff += 0.08;
  }
  
  // Stop the loop
  noLoop();
}

```

 ![untitled](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0cfa744cc755bc1880147f2775c776669a608542.jpeg)

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 23, 2020, 1:22am UTC](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160/3 "2020-05-23T01:22:02Z")

</div>

Thank you so much for the tips. I never heard about `curveVertex()` and `noiseDetail()` function before. This might be handy for my next sketch.

Oh and your solution is very elegant and simple, thank you! I love they way approach the problem. 😌