npm - @guinetik/gcanvas - Versions diffs - 1.0.5 → 2.0.0 - Mend

@guinetik/gcanvas 1.0.5 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/aizawa.html +27 -0
package/dist/clifford.html +25 -0
package/dist/cmb.html +24 -0
package/dist/dadras.html +26 -0
package/dist/dejong.html +25 -0
package/dist/gcanvas.es.js +5130 -372
package/dist/gcanvas.es.min.js +1 -1
package/dist/gcanvas.umd.js +1 -1
package/dist/gcanvas.umd.min.js +1 -1
package/dist/halvorsen.html +27 -0
package/dist/index.html +96 -48
package/dist/js/aizawa.js +425 -0
package/dist/js/bezier.js +5 -5
package/dist/js/clifford.js +236 -0
package/dist/js/cmb.js +594 -0
package/dist/js/dadras.js +405 -0
package/dist/js/dejong.js +257 -0
package/dist/js/halvorsen.js +405 -0
package/dist/js/isometric.js +34 -46
package/dist/js/lorenz.js +425 -0
package/dist/js/painter.js +8 -8
package/dist/js/rossler.js +480 -0
package/dist/js/schrodinger.js +314 -18
package/dist/js/thomas.js +394 -0
package/dist/lorenz.html +27 -0
package/dist/rossler.html +27 -0
package/dist/scene-interactivity-test.html +220 -0
package/dist/thomas.html +27 -0
package/package.json +1 -1
package/readme.md +30 -22
package/src/game/objects/go.js +7 -0
package/src/game/objects/index.js +2 -0
package/src/game/objects/isometric-scene.js +53 -3
package/src/game/objects/layoutscene.js +57 -0
package/src/game/objects/mask.js +241 -0
package/src/game/objects/scene.js +19 -0
package/src/game/objects/wrapper.js +14 -2
package/src/game/pipeline.js +17 -0
package/src/game/ui/button.js +101 -16
package/src/game/ui/theme.js +0 -6
package/src/game/ui/togglebutton.js +25 -14
package/src/game/ui/tooltip.js +12 -4
package/src/index.js +3 -0
package/src/io/gesture.js +409 -0
package/src/io/index.js +4 -1
package/src/io/keys.js +9 -1
package/src/io/screen.js +476 -0
package/src/math/attractors.js +664 -0
package/src/math/heat.js +106 -0
package/src/math/index.js +1 -0
package/src/mixins/draggable.js +15 -19
package/src/painter/painter.shapes.js +11 -5
package/src/particle/particle-system.js +165 -1
package/src/physics/index.js +26 -0
package/src/physics/physics-updaters.js +333 -0
package/src/physics/physics.js +375 -0
package/src/shapes/image.js +5 -5
package/src/shapes/index.js +2 -0
package/src/shapes/parallelogram.js +147 -0
package/src/shapes/righttriangle.js +115 -0
package/src/shapes/svg.js +281 -100
package/src/shapes/text.js +22 -6
package/src/shapes/transformable.js +5 -0
package/src/sound/effects.js +807 -0
package/src/sound/index.js +13 -0
package/src/webgl/index.js +7 -0
package/src/webgl/shaders/clifford-point-shaders.js +131 -0
package/src/webgl/shaders/dejong-point-shaders.js +131 -0
package/src/webgl/shaders/point-sprite-shaders.js +152 -0
package/src/webgl/webgl-clifford-renderer.js +477 -0
package/src/webgl/webgl-dejong-renderer.js +472 -0
package/src/webgl/webgl-line-renderer.js +391 -0
package/src/webgl/webgl-particle-renderer.js +410 -0
package/types/index.d.ts +30 -2
package/types/io.d.ts +217 -0
package/types/physics.d.ts +299 -0
package/types/shapes.d.ts +8 -0
package/types/webgl.d.ts +188 -109

package/dist/halvorsen.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Halvorsen Attractor 3D</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>Halvorsen Attractor</strong><br/>
+    <span style="color:#CCC">
+      <li>dx/dt = -ax - 4y - 4z - y²</li>
+      <li>dy/dt = -ay - 4z - 4x - z²</li>
+      <li>dz/dt = -az - 4x - 4y - x²</li>
+      <li>a = 1.89</li>
+      <li>Three-fold rotational symmetry</li>
+      <li>Blue = slow, Pink = fast</li>
+      <li>Drag to rotate</li>
+      <li>Scroll/pinch to zoom</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/halvorsen.js"></script>
+</body>
+</html>

package/dist/index.html CHANGED Viewed

@@ -6,58 +6,91 @@
         <!-- Primary Meta Tags -->
         <title>GCanvas Demos - Interactive Examples & Documentation</title>
-        <meta name="title" content="GCanvas Demos - Interactive Examples & Documentation">
-        <meta name="description" content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action.">
-        <meta name="keywords" content="gcanvas, canvas demos, 2d canvas examples, game framework demos, javascript canvas, html5 canvas examples, interactive demos, creative coding examples">
-        <meta name="author" content="GCanvas">
-        <meta name="robots" content="index, follow">
-        <link rel="canonical" href="https://gcanvas.guinetik.com/">
+        <meta
+            name="title"
+            content="GCanvas Demos - Interactive Examples & Documentation"
+        />
+        <meta
+            name="description"
+            content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
+        />
+        <meta
+            name="keywords"
+            content="gcanvas, canvas demos, 2d canvas examples, game framework demos, javascript canvas, html5 canvas examples, interactive demos, creative coding examples"
+        />
+        <meta name="author" content="GCanvas" />
+        <meta name="robots" content="index, follow" />
+        <link rel="canonical" href="https://gcanvas.guinetik.com/" />
         <!-- Open Graph / Facebook -->
-        <meta property="og:type" content="website">
-        <meta property="og:url" content="https://gcanvas.guinetik.com/">
-        <meta property="og:title" content="GCanvas Demos - Interactive Examples & Documentation">
-        <meta property="og:description" content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action.">
-        <meta property="og:image" content="https://gcanvas.guinetik.com/og_image.png">
-        <meta property="og:image:width" content="1200">
-        <meta property="og:image:height" content="630">
-        <meta property="og:image:alt" content="GCanvas interactive demos and examples">
-        <meta property="og:site_name" content="GCanvas">
-        <meta property="og:locale" content="en_US">
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://gcanvas.guinetik.com/" />
+        <meta
+            property="og:title"
+            content="GCanvas Demos - Interactive Examples & Documentation"
+        />
+        <meta
+            property="og:description"
+            content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
+        />
+        <meta
+            property="og:image"
+            content="https://gcanvas.guinetik.com/og_image.png"
+        />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta
+            property="og:image:alt"
+            content="GCanvas interactive demos and examples"
+        />
+        <meta property="og:site_name" content="GCanvas" />
+        <meta property="og:locale" content="en_US" />
         <!-- Twitter -->
-        <meta name="twitter:card" content="summary_large_image">
-        <meta name="twitter:url" content="https://gcanvas.guinetik.com/">
-        <meta name="twitter:title" content="GCanvas Demos - Interactive Examples & Documentation">
-        <meta name="twitter:description" content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action.">
-        <meta name="twitter:image" content="https://gcanvas.guinetik.com/og_image.png">
-        <meta name="twitter:image:alt" content="GCanvas interactive demos and examples">
-        <meta name="twitter:creator" content="@guinetik">
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:url" content="https://gcanvas.guinetik.com/" />
+        <meta
+            name="twitter:title"
+            content="GCanvas Demos - Interactive Examples & Documentation"
+        />
+        <meta
+            name="twitter:description"
+            content="Explore interactive demos and examples of GCanvas, a modular 2D canvas rendering and game framework. See shapes, animations, physics simulations, games, and more in action."
+        />
+        <meta
+            name="twitter:image"
+            content="https://gcanvas.guinetik.com/og_image.png"
+        />
+        <meta
+            name="twitter:image:alt"
+            content="GCanvas interactive demos and examples"
+        />
+        <meta name="twitter:creator" content="@guinetik" />
         <!-- Favicon -->
-        <link rel="icon" type="image/svg+xml" href="./logo.svg">
-        <link rel="apple-touch-icon" href="./logo.svg">
-        <meta name="theme-color" content="#000000">
+        <link rel="icon" type="image/svg+xml" href="./logo.svg" />
+        <link rel="apple-touch-icon" href="./logo.svg" />
+        <meta name="theme-color" content="#000000" />
         <!-- Structured Data (JSON-LD) -->
         <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@type": "WebSite",
-          "name": "GCanvas Demos",
-          "url": "https://gcanvas.guinetik.com/",
-          "description": "Interactive demos and examples for GCanvas, a modular 2D canvas rendering and game framework",
-          "publisher": {
-            "@type": "Organization",
-            "name": "GCanvas",
-            "url": "https://github.com/guinetik/gcanvas"
-          },
-          "potentialAction": {
-            "@type": "SearchAction",
-            "target": "https://gcanvas.guinetik.com/?q={search_term_string}",
-            "query-input": "required name=search_term_string"
-          }
-        }
+            {
+                "@context": "https://schema.org",
+                "@type": "WebSite",
+                "name": "GCanvas Demos",
+                "url": "https://gcanvas.guinetik.com/",
+                "description": "Interactive demos and examples for GCanvas, a modular 2D canvas rendering and game framework",
+                "publisher": {
+                    "@type": "Organization",
+                    "name": "GCanvas",
+                    "url": "https://github.com/guinetik/gcanvas"
+                },
+                "potentialAction": {
+                    "@type": "SearchAction",
+                    "target": "https://gcanvas.guinetik.com/?q={search_term_string}",
+                    "query-input": "required name=search_term_string"
+                }
+            }
         </script>
         <link rel="stylesheet" href="demos.css" />
@@ -135,7 +168,7 @@
                         title="View on GitHub"
                         style="
                             display: inline-block;
-                            background: #1F1F1F;
+                            background: #1f1f1f;
                             border-radius: 50%;
                             width: 36px;
                             height: 36px;
@@ -213,16 +246,22 @@
             <a href="tiles.html" target="demo-frame">Tile Layout</a>
             <a href="isometric.html" target="demo-frame">Isometric</a>
             <a href="scenes.html" target="demo-frame">Scene Transforms</a>
+            <a href="scene-interactivity-test.html" target="demo-frame"
+                >Scene Interactivity</a
+            >
             <hr />
             <h2 style="margin-bottom: 0.3em">3D</h2>
             <a href="sphere3d.html" target="demo-frame">Sphere3D Showcase</a>
             <a href="plane3d.html" target="demo-frame">Plane3D Showcase</a>
             <a href="cube3d.html" target="demo-frame">Rubik's Cube</a>
             <hr />
-            <h2 style="margin-bottom: 0.3em; color: #0f0;">
-              <a href="../genuary26/" style="color: #0f0; text-decoration: none;">
-                Genuary 2026 &rarr;
-              </a>
+            <h2 style="margin-bottom: 0.3em; color: #0f0">
+                <a
+                    href="../genuary26/"
+                    style="color: #0f0; text-decoration: none"
+                >
+                    Genuary 2026 &rarr;
+                </a>
             </h2>
             <hr />
             <h2 style="margin-bottom: 0.3em">Generative Art</h2>
@@ -247,6 +286,7 @@
             <a href="baskara.html" target="demo-frame">Root Dance</a>
             <hr />
             <h2 style="margin-bottom: 0.3em">Math & Physics</h2>
+            <a href="cmb.html" target="demo-frame">Cosmic Microwave Background</a>
             <a href="fluid.html" target="demo-frame">Fluid Playground</a>
             <a href="fluid-simple.html" target="demo-frame">Fluid System</a>
             <a href="schrodinger.html" target="demo-frame">Schrodinger Wave</a>
@@ -257,6 +297,14 @@
             <a href="kerr.html" target="demo-frame">Kerr Metric</a>
             <a href="blackhole.html" target="demo-frame">Black Hole</a>
             <a href="tde.html" target="demo-frame">Tidal Disruption</a>
+            <a href="dadras.html" target="demo-frame">Dadras Attractor</a>
+            <a href="lorenz.html" target="demo-frame">Lorenz Attractor</a>
+            <a href="aizawa.html" target="demo-frame">Aizawa Attractor</a>
+            <a href="thomas.html" target="demo-frame">Thomas Attractor</a>
+            <a href="rossler.html" target="demo-frame">Rössler Attractor</a>
+            <a href="halvorsen.html" target="demo-frame">Halvorsen Attractor</a>
+            <a href="clifford.html" target="demo-frame">Clifford Attractor</a>
+            <a href="dejong.html" target="demo-frame">De Jong Attractor</a>
             <hr />
             <h2 style="margin-bottom: 0.3em">Games</h2>
             <a href="blob.html" target="demo-frame">Bezier Blob</a>

package/dist/js/aizawa.js ADDED Viewed

@@ -0,0 +1,425 @@
+/**
+ * Aizawa Attractor 3D Visualization
+ *
+ * A 3D chaotic system with intricate folding structure, named after
+ * Japanese mathematician Tomohiko Aizawa. Features complex orbits
+ * with a distinctive torus-like shape.
+ *
+ * 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.aizawa for equations)
+  attractor: {
+    dt: 0.008, // Integration time step
+    scale: 120, // Scale factor for display (Aizawa is small)
+  },
+  // Particle settings
+  particles: {
+    count: 350,
+    trailLength: 220,
+    spawnRange: 0.5, // Initial position range around origin
+  },
+  // Center offset - adjust to match attractor's visual barycenter
+  center: {
+    x: 0,
+    y: 0,
+    z: 0.5, // Aizawa orbits around z ≈ 0.5
+  },
+  // Camera settings
+  camera: {
+    perspective: 800,
+    rotationX: 0.4,
+    rotationY: 0,
+    inertia: true,
+    friction: 0.95,
+    clampX: false,
+  },
+  // Visual settings
+  visual: {
+    minHue: 280, // Magenta (fast)
+    maxHue: 180, // Cyan (slow)
+    maxSpeed: 8, // Speed normalization threshold
+    saturation: 90,
+    lightness: 55,
+    maxAlpha: 0.85,
+    hueShiftSpeed: 12, // Degrees per second
+  },
+  // Glitch/blink effect
+  blink: {
+    chance: 0.018,
+    minDuration: 0.04,
+    maxDuration: 0.2,
+    intensityBoost: 1.5,
+    saturationBoost: 1.2,
+    alphaBoost: 1.3,
+  },
+  // Zoom settings
+  zoom: {
+    min: 0.3,
+    max: 2.5,
+    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 {
+  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;
+  }
+  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(dt, scale) {
+    const result = this.stepFn(this.position, dt);
+    this.position = result.position;
+    this.speed = result.speed;
+    // Add to trail (reoriented and scaled for display)
+    // Swap Y and Z so the attractor's vertical axis aligns with screen vertical
+    this.trail.unshift({
+      x: this.position.x * scale,
+      y: this.position.z * scale,  // Z becomes screen Y (vertical)
+      z: this.position.y * scale,  // Y becomes depth
+      speed: this.speed,
+    });
+    if (this.trail.length > CONFIG.particles.trailLength) {
+      this.trail.pop();
+    }
+  }
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// DEMO CLASS
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Aizawa Attractor Demo
+ */
+class AizawaDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#000";
+    this.enableFluidSize();
+  }
+  init() {
+    super.init();
+    // Get attractor info
+    this.attractor = Attractors.aizawa;
+    console.log(`Attractor: ${this.attractor.name}`);
+    console.log(`Equations:`, this.attractor.equations);
+    // Create stepper function
+    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, {
+      invertX: true,   // flip left/right
+      invertY: true,   // flip up/down
+    });
+    // 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;
+    });
+    // Log camera params on mouse release (for finding good starting angle)
+    this.canvas.addEventListener("mouseup", () => {
+      console.log(`Camera: rotationX: ${this.camera.rotationX.toFixed(3)}, rotationY: ${this.camera.rotationY.toFixed(3)}`);
+      // Calculate and log barycenter to help find the right center offset
+      let sumX = 0, sumY = 0, sumZ = 0, count = 0;
+      for (const p of this.particles) {
+        sumX += p.position.x;
+        sumY += p.position.y;
+        sumZ += p.position.z;
+        count++;
+      }
+      console.log(`Barycenter: x: ${(sumX/count).toFixed(3)}, y: ${(sumY/count).toFixed(3)}, z: ${(sumZ/count).toFixed(3)}`);
+    });
+    // Initialize particles
+    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);
+    // Normalize rotation to prevent unbounded values
+    const TAU = Math.PI * 2;
+    this.camera.rotationY = ((this.camera.rotationY % TAU) + TAU) % TAU;
+    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 * (minHue - maxHue);
+        const hue = (baseHue + hueOffset + 360) % 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 * (minHue - maxHue);
+        const hue = (baseHue + hueOffset + 360) % 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 AizawaDemo(canvas);
+  demo.start();
+});