@guinetik/gcanvas 1.0.5 → 2.0.0

package/dist/js/thomas.js

@@ -0,0 +1,394 @@
+/**
+ * Thomas Attractor 3D Visualization
+ *
+ * Thomas' Cyclically Symmetric Attractor (1999) discovered by René Thomas.
+ * Features elegant symmetry and smooth cyclical motion with a simple
+ * sinusoidal structure.
+ *
+ * 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.thomas for equations)
+  attractor: {
+    dt: 0.08, // Thomas needs larger dt
+    scale: 60, // Scale factor for display
+  },
+
+  // Particle settings
+  particles: {
+    count: 300,
+    trailLength: 300,
+    spawnRange: 2, // Initial position range
+  },
+
+  // Center offset - adjust to match attractor's visual barycenter
+  center: {
+    x: -0.2,
+    y: -0.2,
+    z: 0,
+  },
+
+  // Camera settings
+  camera: {
+    perspective: 800,
+    rotationX: 0.3,
+    rotationY: 0.2,
+    inertia: true,
+    friction: 0.95,
+    clampX: false,
+  },
+
+  // Visual settings - green/teal palette for Thomas
+  visual: {
+    minHue: 120, // Green (fast)
+    maxHue: 200, // Cyan-blue (slow)
+    maxSpeed: 2.5, // Thomas is slow-moving
+    saturation: 85,
+    lightness: 50,
+    maxAlpha: 0.8,
+    hueShiftSpeed: 8,
+  },
+
+  // Glitch/blink effect
+  blink: {
+    chance: 0.012,
+    minDuration: 0.06,
+    maxDuration: 0.25,
+    intensityBoost: 1.4,
+    saturationBoost: 1.15,
+    alphaBoost: 1.2,
+  },
+
+  // Zoom settings
+  zoom: {
+    min: 0.3,
+    max: 3.0,
+    speed: 0.5,
+    easing: 0.12,
+    baseScreenSize: 600,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HELPER FUNCTIONS
+// ─────────────────────────────────────────────────────────────────────────────
+
+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
+// ─────────────────────────────────────────────────────────────────────────────
+
+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;
+    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 (centered and scaled for display)
+    this.trail.unshift({
+      x: (this.position.x - CONFIG.center.x) * scale,
+      y: (this.position.y - CONFIG.center.y) * scale,
+      z: (this.position.z - CONFIG.center.z) * scale,
+      speed: this.speed,
+    });
+
+    if (this.trail.length > CONFIG.particles.trailLength) {
+      this.trail.pop();
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DEMO CLASS
+// ─────────────────────────────────────────────────────────────────────────────
+
+class ThomasDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#000";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    this.attractor = Attractors.thomas;
+    console.log(`Attractor: ${this.attractor.name}`);
+    console.log(`Equations:`, this.attractor.equations);
+
+    this.stepFn = this.attractor.createStepper();
+
+    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;
+
+    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);
+
+    this.gesture = new Gesture(this.canvas, {
+      onZoom: (delta) => {
+        this.targetZoom *= 1 + delta * CONFIG.zoom.speed;
+      },
+      onPan: null,
+    });
+
+    this.canvas.addEventListener("dblclick", () => {
+      this.targetZoom = this.defaultZoom;
+    });
+
+    // Log camera params and barycenter on mouse release
+    this.canvas.addEventListener("mouseup", () => {
+      console.log(`Camera: rotationX: ${this.camera.rotationX.toFixed(3)}, rotationY: ${this.camera.rotationY.toFixed(3)}`);
+      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)}`);
+    });
+
+    this.particles = [];
+    for (let i = 0; i < CONFIG.particles.count; i++) {
+      this.particles.push(
+        new AttractorParticle(this.stepFn, CONFIG.particles.spawnRange)
+      );
+    }
+
+    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 ThomasDemo(canvas);
+  demo.start();
+});

package/dist/lorenz.html

@@ -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>Lorenz Attractor 3D</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>Lorenz Attractor</strong> — The Butterfly Effect (1963)<br/>
+    <span style="color:#CCC">
+      <li>dx/dt = σ(y - x)</li>
+      <li>dy/dt = x(ρ - z) - y</li>
+      <li>dz/dt = xy - βz</li>
+      <li>σ=10, ρ=28, β=8/3</li>
+      <li>Blue = slow, Red = fast</li>
+      <li>Drag to rotate</li>
+      <li>Scroll/pinch to zoom</li>
+      <li>Double-click to reset</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/lorenz.js"></script>
+</body>
+</html>

package/dist/rossler.html

@@ -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>Rössler Attractor 3D</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>Rössler Attractor</strong> (1976)<br/>
+    <span style="color:#CCC">
+      <li>dx/dt = -y - z</li>
+      <li>dy/dt = x + ay</li>
+      <li>dz/dt = b + z(x - c)</li>
+      <li>a=0.2, b=0.2, c=5.7</li>
+      <li>Simple spiral with fold-back</li>
+      <li>Purple = slow, Orange = fast</li>
+      <li>Drag to rotate</li>
+      <li>Scroll/pinch to zoom</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/rossler.js"></script>
+</body>
+</html>

package/dist/scene-interactivity-test.html

@@ -0,0 +1,220 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Scene Interactivity Test</title>
+        <link rel="stylesheet" href="demos.css" />
+        <script src="./js/info-toggle.js"></script>
+    </head>
+
+    <body>
+        <div id="info">
+            <strong>Scene Interactivity Test</strong> — Verifies that
+            GameObjects inside Scenes receive input events correctly.<br />
+            <span style="color: #ccc">
+                <li>Click on any colored box to see event fired</li>
+                <li>Hover over boxes to see hover state change</li>
+                <li>Nested scenes work too!</li>
+            </span>
+        </div>
+        <canvas id="game"></canvas>
+
+        <script type="module">
+            import {
+                Game,
+                Scene,
+                GameObject,
+                Rectangle,
+                TextShape,
+                Text,
+                FPSCounter,
+            } from "/gcanvas.es.min.js";
+
+            class ClickableBox extends GameObject {
+                constructor(game, color, label) {
+                    super(game, { width: 150, height: 100 });
+
+                    // Enable interactivity
+                    this.interactive = true;
+
+                    this.color = color;
+                    this.defaultColor = color;
+                    this.clickCount = 0;
+
+                    // Create shapes
+                    this.box = new Rectangle({
+                        width: 150,
+                        height: 100,
+                        color: this.color,
+                        strokeColor: "#fff",
+                        lineWidth: 2,
+                    });
+
+                    this.label = new TextShape(label, {
+                        font: "bold 14px monospace",
+                        color: "#fff",
+                        align: "center",
+                        baseline: "top",
+                    });
+
+                    this.counter = new TextShape("Clicks: 0", {
+                        font: "12px monospace",
+                        color: "#fff",
+                        align: "center",
+                        baseline: "bottom",
+                    });
+
+                    // Setup events
+                    this.on("inputdown", (e) => {
+                        this.clickCount++;
+                        this.counter.text = `Clicks: ${this.clickCount}`;
+                        console.log(
+                            `${label} clicked! Total: ${this.clickCount}`,
+                        );
+
+                        // Flash effect
+                        this.box.color = "#fff";
+                        setTimeout(() => {
+                            this.box.color = this.hovered
+                                ? this.brighten(this.defaultColor)
+                                : this.defaultColor;
+                        }, 100);
+                    });
+
+                    this.on("mouseover", () => {
+                        this.hovered = true;
+                        this.box.color = this.brighten(this.defaultColor);
+                        this.box.lineWidth = 3;
+                    });
+
+                    this.on("mouseout", () => {
+                        this.hovered = false;
+                        this.box.color = this.defaultColor;
+                        this.box.lineWidth = 2;
+                    });
+                }
+
+                brighten(color) {
+                    // Simple color brightening
+                    const hex = color.replace("#", "");
+                    const r = Math.min(
+                        255,
+                        parseInt(hex.substr(0, 2), 16) + 40,
+                    );
+                    const g = Math.min(
+                        255,
+                        parseInt(hex.substr(2, 2), 16) + 40,
+                    );
+                    const b = Math.min(
+                        255,
+                        parseInt(hex.substr(4, 2), 16) + 40,
+                    );
+                    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+                }
+
+                draw() {
+                    super.draw();
+
+                    // Draw box
+                    this.box.x = 0;
+                    this.box.y = 0;
+                    this.box.render();
+
+                    // Draw label
+                    this.label.x = 0;
+                    this.label.y = -30;
+                    this.label.render();
+
+                    // Draw counter
+                    this.counter.x = 0;
+                    this.counter.y = 30;
+                    this.counter.render();
+                }
+            }
+
+            class SceneInteractivityTest extends Game {
+                constructor(canvas) {
+                    super(canvas);
+                    this.backgroundColor = "#000";
+                    this.enableFluidSize();
+                }
+
+                init() {
+                    super.init();
+
+                    // Create main scene
+                    const mainScene = new Scene(this, { name: "MainScene" });
+                    mainScene.x = this.width / 2;
+                    mainScene.y = this.height / 2 - 100;
+
+                    // Add boxes directly to main scene
+                    const box1 = new ClickableBox(this, "#e74c3c", "Box 1");
+                    box1.x = -200;
+                    box1.y = -80;
+                    mainScene.add(box1);
+
+                    const box2 = new ClickableBox(this, "#3498db", "Box 2");
+                    box2.x = 0;
+                    box2.y = -80;
+                    mainScene.add(box2);
+
+                    const box3 = new ClickableBox(this, "#2ecc71", "Box 3");
+                    box3.x = 200;
+                    box3.y = -80;
+                    mainScene.add(box3);
+
+                    // Create nested scene
+                    const nestedScene = new Scene(this, {
+                        name: "NestedScene",
+                    });
+                    nestedScene.y = 120;
+
+                    // Add boxes to nested scene
+                    const nestedBox1 = new ClickableBox(
+                        this,
+                        "#9b59b6",
+                        "Nested 1",
+                    );
+                    nestedBox1.x = -100;
+                    nestedScene.add(nestedBox1);
+
+                    const nestedBox2 = new ClickableBox(
+                        this,
+                        "#f39c12",
+                        "Nested 2",
+                    );
+                    nestedBox2.x = 100;
+                    nestedScene.add(nestedBox2);
+
+                    // Add nested scene to main scene
+                    mainScene.add(nestedScene);
+
+                    // Add main scene to pipeline
+                    this.pipeline.add(mainScene);
+
+                    // Add FPS counter
+                    this.pipeline.add(
+                        new FPSCounter(this, { anchor: "bottom-right" }),
+                    );
+
+                    this.mainScene = mainScene;
+                }
+
+                update(dt) {
+                    super.update(dt);
+
+                    // Keep scene centered
+                    this.mainScene.x = this.width / 2;
+                    this.mainScene.y = this.height / 2 - 50;
+                }
+            }
+
+            window.addEventListener("load", () => {
+                const canvas = document.getElementById("game");
+                const demo = new SceneInteractivityTest(canvas);
+                demo.start();
+            });
+        </script>
+    </body>
+</html>

package/dist/thomas.html

@@ -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>Thomas Attractor 3D</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>Thomas' Cyclically Symmetric Attractor</strong> (1999)<br/>
+    <span style="color:#CCC">
+      <li>dx/dt = sin(y) - bx</li>
+      <li>dy/dt = sin(z) - by</li>
+      <li>dz/dt = sin(x) - bz</li>
+      <li>b = 0.208186</li>
+      <li>Elegant three-fold symmetry</li>
+      <li>Blue = slow, Green = fast</li>
+      <li>Drag to rotate</li>
+      <li>Scroll/pinch to zoom</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/thomas.js"></script>
+</body>
+</html>