# Perlin noise terrain issue when scrolling

I am generating a terrain in Javascript canvas using this js project for the Perlin noise. I have an array of points, and when one point leaves the left-hand-side of the window, it is removed, and a new point is added to the right.

For the first few points (before any point moves out of the LHS of the window), it works fine, but once I start removing points from the start of the array and adding them to the end the Perlin stops working.

JSFiddle

Does anyone know why this would happen?

• "the Perlin stops working" isn't enough information about the symptoms to diagnose the problem. Your question should contain a complete description of the issue that doesn't rely on users visiting outside sites or running your full code just to understand what you're asking. – DMGregory Nov 2 '16 at 16:44

You seem to be adding and removing points with inconsistent logic. At first, you create 1 point per step in your loop (because there is room left in the points array). Then you wait for point removals in order to add more points. This results in inconsistent "count-spacing" between your points (0.1 at first and larger later). In other words, you're querying Perlin noise with different resolutions.

The following logic seems to solve the problem:

if (points.length === 0 || points[points.length - 1].x <= width - sectionWidth) {
var x = width;
var yTemp = noise.perlin2(count, count);
count += 0.1;
var y = (yTemp * 50) + (height / 2);
points.push(new Point(x, y));
if (points.length > numPoints) {
points.shift();
}
}


It will force the algorithm to wait until there is enough spacing for the next point, thus resulting in uniform spacing (in the count space).

Fiddle

Since your problem is just that you use different count intervals at different times, another solution would be simply to move your count += 0.1 to the line after the push. Then, it will only get incremented when a point is added.