/**

* A utility for generating heightmap functions by additive composition.
*
*

@param
{Float32Array} g
* The geometry's z-positions to modify with heightmap data.
*

@param
{Object} [options]
* A map of settings that control how the terrain is constructed and
* displayed. Valid values are the same as those for the `options` parameter
* of {@link THREE.Terrain}().
*

@param
{Object[]} passes
* Determines which heightmap functions to compose to create a new one.
* Consists of an array of objects with the following properties:
* - `method`: Contains something that will be passed around as an
* `options.heightmap` (a heightmap-generating function or a heightmap image)
* - `amplitude`: A multiplier for the heightmap of the pass. Applied before
* the result of the pass is added to the result of previous passes.
* - `frequency`: For terrain generation methods that support it (Perlin,
* Simplex, and Worley) the octave of randomness. This basically controls
* how big features of the terrain will be (higher frequencies result in
* smaller features). Often running multiple generation functions with
* different frequencies and amplitudes results in nice detail.
*/
THREE.Terrain.MultiPass = function(g, options, passes) {
var clonedOptions = {};
for (var opt in options) {
if (options.hasOwnProperty(opt)) {
clonedOptions[opt] = options[opt];
}
}
var range = options.maxHeight - options.minHeight;
for (var i = 0, l = passes.length; i < l; i++) {
var amp = typeof passes[i].amplitude === 'undefined' ? 1 : passes[i].amplitude,
move = 0.5 * (range - range * amp);
clonedOptions.maxHeight = options.maxHeight - move;
clonedOptions.minHeight = options.minHeight + move;
clonedOptions.frequency = typeof passes[i].frequency === 'undefined' ? options.frequency : passes[i].frequency;
passes[i].method(g, clonedOptions);
}
};

/**
* Generate random terrain using a curve.
*
*

@param
{Float32Array} g
* The geometry's z-positions to modify with heightmap data.
*

@param
{Object} options
* A map of settings that control how the terrain is constructed and
* displayed. Valid values are the same as those for the `options` parameter
* of {@link THREE.Terrain}().
*

@param
{Function} curve
* A function that takes an x- and y-coordinate and returns a z-coordinate.
* For example, `function(x, y) { return Math.sin(x*y*Math.PI*100); }`
* generates sine noise, and `function() { return Math.random(); }` sets the
* vertex elevations entirely randomly. The function's parameters (the x- and
* y-coordinates) are given as percentages of a phase (i.e. how far across
* the terrain in the relevant direction they are).
*/
THREE.Terrain.Curve = function(g, options, curve) {
var range = (options.maxHeight - options.minHeight) * 0.5,
scalar = options.frequency / (Math.min(options.xSegments, options.ySegments) + 1);
for (var i = 0, xl = options.xSegments + 1, yl = options.ySegments + 1; i < xl; i++) {
for (var j = 0; j < yl; j++) {
g[j * xl + i] += curve(i * scalar, j * scalar) * range;
}
}
};

/**
* Generate random terrain using the Cosine waves.
*
* Parameters are the same as those for {@link THREE.Terrain.DiamondSquare}.
*/
THREE.Terrain.Cosine = function(g, options) {
var amplitude = (options.maxHeight - options.minHeight) * 0.5,
frequencyScalar = options.frequency * Math.PI / (Math.min(options.xSegments, options.ySegments) + 1),
phase = Math.random() * Math.PI * 2;
for (var i = 0, xl = options.xSegments + 1; i < xl; i++) {
for (var j = 0, yl = options.ySegments + 1; j < yl; j++) {
g[j * xl + i] += amplitude * (Math.cos(i * frequencyScalar + phase) + Math.cos(j * frequencyScalar + phase));
}
}
};

/**
* Generate random terrain using layers of Cosine waves.
*
* Parameters are the same as those for {@link THREE.Terrain.DiamondSquare}.
*/
THREE.Terrain.CosineLayers = function(g, options) {
THREE.Terrain.MultiPass(g, options, [
{ method: THREE.Terrain.Cosine, frequency: 2.5 },
{ method: THREE.Terrain.Cosine, amplitude: 0.1, frequency: 12 },
{ method: THREE.Terrain.Cosine, amplitude: 0.05, frequency: 15 },
{ method: THREE.Terrain.Cosine, amplitude: 0.025, frequency: 20 },
]);
};

/**
* Generate random terrain using the Diamond-Square method.
*
* Based on https://github.com/srchea/Terrain-Generation/blob/master/js/classes/TerrainGeneration.js
*
*

@param
{Float32Array} g
* The geometry's z-positions to modify with heightmap data.
*

@param
{Object} options
* A map of settings that control how the terrain is constructed and
* displayed. Valid values are the same as those for the `options` parameter
* of {@link THREE.Terrain}().
*/
THREE.Terrain.DiamondSquare = function(g, options) {
// Set the segment length to the smallest power of 2 that is greater than
// the number of vertices in either dimension of the plane
var segments = THREE.Math.ceilPowerOfTwo(Math.max(options.xSegments, options.ySegments) + 1);

// Initialize heightmap
var size = segments + 1,
heightmap = [],
smoothing = (options.maxHeight - options.minHeight),
i,
j,
xl = options.xSegments + 1,
yl = options.ySegments + 1;
for (i = 0; i <= segments; i++) {
heightmap[i] = new Float64Array(segments+1);
}

// Generate heightmap
for (var l = segments; l >= 2; l /= 2) {
var half = Math.round(l*0.5),
whole = Math.round(l),
x,
y,
avg,
d,
e;
smoothing /= 2;
// square
for (x = 0; x < segments; x += whole) {
for (y = 0; y < segments; y += whole) {
d = Math.random() * smoothing * 2 - smoothing;
avg = heightmap[x][y] + // top left
heightmap[x+whole][y] + // top right
heightmap[x][y+whole] + // bottom left
heightmap[x+whole][y+whole]; // bottom right
avg *= 0.25;
heightmap[x+half][y+half] = avg + d;
}
}
// diamond
for (x = 0; x < segments; x += half) {
for (y = (x+half) % l; y < segments; y += l) {
d = Math.random() * smoothing * 2 - smoothing;
avg = heightmap[(x-half+size)%size][y] + // middle left
heightmap[(x+half)%size][y] + // middle right
heightmap[x][(y+half)%size] + // middle top
heightmap[x][(y-half+size)%size]; // middle bottom
avg *= 0.25;
avg += d;
heightmap[x][y] = avg;
// top and right edges
if (x === 0) heightmap[segments][y] = avg;
if (y === 0) heightmap[x][segments] = avg;
}
}
}

// Apply heightmap
for (i = 0; i < xl; i++) {
for (j = 0; j < yl; j++) {
g[j * xl + i] += heightmap[i][j];
}
}

// THREE.Terrain.SmoothConservative(g, options);
};

/**
* Generate random terrain using the Fault method.
*
* Based on http://www.lighthouse3d.com/opengl/terrain/index.php3?fault
* Repeatedly draw random lines that cross the terrain. Raise the terrain on
* one side of the line and lower it on the other.
*
* Parameters are the same as those for {@link THREE.Terrain.DiamondSquare}.
*/
THREE.Terrain.Fault = function(g, options) {
var d = Math.sqrt(options.xSegments*options.xSegments + options.ySegments*options.ySegments),
iterations = d * options.frequency,
range = (options.maxHeight - options.minHeight) * 0.5,
displacement = range / iterations,
smoothDistance = Math.min(options.xSize / options.xSegments, options.ySize / options.ySegments) * options.frequency;
for (var k = 0; k < iterations; k++) {
var v = Math.random(),
a = Math.sin(v * Math.PI * 2),
b = Math.cos(v * Math.PI * 2),
c = Math.random() * d - d*0.5;
for (var i = 0, xl = options.xSegments + 1; i < xl; i++) {
for (var j = 0, yl = options.ySegments + 1; j < yl; j++) {
var distance = a*i + b*j - c;
if (distance > smoothDistance) {
g[j * xl + i] += displacement;
}
else if (distance < -smoothDistance) {
g[j * xl + i] -= displacement;
}
else {
g[j * xl + i] += Math.cos(distance / smoothDistance * Math.PI * 2) * displacement;
}
}
}
}
// THREE.Terrain.Smooth(g, options);
};

/**
* Generate random terrain using the Hill method.
*
* The basic approach is to repeatedly pick random points on or near the
* terrain and raise a small hill around those points. Those small hills
* eventually accumulate into large hills with distinct features.
*
*

@param
{Float32Array} g
* The geometry's z-positions to modify with heightmap data.
*

@param
{Object} options
* A map of settings that control how the terrain is constructed and
* displayed. Valid values are the same as those for the `options` parameter
* of {@link THREE.Terrain}().
*

@param
{Function} [feature=THREE.Terrain.Influences.Hill]
* A function describing the feature to raise at the randomly chosen points.
* Typically this is a hill shape so that the accumulated features result in
* something resembling mountains, but it could be any function that accepts
* one parameter representing the distance from the feature's origin
* expressed as a number between -1 and 1 inclusive. Optionally it can accept
* a second and third parameter, which are the x- and y- distances from the
* feature's origin, respectively. It should return a number between -1 and 1
* representing the height of the feature at the given coordinate.
* `THREE.Terrain.Influences` contains some

README.md

@@ -1,10 +1,13 @@
 ---
-title: Terraingen Explorer
-emoji: 🐠
-colorFrom: green
-colorTo: red
+title: TerrainGen Explorer 🏔️
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,66 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: rgba(17, 24, 39, 0.9);
+          backdrop-filter: blur(8px);
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .footer-container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 2rem 1rem;
+        }
+        
+        .social-link {
+          color: rgba(156, 163, 175, 0.9);
+          transition: color 0.2s ease, transform 0.2s ease;
+        }
+        
+        .social-link:hover {
+          color: white;
+          transform: translateY(-2px);
+        }
+      </style>
+      <footer class="text-gray-400 py-8">
+        <div class="footer-container">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-6 md:mb-0">
+              <div class="flex items-center space-x-2 mb-4">
+                <i data-feather="mountain" class="text-blue-400"></i>
+                <span class="text-xl font-bold text-white">TerrainGen Explorer</span>
+              </div>
+              <p class="text-sm max-w-md">
+                A visual playground for exploring procedural terrain generation algorithms.
+              </p>
+            </div>
+            
+            <div class="flex space-x-6">
+              <a href="#" class="social-link">
+                <i data-feather="github" class="w-5 h-5"></i>
+              </a>
+              <a href="#" class="social-link">
+                <i data-feather="twitter" class="w-5 h-5"></i>
+              </a>
+              <a href="#" class="social-link">
+                <i data-feather="linkedin" class="w-5 h-5"></i>
+              </a>
+              <a href="#" class="social-link">
+                <i data-feather="mail" class="w-5 h-5"></i>
+              </a>
+            </div>
+          </div>
+          
+          <div class="mt-8 pt-8 border-t border-gray-800 text-sm text-center">
+            <p>© ${new Date().getFullYear()} TerrainGen Explorer. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,103 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background-color: rgba(17, 24, 39, 0.9);
+          backdrop-filter: blur(8px);
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .nav-container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        .nav-link {
+          position: relative;
+          color: rgba(209, 213, 219, 0.9);
+          transition: color 0.2s ease;
+        }
+        
+        .nav-link:hover {
+          color: white;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background-color: #3b82f6;
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .mobile-menu {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.3s ease-out;
+        }
+        
+        .mobile-menu.open {
+          max-height: 500px;
+        }
+      </style>
+      <nav class="text-white py-4">
+        <div class="nav-container flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <i data-feather="mountain" class="text-blue-400"></i>
+            <span class="text-xl font-bold">TerrainGen Explorer</span>
+          </div>
+          
+          <div class="hidden md:flex items-center space-x-6">
+            <a href="#" class="nav-link font-medium">Home</a>
+            <a href="#" class="nav-link font-medium">Algorithms</a>
+            <a href="#" class="nav-link font-medium">Gallery</a>
+            <a href="#" class="nav-link font-medium">About</a>
+          </div>
+          
+          <button id="mobile-menu-button" class="md:hidden focus:outline-none">
+            <i data-feather="menu" class="w-6 h-6"></i>
+          </button>
+        </div>
+        
+        <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-800">
+          <div class="px-4 py-2 space-y-3">
+            <a href="#" class="block nav-link py-2">Home</a>
+            <a href="#" class="block nav-link py-2">Algorithms</a>
+            <a href="#" class="block nav-link py-2">Gallery</a>
+            <a href="#" class="block nav-link py-2">About</a>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    // Initialize mobile menu toggle
+    this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
+      const menu = this.shadowRoot.getElementById('mobile-menu');
+      menu.classList.toggle('open');
+      
+      // Change icon
+      const icon = this.shadowRoot.querySelector('#mobile-menu-button i');
+      if (menu.classList.contains('open')) {
+        icon.setAttribute('data-feather', 'x');
+      } else {
+        icon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,143 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TerrainGen Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.min.js"></script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <h1 class="text-4xl font-bold mb-4">TerrainGen Explorer 🏔️</h1>
+            <p class="text-xl text-gray-300 mb-6">Visualize different procedural terrain generation algorithms in 3D</p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Terrain Generation Cards -->
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <canvas id="diamond-square-canvas" class="w-full h-full"></canvas>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-semibold mb-2">Diamond-Square</h3>
+                        <p class="text-gray-400 mb-4">Fractal-based terrain generation using recursive subdivision</p>
+                        <button onclick="generateTerrain('diamond-square')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
+                            Generate
+                        </button>
+                    </div>
+                </div>
+
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <canvas id="perlin-canvas" class="w-full h-full"></canvas>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-semibold mb-2">Perlin Noise</h3>
+                        <p class="text-gray-400 mb-4">Natural-looking terrain using gradient noise</p>
+                        <button onclick="generateTerrain('perlin')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
+                            Generate
+                        </button>
+                    </div>
+                </div>
+
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                    <div class="h-48 bg-gray-700 flex items-center justify-center">
+                        <canvas id="simplex-canvas" class="w-full h-full"></canvas>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-semibold mb-2">Simplex Noise</h3>
+                        <p class="text-gray-400 mb-4">Improved performance over Perlin with similar results</p>
+                        <button onclick="generateTerrain('simplex')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors">
+                            Generate
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold mb-4">Terrain Parameters</h2>
+            <div class="bg-gray-800 rounded-lg p-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div>
+                        <label class="block text-gray-300 mb-2">Size</label>
+                        <input type="range" id="size-slider" min="16" max="128" step="16" value="64" class="w-full">
+                        <div class="text-right text-gray-400" id="size-value">64x64</div>
+                    </div>
+                    <div>
+                        <label class="block text-gray-300 mb-2">Roughness</label>
+                        <input type="range" id="roughness-slider" min="0.1" max="1" step="0.1" value="0.5" class="w-full">
+                        <div class="text-right text-gray-400" id="roughness-value">0.5</div>
+                    </div>
+                    <div>
+                        <label class="block text-gray-300 mb-2">Height Scale</label>
+                        <input type="range" id="height-slider" min="1" max="50" value="20" class="w-full">
+                        <div class="text-right text-gray-400" id="height-value">20</div>
+                    </div>
+                    <div>
+                        <label class="block text-gray-300 mb-2">Water Level</label>
+                        <input type="range" id="water-slider" min="0" max="100" value="40" class="w-full">
+                        <div class="text-right text-gray-400" id="water-value">40%</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <h2 class="text-2xl font-bold mb-4">3D View</h2>
+            <div class="bg-gray-800 rounded-lg overflow-hidden h-96">
+                <canvas id="terrain-canvas" class="w-full h-full"></canvas>
+            </div>
+            <div class="mt-4 flex justify-center space-x-4">
+                <button onclick="rotateCamera('left')" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
+                    <i data-feather="rotate-ccw" class="mr-2"></i> Rotate Left
+                </button>
+                <button onclick="resetCamera()" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
+                    <i data-feather="refresh-ccw" class="mr-2"></i> Reset View
+                </button>
+                <button onclick="rotateCamera('right')" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
+                    <i data-feather="rotate-cw" class="mr-2"></i> Rotate Right
+                </button>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize all canvases
+        document.addEventListener('DOMContentLoaded', function() {
+            generateTerrain('diamond-square');
+            
+            // Update slider values
+            document.getElementById('size-slider').addEventListener('input', function() {
+                document.getElementById('size-value').textContent = this.value + 'x' + this.value;
+            });
+            
+            document.getElementById('roughness-slider').addEventListener('input', function() {
+                document.getElementById('roughness-value').textContent = this.value;
+            });
+            
+            document.getElementById('height-slider').addEventListener('input', function() {
+                document.getElementById('height-value').textContent = this.value;
+            });
+            
+            document.getElementById('water-slider').addEventListener('input', function() {
+                document.getElementById('water-value').textContent = this.value + '%';
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,349 @@
+// Global Three.js variables
+let scene, camera, renderer, terrainMesh, controls;
+let terrainSize = 64;
+let isAnimating = false;
+let animationId = null;
+
+// Initialize the 3D scene
+function initScene() {
+    const canvas = document.getElementById('terrain-canvas');
+    
+    // Scene setup
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x1a202c);
+    
+    // Camera setup
+    camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+    camera.position.set(terrainSize * 0.7, terrainSize * 0.7, terrainSize * 0.7);
+    camera.lookAt(0, 0, 0);
+    
+    // Renderer setup
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+    
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    
+    // Orbit controls
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.25;
+    
+    // Handle window resize
+    window.addEventListener('resize', onWindowResize);
+}
+
+// Generate terrain using specified algorithm
+function generateTerrain(algorithm) {
+    // Remove existing terrain if any
+    if (terrainMesh) {
+        scene.remove(terrainMesh);
+        terrainMesh.geometry.dispose();
+        terrainMesh.material.dispose();
+    }
+    
+    // Get parameters from sliders
+    terrainSize = parseInt(document.getElementById('size-slider').value);
+    const roughness = parseFloat(document.getElementById('roughness-slider').value);
+    const heightScale = parseInt(document.getElementById('height-slider').value);
+    const waterLevel = parseInt(document.getElementById('water-slider').value) / 100;
+    
+    // Generate heightmap
+    let heightmap = generateHeightmap(algorithm, terrainSize, roughness, heightScale);
+    
+    // Create geometry from heightmap
+    const geometry = createGeometryFromHeightmap(heightmap, terrainSize, heightScale);
+    
+    // Create material with water effect
+    const material = createTerrainMaterial(heightmap, terrainSize, heightScale, waterLevel);
+    
+    // Create mesh
+    terrainMesh = new THREE.Mesh(geometry, material);
+    scene.add(terrainMesh);
+    
+    // Update camera position based on terrain size
+    camera.position.set(terrainSize * 0.7, terrainSize * 0.7, terrainSize * 0.7);
+    camera.lookAt(0, 0, 0);
+    controls.update();
+    
+    // Start animation if not already running
+    if (!isAnimating) {
+        animate();
+    }
+    
+    // Update 2D previews
+    updatePreviews(heightmap, algorithm);
+}
+
+// Generate heightmap using specified algorithm
+function generateHeightmap(algorithm, size, roughness, heightScale) {
+    const heightmap = new Array(size * size).fill(0);
+    
+    // Simplified implementations for demo purposes
+    switch(algorithm) {
+        case 'diamond-square':
+            // Implement diamond-square algorithm
+            diamondSquare(heightmap, size, roughness);
+            break;
+            
+        case 'perlin':
+            // Implement Perlin noise
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const value = noise.perlin2(x * roughness / 10, y * roughness / 10);
+                    heightmap[y * size + x] = (value + 1) * 0.5 * heightScale;
+                }
+            }
+            break;
+            
+        case 'simplex':
+            // Implement Simplex noise
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const value = noise.simplex2(x * roughness / 10, y * roughness / 10);
+                    heightmap[y * size + x] = (value + 1) * 0.5 * heightScale;
+                }
+            }
+            break;
+            
+        default:
+            console.error('Unknown algorithm:', algorithm);
+    }
+    
+    return heightmap;
+}
+
+// Simplified Diamond-Square implementation
+function diamondSquare(heightmap, size, roughness) {
+    // Initialize corners
+    heightmap[0] = Math.random() * roughness;
+    heightmap[size - 1] = Math.random() * roughness;
+    heightmap[size * (size - 1)] = Math.random() * roughness;
+    heightmap[size * size - 1] = Math.random() * roughness;
+    
+    let step = size - 1;
+    let scale = roughness;
+    
+    while (step > 1) {
+        // Diamond step
+        for (let y = 0; y < size - 1; y += step) {
+            for (let x = 0; x < size - 1; x += step) {
+                const avg = (
+                    heightmap[y * size + x] +
+                    heightmap[y * size + (x + step)] +
+                    heightmap[(y + step) * size + x] +
+                    heightmap[(y + step) * size + (x + step)]
+                ) / 4;
+                
+                const centerX = x + step / 2;
+                const centerY = y + step / 2;
+                const centerIndex = centerY * size + centerX;
+                heightmap[centerIndex] = avg + (Math.random() * 2 - 1) * scale;
+            }
+        }
+        
+        // Square step
+        for (let y = 0; y < size; y += step / 2) {
+            for (let x = (y + step / 2) % step; x < size; x += step) {
+                let sum = 0;
+                let count = 0;
+                
+                // Top neighbor
+                if (y - step / 2 >= 0) {
+                    sum += heightmap[(y - step / 2) * size + x];
+                    count++;
+                }
+                
+                // Bottom neighbor
+                if (y + step / 2 < size) {
+                    sum += heightmap[(y + step / 2) * size + x];
+                    count++;
+                }
+                
+                // Left neighbor
+                if (x - step / 2 >= 0) {
+                    sum += heightmap[y * size + (x - step / 2)];
+                    count++;
+                }
+                
+                // Right neighbor
+                if (x + step / 2 < size) {
+                    sum += heightmap[y * size + (x + step / 2)];
+                    count++;
+                }
+                
+                if (count > 0) {
+                    heightmap[y * size + x] = sum / count + (Math.random() * 2 - 1) * scale;
+                }
+            }
+        }
+        
+        step = Math.floor(step / 2);
+        scale *= roughness;
+    }
+}
+
+// Create Three.js geometry from heightmap
+function createGeometryFromHeightmap(heightmap, size, heightScale) {
+    const geometry = new THREE.PlaneGeometry(size, size, size - 1, size - 1);
+    
+    // Apply heightmap to vertices
+    for (let i = 0; i < geometry.attributes.position.count; i++) {
+        const x = i % size;
+        const y = Math.floor(i / size);
+        geometry.attributes.position.setZ(i, heightmap[y * size + x]);
+    }
+    
+    geometry.rotateX(-Math.PI / 2);
+    geometry.computeVertexNormals();
+    
+    return geometry;
+}
+
+// Create terrain material with water effect
+function createTerrainMaterial(heightmap, size, heightScale, waterLevel) {
+    // Find min and max heights
+    let minHeight = Infinity;
+    let maxHeight = -Infinity;
+    
+    for (const height of heightmap) {
+        if (height < minHeight) minHeight = height;
+        if (height > maxHeight) maxHeight = height;
+    }
+    
+    const waterHeight = minHeight + (maxHeight - minHeight) * waterLevel;
+    
+    // Create color gradient
+    const texture = new THREE.CanvasTexture(createTerrainTexture(size, minHeight, maxHeight, waterHeight));
+    
+    return new THREE.MeshStandardMaterial({
+        map: texture,
+        metalness: 0.1,
+        roughness: 0.7,
+        flatShading: false
+    });
+}
+
+// Create terrain texture with elevation colors
+function createTerrainTexture(size, minHeight, maxHeight, waterHeight) {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    
+    // Draw gradient based on height
+    const imageData = ctx.createImageData(size, size);
+    
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            const idx = (y * size + x) * 4;
+            const height = heightmap[y * size + x];
+            
+            // Water
+            if (height <= waterHeight) {
+                const depth = (waterHeight - height) / (waterHeight - minHeight);
+                imageData.data[idx] = 30 + 50 * depth; // R
+                imageData.data[idx + 1] = 80 + 100 * depth; // G
+                imageData.data[idx + 2] = 150 + 100 * depth; // B
+            }
+            // Beach/Sand
+            else if (height <= waterHeight + (maxHeight - waterHeight) * 0.05) {
+                imageData.data[idx] = 210; // R
+                imageData.data[idx + 1] = 190; // G
+                imageData.data[idx + 2] = 140; // B
+            }
+            // Grass
+            else if (height <= waterHeight + (maxHeight - waterHeight) * 0.3) {
+                const t = (height - waterHeight) / ((maxHeight - waterHeight) * 0.3);
+                imageData.data[idx] = 50 + 80 * t; // R
+                imageData.data[idx + 1] = 100 + 80 * t; // G
+                imageData.data[idx + 2] = 50 + 30 * t; // B
+            }
+            // Rock
+            else if (height <= waterHeight + (maxHeight - waterHeight) * 0.7) {
+                const t = (height - waterHeight - (maxHeight - waterHeight) * 0.3) / ((maxHeight - waterHeight) * 0.4);
+                imageData.data[idx] = 100 + 50 * t; // R
+                imageData.data[idx + 1] = 80 + 20 * t; // G
+                imageData.data[idx + 2] = 60 + 20 * t; // B
+            }
+            // Snow
+            else {
+                const t = (height - waterHeight - (maxHeight - waterHeight) * 0.7) / ((maxHeight - waterHeight) * 0.3);
+                imageData.data[idx] = 180 + 75 * t; // R
+                imageData.data[idx + 1] = 190 + 65 * t; // G
+                imageData.data[idx + 2] = 200 + 55 * t; // B
+            }
+            
+            imageData.data[idx + 3] = 255; // Alpha
+        }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+    return canvas;
+}
+
+// Update 2D preview canvases
+function updatePreviews(heightmap, algorithm) {
+    const size = Math.min(128, terrainSize);
+    const previewCanvas = document.getElementById(`${algorithm}-canvas`);
+    const ctx = previewCanvas.getContext('2d');
+    
+    // Scale heightmap to fit preview
+    const step = Math.floor(terrainSize / size);
+    const imageData = ctx.createImageData(size, size);
+    
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            const idx = (y * size + x) * 4;
+            const height = heightmap[y * step * terrainSize + x * step];
+            const normalizedHeight = Math.floor((height / Math.max(...heightmap)) * 255);
+            
+            imageData.data[idx] = normalizedHeight; // R
+            imageData.data[idx + 1] = normalizedHeight; // G
+            imageData.data[idx + 2] = normalizedHeight; // B
+            imageData.data[idx + 3] = 255; // Alpha
+        }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+}
+
+// Animation loop
+function animate() {
+    isAnimating = true;
+    animationId = requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+}
+
+// Handle window resize
+function onWindowResize() {
+    const canvas = document.getElementById('terrain-canvas');
+    camera.aspect = canvas.clientWidth / canvas.clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+}
+
+// Camera controls
+function rotateCamera(direction) {
+    const angle = direction === 'left' ? -Math.PI / 8 : Math.PI / 8;
+    camera.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), angle);
+    camera.lookAt(0, 0, 0);
+}
+
+function resetCamera() {
+    camera.position.set(terrainSize * 0.7, terrainSize * 0.7, terrainSize * 0.7);
+    camera.lookAt(0, 0, 0);
+    controls.update();
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initScene();
+    generateTerrain('diamond-square');
+});

style.css

@@ -1,28 +1,45 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+canvas {
+    display: block;
+    background: #1a202c;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #2d3748;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #4a5568;
+    border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #718096;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Animation for buttons */
+button {
+    transition: all 0.2s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+button:active {
+    transform: scale(0.95);
 }
+
+/* Responsive canvas containers */
+@media (max-width: 768px) {
+    .canvas-container {
+        height: 300px !important;
+    }
+}