Please help with Perlin Noise problem

[noob]

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:

I try to replicate the image above using p5js, with perlin noise algorithms
This is my code:

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 * asking questions

[josephh]

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() 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

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

// 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();
}

[noob]

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.