Use Perlin noise for height texture

assets/index.html

@@ -41,12 +41,53 @@
     }
 
     function getHeight(x, y) {
-        var h = 0;
-        h += Math.sin(x * 0.03) * 3;
-        h += Math.cos(y * 0.03) * 3;
-        h += Math.sin(x * 0.05 + y * 0.03) * 1.5;
-        h += Math.cos(y * 0.05 - x * 0.03) * 1;
-        return Math.round(h);
+        var n = perlin2D(x * 0.02, y * 0.02, 4);
+        return Math.round(n * 5);
+    }
+
+    function fade(t) {
+        return t * t * t * (t * (t * 6 - 15) + 10);
+    }
+
+    function lerp(a, b, t) {
+        return a + t * (b - a);
+    }
+
+    function grad2D(hash, x, y) {
+        var h = hash & 3;
+        var u = h < 2 ? x : y;
+        var v = h < 2 ? y : x;
+        return ((h & 1) ? -u : u) + ((h & 2) ? -2 * v : 2 * v);
+    }
+
+    var perm = [];
+    for (var i = 0; i < 256; i++) perm[i] = Math.floor(Math.random() * 256);
+    for (var i = 0; i < 256; i++) perm[i + 256] = perm[i];
+
+    function perlin2D(x, y, octaves) {
+        var total = 0;
+        var frequency = 1;
+        var amplitude = 1;
+        var maxValue = 0;
+        for (var i = 0; i < octaves; i++) {
+            var xi = Math.floor(x * frequency) & 255;
+            var yi = Math.floor(y * frequency) & 255;
+            var xf = x * frequency - Math.floor(x * frequency);
+            var yf = y * frequency - Math.floor(y * frequency);
+            var u = fade(xf);
+            var v = fade(yf);
+            var aa = perm[perm[xi] + yi];
+            var ab = perm[perm[xi] + yi + 1];
+            var ba = perm[perm[xi + 1] + yi];
+            var bb = perm[perm[xi + 1] + yi + 1];
+            var x1 = lerp(grad2D(aa, xf, yf), grad2D(ba, xf - 1, yf), u);
+            var x2 = lerp(grad2D(ab, xf, yf - 1), grad2D(bb, xf - 1, yf - 1), u);
+            total += lerp(x1, x2, v) * amplitude;
+            maxValue += amplitude;
+            amplitude *= 0.5;
+            frequency *= 2;
+        }
+        return total / maxValue;
     }
 
     function isWater(h) {