now add some motherfucking deep oceanic gradient to it, so it fucking looks as fucking fuck. 1. Define a color gradient function that takes height as input and returns a color value based on height. Use a gradient from dark blue to light blue to represent deep to shallow ocean depths.
2. Update the material used for the terrain mesh to use vertex colors, with colors assigned based on the height of each vertex.
3. Update the generateTerrain function to set vertex colors based on height using the color gradient function from step 1.
4. Update the updatePositions function to also update vertex colors based on the new height values.: ```<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.152.2/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
</head>

<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const width = 800;
    const height = 400;
    const widthSegments = 199;
    const heightSegments = 99;
    const geometry = new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments);
    const positions = geometry.getAttribute('position').array;
    const noise = new SimplexNoise(Math.random());

    function generateTerrain(positions, scale = 0.1, elevation = 0.1) {
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * scale;
        const ny = positions[i + 1] * scale;
        const height = (noise.noise2D(nx, ny) + 1) * 0.1 * elevation;
        positions[i + 2] = height;
      }
      geometry.computeVertexNormals();
    }
    generateTerrain(positions);
    const material = new THREE.MeshLambertMaterial({
      color: 0x59a859,
      side: THREE.DoubleSide
    });
    const terrain = new THREE.Mesh(geometry, material);
    terrain.rotation.x = Math.PI / 2;
    scene.add(terrain);
    const light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set(1, 1, 1);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0x404040));
    camera.position.z = 40;
    camera.position.y = 40;
    camera.rotation.x = -Math.PI / 4;
    let clock = new THREE.Clock();

    function updatePositions() {
      const elapsedTime = clock.getElapsedTime();
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * 0.1 + elapsedTime * 0.1;
        const ny = positions[i + 1] * 0.1 + elapsedTime * 0.1;
        const height = (noise.noise2D(nx, ny) + 1) * 0.5 * 5;
        positions[i + 2] = height;
      }
      geometry.attributes.position.needsUpdate = true;
      geometry.computeVertexNormals();
    }

    function animate() {
      requestAnimationFrame(animate);
      updatePositions();
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>

</html>```