Help with noise

p5.js Coding Questions
1

I found this image and it looks like it was generated using noise.

noise1
noise1500×327 258 KB

I’ve tried a bunch of different variations on the noise() function and have come up with some very interesting images but can’t seem to achieve anything close. Here is where I am at:

[ tried to upload the image that my code created but noob is limited to one image per post??? See next post for the image ]

but here is the code

var centerX;
var centerY;
var radius;
var totalDegrees = 369;
var maxFrames = 180;

function setup() {
    createCanvas(
        window.innerWidth,
        window.innerHeight
    );
    background(255);
    centerX = width / 2;
    centerY = height / 2;
    radius = 25;
    angleMode(DEGREES);
    translateX = 0;
    translateY = 0;
    opacity = 255;
}

function draw() {
    if (frameCount > maxFrames) {
        noLoop();
    }
    noFill();
    stroke(0, 0, 0, 255);
    beginShape();
        for (let i=0; i <=totalDegrees; i++) {
            var noiseFactor = noise(i / 40, frameCount / 50 * (frameCount + 40)/maxFrames);
            var x = centerX + radius * cos(i) * noiseFactor;
            var y = centerY + radius * sin(i) * noiseFactor;
            vertex(x, y);
        }
    endShape(CLOSE);
    radius += 2;
}

Was hoping someone could give me a nudge in the right direction.

Thanks

1 Like
2

Here is one of the images that the code in my original post created

noise2
noise2500×402 63.9 KB

Thanks

3

Hello @Stoli,

I tried strokeWeight(.4) and got this:

image
image621×502 86.2 KB

Starts with a circle and add noise to it:

    beginShape();
        for (let i=0; i <=totalDegrees; i++) {
            var noiseFactor = noise(i / 40, frameCount / 50 * (frameCount + 40)/maxFrames);
            var x = width/2 + 50*cos(i) + radius* cos(i)*noiseFactor;
            var y = height/2 + 50*sin(i) + radius* sin(i)*noiseFactor;
            vertex(x, y);
        }
    endShape(CLOSE);

image
image732×643 121 KB

It is more prominent now where the overlap is!
Keep working at it!

:)

4

Thanks! That’s certainly a step in the right direction. It occurs to me that the relationship of noise to radius is maybe not linear but exponential. I think I’ll head down that road.

5

Crossposting https://www.reddit.com/r/p5js/s/4NG2U03qH9
(Nothing is wrong about it but make sure you add a link as a reference :robot:)

6

I think I figured it out. For more info, go to the crosspost at reddit (link in previous post)

1 Like