Perlin Noise In Two Dimensions

const WIDTH = Math.min(window.innerWidth, window.innerHeight, 480);

let inc = 0.01;

function setup() {
  createCanvas(WIDTH, WIDTH);
  pixelDensity(1);
}

function draw() {
  let yoff = 0;
  loadPixels();
  for (let x = 0; x < width; x++) {
    let xoff = 0;
    for (let y = 0; y < height; y++) {
      const index = (x + y * width) * 4;
      const r = random(255)
      // const r = noise(xoff, yoff) * 255;
      pixels[index + 0] = r;
      pixels[index + 1] = r;
      pixels[index + 2] = r;
      pixels[index + 3] = 255;
      xoff += inc
    }
    yoff += inc
  }
  updatePixels();
  noLoop();
}

const WIDTH = Math.min(window.innerWidth, window.innerHeight, 480);

let inc = 0.01;

function setup() {
  createCanvas(WIDTH, WIDTH);
  pixelDensity(1);
}

function draw() {
  let yoff = 0;
  loadPixels();
  for (let x = 0; x < width; x++) {
    let xoff = 0;
    for (let y = 0; y < height; y++) {
      const index = (x + y * width) * 4;
      // const r = random(255)
      const r = noise(xoff, yoff) * 255;
      pixels[index + 0] = r;
      pixels[index + 1] = r;
      pixels[index + 2] = r;
      pixels[index + 3] = 255;
      xoff += inc
    }
    yoff += inc
  }
  updatePixels();
  noLoop();
}