@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/dadras.js

@@ -0,0 +1,405 @@
+/**
+ * Dadras Attractor 3D Visualization
+ *
+ * A 3D chaotic attractor visualization where particles follow the Dadras
+ * dynamical system equations. Trails are colored by velocity (blue=slow,
+ * red=fast) with additive blending for a glowing effect.
+ *
+ * Uses the Attractors module for pure math functions and WebGL for
+ * high-performance line rendering.
+ */
+
+import { Game, Gesture, Screen, Attractors } from "/gcanvas.es.min.js";
+import { Camera3D } from "/gcanvas.es.min.js";
+import { WebGLLineRenderer } from "/gcanvas.es.min.js";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CONFIGURATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CONFIG = {
+  // Attractor settings (uses Attractors.dadras for equations)
+  attractor: {
+    dt: 0.01, // Integration time step
+    scale: 50, // Scale factor for display
+  },
+
+  // Particle settings
+  particles: {
+    count: 500,
+    trailLength: 200,
+    spawnRange: 5, // Initial position range around origin
+  },
+
+  // Camera settings
+  camera: {
+    perspective: 800,
+    rotationX: 0.3,
+    rotationY: 0,
+    inertia: true,
+    friction: 0.95,
+    clampX: false,
+  },
+
+  // Visual settings
+  visual: {
+    minHue: 60, // Red (fast)
+    maxHue: 240, // Blue (slow)
+    maxSpeed: 30, // Speed normalization threshold
+    saturation: 80,
+    lightness: 50,
+    maxAlpha: 0.9,
+    hueShiftSpeed: 20, // Degrees per second (0 to disable)
+  },
+
+  // Glitch/blink effect
+  blink: {
+    chance: 0.02,
+    minDuration: 0.05,
+    maxDuration: 0.3,
+    intensityBoost: 1.5,
+    saturationBoost: 1.2,
+    alphaBoost: 1.3,
+  },
+
+  // Zoom settings
+  zoom: {
+    min: 0.3,
+    max: 3.0,
+    speed: 0.5,
+    easing: 0.12,
+    baseScreenSize: 600,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HELPER FUNCTIONS
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Convert HSL to RGB
+ */
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4)),
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ATTRACTOR PARTICLE
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * A particle following attractor dynamics
+ */
+class AttractorParticle {
+  /**
+   * @param {Function} stepFn - Attractor step function
+   * @param {number} spawnRange - Initial position range
+   */
+  constructor(stepFn, spawnRange) {
+    this.stepFn = stepFn;
+    this.position = {
+      x: (Math.random() - 0.5) * spawnRange,
+      y: (Math.random() - 0.5) * spawnRange,
+      z: (Math.random() - 0.5) * spawnRange,
+    };
+    this.trail = [];
+    this.speed = 0;
+
+    // Blink/glitch state
+    this.blinkTime = 0;
+    this.blinkIntensity = 0;
+  }
+
+  /**
+   * Update blink state
+   */
+  updateBlink(dt) {
+    const { chance, minDuration, maxDuration } = CONFIG.blink;
+
+    if (this.blinkTime > 0) {
+      this.blinkTime -= dt;
+      this.blinkIntensity = Math.max(
+        0,
+        this.blinkTime > 0
+          ? Math.sin((this.blinkTime / ((minDuration + maxDuration) * 0.5)) * Math.PI)
+          : 0
+      );
+    } else {
+      if (Math.random() < chance) {
+        this.blinkTime = minDuration + Math.random() * (maxDuration - minDuration);
+        this.blinkIntensity = 1;
+      } else {
+        this.blinkIntensity = 0;
+      }
+    }
+  }
+
+  /**
+   * Update particle position using attractor
+   */
+  update(dt, scale) {
+    // Use the attractor step function
+    const result = this.stepFn(this.position, dt);
+
+    // Update position
+    this.position = result.position;
+    this.speed = result.speed;
+
+    // Add to trail (scaled for display)
+    this.trail.unshift({
+      x: this.position.x * scale,
+      y: this.position.y * scale,
+      z: this.position.z * scale,
+      speed: this.speed,
+    });
+
+    // Trim trail
+    if (this.trail.length > CONFIG.particles.trailLength) {
+      this.trail.pop();
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DEMO CLASS
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Dadras Attractor Demo
+ */
+class DadrasDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#000";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    // Get attractor info for display
+    this.attractor = Attractors.dadras;
+    console.log(`Attractor: ${this.attractor.name}`);
+    console.log(`Equations:`, this.attractor.equations);
+
+    // Create stepper function with default params
+    this.stepFn = this.attractor.createStepper();
+
+    // Calculate initial zoom
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    const initialZoom = Math.min(max, Math.max(min, Screen.minDimension() / baseScreenSize));
+    this.zoom = initialZoom;
+    this.targetZoom = initialZoom;
+    this.defaultZoom = initialZoom;
+
+    // Camera with mouse control
+    this.camera = new Camera3D({
+      perspective: CONFIG.camera.perspective,
+      rotationX: CONFIG.camera.rotationX,
+      rotationY: CONFIG.camera.rotationY,
+      inertia: CONFIG.camera.inertia,
+      friction: CONFIG.camera.friction,
+      clampX: CONFIG.camera.clampX,
+    });
+    this.camera.enableMouseControl(this.canvas);
+
+    // Gesture handler for zoom
+    this.gesture = new Gesture(this.canvas, {
+      onZoom: (delta) => {
+        this.targetZoom *= 1 + delta * CONFIG.zoom.speed;
+      },
+      onPan: null,
+    });
+
+    // Double-click to reset
+    this.canvas.addEventListener("dblclick", () => {
+      this.targetZoom = this.defaultZoom;
+    });
+
+    // Initialize particles using the attractor step function
+    this.particles = [];
+    for (let i = 0; i < CONFIG.particles.count; i++) {
+      this.particles.push(new AttractorParticle(this.stepFn, CONFIG.particles.spawnRange));
+    }
+
+    // WebGL line renderer
+    const maxSegments = CONFIG.particles.count * CONFIG.particles.trailLength;
+    this.lineRenderer = new WebGLLineRenderer(maxSegments, {
+      width: this.width,
+      height: this.height,
+      blendMode: "additive",
+    });
+
+    this.segments = [];
+
+    if (!this.lineRenderer.isAvailable()) {
+      console.warn("WebGL not available, falling back to Canvas 2D");
+      this.useWebGL = false;
+    } else {
+      this.useWebGL = true;
+      console.log(`WebGL enabled, ${maxSegments} max segments`);
+    }
+
+    this.time = 0;
+  }
+
+  onResize() {
+    if (this.lineRenderer?.isAvailable()) {
+      this.lineRenderer.resize(this.width, this.height);
+    }
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    this.defaultZoom = Math.min(max, Math.max(min, Screen.minDimension() / baseScreenSize));
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.camera.update(dt);
+    this.zoom += (this.targetZoom - this.zoom) * CONFIG.zoom.easing;
+    this.time += dt;
+
+    for (const particle of this.particles) {
+      particle.update(CONFIG.attractor.dt, CONFIG.attractor.scale);
+      particle.updateBlink(dt);
+    }
+  }
+
+  collectSegments(cx, cy) {
+    const { minHue, maxHue, maxSpeed, saturation, lightness, maxAlpha, hueShiftSpeed } =
+      CONFIG.visual;
+    const { intensityBoost, saturationBoost, alphaBoost } = CONFIG.blink;
+    const hueOffset = (this.time * hueShiftSpeed) % 360;
+
+    this.segments.length = 0;
+
+    for (const particle of this.particles) {
+      if (particle.trail.length < 2) continue;
+
+      const blink = particle.blinkIntensity;
+
+      for (let i = 1; i < particle.trail.length; i++) {
+        const curr = particle.trail[i];
+        const prev = particle.trail[i - 1];
+
+        const p1 = this.camera.project(prev.x, prev.y, prev.z);
+        const p2 = this.camera.project(curr.x, curr.y, curr.z);
+
+        if (p1.scale <= 0 || p2.scale <= 0) continue;
+
+        const age = i / particle.trail.length;
+        const speedNorm = Math.min(curr.speed / maxSpeed, 1);
+        const baseHue = maxHue - speedNorm * (maxHue - minHue);
+        const hue = (baseHue + hueOffset) % 360;
+
+        const sat = Math.min(100, saturation * (1 + blink * (saturationBoost - 1)));
+        const lit = Math.min(100, lightness * (1 + blink * (intensityBoost - 1)));
+        const rgb = hslToRgb(hue, sat, lit);
+        const alpha = Math.min(1, (1 - age) * maxAlpha * (1 + blink * (alphaBoost - 1)));
+
+        this.segments.push({
+          x1: cx + p1.x * this.zoom,
+          y1: cy + p1.y * this.zoom,
+          x2: cx + p2.x * this.zoom,
+          y2: cy + p2.y * this.zoom,
+          r: rgb.r,
+          g: rgb.g,
+          b: rgb.b,
+          a: alpha,
+        });
+      }
+    }
+
+    return this.segments.length;
+  }
+
+  renderCanvas2D(cx, cy) {
+    const { minHue, maxHue, maxSpeed, saturation, lightness, maxAlpha, hueShiftSpeed } =
+      CONFIG.visual;
+    const { intensityBoost, saturationBoost, alphaBoost } = CONFIG.blink;
+    const hueOffset = (this.time * hueShiftSpeed) % 360;
+
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.lineCap = "round";
+
+    for (const particle of this.particles) {
+      if (particle.trail.length < 2) continue;
+
+      const blink = particle.blinkIntensity;
+
+      for (let i = 1; i < particle.trail.length; i++) {
+        const curr = particle.trail[i];
+        const prev = particle.trail[i - 1];
+
+        const p1 = this.camera.project(prev.x, prev.y, prev.z);
+        const p2 = this.camera.project(curr.x, curr.y, curr.z);
+
+        if (p1.scale <= 0 || p2.scale <= 0) continue;
+
+        const age = i / particle.trail.length;
+        const speedNorm = Math.min(curr.speed / maxSpeed, 1);
+        const baseHue = maxHue - speedNorm * (maxHue - minHue);
+        const hue = (baseHue + hueOffset) % 360;
+
+        const sat = Math.min(100, saturation * (1 + blink * (saturationBoost - 1)));
+        const lit = Math.min(100, lightness * (1 + blink * (intensityBoost - 1)));
+        const alpha = Math.min(1, (1 - age) * maxAlpha * (1 + blink * (alphaBoost - 1)));
+
+        ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${lit}%, ${alpha})`;
+        ctx.lineWidth = 1;
+
+        ctx.beginPath();
+        ctx.moveTo(cx + p1.x * this.zoom, cy + p1.y * this.zoom);
+        ctx.lineTo(cx + p2.x * this.zoom, cy + p2.y * this.zoom);
+        ctx.stroke();
+      }
+    }
+
+    ctx.restore();
+  }
+
+  render() {
+    super.render();
+    if (!this.particles) return;
+
+    const cx = this.width / 2;
+    const cy = this.height / 2;
+
+    if (this.useWebGL && this.lineRenderer.isAvailable()) {
+      const segmentCount = this.collectSegments(cx, cy);
+      if (segmentCount > 0) {
+        this.lineRenderer.clear();
+        this.lineRenderer.updateLines(this.segments);
+        this.lineRenderer.render(segmentCount);
+        this.lineRenderer.compositeOnto(this.ctx, 0, 0);
+      }
+    } else {
+      this.renderCanvas2D(cx, cy);
+    }
+  }
+
+  destroy() {
+    this.gesture?.destroy();
+    this.lineRenderer?.destroy();
+    super.destroy?.();
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// INITIALIZATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const demo = new DadrasDemo(canvas);
+  demo.start();
+});

package/dist/js/dejong.js

@@ -0,0 +1,257 @@
+/**
+ * De Jong Attractor 2D Visualization
+ *
+ * A 2D iterative attractor by Peter de Jong, similar to Clifford but
+ * creating different swirling patterns with its sin/cos structure.
+ *
+ * Engine-aligned procedural WebGL approach:
+ * - Seed buffer stays on the GPU
+ * - Vertex shader iterates the De Jong map (like the reference project)
+ * - Output is composited onto the main 2D canvas for easy trail accumulation
+ */
+
+import { Game, Gesture, Screen, Attractors, Painter, WebGLDeJongRenderer } from "/gcanvas.es.min.js";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CONFIGURATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CONFIG = {
+  // Attractor settings
+  attractor: {
+    // GPU shader iterations per point
+    iterations: 100,
+
+    // Parameter animation (mirrors the reference project where 'a' drifts over time)
+    params: {
+      aBase: -2.0,
+      aWobble: 0.6,
+      aPeriodSeconds: 8.0, // seconds for one full wobble cycle
+      b: -2.0,
+      c: -1.2,
+      d: 2.0,
+    },
+  },
+
+  // Procedural point settings
+  points: {
+    seedCount: 1 << 18, // 262144 (matches reference performance profile)
+    pointSize: 1.0,
+    pointScale: 0.5, // maps attractor space to clip space (reference uses 0.5)
+    shape: "glow", // 'circle' | 'glow' | 'square' | 'softSquare'
+    blendMode: "additive", // 'alpha' | 'additive' (WebGL)
+    compositeBlendMode: "lighter", // Canvas 2D blend for compositing
+    color: { r: 1, g: 1, b: 1, a: 0.12 }, // RGBA 0..1
+  },
+
+  // Visual settings - warm palette for De Jong
+  visual: {
+    // Lorenz-style: map speed → hue (slow=cyan, fast=orange) + hue shifting
+    minHue: 30, // fast
+    maxHue: 200, // slow
+    maxSpeed: 0.8, // speed normalization threshold (tune per-attractor)
+    saturation: 85,
+    lightness: 55,
+    alpha: 0.14,
+    hueShiftSpeed: 15, // degrees per second
+    fadeSpeed: 0.02, // 0 = no fade (infinite trails), higher = faster fade
+  },
+
+  // Zoom settings
+  zoom: {
+    min: 0.3,
+    max: 3.0,
+    speed: 0.5,
+    easing: 0.12,
+    baseScreenSize: 600,
+    initialMultiplier: 0.75, // lower = zoom out more initially
+  },
+
+  // Rotation settings (drag to rotate)
+  rotation: {
+    speed: 0.01, // radians per pixel
+    easing: 0.15,
+    autoSpeed: 0.18, // radians/sec (continuous rotation)
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DEMO CLASS
+// ─────────────────────────────────────────────────────────────────────────────
+
+class DeJongDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#000";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    this.attractor = Attractors.deJong;
+    console.log(`Attractor: ${this.attractor.name}`);
+    console.log(`Equations:`, this.attractor.equations);
+
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    const initialZoomRaw = Screen.minDimension() / baseScreenSize;
+    const initialZoom = Math.min(
+      max,
+      Math.max(min, initialZoomRaw * CONFIG.zoom.initialMultiplier)
+    );
+    this.zoom = initialZoom;
+    this.targetZoom = initialZoom;
+    this.defaultZoom = initialZoom;
+
+    // Continuous auto-rotation + user-controlled offset (drag)
+    this.baseRotation = 0;
+    this.userRotation = 0;
+    this.targetUserRotation = 0;
+
+    // Gesture handler for zoom + rotation
+    this.gesture = new Gesture(this.canvas, {
+      onZoom: (delta) => {
+        this.targetZoom *= 1 + delta * CONFIG.zoom.speed;
+      },
+      onPan: (dx) => {
+        this.targetUserRotation += dx * CONFIG.rotation.speed;
+      },
+    });
+
+    // Double-click to reset
+    this.canvas.addEventListener("dblclick", () => {
+      this.targetZoom = this.defaultZoom;
+      this.baseRotation = 0;
+      this.targetUserRotation = 0;
+      this._didFirstClear = false;
+      this.renderer?.regenerateSeeds();
+    });
+
+    this.time = 0;
+
+    // Fade-clear state (first frame fills solid black)
+    this._didFirstClear = false;
+
+    this.renderer = new WebGLDeJongRenderer(CONFIG.points.seedCount, {
+      width: this.width,
+      height: this.height,
+      shape: CONFIG.points.shape,
+      blendMode: CONFIG.points.blendMode,
+      pointSize: CONFIG.points.pointSize,
+      pointScale: CONFIG.points.pointScale,
+      iterations: CONFIG.attractor.iterations,
+      color: CONFIG.points.color,
+      colorMode: 1,
+      hueRange: { minHue: CONFIG.visual.minHue, maxHue: CONFIG.visual.maxHue },
+      maxSpeed: CONFIG.visual.maxSpeed,
+      saturation: CONFIG.visual.saturation / 100,
+      lightness: CONFIG.visual.lightness / 100,
+      alpha: CONFIG.visual.alpha,
+      hueShiftSpeed: CONFIG.visual.hueShiftSpeed,
+      params: {
+        a: CONFIG.attractor.params.aBase,
+        b: CONFIG.attractor.params.b,
+        c: CONFIG.attractor.params.c,
+        d: CONFIG.attractor.params.d,
+      },
+    });
+
+    if (!this.renderer.isAvailable()) {
+      console.warn("WebGL not available for DeJong demo");
+    }
+  }
+
+  onResize() {
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    const initialZoomRaw = Screen.minDimension() / baseScreenSize;
+    this.defaultZoom = Math.min(
+      max,
+      Math.max(min, initialZoomRaw * CONFIG.zoom.initialMultiplier)
+    );
+    this._didFirstClear = false;
+    this.renderer?.resize(this.width, this.height);
+  }
+
+  update(dt) {
+    this.zoom += (this.targetZoom - this.zoom) * CONFIG.zoom.easing;
+    this.time += dt;
+
+    // Continuous rotation (never reverses unless user drags against it)
+    const TAU = Math.PI * 2;
+    this.baseRotation = (this.baseRotation + CONFIG.rotation.autoSpeed * dt) % TAU;
+
+    // Smooth user rotation offset
+    this.userRotation +=
+      (this.targetUserRotation - this.userRotation) * CONFIG.rotation.easing;
+    super.update(dt);
+  }
+
+  clear() {
+    // Fade the canvas to create persistent trails.
+    // Use a solid first clear to avoid a "transparent start" look.
+    if (!this._didFirstClear) {
+      Painter.useCtx((ctx) => {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, this.width, this.height);
+      });
+      this._didFirstClear = true;
+      return;
+    }
+
+    const fade = CONFIG.visual.fadeSpeed;
+    if (fade <= 0) return;
+
+    Painter.useCtx((ctx) => {
+      ctx.globalCompositeOperation = "source-over";
+      ctx.fillStyle = `rgba(0, 0, 0, ${fade})`;
+      ctx.fillRect(0, 0, this.width, this.height);
+    });
+  }
+
+  render() {
+    // Custom render: fade-clear (via clear()), then composite WebGL output.
+    Painter.setContext(this.ctx);
+    if (this.running) this.clear();
+
+    if (this.renderer?.isAvailable()) {
+      // Animate params like the reference (a wobbles over time)
+      const p = CONFIG.attractor.params;
+      const omega = (2 * Math.PI) / Math.max(0.001, p.aPeriodSeconds);
+      const a = p.aBase + Math.sin(this.time * omega) * p.aWobble;
+
+      this.renderer.setParams({ a, b: p.b, c: p.c, d: p.d });
+      this.renderer.setIterations(CONFIG.attractor.iterations);
+      this.renderer.setZoom(this.zoom);
+      this.renderer.setTransform(
+        WebGLDeJongRenderer.rotationMat3(this.baseRotation + this.userRotation)
+      );
+
+      // Draw points to the offscreen WebGL canvas, then composite
+      this.renderer.clear(0, 0, 0, 0);
+      this.renderer.render(this.time);
+
+      Painter.useCtx((ctx) => {
+        const prev = ctx.globalCompositeOperation;
+        ctx.globalCompositeOperation = CONFIG.points.compositeBlendMode;
+        this.renderer.compositeOnto(ctx, 0, 0);
+        ctx.globalCompositeOperation = prev;
+      });
+    }
+  }
+
+  destroy() {
+    this.gesture?.destroy();
+    this.renderer?.destroy();
+    super.destroy?.();
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// INITIALIZATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const demo = new DeJongDemo(canvas);
+  demo.start();
+});