How to make 2D noise in p5.js

steven

Hi,

I am trying to make a 2D noise texture in P5.JS.

I know how to write it in Processing but I can't convert my thinking to the 4 pixel array style of P5. Below if how I am writing the texture with a random function but I would like to change this to noise to create the classic cloud effect.

Thanks a lot, Steven

function setup() {
    var myCanvas = createCanvas(700, 801);
    pixelDensity(1);    
}

function draw(){
    background(255);
    loadPixels();

    for(var y = 0; y < height; y++) {
        for(var x = 0; x < width; x++) {
            var index = (x + y * width)*4;
            pixels[index+0] = random(255);
            pixels[index+1] = 0;
            pixels[index+2] = 180;
            pixels[index+3] = 255;
        }
    }
    updatePixels();
}

GKFX

Can't you just replace random(255) with noise(x/100.0, y/100.0)?

blindfish

Not quite: you still have to multiply by 255:

noise(x/100.0, y/100.0) * 255

Looks nice and cloudy :)

steven

Thanks guys, works great. :)