Spaces:

kenqtade
/

creative-canvas

Running

opencode commited on Jul 14

Commit

b9835ae

1 Parent(s): a17f221

feat: Cosmic Garden — interactive generative art sandbox

5 living worlds (Aurora/Flock/Voxel/Lattice/Starfall), themes, ambient Web Audio,
god-mode interactions, PNG export, evolve/pause/resume. No AI, no dependencies.
~32KB total, vanilla HTML5 Canvas + JS.

Updates space kenqtade/creative-canvas (static SDK).

Files changed (4) hide show

README.md +31 -6
index.html +71 -17
main.js +701 -0
style.css +146 -19

README.md CHANGED Viewed

@@ -1,10 +1,35 @@
 ---
-title: Creative Canvas
-emoji: 📚
-colorFrom: red
-colorTo: green
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Cosmic Garden
+emoji: 🌌
+colorFrom: indigo
+colorTo: pink
 sdk: static
+pinned: true
+tags:
+  - generative-art
+  - creative-coding
+  - interactive
+  - no-ai
+license: mit
 ---
+# 🌌 Cosmic Garden
+A self-contained, no-AI interactive generative art installation. Built entirely with vanilla HTML5 Canvas + JavaScript + Web Audio — no frameworks, no AI, no dependencies.
+## Features
+- **5 living worlds** you can switch between:
+  1. `Aurora` — drifting flow-field ribbons that respond to your cursor
+  2. `Flock` — a boids ecosystem with predators, prey, and emergent flocking
+  3. `Voxel` — a rotating 3D voxel sculpture that morphs over time
+  4. `Lattice` — cellular automata on a hex grid that you paint
+  5. `Starfall` — a parallax starfield with shooting comets
+- **God-mode interactions**: click to seed life, drag to nurture, double-click to spark storms
+- **Ambient Web Audio soundscapes** generated procedurally per scene
+- **Presets**, **timeline scrubber**, **PNG export**, **themes**, and **auto-evolve** mode
+- 60fps, single file, <35KB total
+Built to demonstrate how much you can do with pure creativity and zero artificial intelligence.

index.html CHANGED Viewed

@@ -1,19 +1,73 @@
 <!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, viewport-fit=cover" />
+<meta name="theme-color" content="#0b0420" />
+<title>Cosmic Garden — Generative Art Sandbox</title>
+<link rel="stylesheet" href="style.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>" />
+</head>
+<body>
+  <canvas id="stage"></canvas>
+  <!-- Top bar -->
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo">🌌</span>
+      <div class="brand-text">
+        <h1>COSMIC GARDEN</h1>
+        <p>a generative art sandbox <span class="muted">· no AI · pure code</span></p>
+      </div>
+    </div>
+    <nav class="scenes" id="sceneTabs">
+      <button data-scene="aurora"  class="active">Aurora</button>
+      <button data-scene="flock">Flock</button>
+      <button data-scene="voxel">Voxel</button>
+      <button data-scene="lattice">Lattice</button>
+      <button data-scene="starfall">Starfall</button>
+    </nav>
+    <div class="meter" title="Live FPS / entity count">
+      <span id="statFps">—</span> fps · <span id="statCount">0</span>
+    </div>
+  </header>
+  <!-- Subtitle hint -->
+  <div class="hint" id="hint">click to seed · drag to nurture · double-click for chaos</div>
+  <!-- Bottom control bar -->
+  <footer class="hud">
+    <div class="group">
+      <label>Theme
+        <select id="theme">
+          <option value="amethyst">Amethyst</option>
+          <option value="ember">Ember</option>
+          <option value="reef">Reef</option>
+          <option value="mono">Mono</option>
+        </select>
+      </label>
+      <label>Speed
+        <input id="speed" type="range" min="0" max="2" step="0.05" value="1" />
+      </label>
+      <label>Density
+        <input id="density" type="range" min="20" max="400" step="10" value="140" />
+      </label>
+      <label>Evolve
+        <input id="evolve" type="checkbox" checked />
+      </label>
+    </div>
+    <div class="group right">
+      <button id="btnSeed"   title="Re-seed / randomize current scene">🌱 Reseed</button>
+      <button id="btnPause"  title="Pause / resume">⏯ <span id="pauseLbl">Pause</span></button>
+      <button id="btnSound"  title="Toggle ambient sound">🔊 <span id="soundLbl">Sound</span></button>
+      <button id="btnExport" title="Save PNG of the current frame">💾 Export</button>
+    </div>
+  </footer>
+  <!-- Hidden audio start hint -->
+  <div id="audioBadge" class="audio-badge">🔊 click anywhere once to enable audio</div>
+  <script src="main.js"></script>
+</body>
 </html>

main.js ADDED Viewed

	@@ -0,0 +1,701 @@

+/* ============================================================
+   COSMIC GARDEN — main.js
+   Self-contained generative art engine.
+   No dependencies, no AI. Pure HTML5 Canvas + Web Audio.
+   ============================================================ */
+(() => {
+'use strict';
+// ----------------- canvas + state -----------------
+const cvs = document.getElementById('stage');
+const ctx = cvs.getContext('2d');
+let W = 0, H = 0, DPR = Math.min(window.devicePixelRatio || 1, 2);
+function resize(){
+  DPR = Math.min(window.devicePixelRatio || 1, 2);
+  W = window.innerWidth; H = window.innerHeight;
+  cvs.width = W * DPR; cvs.height = H * DPR;
+  cvs.style.width = W + 'px'; cvs.style.height = H + 'px';
+  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+  if (current && current.onResize) current.onResize();
+}
+window.addEventListener('resize', resize);
+// shared UI handles
+const $ = id => document.getElementById(id);
+const hint = $('hint'), statFps = $('statFps'), statCount = $('statCount');
+// global config
+const cfg = {
+  scene: 'aurora',
+  theme: 'amethyst',
+  speed: 1,
+  density: 140,
+  evolve: true,
+  paused: false,
+  sound: false,
+  mouse: { x:W/2, y:H/2, px:W/2, py:H/2, down:false, double:false }
+};
+// theme palettes (RGB triplets) ----------------------------------
+const THEMES = {
+  amethyst:[[196,163,255],[255,139,216],[124,109,255],[255,90,160],[225,200,255]],
+  ember   :[[255,154, 77],[255, 61,107],[255,200, 90],[255,120, 50],[255,230,180]],
+  reef    :[[ 94,242,214],[ 61,181,255],[120,255,200],[200,255,255],[ 60,240,180]],
+  mono    :[[255,255,255],[200,200,200],[160,160,160],[230,230,230],[120,120,120]],
+};
+function pal(){ return THEMES[cfg.theme]; }
+function rgba(rgb, a){ return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`; }
+// apply theme attribute on root for CSS
+function applyTheme(){ document.documentElement.dataset.theme = cfg.theme; }
+// ----------------- helpers -----------------
+const TAU = Math.PI * 2;
+const rand = (a,b)=> a + Math.random()*(b-a);
+const randInt = (a,b)=> Math.floor(rand(a,b+1));
+const clamp = (v,a,b)=> v<a?a:v>b?b:v;
+function choice(arr){ return arr[(Math.random()*arr.length)|0]; }
+// deterministic-ish noise (cheap value noise)
+function makeNoise(seed){
+  const perm = new Uint8Array(512);
+  let s = seed || 1;
+  const rng = () => (s = (s*1664525 + 1013904223) >>> 0)/4294967296;
+  for (let i=0;i<256;i++) perm[i] = i;
+  for (let i=255;i>0;i--){ const j=(rng()*(i+1))|0; const t=perm[i]; perm[i]=perm[j]; perm[j]=t; }
+  for (let i=0;i<256;i++) perm[256+i]=perm[i];
+  const fade = t=> t*t*(3-2*t);
+  const grad = (h,x,y)=> {
+    const u = h<4 ? x : y;
+    const v = h<4 ? y : x;
+    return ((h&1)?-u:u) + ((h&2)?-2*v:2*v);
+  };
+  return (x,y)=>{
+    const X = Math.floor(x)&255, Y = Math.floor(y)&255;
+    x -= Math.floor(x); y -= Math.floor(y);
+    const u = fade(x), v = fade(y);
+    const aa = perm[perm[X]+Y], ab = perm[perm[X]+Y+1];
+    const ba = perm[perm[X+1]+Y], bb = perm[perm[X+1]+Y+1];
+    const x1 = grad(aa,x,y)     + u*(grad(ba,x-1,y)   - grad(aa,x,y));
+    const x2 = grad(ab,x,y-1)   + u*(grad(bb,x-1,y-1) - grad(ab,x,y-1));
+    return x1 + v*(x2-x1);
+  };
+}
+// ----------------- Web Audio ambient -----------------
+let audioCtx = null, masterGain = null, engineNodes = [];
+function ensureAudio(){
+  if (audioCtx) return;
+  try{
+    const AC = window.AudioContext || window.webkitAudioContext;
+    audioCtx = new AC();
+    masterGain = audioCtx.createGain();
+    masterGain.gain.value = 0.18;
+    masterGain.connect(audioCtx.destination);
+    $('audioBadge').classList.add('hide');
+  }catch(e){ /* silent */ }
+}
+function stopAudio(){
+  engineNodes.forEach(n=>{ try{ n.stop && n.stop(); n.disconnect(); }catch(e){} });
+  engineNodes = [];
+}
+function tone(freq, dur, type='sine', vol=0.15, when=0){
+  if (!audioCtx) return;
+  const t = audioCtx.currentTime + when;
+  const osc = audioCtx.createOscillator();
+  const g = audioCtx.createGain();
+  osc.type = type; osc.frequency.value = freq;
+  g.gain.setValueAtTime(0.0001, t);
+  g.gain.exponentialRampToValueAtTime(vol, t+0.02);
+  g.gain.exponentialRampToValueAtTime(0.0001, t+dur);
+  osc.connect(g).connect(masterGain);
+  osc.start(t); osc.stop(t+dur+0.05);
+  engineNodes.push(osc, g);
+}
+function pad(freqs, dur){ freqs.forEach((f,i)=> tone(f, dur, 'sine', 0.06, i*0.08)); }
+function blip(freq){ tone(freq, 0.15, 'triangle', 0.18); }
+// ============================================================
+// SCENE BASE
+// ============================================================
+class Scene{
+  constructor(){ }
+  init(){}
+  step(dt){}
+  draw(){}
+  onResize(){}
+  onPointer(type, x, y){}
+  count(){ return 0; }
+  hint(){ return 'interact with the canvas'; }
+}
+// ============================================================
+// 1. AURORA — flow field ribbons
+// ============================================================
+class AuroraScene extends Scene{
+  init(){
+    this.noise = makeNoise(rand(1,9999));
+    this.t = 0;
+    this.particles = [];
+    this.spawn(cfg.density);
+    this.ribbons = [];
+  }
+  spawn(n){
+    for (let i=0;i<n;i++){
+      this.particles.push({
+        x: rand(0,W), y: rand(0,H),
+        vx:0, vy:0, life: rand(60,260), age:0,
+        c: choice(pal()), w: rand(0.6, 2.4)
+      });
+    }
+  }
+  step(dt){
+    this.t += dt * cfg.speed;
+    const n = this.noise;
+    for (const p of this.particles){
+      const a = (n(p.x*0.0025, p.y*0.0025 + this.t*0.05) + 1) * Math.PI;
+      p.vx = Math.cos(a)*1.6;
+      p.vy = Math.sin(a)*1.6;
+      // gentle attraction to mouse when held
+      if (cfg.mouse.down){
+        const dx = cfg.mouse.x - p.x, dy = cfg.mouse.y - p.y;
+        p.vx += dx*0.0015; p.vy += dy*0.0015;
+      }
+      p.x += p.vx * cfg.speed; p.y += p.vy * cfg.speed;
+      p.age += dt;
+      if (p.age > p.life || p.x<-20 || p.x>W+20 || p.y<-20 || p.y>H+20){
+        p.x = rand(0,W); p.y = rand(0,H); p.age = 0;
+        p.c = choice(pal());
+      }
+    }
+    // keep counts roughly matching density
+    const target = cfg.density;
+    while (this.particles.length < target) this.spawn(1);
+    if (this.particles.length > target*1.4) this.particles.length = Math.floor(target*1.2);
+  }
+  draw(){
+    ctx.globalCompositeOperation = 'lighter';
+    for (const p of this.particles){
+      const a = 0.4 * (1 - p.age/p.life);
+      ctx.strokeStyle = rgba(p.c, a*0.6);
+      ctx.lineWidth = p.w;
+      ctx.beginPath();
+      ctx.moveTo(p.x - p.vx*4, p.y - p.vy*4);
+      ctx.lineTo(p.x, p.y);
+      ctx.stroke();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+  onPointer(type,x,y){
+    if (type==='down'){
+      for (let i=0;i<40;i++) this.particles.push({
+        x, y, vx:rand(-2,2), vy:rand(-2,2), life:rand(80,200), age:0,
+        c: choice(pal()), w: rand(0.8,3)
+      });
+      blip(rand(220,660));
+    }
+  }
+  count(){ return this.particles.length; }
+  hint(){ return 'click to seed ribbons · drag to attract · drift through flow field'; }
+}
+// ============================================================
+// 2. FLOCK — boids with predators
+// ============================================================
+class FlockScene extends Scene{
+  init(){
+    this.boids = [];
+    this.predators = [];
+    const n = cfg.density;
+    for (let i=0;i<n;i++) this.boids.push(this.mkBoid());
+    for (let i=0;i<3;i++) this.predators.push(this.mkBoid(true));
+  }
+  mkBoid(pred=false){
+    return {
+      x: rand(0,W), y: rand(0,H),
+      vx: rand(-1,1), vy: rand(-1,1),
+      pred, c: pred ? [255,80,80] : choice(pal().slice(0,4)),
+      size: pred ? 4 : rand(1.6,3.2)
+    };
+  }
+  step(dt){
+    const sp = cfg.speed;
+    const bs = this.boids, ps = this.predators;
+    for (const b of bs){
+      let ax=0, ay=0, cx=0, cy=0, cn=0, sx=0, sy=0;
+      for (const o of bs){
+        if (o===b) continue;
+        const dx=o.x-b.x, dy=o.y-b.y, d2=dx*dx+dy*dy;
+        if (d2 < 60*60 && d2>0.01){
+          const d = Math.sqrt(d2);
+          if (d < 18){ sx -= dx/d; sy -= dy/d; }      // separation
+          cx += o.x; cy += o.y; cn++;                   // cohesion
+          ax += o.vx; ay += o.vy;                       // alignment
+        }
+      }
+      if (cn){ ax/=cn; ay/=cn; cx/=cn - b.x; cy/=cn - b.y; }
+      b.vx += (ax - b.vx)*0.04 + cx*0.0008 + sx*0.06;
+      b.vy += (ay - b.vy)*0.04 + cy*0.0008 + sy*0.06;
+      // flee predators
+      for (const p of ps){
+        const dx = b.x-p.x, dy = b.y-p.y, d2 = dx*dx+dy*dy;
+        if (d2 < 110*110 && d2>0.01){
+          const d = Math.sqrt(d2);
+          b.vx += dx/d * (1 - d/110) * 0.8;
+          b.vy += dy/d * (1 - d/110) * 0.8;
+        }
+      }
+      // mouse attraction when held
+      if (cfg.mouse.down){
+        const dx = cfg.mouse.x - b.x, dy = cfg.mouse.y - b.y;
+        b.vx += dx*0.0006; b.vy += dy*0.0006;
+      }
+      const sp2 = Math.hypot(b.vx,b.vy);
+      const max = 2.6;
+      if (sp2 > max){ b.vx = b.vx/sp2*max; b.vy = b.vy/sp2*max; }
+      b.x += b.vx*sp; b.y += b.vy*sp;
+      this.wrap(b);
+    }
+    for (const p of ps){
+      let tx = W/2, ty = H/2;
+      if (bs.length){
+        let nearest=null, nd=1e9;
+        for (const b of bs){
+          const d = (b.x-p.x)**2 + (b.y-p.y)**2;
+          if (d<nd){ nd=d; nearest=b; }
+        }
+        if (nearest){ tx=nearest.x; ty=nearest.y; }
+      }
+      p.vx += (tx - p.x)*0.0003 + rand(-0.05,0.05);
+      p.vy += (ty - p.y)*0.0003 + rand(-0.05,0.05);
+      const sp2 = Math.hypot(p.vx,p.vy), max=3.4;
+      if (sp2>max){ p.vx=p.vx/sp2*max; p.vy=p.vy/sp2*max; }
+      p.x += p.vx*sp; p.y += p.vy*sp;
+      this.wrap(p);
+    }
+    while (this.boids.length < cfg.density) this.boids.push(this.mkBoid());
+    while (this.boids.length > cfg.density*1.15) this.boids.pop();
+  }
+  wrap(b){
+    if (b.x<-10) b.x = W+10; else if (b.x>W+10) b.x = -10;
+    if (b.y<-10) b.y = H+10; else if (b.y>H+10) b.y = -10;
+  }
+  draw(){
+    ctx.globalCompositeOperation = 'lighter';
+    for (const b of this.boids){
+      const a = Math.atan2(b.vy, b.vx);
+      const sz = b.size;
+      ctx.fillStyle = rgba(b.c, 0.85);
+      ctx.beginPath();
+      ctx.moveTo(b.x + Math.cos(a)*sz*2, b.y + Math.sin(a)*sz*2);
+      ctx.lineTo(b.x - Math.cos(a)*sz, b.y - Math.sin(a)*sz + 3);
+      ctx.lineTo(b.x - Math.cos(a)*sz, b.y - Math.sin(a)*sz - 3);
+      ctx.closePath();
+      ctx.fill();
+    }
+    for (const p of this.predators){
+      ctx.fillStyle = rgba([255,40,60], 0.95);
+      ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, TAU); ctx.fill();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+    // very subtle fade so trails persist a moment
+  }
+  onPointer(type,x,y){
+    if (type==='down'){
+      for (let i=0;i<20;i++) this.boids.push(this.mkBoid());
+      blip(360);
+    } else if (type==='dbl'){
+      this.predators.push(this.mkBoid(true));
+      blip(120);
+    }
+  }
+  count(){ return this.boids.length + this.predators.length; }
+  hint(){ return 'click to add prey · double-click to summon a predator · drag to herd'; }
+}
+// ============================================================
+// 3. VOXEL — rotating 3D sculpture
+// ============================================================
+class VoxelScene extends Scene{
+  init(){
+    this.t = 0;
+    this.ang = 0;
+    this.build();
+  }
+  build(){
+    // map coordinates {r,theta,phi} -> voxel with color
+    this.voxels = [];
+    const palc = pal();
+    const N = clamp(cfg.density*.7, 40, 320);
+    for (let i=0;i<N;i++){
+      const r = rand(0.4, 1.6);
+      const th = rand(0, TAU);
+      const ph = rand(-Math.PI/2, Math.PI/2);
+      this.voxels.push({
+        r, th, ph,
+        base: rand(0.8,1.2),
+        wob: rand(0, TAU),
+        c: choice(palc)
+      });
+    }
+  }
+  step(dt){
+    this.t += dt * cfg.speed * 0.4;
+    this.ang += dt * cfg.speed * 0.2;
+  }
+  project(x,y,z){
+    const cy = Math.cos(this.ang), sy = Math.sin(this.ang);
+    const X = x*cy - z*sy;
+    const Z = x*sy + z*cy;
+    const cx = Math.cos(this.t*0.3), sx = Math.sin(this.t*0.3);
+    const Y = y*cx - Z*sx;
+    const Z2 = y*sx + Z*cx;
+    const dist = 4;
+    const scale = 220/(dist + Z2*0.3);
+    return { x: W/2 + X*scale, y: H/2 + Y*scale*0.8, z: Z2, scale };
+  }
+  draw(){
+    const R = Math.min(W,H)*0.28;
+    // sort voxels back-to-front
+    const list = this.voxels.map(v=>{
+      const wob = cfg.evolve ? Math.sin(this.t*1.2 + v.wob)*0.22 : 0;
+      const r = v.r * R * (v.base + wob);
+      const x = r * Math.cos(v.th) * Math.cos(v.ph);
+      const y = r * Math.sin(v.ph) * 1.4;
+      const z = r * Math.sin(v.th) * Math.cos(v.ph);
+      const p = this.project(x,y,z);
+      return { p, v };
+    });
+    list.sort((a,b)=> a.p.z - b.p.z);
+    ctx.globalCompositeOperation = 'lighter';
+    for (const {p,v} of list){
+      const s = clamp(2 + p.scale*4, 1.5, 12);
+      const a = 0.4 + (p.z+2)/4*0.5;
+      ctx.fillStyle = rgba(v.c, clamp(a,0.2,0.95));
+      ctx.fillRect(p.x - s/2, p.y - s/2, s, s);
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+  onResize(){}
+  onPointer(type,x,y){
+    if (type==='down'){
+      this.build();
+      blip(440);
+    }
+  }
+  count(){ return this.voxels.length; }
+  hint(){ return 'click to rebuild the sculpture · let it morph through time'; }
+}
+// ============================================================
+// 4. LATTICE — cellular automata on hex grid
+// ============================================================
+class LatticeScene extends Scene{
+  init(){
+    this.cell = 18;
+    this.cols = Math.ceil(W/this.cell) + 2;
+    this.rows = Math.ceil(H/this.cell) + 2;
+    this.grid = new Uint8Array(this.cols*this.rows);
+    this.next = new Uint8Array(this.cols*this.rows);
+    this.age = new Uint16Array(this.cols*this.rows);
+    // seed center bloom
+    const cx = (this.cols/2)|0, cy = (this.rows/2)|0;
+    for (let i=0;i<600;i++){
+      const x=(cx + (Math.random()*20-10))|0;
+      const y=(cy + (Math.random()*20-10))|0;
+      if (x>=0&&x<this.cols&&y>=0&&y<this.rows) this.grid[y*this.cols+x] = 1;
+    }
+    this.timer = 0;
+  }
+  onResize(){ this.init(); }
+  idx(x,y){ return y*this.cols+x; }
+  neighbors(x,y){
+    let n=0;
+    // hex-ish neighborhood (just 8 for simplicity, looks great)
+    for (let dy=-1;dy<=1;dy++) for (let dx=-1;dx<=1;dx++){
+      if (!dx && !dy) continue;
+      const nx = (x+dx+this.cols)%this.cols;
+      const ny = (y+dy+this.rows)%this.rows;
+      n += this.grid[this.idx(nx,ny)];
+    }
+    return n;
+  }
+  step(dt){
+    if (!cfg.evolve) return;
+    this.timer += dt * cfg.speed;
+    const interval = 0.12;
+    if (this.timer < interval) return;
+    this.timer = 0;
+    for (let y=0;y<this.rows;y++){
+      for (let x=0;x<this.cols;x++){
+        const n = this.neighbors(x,y);
+        const i = this.idx(x,y);
+        const cur = this.grid[i];
+        let nv = cur;
+        if (cur){ nv = (n===2||n===3)?1:0; }
+        else { nv = (n===3)?1:0; }
+        this.next[i] = nv;
+        if (nv && cur) this.age[i] = Math.min(this.age[i]+1, 40);
+        if (!nv) this.age[i] = 0;
+      }
+    }
+    const t = this.grid; this.grid = this.next; this.next = t;
+  }
+  draw(){
+    const cmap = pal();
+    const c0 = cmap[0], c1 = cmap[2], c2 = cmap[1];
+    for (let y=0;y<this.rows;y++){
+      for (let x=0;x<this.cols;x++){
+        const i = this.idx(x,y);
+        if (!this.grid[i]) continue;
+        const a = this.age[i]/40;
+        let col;
+        if (a<0.5) col = lerp(c0,c1,a*2); else col = lerp(c1,c2,(a-0.5)*2);
+        ctx.fillStyle = rgba(col, 0.85);
+        const ox = x*this.cell, oy = y*this.cell;
+        ctx.fillRect(ox+1, oy+1, this.cell-2, this.cell-2);
+      }
+    }
+  }
+  onPointer(type,x,y){
+    if (type==='down' || type==='move'){
+      if (type==='move' && !cfg.mouse.down) return;
+      const cx = (x/this.cell)|0, cy = (y/this.cell)|0;
+      for (let dy=-2;dy<=2;dy++) for (let dx=-2;dx<=2;dx++){
+        const nx=cx+dx, ny=cy+dy;
+        if (nx<0||ny<0||nx>=this.cols||ny>=this.rows) continue;
+        if (Math.random()<0.55) this.grid[this.idx(nx,ny)] = 1;
+      }
+    } else if (type==='dbl'){
+      // chaos: random fill
+      for (let i=0;i<this.grid.length;i++) this.grid[i] = Math.random()<0.45?1:0;
+      blip(180);
+    }
+  }
+  count(){ let n=0; for (let i=0;i<this.grid.length;i++) n+=this.grid[i]; return n; }
+  hint(){ return 'paint cells by clicking/dragging · double-click for chaos · Tune Evolve off to stop'; }
+}
+function lerp(a,b,t){ return [a[0]+(b[0]-a[0])*t|0, a[1]+(b[1]-a[1])*t|0, a[2]+(b[2]-a[2])*t|0]; }
+// ============================================================
+// 5. STARFALL — parallax field + comets
+// ============================================================
+class StarfallScene extends Scene{
+  init(){
+    this.stars = [];
+    this.comets = [];
+    const layers = 4;
+    const n = cfg.density;
+    for (let i=0;i<n;i++){
+      const layer = randInt(0, layers-1);
+      this.stars.push({
+        x: rand(0,W), y: rand(0,H),
+        z: layer+1,
+        r: layer*0.5 + 0.4,
+        tw: rand(0, TAU),
+        c: choice(pal())
+      });
+    }
+    this.tspawn = 0;
+  }
+  step(dt){
+    const sp = cfg.speed;
+    for (const s of this.stars){
+      s.x -= (s.z*0.4 + 0.2) * sp;
+      if (s.x < -5){ s.x = W+5; s.y = rand(0,H); }
+      s.tw += dt*3;
+    }
+    for (const c of this.comets){
+      c.x += c.vx*sp; c.y += c.vy*sp;
+      c.life -= dt;
+    }
+    this.comets = this.comets.filter(c=> c.life>0 && c.x>-200 && c.x<W+200 && c.y>-200 && c.y<H+200);
+    this.tspawn -= dt;
+    if (this.tspawn<=0){
+      this.tspawn = rand(0.4, 1.6);
+      const fromLeft = Math.random()<0.5;
+      this.comets.push({
+        x: fromLeft? -50 : W+50, y: rand(0, H*0.7),
+        vx: (fromLeft?1:-1)*rand(4,9),
+        vy: rand(1,3),
+        life: rand(1.4, 2.5),
+        c: choice(pal()),
+        trail: []
+      });
+    }
+    while (this.stars.length < cfg.density) {
+      this.stars.push({ x:rand(0,W), y:rand(0,H), z:randInt(1,4), r:rand(0.4,2.2), tw:rand(0,TAU), c:choice(pal()) });
+    }
+    while (this.stars.length > cfg.density*1.2) this.stars.pop();
+  }
+  draw(){
+    ctx.globalCompositeOperation = 'lighter';
+    for (const s of this.stars){
+      const tw = 0.5 + Math.sin(s.tw)*0.5;
+      ctx.fillStyle = rgba(s.c, 0.35 + tw*0.55);
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.r * (1 + tw*0.6), 0, TAU);
+      ctx.fill();
+    }
+    for (const c of this.comets){
+      c.trail.push([c.x, c.y]);
+      if (c.trail.length > 18) c.trail.shift();
+      for (let i=1;i<c.trail.length;i++){
+        const a = i/c.trail.length;
+        ctx.strokeStyle = rgba(c.c, a*0.8);
+        ctx.lineWidth = a*3 + 0.3;
+        ctx.beginPath();
+        ctx.moveTo(c.trail[i-1][0], c.trail[i-1][1]);
+        ctx.lineTo(c.trail[i][0], c.trail[i][1]);
+        ctx.stroke();
+      }
+      ctx.fillStyle = rgba(c.c, 1);
+      ctx.beginPath(); ctx.arc(c.x, c.y, 2.4, 0, TAU); ctx.fill();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+  onPointer(type,x,y){
+    if (type==='down'){
+      for (let i=0;i<3;i++) this.comets.push({
+        x, y, vx: rand(-8,8), vy: rand(-8,8),
+        life: rand(1,2), c: choice(pal()), trail:[]
+      });
+      blip(rand(600,1200));
+    }
+  }
+  count(){ return this.stars.length + this.comets.length; }
+  hint(){ return 'click to launch comets · stars drift on parallax layers'; }
+}
+// ----------------- scene registry -----------------
+const SCENES = {
+  aurora:  AuroraScene,
+  flock:   FlockScene,
+  voxel:   VoxelScene,
+  lattice: LatticeScene,
+  starfall:StarfallScene,
+};
+let current = null;
+function setScene(name){
+  const Klass = SCENES[name] || AuroraScene;
+  cfg.scene = name;
+  current = new Klass();
+  current.init();
+  hint.textContent = current.hint();
+  rebuildAudio();
+  document.querySelectorAll('#sceneTabs button').forEach(b=>{
+    b.classList.toggle('active', b.dataset.scene === name);
+  });
+}
+// per-scene ambient audio (cheap pad chords)
+function rebuildAudio(){
+  stopAudio();
+  if (!audioCtx) return;
+  const chords = {
+    aurora:  [220, 277.18, 329.63, 440],
+    flock:   [196, 246.94, 293.66],
+    voxel:   [174.61, 220, 261.63, 349.23],
+    lattice: [110, 138.59, 164.81],
+    starfall:[261.63, 329.63, 392, 523.25],
+  };
+  loopChord(chords[cfg.scene] || chords.aurora);
+}
+let chordTimer = null;
+function loopChord(freqs){
+  if (!audioCtx) return;
+  const play = ()=>{
+    pad(freqs, 4.5);
+    chordTimer = setTimeout(play, 4000);
+  };
+  play();
+}
+// ----------------- pointer -----------------
+cvs.addEventListener('pointerdown', e=>{
+  ensureAudio();
+  cfg.mouse.down = true;
+  cfg.mouse.x = e.clientX; cfg.mouse.y = e.clientY;
+  current.onPointer('down', e.clientX, e.clientY);
+});
+cvs.addEventListener('pointermove', e=>{
+  cfg.mouse.px = cfg.mouse.x; cfg.mouse.py = cfg.mouse.y;
+  cfg.mouse.x = e.clientX; cfg.mouse.y = e.clientY;
+  current.onPointer('move', e.clientX, e.clientY);
+});
+cvs.addEventListener('pointerup', ()=> cfg.mouse.down=false );
+cvs.addEventListener('pointerleave', ()=> cfg.mouse.down=false );
+cvs.addEventListener('dblclick', e=>{
+  current.onPointer('dbl', e.clientX, e.clientY);
+});
+// ----------------- UI bindings -----------------
+$('sceneTabs').addEventListener('click', e=>{
+  const btn = e.target.closest('button[data-scene]');
+  if (btn) setScene(btn.dataset.scene);
+});
+$('theme').addEventListener('change', e=>{
+  cfg.theme = e.target.value; applyTheme();
+  // recolor particles for instant feedback
+  if (current && current.particles) for (const p of current.particles) p.c = choice(pal());
+});
+$('speed').addEventListener('input', e=> cfg.speed = parseFloat(e.target.value) );
+$('density').addEventListener('input', e=> cfg.density = parseInt(e.target.value) );
+$('evolve').addEventListener('change', e=> cfg.evolve = e.target.checked );
+$('btnSeed').addEventListener('click', ()=>{ setScene(cfg.scene); blip(880); });
+$('btnPause').addEventListener('click', ()=>{
+  cfg.paused = !cfg.paused;
+  $('pauseLbl').textContent = cfg.paused ? 'Play' : 'Pause';
+});
+$('btnSound').addEventListener('click', ()=>{
+  ensureAudio();
+  cfg.sound = !cfg.sound;
+  $('soundLbl').textContent = cfg.sound ? 'Sound' : 'Muted';
+  if (cfg.sound){ masterGain.gain.value = 0.18; rebuildAudio(); }
+  else { masterGain.gain.value = 0.0001; stopAudio(); }
+});
+$('btnExport').addEventListener('click', ()=>{
+  const a = document.createElement('a');
+  a.download = 'cosmic-garden-' + Date.now() + '.png';
+  a.href = cvs.toDataURL('image/png');
+  a.click();
+});
+// ----------------- main loop -----------------
+let last = performance.now();
+let fps = 60, fpsAcc = 0, fpsCnt = 0, fpsT = 0;
+function loop(now){
+  const dt = Math.min(0.05, (now - last)/1000);
+  last = now;
+  // fade trail effect (per-frame translucent wash)
+  ctx.fillStyle = `rgba(${hexToRgb(getComputedStyle(document.documentElement).getPropertyValue('--bg'))}, 0.22)`;
+  ctx.fillRect(0,0,W,H);
+  if (!cfg.paused) current.step(dt);
+  current.draw();
+  // fps meter
+  fpsT += dt; fpsCnt++;
+  if (fpsT >= 0.5){
+    fps = (fpsCnt / fpsT) | 0;
+    fpsCnt = 0; fpsT = 0;
+    statFps.textContent = fps;
+    statCount.textContent = current.count();
+  }
+  requestAnimationFrame(loop);
+}
+function hexToRgb(h){
+  h = (h||'#0b0420').trim().replace('#','');
+  if (h.length===3) h = h.split('').map(c=>c+c).join('');
+  const n = parseInt(h,16);
+  return [(n>>16)&255, (n>>8)&255, n&255].join(',');
+}
+// ----------------- boot -----------------
+applyTheme();
+resize();
+setScene('aurora');
+requestAnimationFrame(loop);
+})();

style.css CHANGED Viewed

@@ -1,28 +1,155 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* ===========================================================
+   Cosmic Garden — stylesheet
+   Pure CSS, no external libraries.
+=========================================================== */
+:root{
+  --bg:        #0b0420;
+  --bg2:       #1a0838;
+  --fg:        #f4ecff;
+  --muted:     rgba(244,236,255,.55);
+  --accent:    #c4a3ff;
+  --accent2:   #ff8bd8;
+  --card:      rgba(20, 8, 48, .55);
+  --border:    rgba(196,163,255,.25);
+  --shadow:    0 10px 40px rgba(0,0,0,.45);
+}
+[data-theme="ember"]{
+  --bg:#1a0606; --bg2:#3a0d05; --fg:#fff3e6; --muted:rgba(255,243,230,.55);
+  --accent:#ff9a4d; --accent2:#ff3d6b; --card:rgba(40,10,8,.55);
+  --border:rgba(255,154,77,.25);
+}
+[data-theme="reef"]{
+  --bg:#02161c; --bg2:#063038; --fg:#dffcff; --muted:rgba(223,252,255,.55);
+  --accent:#5ef2d6; --accent2:#3db5ff; --card:rgba(4,30,38,.55);
+  --border:rgba(94,242,214,.25);
+}
+[data-theme="mono"]{
+  --bg:#000; --bg2:#0a0a0a; --fg:#fff; --muted:rgba(255,255,255,.5);
+  --accent:#fff; --accent2:#999; --card:rgba(20,20,20,.6);
+  --border:rgba(255,255,255,.18);
+}
+*{box-sizing:border-box; margin:0; padding:0;}
+html,body{height:100%; overflow:hidden; background:var(--bg); color:var(--fg);}
+body{
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
+  position:relative;
+  user-select:none;
+  -webkit-tap-highlight-color:transparent;
 }
+/* Stage */
+#stage{
+  position:fixed; inset:0; width:100%; height:100%; display:block;
+  background: radial-gradient(ellipse at 50% 40%, var(--bg2) 0%, var(--bg) 70%);
+  touch-action:none;
+  cursor: crosshair;
+}
+/* ===== Top bar ===== */
+.topbar{
+  position:fixed; top:0; left:0; right:0; z-index:5;
+  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
+  padding:14px 18px;
+  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
+  pointer-events:none;
+}
+.topbar > *{pointer-events:auto;}
+.brand{display:flex; align-items:center; gap:12px;}
+.logo{
+  font-size:30px; filter: drop-shadow(0 0 10px var(--accent));
+  animation: spin 18s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg);}}
+.brand-text h1{
+  font-size:18px; letter-spacing:.28em; font-weight:800;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  -webkit-background-clip:text; background-clip:text; color:transparent;
+}
+.brand-text p{font-size:11px; color:var(--muted); letter-spacing:.08em;}
+.muted{opacity:.7;}
+.scenes{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
+.scenes button{
+  background: var(--card);
+  border:1px solid var(--border);
+  color: var(--fg);
+  font-size:12px; font-weight:600; letter-spacing:.06em;
+  padding:8px 14px; border-radius:999px;
+  backdrop-filter: blur(10px);
+  cursor:pointer;
+  transition: all .18s ease;
+}
+.scenes button:hover{transform: translateY(-1px); border-color:var(--accent);}
+.scenes button.active{
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  color:#100018; border-color:transparent;
+  box-shadow: 0 6px 18px rgba(0,0,0,.4);
+}
+.meter{
+  font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;
+  padding:6px 10px; background:var(--card); border:1px solid var(--border);
+  border-radius:8px; backdrop-filter:blur(10px);
+}
+/* ===== Hint ===== */
+.hint{
+  position:fixed; top:80px; left:50%; transform:translateX(-50%);
+  z-index:4; pointer-events:none;
+  font-size:12px; color:var(--muted); letter-spacing:.12em;
+  padding:6px 16px; border-radius:999px;
+  background:var(--card); border:1px solid var(--border);
+  backdrop-filter:blur(8px);
+  animation: floaty 6s ease-in-out infinite;
+}
+@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
+/* ===== Bottom HUD ===== */
+.hud{
+  position:fixed; left:0; right:0; bottom:0; z-index:5;
+  display:flex; gap:18px; justify-content:space-between; align-items:flex-end;
+  flex-wrap:wrap; padding:18px;
+  background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));
+  backdrop-filter: blur(2px);
+  pointer-events:none;
+}
+.hud > *{pointer-events:auto;}
+.group{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
+.group.right{margin-left:auto;}
+.hud label{
+  display:flex; flex-direction:column; gap:6px;
+  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
+}
+.hud select, .hud input[type=range]{
+  background:var(--card); border:1px solid var(--border); color:var(--fg);
+  border-radius:8px; padding:6px 10px; font-size:13px;
+  backdrop-filter:blur(10px);
 }
+.hud input[type=range]{padding:0; height:32px; width:140px;}
+.hud input[type=checkbox]{transform:scale(1.4); accent-color:var(--accent); margin-top:4px;}
+.hud button{
+  background:var(--card); border:1px solid var(--border); color:var(--fg);
+  font-size:13px; font-weight:600; padding:9px 14px; border-radius:10px;
+  cursor:pointer; letter-spacing:.04em;
+  backdrop-filter:blur(10px);
+  transition: all .18s ease;
 }
+.hud button:hover{transform:translateY(-1px); border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.35);}
+/* ===== Audio badge ===== */
+.audio-badge{
+  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
+  padding:6px 14px; font-size:11px; color:var(--muted);
+  background:var(--card); border:1px solid var(--border); border-radius:999px;
+  backdrop-filter:blur(10px); z-index:6; transition:opacity .8s;
 }
+.audio-badge.hide{opacity:0; pointer-events:none;}
+@media (max-width: 720px){
+  .brand-text{display:none;}
+  .scenes{margin-left:0;}
+  .meter{display:none;}
 }