Spaces:

Matanga
/

anycoder-7bd4b02e

Running

App Files Files Community

Matanga commited on Feb 4

Commit

c9aa1bd

verified ·

1 Parent(s): aa19a67

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +677 -19

index.html CHANGED Viewed

@@ -1,19 +1,677 @@
-<!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>Procedural Universe Explorer</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap"
+    rel="stylesheet">
+  <style>
+    :root {
+      --neon-cyan: #00f3ff;
+      --neon-pink: #ff00ff;
+      --deep-space: #050510;
+      --glass-bg: rgba(255, 255, 255, 0.03);
+      --glass-border: rgba(255, 255, 255, 0.1);
+    }
+    body {
+      background-color: var(--deep-space);
+      color: white;
+      font-family: 'Space Grotesk', sans-serif;
+      overflow-x: hidden;
+    }
+    .mono {
+      font-family: 'JetBrains Mono', monospace;
+    }
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #0a0a1a;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #333;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--neon-cyan);
+    }
+    /* Glassmorphism Utilities */
+    .glass-panel {
+      background: var(--glass-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--glass-border);
+      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    }
+    .glass-card {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      transition: all 0.3s ease;
+    }
+    .glass-card:hover {
+      transform: translateY(-5px);
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
+    }
+    /* Animations */
+    @keyframes float {
+      0% {
+        transform: translateY(0px);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+      100% {
+        transform: translateY(0px);
+      }
+    }
+    .animate-float {
+      animation: float 6s ease-in-out infinite;
+    }
+    @keyframes pulse-glow {
+      0%,
+      100% {
+        opacity: 0.5;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    .glow-text {
+      text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
+    }
+    /* Range Slider Styling */
+    input[type=range] {
+      -webkit-appearance: none;
+      width: 100%;
+      background: transparent;
+    }
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background: var(--neon-cyan);
+      cursor: pointer;
+      margin-top: -6px;
+      box-shadow: 0 0 10px var(--neon-cyan);
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 4px;
+      cursor: pointer;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 2px;
+    }
+    /* Grid Background */
+    .bg-grid {
+      background-size: 40px 40px;
+      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+      mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
+    }
+    .crt-overlay {
+      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+      background-size: 100% 2px, 3px 100%;
+      pointer-events: none;
+    }
+    /* Glitch Effect Class */
+    .glitch-hover:hover {
+      animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
+      color: var(--neon-pink);
+    }
+    @keyframes glitch {
+      0% {
+        transform: translate(0)
+      }
+      20% {
+        transform: translate(-2px, 2px)
+      }
+      40% {
+        transform: translate(-2px, -2px)
+      }
+      60% {
+        transform: translate(2px, 2px)
+      }
+      80% {
+        transform: translate(2px, -2px)
+      }
+      100% {
+        transform: translate(0)
+      }
+    }
+  </style>
+</head>
+<body class="min-h-screen relative selection:bg-cyan-500 selection:text-black">
+  <!-- Background Canvas -->
+  <canvas id="starfield" class="fixed top-0 left-0 w-full h-full z-0"></canvas>
+  <div class="fixed top-0 left-0 w-full h-full bg-grid z-0 pointer-events-none"></div>
+  <div class="fixed top-0 left-0 w-full h-full crt-overlay z-50 pointer-events-none opacity-30"></div>
+  <!-- Main Content Wrapper -->
+  <div class="relative z-10 flex flex-col min-h-screen">
+    <!-- Header -->
+    <header class="w-full p-6 flex justify-between items-center glass-panel sticky top-0 z-50 border-b border-white/10">
+      <div class="flex items-center gap-3 group cursor-pointer" onclick="window.location.reload()">
+        <div
+          class="w-8 h-8 rounded-full bg-gradient-to-tr from-cyan-500 to-purple-600 animate-pulse group-hover:rotate-180 transition-transform duration-700">
+        </div>
+        <h1 class="text-2xl font-bold tracking-tighter uppercase mono">NEXUS<span class="text-cyan-400">GEN</span></h1>
+      </div>
+      <nav class="hidden md:flex gap-8 text-sm font-medium text-gray-400">
+        <a href="#" class="hover:text-cyan-400 transition-colors">Explore</a>
+        <a href="#generator" class="hover:text-cyan-400 transition-colors">Create</a>
+        <a href="#about" class="hover:text-cyan-400 transition-colors">About</a>
+      </nav>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+        class="text-xs mono text-gray-500 hover:text-white transition-colors border border-white/10 px-3 py-1 rounded-full">
+        Built with anycoder
+      </a>
+    </header>
+    <!-- Hero Section -->
+    <main
+      class="flex-grow container mx-auto px-4 py-12 flex flex-col items-center justify-center text-center min-h-[80vh]">
+      <div
+        class="inline-block mb-4 px-4 py-1 rounded-full border border-cyan-500/30 bg-cyan-500/10 text-cyan-300 text-xs mono tracking-widest animate-float">
+        SYSTEM ONLINE // V.2.0.4
+      </div>
+      <h2 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+        Procedural <br>
+        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 glow-text">Universe Engine</span>
+      </h2>
+      <p class="text-gray-400 max-w-2xl text-lg mb-10 leading-relaxed">
+        Generate infinite worlds, terrains, and abstract art using mathematical algorithms.
+        No assets loaded. Everything is calculated in real-time.
+      </p>
+      <div class="flex flex-wrap gap-4 justify-center">
+        <button onclick="scrollToSection('generator')" class="group relative px-8 py-4 bg-cyan-500 hover:bg-cyan-400 text-black font-bold rounded-lg overflow-hidden transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.5)]">
+                    <span class="relative z-10 flex items-center gap-2">
+                        Initialize Generator
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                    </span>
+                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                </button>
+        <button onclick="randomizeSeed()" class="px-8 py-4 glass-panel hover:bg-white/10 text-white font-semibold rounded-lg transition-all border border-white/20 hover:border-white/40">
+                    Randomize Seed
+                </button>
+      </div>
+      <!-- Live Stats -->
+      <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 w-full max-w-4xl border-t border-white/10 pt-8">
+        <div class="text-center">
+          <div class="text-3xl font-bold mono text-cyan-400" id="stat-fps">60</div>
+          <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">FPS</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold mono text-purple-400" id="stat-objects">0</div>
+          <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">Entities</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold mono text-pink-400" id="stat-seed">8492</div>
+          <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">Current Seed</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold mono text-green-400">∞</div>
+          <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">Possibilities</div>
+        </div>
+      </div>
+    </main>
+    <!-- Generator Dashboard -->
+    <section id="generator" class="py-20 bg-black/40 backdrop-blur-sm border-t border-white/5">
+      <div class="container mx-auto px-4">
+        <div class="flex flex-col lg:flex-row gap-8 h-[800px]">
+          <!-- Controls Sidebar -->
+          <div class="w-full lg:w-1/4 glass-panel rounded-xl p-6 flex flex-col gap-6 overflow-y-auto">
+            <div>
+              <h3 class="text-xl font-bold mb-1 flex items-center gap-2">
+                <span class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
+                Parameters
+              </h3>
+              <p class="text-xs text-gray-500 mono">ADJUST SIMULATION VARIABLES</p>
+            </div>
+            <!-- Control Group: Terrain -->
+            <div class="space-y-4">
+              <label class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Terrain Complexity</label>
+              <input type="range" id="complexity" min="1" max="100" value="50" oninput="updateParams()">
+              <div class="flex justify-between text-xs text-gray-500 mono">
+                <span>Flat</span>
+                <span>Chaotic</span>
+              </div>
+            </div>
+            <!-- Control Group: Color -->
+            <div class="space-y-4">
+              <label class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Biome Shift</label>
+              <input type="range" id="biome" min="0" max="360" value="180" oninput="updateParams()">
+              <div class="h-2 w-full rounded-full bg-gradient-to-r from-red-500 via-green-500 to-blue-500"></div>
+            </div>
+            <!-- Control Group: Speed -->
+            <div class="space-y-4">
+              <label class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Time Dilation</label>
+              <input type="range" id="speed" min="0" max="50" value="10" oninput="updateParams()">
+            </div>
+            <hr class="border-white/10">
+            <!-- Toggles -->
+            <div class="space-y-3">
+              <label class="flex items-center justify-between cursor-pointer group">
+                                <span class="text-sm text-gray-300 group-hover:text-white">Wireframe Mode</span>
+                                <input type="checkbox" id="wireframe" class="accent-cyan-500 w-4 h-4" onchange="updateParams()">
+                            </label>
+              <label class="flex items-center justify-between cursor-pointer group">
+                                <span class="text-sm text-gray-300 group-hover:text-white">Show Nodes</span>
+                                <input type="checkbox" id="nodes" checked class="accent-cyan-500 w-4 h-4" onchange="updateParams()">
+                            </label>
+            </div>
+            <div class="mt-auto">
+              <button onclick="downloadCanvas()" class="w-full py-3 border border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10 rounded-lg transition-colors flex items-center justify-center gap-2 text-sm font-bold uppercase">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                                Export Render
+                            </button>
+            </div>
+          </div>
+          <!-- Visualization Area -->
+          <div class="w-full lg:w-3/4 glass-panel rounded-xl p-1 relative overflow-hidden group">
+            <div class="absolute top-4 left-4 z-10 bg-black/50 backdrop-blur px-3 py-1 rounded border border-white/10">
+              <span class="text-xs mono text-cyan-400">VIEWPORT: ACTIVE</span>
+            </div>
+            <!-- The Main Procedural Canvas -->
+            <canvas id="procCanvas" class="w-full h-full rounded-lg bg-black cursor-crosshair"></canvas>
+            <!-- Overlay UI -->
+            <div class="absolute bottom-4 right-4 flex gap-2">
+              <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse delay-75"></div>
+              <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse delay-150"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Feature Grid -->
+    <section class="py-20 container mx-auto px-4">
+      <h3 class="text-3xl font-bold mb-12 text-center">Procedural Capabilities</h3>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Card 1 -->
+        <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+          <div
+            class="absolute -right-10 -top-10 w-32 h-32 bg-purple-500/20 rounded-full blur-3xl group-hover:bg-purple-500/40 transition-all">
+          </div>
+          <div class="w-12 h-12 bg-white/5 rounded-lg flex items-center justify-center mb-6 border border-white/10">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+            </svg>
+          </div>
+          <h4 class="text-xl font-bold mb-2">Fractal Noise</h4>
+          <p class="text-gray-400 text-sm leading-relaxed">
+            Utilizes Perlin and Simplex noise algorithms to generate organic-looking textures and terrain that never
+            repeat.
+          </p>
+        </div>
+        <!-- Card 2 -->
+        <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+          <div
+            class="absolute -right-10 -top-10 w-32 h-32 bg-cyan-500/20 rounded-full blur-3xl group-hover:bg-cyan-500/40 transition-all">
+          </div>
+          <div class="w-12 h-12 bg-white/5 rounded-lg flex items-center justify-center mb-6 border border-white/10">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-cyan-400" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+            </svg>
+          </div>
+          <h4 class="text-xl font-bold mb-2">Vector Fields</h4>
+          <p class="text-gray-400 text-sm leading-relaxed">
+            Simulates fluid dynamics and particle flows using curl noise to create mesmerizing motion patterns.
+          </p>
+        </div>
+        <!-- Card 3 -->
+        <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+          <div
+            class="absolute -right-10 -top-10 w-32 h-32 bg-pink-500/20 rounded-full blur-3xl group-hover:bg-pink-500/40 transition-all">
+          </div>
+          <div class="w-12 h-12 bg-white/5 rounded-lg flex items-center justify-center mb-6 border border-white/10">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-400" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </div>
+          <h4 class="text-xl font-bold mb-2">L-Systems</h4>
+          <p class="text-gray-400 text-sm leading-relaxed">
+            Recursive string rewriting systems used to model the growth processes of plant development and geometric
+            structures.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer class="border-t border-white/10 bg-black/80 py-12">
+      <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6">
+        <div class="text-center md:text-left">
+          <h2 class="text-2xl font-bold tracking-tighter uppercase mono">NEXUS<span class="text-cyan-400">GEN</span>
+          </h2>
+          <p class="text-gray-500 text-sm mt-2">Infinite possibilities in a finite space.</p>
+        </div>
+        <div class="flex gap-6">
+          <a href="#" class="text-gray-400 hover:text-white transition-colors">Github</a>
+          <a href="#" class="text-gray-400 hover:text-white transition-colors">Twitter</a>
+          <a href="#" class="text-gray-400 hover:text-white transition-colors">Discord</a>
+        </div>
+        <div class="text-gray-600 text-xs mono">
+          &copy; 2023 PROCEDURAL SYSTEMS
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script>
+    /**
+     * UTILITIES
+     */
+    function scrollToSection(id) {
+      document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
+    }
+    // Seeded Random Number Generator (Mulberry32)
+    function mulberry32(a) {
+      return function() {
+        var t = a += 0x6D2B79F5;
+        t = Math.imul(t ^ t >>> 15, t | 1);
+        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+        return ((t ^ t >>> 14) >>> 0) / 4294967296;
+      }
+    }
+    let seed = Math.floor(Math.random() * 10000);
+    let rand = mulberry32(seed);
+    function randomizeSeed() {
+      seed = Math.floor(Math.random() * 100000);
+      rand = mulberry32(seed);
+      document.getElementById('stat-seed').innerText = seed;
+      initStars(); // Re-init stars
+      time = 0; // Reset procedural anim
+    }
+    /**
+     * BACKGROUND STARFIELD
+     */
+    const starCanvas = document.getElementById('starfield');
+    const starCtx = starCanvas.getContext('2d');
+    let stars = [];
+    const numStars = 200;
+    function resizeStarCanvas() {
+      starCanvas.width = window.innerWidth;
+      starCanvas.height = window.innerHeight;
+    }
+    class Star {
+      constructor() {
+        this.reset();
+      }
+      reset() {
+        this.x = rand() * starCanvas.width;
+        this.y = rand() * starCanvas.height;
+        this.z = rand() * 2 + 0.5; // Depth/Speed
+        this.size = rand() * 1.5;
+        this.opacity = rand();
+        this.fadeDir = 0.01;
+      }
+      update() {
+        this.y -= this.z * 0.2; // Move up slowly
+        this.opacity += this.fadeDir;
+        if (this.opacity > 1 || this.opacity < 0.2) this.fadeDir *= -1;
+        if (this.y < 0) {
+          this.y = starCanvas.height;
+          this.x = rand() * starCanvas.width;
+        }
+      }
+      draw() {
+        starCtx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
+        starCtx.beginPath();
+        starCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        starCtx.fill();
+      }
+    }
+    function initStars() {
+      stars = [];
+      for(let i=0; i<numStars; i++) stars.push(new Star());
+    }
+    function animateStars() {
+      starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
+      stars.forEach(star => {
+        star.update();
+        star.draw();
+      });
+      requestAnimationFrame(animateStars);
+    }
+    /**
+     * MAIN PROCEDURAL VISUALIZATION (The "Cool" Part)
+     * Simulating a 3D Terrain/Topography using 2D Canvas
+     */
+    const canvas = document.getElementById('procCanvas');
+    const ctx = canvas.getContext('2d');
+    let width, height;
+    let time = 0;
+    // Parameters controlled by UI
+    let params = {
+      complexity: 50,
+      biome: 180,
+      speed: 10,
+      wireframe: false,
+      showNodes: true
+    };
+    function resizeProcCanvas() {
+      const rect = canvas.parentElement.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      width = canvas.width;
+      height = canvas.height;
+    }
+    function updateParams() {
+      params.complexity = parseInt(document.getElementById('complexity').value);
+      params.biome = parseInt(document.getElementById('biome').value);
+      params.speed = parseInt(document.getElementById('speed').value);
+      params.wireframe = document.getElementById('wireframe').checked;
+      params.showNodes = document.getElementById('nodes').checked;
+    }
+    // Pseudo-3D Projection Logic
+    function drawTerrain() {
+      // Clear with fade effect for trails
+      ctx.fillStyle = 'rgba(5, 5, 16, 0.3)';
+      ctx.fillRect(0, 0, width, height);
+      const horizon = height * 0.6;
+      const fov = 300;
+      const gridSize = 40; // Number of rows
+      // We draw from back to front
+      for (let z = gridSize; z > 0; z--) {
+        // Perspective scale
+        const scale = fov / (fov + z * 10);
+        const yBase = horizon + (z * 10) * scale; // Project Y
+        // Color based on depth and biome
+        const hue = (params.biome + z * 2) % 360;
+        const lightness = 20 + (z / gridSize) * 40;
+        ctx.beginPath();
+        // Draw a horizontal strip
+        const stripWidth = width / scale; // How wide the world is at this depth
+        for (let x = -stripWidth/2; x <= stripWidth/2; x += 20) {
+          // Calculate Height (Y) based on Sine Waves (Procedural Terrain)
+          // Using multiple sine waves for complexity
+          const wave1 = Math.sin(x * 0.01 + time * 0.05 + z * 0.1) * (params.complexity * scale);
+          const wave2 = Math.cos(x * 0.02 - time * 0.02) * (params.complexity * 0.5 * scale);
+          const yOffset = wave1 + wave2;
+          const screenX = width/2 + x * scale;
+          const screenY = yBase - yOffset;
+          if (x === -stripWidth/2) {
+            ctx.moveTo(screenX, screenY);
+          } else {
+            ctx.lineTo(screenX, screenY);
+          }
+        }
+        // Close the shape to fill it
+        ctx.lineTo(width/2 + stripWidth/2 * scale, yBase + 100 * scale);
+        ctx.lineTo(width/2 - stripWidth/2 * scale, yBase + 100 * scale);
+        ctx.closePath();
+        if (params.wireframe) {
+          ctx.strokeStyle = `hsla(${hue}, 80%, 60%, 0.8)`;
+          ctx.lineWidth = 1;
+          ctx.stroke();
+        } else {
+          // Gradient fill for depth
+          const gradient = ctx.createLinearGradient(0, yBase - params.complexity * scale, 0, yBase + 50 * scale);
+          gradient.addColorStop(0, `hsla(${hue}, 70%, ${lightness + 20}%, 0.9)`);
+          gradient.addColorStop(0.5, `hsla(${hue}, 70%, ${lightness}%, 0.6)`);
+          gradient.addColorStop(1, `hsla(${hue}, 70%, ${lightness - 10}%, 0.2)`);
+          ctx.fillStyle = gradient;
+          ctx.fill();
+        }
+        // Draw nodes if enabled
+        if (params.showNodes && z % 5 === 0) {
+          for (let x = -stripWidth/2; x <= stripWidth/2; x += 60) {
+            const wave1 = Math.sin(x * 0.01 + time * 0.05 + z * 0.1) * (params.complexity * scale);
+            const wave2 = Math.cos(x * 0.02 - time * 0.02) * (params.complexity * 0.5 * scale);
+            const yOffset = wave1 + wave2;
+            const screenX = width/2 + x * scale;
+            const screenY = yBase - yOffset;
+            ctx.fillStyle = `hsla(${(hue + 180) % 360}, 100%, 70%, 0.8)`;
+            ctx.beginPath();
+            ctx.arc(screenX, screenY, 2 * scale, 0, Math.PI * 2);
+            ctx.fill();
+          }
+        }
+      }
+      // Update stats
+      document.getElementById('stat-objects').innerText = gridSize * 20;
+      time += params.speed * 0.01;
+      requestAnimationFrame(drawTerrain);
+    }
+    // FPS Counter
+    let lastTime = performance.now();
+    let frameCount = 0;
+    function updateFPS() {
+      const now = performance.now();
+      frameCount++;
+      if (now - lastTime >= 1000) {
+        document.getElementById('stat-fps').innerText = frameCount;
+        frameCount = 0;
+        lastTime = now;
+      }
+      requestAnimationFrame(updateFPS);
+    }
+    // Download canvas image
+    function downloadCanvas() {
+      const link = document.createElement('a');
+      link.download = `nexusgen-terrain-${seed}-${Date.now()}.png`;
+      link.href = canvas.toDataURL();
+      link.click();
+    }
+    // Initialization
+    window.addEventListener('resize', () => {
+      resizeStarCanvas();
+      resizeProcCanvas();
+    });
+    window.addEventListener('DOMContentLoaded', () => {
+      resizeStarCanvas();
+      resizeProcCanvas();
+      initStars();
+      animateStars();
+      drawTerrain();
+      updateFPS();
+      // Set initial seed display
+      document.getElementById('stat-seed').innerText = seed;
+    });
+  </script>
+</body>
+</html>