Simplify controls and boost visuals

Author: rgilks

src/post.wgsl

@@ -2,24 +2,24 @@
 // All passes draw a single fullscreen triangle. The scene is rendered to an HDR
 // (rgba16float) target; bloom is computed at reduced resolution and added back.
 
-const THRESHOLD: f32 = 0.56;   // brightness above which a pixel blooms
-const BLOOM_STRENGTH: f32 = 0.48;
-const EXPOSURE: f32 = 1.08;
+const THRESHOLD: f32 = 0.42;   // brightness above which a pixel blooms
+const BLOOM_STRENGTH: f32 = 0.72;
+const EXPOSURE: f32 = 1.20;
 
 // Motion-trail feedback: each frame the HDR scene is multiplied by this factor
 // before new particles are drawn on top (see `fade` below + postprocess.rs).
 // Higher = longer-lived comet tails. Tuned against the particle/bloom gains so
 // overlapping trails glow without blowing out to solid white.
-const TRAIL_PERSISTENCE: f32 = 0.89;
+const TRAIL_PERSISTENCE: f32 = 0.91;
 
 // Ambient background depth. Instead of fading to flat #000, the composite adds a
 // faint deep-blue/violet radial glow so the void reads as atmospheric. Kept
 // subtle so it never washes out the creatures or competes with the bloom; the
 // glow is brightest at the centre and falls to a near-black vignette at the
 // corners. These are pre-tonemap HDR intensities.
 const AMBIENT_COLOR: vec3<f32> = vec3<f32>(0.20, 0.11, 0.45); // deep blue-violet
-const AMBIENT_CENTER: f32 = 0.12;   // glow intensity at screen centre
-const AMBIENT_EDGE: f32 = 0.018;    // residual glow at the corners (vignette floor)
+const AMBIENT_CENTER: f32 = 0.14;   // glow intensity at screen centre
+const AMBIENT_EDGE: f32 = 0.02;     // residual glow at the corners (vignette floor)
 
 struct VsOut {
     @builtin(position) pos: vec4<f32>,

src/shader.wgsl

@@ -118,13 +118,13 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
     let highlight = smoothstep(0.32, 0.0, length(shaped_uv - highlight_offset));
 
     let vivid = pow(max(in.color, vec3<f32>(0.001)), vec3<f32>(0.82));
-    let cytoplasm = vivid * (body * 0.62 + inner * 0.32 + halo * 0.24);
-    let membrane = mix(vivid, vec3<f32>(0.88, 0.96, 1.0), 0.38) * soft_edge * 0.28;
-    let nucleus_rgb = mix(vivid, vec3<f32>(0.12, 0.16, 0.22), 0.38) * nucleus * 0.24;
-    let highlight_rgb = vec3<f32>(1.0, 0.96, 0.84) * highlight * 0.18;
+    let cytoplasm = vivid * (body * 0.86 + inner * 0.46 + halo * 0.34);
+    let membrane = mix(vivid, vec3<f32>(0.9, 0.98, 1.0), 0.40) * soft_edge * 0.42;
+    let nucleus_rgb = mix(vivid, vec3<f32>(0.12, 0.16, 0.22), 0.34) * nucleus * 0.28;
+    let highlight_rgb = vec3<f32>(1.0, 0.96, 0.84) * highlight * 0.26;
     let rgb = cytoplasm + membrane + nucleus_rgb + highlight_rgb;
 
-    return vec4<f32>(rgb, body * 0.82);
+    return vec4<f32>(rgb, body * 0.9);
 }
 
 // ---------------------------------------------------------------------------
@@ -182,8 +182,8 @@ fn food_fs(in: FoodVertexOutput) -> @location(0) vec4<f32> {
     // Calm teal/green nourishment colour, kept dim so it reads as ambient food
     // and never competes with the creatures or the bloom. Scaled by the patch's
     // current intensity so a depleted patch visibly fades.
-    let teal = vec3<f32>(0.07, 0.38, 0.30);
-    let brightness = 0.58;
+    let teal = vec3<f32>(0.075, 0.42, 0.33);
+    let brightness = 0.68;
     let rgb = teal * soft * brightness * in.intensity;
 
     return vec4<f32>(rgb, soft);

web/css/style.css

@@ -186,27 +186,7 @@ main {
     0 0 22px rgba(var(--accent-rgb), 0.18);
 }
 
-/* ===== Seed + actions ===== */
-.toprow {
-  display: flex;
-  gap: 8px;
-}
-#seed-input {
-  flex: 1;
-  min-width: 0;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid var(--border);
-  color: var(--text-strong);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  outline: none;
-}
-#seed-input:focus {
-  border-color: rgba(var(--accent-rgb), 0.7);
-  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
-}
+/* ===== Actions ===== */
 .btn {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -238,32 +218,6 @@ main {
   text-align: center;
 }
 
-/* ===== Seed readout ===== */
-.seed-readout {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 8px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.seed-readout .k {
-  font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.seed-readout .v {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--accent);
-  line-height: 1;
-}
-
 /* ===== Control groups ===== */
 .group {
   display: flex;

web/index.html

@@ -34,24 +34,13 @@
           </button>
 
           <div id="controls-body">
-            <!-- Seed + reset -->
-            <div class="toprow">
-              <input type="text" id="seed-input" value="12345" placeholder="seed (blank = random)" />
-              <button id="reset" class="btn">Reset</button>
-            </div>
-
             <!-- Instant actions -->
             <div class="actions">
+              <button id="reset" class="btn act" type="button">Reset</button>
               <button id="cull" class="btn act" type="button" title="Remove half the population">Cull</button>
               <button id="bloom" class="btn act" type="button" title="Spawn a burst of new life">Bloom</button>
             </div>
 
-            <!-- Seed readout -->
-            <div class="seed-readout">
-              <span class="k">Seed</span>
-              <span class="v" id="seed-display">—</span>
-            </div>
-
             <!-- Ecosystem controls -->
             <div class="group">
               <div class="group-title">Ecosystem</div>

web/js/app.js

@@ -53,6 +53,7 @@ const DEFAULT_CONFIG = {
 // Serialized once at module load — the config is constant, so init() and reset()
 // reuse it instead of re-stringifying on every (re)construction.
 const CONFIG_JSON = JSON.stringify(DEFAULT_CONFIG);
+const DEFAULT_SEED = 12345;
 
 // Ecosystem + motion sliders, each mapping one DOM slider to one SimParam.
 // Adding a slider is a one-line entry here plus the markup in index.html.
@@ -73,9 +74,6 @@ class EvolutionApp {
     this.renderer = null;
     this.canvas = null;
     this.animationId = null;
-    this.lastTime = 0;
-    this.frameCount = 0;
-    this.fps = 0;
     // Render-upload gating: the instance buffer is repacked only when the sim
     // step advances (see render()); other frames re-use the cached pointer.
     this.lastRenderedStep = -1;
@@ -225,18 +223,16 @@ class EvolutionApp {
     document.getElementById("cull").addEventListener("click", () => {
       this.simulation.cull(0.5);
       this.lastRenderedStep = -1; // force a repack so the change shows at once
-      this.updateStats();
     });
     document.getElementById("bloom").addEventListener("click", () => {
       this.simulation.bloom(500);
       this.lastRenderedStep = -1;
-      this.updateStats();
     });
 
     // Parameter sliders (table-driven — see SLIDERS) plus the sim-speed control.
     this.setupSliders();
 
-    // Keyboard shortcuts (ignored while typing in the seed box)
+    // Keyboard shortcuts (ignored while editing controls)
     document.addEventListener("keydown", (e) => {
       if (e.target.tagName === "INPUT") return;
       if (e.key === "h" || e.key === "H") {
@@ -310,45 +306,22 @@ class EvolutionApp {
     });
   }
 
-  // Size the canvas to the window and build a fresh simulation. The seed box, if
-  // set, reproduces a specific run; empty means a wall-clock seed. Shared by
-  // init() and reset() so construction lives in one place.
+  // Size the canvas to the window and build a fresh deterministic simulation.
+  // Shared by init() and reset() so construction lives in one place.
   createSimulation() {
     this.canvas.width = window.innerWidth;
     this.canvas.height = window.innerHeight;
     const worldSize = Math.max(this.canvas.width, this.canvas.height);
-    const seedText = document.getElementById("seed-input")?.value.trim();
-    const seed = seedText ? Number(seedText) : NaN;
-    this.simulation = Number.isFinite(seed)
-      ? WebSimulation.with_seed(worldSize, CONFIG_JSON, seed)
-      : new WebSimulation(worldSize, CONFIG_JSON);
-    this.updateSeedDisplay();
+    this.simulation = WebSimulation.with_seed(worldSize, CONFIG_JSON, DEFAULT_SEED);
     this.lastRenderedStep = -1; // fresh sim — force a repack on the next frame
   }
 
   reset() {
     this.createSimulation();
-    this.updateStats();
-  }
-
-  updateSeedDisplay() {
-    const el = document.getElementById("seed-display");
-    if (el && this.simulation) {
-      el.textContent = String(this.simulation.get_seed());
-    }
   }
 
   startRenderLoop() {
     const animate = (currentTime) => {
-      // Calculate FPS
-      this.frameCount++;
-      if (currentTime - this.lastTime >= 1000) {
-        this.fps = this.frameCount;
-        this.frameCount = 0;
-        this.lastTime = currentTime;
-        this.updateStats();
-      }
-
       // Update simulation at target FPS
       const targetInterval = 1000 / this.targetFPS;
       if (currentTime - this.lastUpdateTime >= targetInterval) {
@@ -400,11 +373,6 @@ class EvolutionApp {
       this.camera.y
     );
   }
-
-  updateStats() {
-    this.updateSeedDisplay();
-  }
-
   showError(message) {
     const errorDiv = document.createElement("div");
     errorDiv.style.cssText = `