Perlin Noise Terrain Lightning Problem

Case23

Hello Everybody.

I just tried to alter Shiffmans Perlin Noise Terrain Example in P5.js and add Material and Lightning.

What i experience are some weird Stripes on the Terrain.

video

Anybody has an idea why this happens?

Can it be related to the order the vertex are created?

I hope you can help me! :)

Shiffmans Example: https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_11_PerlinNoiseTerrain_p5.js

var cols;
var rows;
var scl = 20;
var w = 560;
var h = 560;
var terrain = [];
var flying = 0;
var img;

function setup() {
  createCanvas(560,560, WEBGL);

  cols = w/scl;
  rows = h/scl;

  for (var x = 0; x < cols; x++) {
    terrain[x] = [];
    for (var y = 0; y < rows; y++) {
      terrain[x][y] = 0;
    }
  }
}

function draw() {
  background(255);
  var locX = mouseX - width / 2;
  var locY = mouseY - height / 2;
  pointLight(250, 250, 250, locX, locY, 50);
  ambientMaterial(250);

  translate(0,0,-240);
  rotateX(PI/3);
  translate(-width/2,-height/2,0);



  flying -= 0.005;
  var yoff = flying;

  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -80, 80);
      xoff += 0.2;
    }
    yoff += 0.2;
  }


  stroke(0,0);

  for (var y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (var x = 0; x < cols; x++) {
      push();
        vertex(x*scl, y*scl, terrain[x][y]);
        vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
        pop();
    }
    endShape(CLOSE);
  }
}