<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  max-width: 100%;
  max-height: 100%;
}

let amount,
  colorArr,
  colorRand,
  noiseRand,
  frCntRand;

setup = () => {
  createCanvas(windowWidth, windowHeight);
  noFill();
  strokeWeight(random(0.1, 1));
  colorArr = [255, 100, 0];
  amount = random(50, 100);
  colorRand = round(random(90, 100));
  noiseRand = random(0.0005, 0.001);
  frCntRand = random(0.001, 0.01);
  frameRate(60);
};

draw = () => {

 background(18,18,18);
  for (let i = 0; i <= amount; i++) {
    let colorLine = map(i, 0, amount, 0, colorRand);

    stroke(colorLine);
    beginShape();
    for (let x = -10; x <= width + amount; x += 10) {
      let twist = noise(x * noiseRand, i * 0.01, frameCount * frCntRand);
      let y = map(twist, 0, 1, 0, height);
      vertex(x, y);
    }
    endShape();
  }
};

keyPressed = () => {
  if (key === 's' || key === 'S') {
    save();
  }

  if (key === '0') {
    noLoop();
  } else if (key === '1') {
    loop();
  }

};