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

1 Like

Hi,

• 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

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

// Stroke alpha
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 x = r * cos(a);
let y = r * sin(a);

curveVertex(x, y);
}
endShape(CLOSE);

yoff += 0.08;
}

// Stop the loop
noLoop();
}
``````

4 Likes

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. 2 Likes