Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

Perlin Noise Terrain Lightning Problem

edited February 2018

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! :)

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);
}
}
Tagged: