Graph Perlin Noise

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

let xoff = 0;
let yoff = 10000;

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

function draw() {
  background(51);

  const x = map(noise(xoff), 0, 1, 0, width);  
  const y = map(noise(yoff), 0, 1, 0, height);
  xoff += 0.01
  yoff += 0.01

  ellipse(x, y, 24, 24);
}

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

let inc = 0.01;
let start = 0;

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

function draw() {
  background(51);
  stroke(255);
  noFill();
  beginShape();
  let xoff = start;
  for (let x = 0; x < width; x++) {
    stroke(255);
    const y = map(sin(xoff), -1, 1, height / 4, (height * 3) / 4);
    vertex(x, y);
    xoff += inc;
  }
  start += inc;
  endShape();
}

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

let inc = 0.01;
let start = 0;

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

function draw() {
  background(51);
  stroke(255);
  noFill();
  beginShape();
  let xoff = start;
  for (let x = 0; x < width; x++) {
    stroke(255);
    const y =  noise(xoff) * height
    vertex(x, y);
    xoff += inc;
  }
  start += inc;
  endShape();
}