nova64 0.2.4 → 0.2.6

package/dist/examples/generative-art/code.js

@@ -0,0 +1,632 @@
+// Generative Art Studio — Nova64 Fantasy Console
+// 6 interactive Processing-style sketches. Press LEFT/RIGHT to switch.
+// All rendering happens in draw() (framebuffer is cleared between update & draw).
+
+let currentSketch = 0;
+const SKETCH_COUNT = 6;
+const sketchNames = [
+  'FLOW FIELD',
+  'PERLIN LANDSCAPE',
+  'SPIRAL GALAXY',
+  'PARTICLE GARDEN',
+  'WAVE INTERFERENCE',
+  'NEON GEOMETRY',
+];
+
+let time = 0;
+let particles = [];
+let field = null;
+let switchCooldown = 0;
+let started = false;
+
+// ─── Shared state ──────────────────────────────────────────────────────────
+const W = 640;
+const H = 360;
+
+export function init() {
+  createSolidSkybox(0x000000);
+  noiseSeed(42);
+  _initSketch(currentSketch);
+}
+
+// ─── UPDATE: state/logic only, NO drawing ─────────────────────────────────
+export function update(dt) {
+  if (!started) {
+    if (btnp(4) || btnp(5) || keyp('Space') || keyp('Enter')) {
+      started = true;
+    }
+    return;
+  }
+
+  time += dt;
+  switchCooldown -= dt;
+
+  // Switch sketches
+  if ((keyp('ArrowRight') || btnp(1)) && switchCooldown <= 0) {
+    currentSketch = (currentSketch + 1) % SKETCH_COUNT;
+    _initSketch(currentSketch);
+    switchCooldown = 0.3;
+  }
+  if ((keyp('ArrowLeft') || btnp(0)) && switchCooldown <= 0) {
+    currentSketch = (currentSketch - 1 + SKETCH_COUNT) % SKETCH_COUNT;
+    _initSketch(currentSketch);
+    switchCooldown = 0.3;
+  }
+
+  // Update state (physics, particles) — no drawing
+  switch (currentSketch) {
+    case 0:
+      _updateFlowField(dt);
+      break;
+    case 1:
+      _updatePerlinLandscape(dt);
+      break;
+    case 3:
+      _updateParticleGarden(dt);
+      break;
+  }
+}
+
+// ─── DRAW: all rendering happens here ─────────────────────────────────────
+export function draw() {
+  if (!started) {
+    _drawStartScreen();
+    return;
+  }
+
+  // Draw current sketch
+  switch (currentSketch) {
+    case 0:
+      _drawFlowField();
+      break;
+    case 1:
+      _drawPerlinLandscape();
+      break;
+    case 2:
+      _drawSpiralGalaxy();
+      break;
+    case 3:
+      _drawParticleGarden();
+      break;
+    case 4:
+      _drawWaveInterference();
+      break;
+    case 5:
+      _drawNeonGeometry();
+      break;
+  }
+
+  // HUD on top
+  _drawHUD();
+}
+
+// ─── Start Screen ─────────────────────────────────────────────────────────
+function _drawStartScreen() {
+  cls(rgba8(10, 8, 20));
+
+  // Animated background circles
+  const t = performance.now() / 1000;
+  for (let i = 0; i < 12; i++) {
+    const angle = (i / 12) * Math.PI * 2 + t * 0.3;
+    const r = 80 + Math.sin(t * 0.5 + i) * 30;
+    const x = W / 2 + Math.cos(angle) * r;
+    const y = H / 2 + Math.sin(angle) * r;
+    const hue = (i * 30 + t * 40) % 360;
+    ellipse(x, y, 8 + Math.sin(t + i) * 4, 8 + Math.cos(t + i) * 4, hsb(hue, 0.8, 0.6, 80), true);
+  }
+
+  drawGlowTextCentered(
+    'GENERATIVE ART STUDIO',
+    W / 2,
+    80,
+    rgba8(255, 200, 255),
+    rgba8(180, 80, 220)
+  );
+  drawGlowTextCentered('N O V A 6 4', W / 2, 120, rgba8(100, 200, 255), rgba8(40, 100, 180));
+
+  printCentered('6 interactive Processing-style sketches', W / 2, 170, rgba8(180, 180, 200));
+  printCentered(
+    'Flow Fields / Perlin Landscapes / Spiral Galaxies',
+    W / 2,
+    195,
+    rgba8(140, 160, 200)
+  );
+  printCentered(
+    'Particle Systems / Wave Interference / Neon Geometry',
+    W / 2,
+    215,
+    rgba8(140, 160, 200)
+  );
+
+  const pulse = Math.sin(t * 3) * 0.3 + 0.7;
+  const a = Math.floor(pulse * 255);
+  printCentered('PRESS SPACE TO BEGIN', W / 2, 280, rgba8(255, 255, 255, a));
+  printCentered('LEFT / RIGHT to switch sketches', W / 2, 305, rgba8(120, 120, 150));
+}
+
+// ─── HUD ──────────────────────────────────────────────────────────────────
+function _drawHUD() {
+  const name = sketchNames[currentSketch];
+  drawPanel(8, 4, 200, 28, {
+    bgColor: rgba8(0, 0, 0, 140),
+    borderLight: rgba8(80, 80, 120, 100),
+    borderDark: rgba8(40, 40, 60, 100),
+  });
+  print(`${currentSketch + 1}/${SKETCH_COUNT}  ${name}`, 16, 12, rgba8(200, 200, 255));
+  print('[< >] SWITCH', W - 130, H - 18, rgba8(120, 120, 150));
+}
+
+// ─── Sketch init ──────────────────────────────────────────────────────────
+function _initSketch(idx) {
+  time = 0;
+  particles = [];
+  field = null;
+
+  switch (idx) {
+    case 0:
+      _initFlowField();
+      break;
+    case 1:
+      _initPerlinLandscape();
+      break;
+    case 2:
+      _initSpiralGalaxy();
+      break;
+    case 3:
+      _initParticleGarden();
+      break;
+    case 5:
+      _initNeonGeometry();
+      break;
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 0: FLOW FIELD
+// Particles follow Perlin noise flow vectors. Trail history drawn each frame.
+// ════════════════════════════════════════════════════════════════════════════
+
+const FLOW_COLS = 64;
+const FLOW_ROWS = 36;
+const FLOW_CELL = 10;
+const TRAIL_LEN = 12;
+
+function _initFlowField() {
+  particles = [];
+  for (let i = 0; i < 600; i++) {
+    particles.push({
+      x: Math.random() * W,
+      y: Math.random() * H,
+      speed: 0.5 + Math.random() * 1.5,
+      hue: Math.random() * 360,
+      life: 200 + Math.random() * 300,
+      trail: [],
+    });
+  }
+}
+
+function _updateFlowField(dt) {
+  field = flowField(FLOW_COLS, FLOW_ROWS, 0.08, time * 0.15);
+
+  for (const p of particles) {
+    const col = Math.floor(p.x / FLOW_CELL);
+    const row = Math.floor(p.y / FLOW_CELL);
+
+    if (col >= 0 && col < FLOW_COLS && row >= 0 && row < FLOW_ROWS) {
+      const angle = field[row * FLOW_COLS + col];
+      // Store trail point before moving
+      p.trail.push({ x: p.x, y: p.y });
+      if (p.trail.length > TRAIL_LEN) p.trail.shift();
+
+      p.x += Math.cos(angle) * p.speed * 60 * dt;
+      p.y += Math.sin(angle) * p.speed * 60 * dt;
+      p.hue = (p.hue + 15 * dt) % 360;
+      p.life -= dt * 60;
+    }
+
+    if (p.x < 0 || p.x > W || p.y < 0 || p.y > H || p.life <= 0) {
+      p.x = Math.random() * W;
+      p.y = Math.random() * H;
+      p.life = 200 + Math.random() * 300;
+      p.hue = Math.random() * 360;
+      p.trail = [];
+    }
+  }
+}
+
+function _drawFlowField() {
+  cls(rgba8(5, 3, 12));
+
+  for (const p of particles) {
+    const trail = p.trail;
+    for (let j = 1; j < trail.length; j++) {
+      const t = j / trail.length;
+      const alpha = Math.floor(t * 200);
+      const c = hsb(p.hue, 0.85, 0.9, Math.max(15, alpha));
+      line(
+        Math.round(trail[j - 1].x),
+        Math.round(trail[j - 1].y),
+        Math.round(trail[j].x),
+        Math.round(trail[j].y),
+        c
+      );
+    }
+    // Head
+    if (trail.length > 0) {
+      const last = trail[trail.length - 1];
+      const c = hsb(p.hue, 0.9, 1.0, 255);
+      line(Math.round(last.x), Math.round(last.y), Math.round(p.x), Math.round(p.y), c);
+    }
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 1: PERLIN LANDSCAPE
+// ════════════════════════════════════════════════════════════════════════════
+
+let landscapeOffset = 0;
+
+function _initPerlinLandscape() {
+  landscapeOffset = 0;
+}
+
+function _updatePerlinLandscape(dt) {
+  landscapeOffset += dt * 30;
+}
+
+function _drawPerlinLandscape() {
+  cls(rgba8(8, 6, 18));
+
+  const layers = [
+    { scale: 0.005, amp: 60, base: 240, color1: [30, 20, 60], color2: [60, 30, 90], speed: 0.2 },
+    { scale: 0.008, amp: 80, base: 260, color1: [20, 40, 60], color2: [40, 80, 120], speed: 0.5 },
+    { scale: 0.012, amp: 100, base: 280, color1: [30, 60, 40], color2: [60, 140, 80], speed: 0.8 },
+    { scale: 0.02, amp: 70, base: 300, color1: [40, 30, 20], color2: [100, 70, 40], speed: 1.0 },
+  ];
+
+  // Stars
+  noiseSeed(7);
+  for (let i = 0; i < 80; i++) {
+    const sx = (noise(i * 100) * W * 1.5) % W;
+    const sy = noise(i * 200) * 180;
+    const brightness = 100 + Math.floor(noise(i * 300 + time * 0.5) * 155);
+    pset(Math.round(sx), Math.round(sy), rgba8(brightness, brightness, brightness + 40));
+  }
+  noiseSeed(42);
+
+  // Moon
+  ellipse(500, 60, 25, 25, rgba8(240, 230, 200, 180), true);
+  ellipse(506, 57, 22, 22, rgba8(8, 6, 18), true);
+
+  // Mountain layers
+  for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+    const L = layers[layerIdx];
+    const off = landscapeOffset * L.speed;
+
+    for (let x = 0; x < W; x++) {
+      const n = noise((x + off) * L.scale, layerIdx * 100);
+      const h = L.base - n * L.amp;
+
+      for (let y = Math.floor(h); y < H; y++) {
+        const t = Math.min(1, (y - h) / L.amp);
+        const r = L.color1[0] + (L.color2[0] - L.color1[0]) * t;
+        const g = L.color1[1] + (L.color2[1] - L.color1[1]) * t;
+        const b = L.color1[2] + (L.color2[2] - L.color1[2]) * t;
+        pset(x, y, rgba8(r, g, b));
+      }
+    }
+  }
+
+  // Water reflection
+  for (let x = 0; x < W; x++) {
+    for (let y = H - 30; y < H; y++) {
+      const wave = Math.sin(x * 0.05 + time * 2) * 3;
+      const alpha = 80 - (y - (H - 30)) * 2;
+      if (alpha > 0) pset(x, y, rgba8(20, 40, 80, alpha));
+    }
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 2: SPIRAL GALAXY
+// ════════════════════════════════════════════════════════════════════════════
+
+let galaxyStars = [];
+
+function _initSpiralGalaxy() {
+  galaxyStars = [];
+  const cx = W / 2,
+    cy = H / 2;
+
+  for (let i = 0; i < 2000; i++) {
+    const arm = Math.floor(Math.random() * 4);
+    const dist = Math.random() * 160;
+    const baseAngle = (arm / 4) * Math.PI * 2;
+    const spiralAngle = baseAngle + dist * 0.04;
+    const spread = (Math.random() - 0.5) * (dist * 0.15);
+
+    galaxyStars.push({
+      dist,
+      angle: spiralAngle,
+      spread,
+      arm,
+      hue: 200 + arm * 40 + Math.random() * 30,
+      brightness: 0.3 + Math.random() * 0.7,
+      size: Math.random() < 0.05 ? 2 : 1,
+    });
+  }
+}
+
+function _drawSpiralGalaxy() {
+  cls(rgba8(4, 2, 10));
+
+  const cx = W / 2,
+    cy = H / 2;
+  const rotSpeed = time * 0.15;
+
+  // Core glow
+  drawRadialGradient(cx, cy, 30, rgba8(255, 220, 180, 60), rgba8(255, 220, 180, 0));
+  drawRadialGradient(cx, cy, 12, rgba8(255, 240, 220, 120), rgba8(255, 200, 150, 0));
+
+  for (const star of galaxyStars) {
+    const angle = star.angle + rotSpeed;
+    const wobble = Math.sin(time * 0.5 + star.dist * 0.1) * 2;
+    const x = cx + Math.cos(angle) * star.dist + Math.sin(angle) * star.spread + wobble;
+    const y = cy + Math.sin(angle) * star.dist * 0.55 + Math.cos(angle) * star.spread * 0.55;
+
+    const alpha = Math.floor(star.brightness * 255 * (1 - star.dist / 200));
+    if (alpha < 10) continue;
+    const c = hsb(star.hue, 0.6, star.brightness, Math.min(255, alpha));
+
+    if (star.size > 1) {
+      pset(Math.round(x), Math.round(y), c);
+      pset(Math.round(x + 1), Math.round(y), c);
+      pset(Math.round(x), Math.round(y + 1), c);
+    } else {
+      pset(Math.round(x), Math.round(y), c);
+    }
+  }
+
+  // Nebula clouds
+  for (let i = 0; i < 5; i++) {
+    const na = (i / 5) * Math.PI * 2 + time * 0.08;
+    const nd = 80 + Math.sin(time * 0.3 + i) * 20;
+    const nx = cx + Math.cos(na) * nd;
+    const ny = cy + Math.sin(na) * nd * 0.55;
+    const hue = (200 + i * 60 + time * 10) % 360;
+    drawRadialGradient(nx, ny, 25, hsb(hue, 0.7, 0.4, 25), hsb(hue, 0.3, 0.1, 0));
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 3: PARTICLE GARDEN
+// ════════════════════════════════════════════════════════════════════════════
+
+let emitters = [];
+
+function _initParticleGarden() {
+  particles = [];
+  emitters = [
+    { x: W * 0.2, y: H * 0.7, hue: 120, type: 'fountain' },
+    { x: W * 0.5, y: H * 0.5, hue: 280, type: 'spiral' },
+    { x: W * 0.8, y: H * 0.7, hue: 30, type: 'fountain' },
+    { x: W * 0.35, y: H * 0.3, hue: 200, type: 'burst' },
+    { x: W * 0.65, y: H * 0.3, hue: 340, type: 'burst' },
+  ];
+}
+
+function _updateParticleGarden(dt) {
+  // Spawn from emitters
+  for (const em of emitters) {
+    if (particles.length < 1500) {
+      for (let i = 0; i < 3; i++) {
+        const p = {
+          x: em.x,
+          y: em.y,
+          life: 120 + Math.random() * 180,
+          maxLife: 0,
+          hue: em.hue + (Math.random() - 0.5) * 40,
+        };
+        p.maxLife = p.life;
+
+        if (em.type === 'fountain') {
+          p.vx = (Math.random() - 0.5) * 40;
+          p.vy = -80 - Math.random() * 60;
+          p.gravity = 50;
+        } else if (em.type === 'spiral') {
+          const a = Math.random() * Math.PI * 2;
+          const spd = 20 + Math.random() * 30;
+          p.vx = Math.cos(a) * spd;
+          p.vy = Math.sin(a) * spd;
+          p.gravity = 0;
+          p.spiral = 2 + Math.random();
+        } else {
+          const a = Math.random() * Math.PI * 2;
+          const spd = 30 + Math.random() * 50;
+          p.vx = Math.cos(a) * spd;
+          p.vy = Math.sin(a) * spd;
+          p.gravity = 15;
+        }
+        particles.push(p);
+      }
+    }
+  }
+
+  // Update physics
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const p = particles[i];
+    p.life -= dt * 60;
+    if (p.life <= 0) {
+      particles.splice(i, 1);
+      continue;
+    }
+
+    if (p.spiral) {
+      const angle = Math.atan2(p.vy, p.vx) + p.spiral * dt;
+      const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+      p.vx = Math.cos(angle) * speed;
+      p.vy = Math.sin(angle) * speed;
+    }
+    if (p.gravity) p.vy += p.gravity * dt;
+    p.x += p.vx * dt;
+    p.y += p.vy * dt;
+  }
+}
+
+function _drawParticleGarden() {
+  cls(rgba8(5, 8, 5));
+
+  for (const p of particles) {
+    const t = p.life / p.maxLife;
+    const alpha = Math.floor(t * 220);
+    const brightness = 0.5 + t * 0.5;
+    const c = hsb(p.hue, 0.8, brightness, Math.max(10, alpha));
+    pset(Math.round(p.x), Math.round(p.y), c);
+
+    if (t > 0.7) {
+      pset(
+        Math.round(p.x + 1),
+        Math.round(p.y),
+        hsb(p.hue, 0.5, brightness, Math.floor(alpha * 0.3))
+      );
+      pset(
+        Math.round(p.x - 1),
+        Math.round(p.y),
+        hsb(p.hue, 0.5, brightness, Math.floor(alpha * 0.3))
+      );
+    }
+  }
+
+  // Emitter markers
+  for (const em of emitters) {
+    ellipse(Math.round(em.x), Math.round(em.y), 4, 4, hsb(em.hue, 0.6, 0.4, 100), true);
+  }
+
+  line(0, Math.floor(H * 0.75), W, Math.floor(H * 0.75), rgba8(30, 50, 30, 100));
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 4: WAVE INTERFERENCE
+// ════════════════════════════════════════════════════════════════════════════
+
+function _drawWaveInterference() {
+  cls(rgba8(0, 0, 0));
+
+  const sources = [
+    { x: W * 0.3, y: H * 0.4, freq: 0.04, phase: time * 3 },
+    { x: W * 0.7, y: H * 0.4, freq: 0.035, phase: time * 2.5 + 1 },
+    { x: W * 0.5, y: H * 0.7, freq: 0.045, phase: time * 3.5 + 2 },
+  ];
+
+  // Sample every 2 pixels for performance
+  for (let y = 0; y < H; y += 2) {
+    for (let x = 0; x < W; x += 2) {
+      let val = 0;
+      for (const src of sources) {
+        const dx = x - src.x;
+        const dy = y - src.y;
+        const d = Math.sqrt(dx * dx + dy * dy);
+        val += Math.sin(d * src.freq - src.phase);
+      }
+      val = (val + 3) / 6;
+
+      const hue = val * 270;
+      const brightness = 0.3 + val * 0.6;
+      const c = hsb(hue, 0.9, brightness);
+
+      pset(x, y, c);
+      pset(x + 1, y, c);
+      pset(x, y + 1, c);
+      pset(x + 1, y + 1, c);
+    }
+  }
+
+  for (const src of sources) {
+    ellipse(Math.round(src.x), Math.round(src.y), 4, 4, rgba8(255, 255, 255, 200), true);
+    ellipse(Math.round(src.x), Math.round(src.y), 8, 8, rgba8(255, 255, 255, 80), false);
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// SKETCH 5: NEON GEOMETRY
+// ════════════════════════════════════════════════════════════════════════════
+
+let geoShapes = [];
+
+function _initNeonGeometry() {
+  geoShapes = [];
+  for (let i = 0; i < 8; i++) {
+    geoShapes.push({
+      cx: W * 0.2 + Math.random() * W * 0.6,
+      cy: H * 0.2 + Math.random() * H * 0.6,
+      type: ['ellipse', 'bezier', 'spiral', 'arc'][Math.floor(Math.random() * 4)],
+      size: 20 + Math.random() * 60,
+      hue: Math.random() * 360,
+      rotSpeed: (Math.random() - 0.5) * 2,
+      pulseSpeed: 1 + Math.random() * 2,
+    });
+  }
+}
+
+function _drawNeonGeometry() {
+  cls(rgba8(4, 2, 8));
+
+  // Connecting lines first (behind shapes)
+  for (let i = 0; i < geoShapes.length; i++) {
+    for (let j = i + 1; j < geoShapes.length; j++) {
+      const a = geoShapes[i],
+        b = geoShapes[j];
+      const d = Math.sqrt((a.cx - b.cx) ** 2 + (a.cy - b.cy) ** 2);
+      if (d < 200) {
+        const alpha = Math.floor((1 - d / 200) * 40);
+        line(
+          Math.round(a.cx),
+          Math.round(a.cy),
+          Math.round(b.cx),
+          Math.round(b.cy),
+          rgba8(100, 80, 160, alpha)
+        );
+      }
+    }
+  }
+
+  for (const shape of geoShapes) {
+    const pulsing = 0.6 + Math.sin(time * shape.pulseSpeed) * 0.4;
+    const s = shape.size * pulsing;
+    const hue = (shape.hue + time * 20) % 360;
+    const c = hsb(hue, 0.9, 0.9, 200);
+    const glow = hsb(hue, 0.6, 0.5, 60);
+
+    pushMatrix();
+    translate(shape.cx, shape.cy);
+    rotate(time * shape.rotSpeed);
+
+    switch (shape.type) {
+      case 'ellipse':
+        ellipse(0, 0, s, s * 0.6, glow, true);
+        ellipse(0, 0, s, s * 0.6, c, false);
+        break;
+      case 'bezier':
+        bezier(-s, 0, -s * 0.5, -s, s * 0.5, s, s, 0, c, 40);
+        bezier(-s, 0, -s * 0.5, s, s * 0.5, -s, s, 0, glow, 40);
+        break;
+      case 'spiral':
+        for (let i = 0; i < 200; i++) {
+          const t = i / 200;
+          const a = t * Math.PI * 6;
+          const r = t * s;
+          const px = Math.cos(a) * r;
+          const py = Math.sin(a) * r;
+          const sc = hsb((hue + t * 120) % 360, 0.9, 0.8, Math.floor(200 * (1 - t * 0.5)));
+          pset(Math.round(px), Math.round(py), sc);
+        }
+        break;
+      case 'arc':
+        arc(0, 0, s, s * 0.7, time, time + Math.PI * 1.5, c, false);
+        arc(0, 0, s * 0.6, s * 0.4, -time, -time + Math.PI, glow, false);
+        break;
+    }
+
+    popMatrix();
+  }
+}