npm - @guinetik/gcanvas - Versions diffs - 1.0.0 → 1.0.1 - Mend

@guinetik/gcanvas 1.0.0 → 1.0.1

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 (68) hide show

package/demos/fluid-simple.html +22 -0
package/demos/fluid.html +37 -0
package/demos/index.html +2 -0
package/demos/js/blob.js +18 -5
package/demos/js/fluid-simple.js +253 -0
package/demos/js/fluid.js +527 -0
package/demos/js/tde/accretiondisk.js +64 -11
package/demos/js/tde/blackholescene.js +2 -2
package/demos/js/tde/config.js +2 -2
package/demos/js/tde/index.js +152 -27
package/demos/js/tde/lensedstarfield.js +32 -25
package/demos/js/tde/tdestar.js +78 -98
package/demos/js/tde/tidalstream.js +23 -7
package/docs/README.md +230 -222
package/docs/api/FluidSystem.md +173 -0
package/docs/concepts/architecture-overview.md +204 -204
package/docs/concepts/rendering-pipeline.md +279 -279
package/docs/concepts/two-layer-architecture.md +229 -229
package/docs/fluid-dynamics.md +97 -0
package/docs/getting-started/first-game.md +354 -354
package/docs/getting-started/installation.md +175 -157
package/docs/modules/collision/README.md +2 -2
package/docs/modules/fluent/README.md +6 -6
package/docs/modules/game/README.md +303 -303
package/docs/modules/isometric-camera.md +2 -2
package/docs/modules/isometric.md +1 -1
package/docs/modules/painter/README.md +328 -328
package/docs/modules/particle/README.md +3 -3
package/docs/modules/shapes/README.md +221 -221
package/docs/modules/shapes/base/euclidian.md +123 -123
package/docs/modules/shapes/base/shape.md +262 -262
package/docs/modules/shapes/base/transformable.md +243 -243
package/docs/modules/state/README.md +2 -2
package/docs/modules/util/README.md +1 -1
package/docs/modules/util/camera3d.md +3 -3
package/docs/modules/util/scene3d.md +1 -1
package/package.json +3 -1
package/readme.md +19 -5
package/src/collision/collision.js +75 -0
package/src/game/index.js +2 -1
package/src/game/pipeline.js +3 -3
package/src/game/systems/FluidSystem.js +835 -0
package/src/game/systems/index.js +11 -0
package/src/game/ui/button.js +39 -18
package/src/game/ui/cursor.js +14 -0
package/src/game/ui/fps.js +12 -4
package/src/game/ui/index.js +2 -0
package/src/game/ui/stepper.js +549 -0
package/src/game/ui/theme.js +121 -0
package/src/game/ui/togglebutton.js +9 -3
package/src/game/ui/tooltip.js +11 -4
package/src/math/fluid.js +507 -0
package/src/math/index.js +2 -0
package/src/mixins/anchor.js +17 -7
package/src/motion/tweenetik.js +16 -0
package/src/shapes/index.js +1 -0
package/src/util/camera3d.js +218 -12
package/types/fluent.d.ts +361 -0
package/types/game.d.ts +303 -0
package/types/index.d.ts +144 -5
package/types/math.d.ts +361 -0
package/types/motion.d.ts +271 -0
package/types/particle.d.ts +373 -0
package/types/shapes.d.ts +107 -9
package/types/util.d.ts +353 -0
package/types/webgl.d.ts +109 -0
package/disk_example.png +0 -0
package/tde.png +0 -0

package/demos/fluid-simple.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fluid System Demo (Simplified)</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>FluidSystem Demo</strong> — Simplified fluid simulation.<br/>
+    <span style="color:#CCC">
+      <li>Click to push particles, hover to attract</li>
+      <li>Switch between Liquid and Gas physics</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/fluid-simple.js"></script>
+</body>
+</html>

package/demos/fluid.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fluid & Gas Playground</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+<body>
+  <div id="info">
+    <strong>Fluid & Gas Playground</strong> — SPH-like liquid + lightweight gas using math-only helpers.<br />
+    <span style="color:#9ef">
+      <li>Move mouse to stir, hold click to push.</li>
+      <li>Press 1 for Liquid, 2 for Gas, Space toggles.</li>
+      <li>Gas mode: blue=cold (top), red=hot (bottom).</li>
+      <li>Drag the browser window to shake the bottle!</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module">
+    import { FluidGasGame } from "./js/fluid.js";
+    window.addEventListener("load", () => {
+      const canvas = document.getElementById("game");
+      const game = new FluidGasGame(canvas);
+      game.setFPS(60);
+      game.start();
+    });
+  </script>
+</body>
+</html>

package/demos/index.html CHANGED Viewed

@@ -219,6 +219,8 @@
             <a href="baskara.html" target="demo-frame">Root Dance</a>
             <hr />
             <h2 style="margin-bottom: 0.3em">Math & Physics</h2>
+            <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>
             <a href="spacetime.html" target="demo-frame">Spacetime Curvature</a>
             <a href="schwarzschild.html" target="demo-frame"

package/demos/js/blob.js CHANGED Viewed

@@ -243,6 +243,7 @@ class BlobScene extends Scene {
     // Set initial blob size (smaller)
     this.blobPhysics.baseRadius = CONFIG.startRadius;
     this.blobPhysics.currentRadius = CONFIG.startRadius;
+    this.blobPhysics.healthyRadius = CONFIG.startRadius; // Track healthy size before hunger effects
     // Control points around the blob (in polar coordinates for easy animation)
     this.blobPoints = [];
@@ -1095,11 +1096,16 @@ class BlobScene extends Scene {
     this.gameState.lastEatTime = 0;
     this.gameState.isHungry = false;
-    // Grow the blob
+    // Grow the blob - restore to healthy radius plus growth
     const physics = this.blobPhysics;
-    const newRadius = Math.min(CONFIG.maxRadius, physics.baseRadius + CONFIG.growthPerCollect);
+    // Ensure healthyRadius is initialized
+    if (physics.healthyRadius === undefined) {
+      physics.healthyRadius = physics.baseRadius;
+    }
+    const newRadius = Math.min(CONFIG.maxRadius, physics.healthyRadius + CONFIG.growthPerCollect);
     physics.baseRadius = newRadius;
     physics.currentRadius = newRadius;
+    physics.healthyRadius = newRadius; // Update healthy radius to new size
     // Also give energy boost
     physics.energy = Math.min(1, physics.energy + 0.15);
@@ -1150,10 +1156,14 @@ class BlobScene extends Scene {
     const wasHungry = this.gameState.isHungry;
     this.gameState.isHungry = this.gameState.lastEatTime > hungerThreshold;
-    // If just became hungry, show warning
+    // If just became hungry, show warning and capture healthy radius
     if (this.gameState.isHungry && !wasHungry) {
       this.showFloatingText("HUNGRY!", this.game.width / 2, this.game.height / 2);
       this.playHungryWarning();
+      // Capture the current radius as the healthy radius when hunger starts
+      if (physics.healthyRadius === undefined || physics.healthyRadius < physics.baseRadius) {
+        physics.healthyRadius = physics.baseRadius;
+      }
     }
     // If hungry, shrink and lose points
@@ -1169,7 +1179,7 @@ class BlobScene extends Scene {
       const hungerMultiplier = 1 + Math.min(hungerDuration / 2, 1);
       const shrinkAmount = shrinkRate * hungerMultiplier * dt;
-      // Apply shrinking
+      // Apply shrinking from healthy radius (but don't modify healthyRadius)
       const newRadius = Math.max(CONFIG.minRadius, physics.baseRadius - shrinkAmount);
       if (newRadius < physics.baseRadius) {
         // Calculate score penalty
@@ -1177,7 +1187,7 @@ class BlobScene extends Scene {
         const scorePenalty = Math.ceil(radiusLost * CONFIG.shrinkScorePenalty);
         this.gameState.score = Math.max(0, this.gameState.score - scorePenalty);
-        // Apply size reduction
+        // Apply size reduction (healthyRadius stays unchanged)
         physics.baseRadius = newRadius;
         physics.currentRadius = newRadius;
       }
@@ -1288,6 +1298,7 @@ class BlobScene extends Scene {
     this.collectionParticles = [];
     this.blobPhysics.baseRadius = CONFIG.startRadius;
     this.blobPhysics.currentRadius = CONFIG.startRadius;
+    this.blobPhysics.healthyRadius = CONFIG.startRadius;
     // Reset color to normal
     this.blobPhysics.currentColor = [...this.blobPhysics.baseColor];
     // Reset pop sound scale
@@ -1357,6 +1368,7 @@ class BlobScene extends Scene {
     // Reset physics
     physics.baseRadius = CONFIG.startRadius;
     physics.currentRadius = CONFIG.startRadius;
+    physics.healthyRadius = CONFIG.startRadius;
     physics.currentX = this.game.width / 2;
     physics.currentY = this.game.height / 2;
     physics.vx = 0;
@@ -2190,6 +2202,7 @@ class BlobUIScene extends Scene {
     // Reset physics - use CONFIG for starting size
     physics.baseRadius = CONFIG.startRadius;
     physics.currentRadius = CONFIG.startRadius;
+    physics.healthyRadius = CONFIG.startRadius;
     physics.energy = 1.0;
     physics.baseColor = [64, 180, 255];
     physics.vx = 0;

package/demos/js/fluid-simple.js ADDED Viewed

@@ -0,0 +1,253 @@
+/**
+ * Simplified Fluid Demo using FluidSystem
+ *
+ * Demonstrates how the FluidSystem class dramatically reduces
+ * the boilerplate needed for fluid simulations.
+ */
+import {
+  Game,
+  FPSCounter,
+  FluidSystem,
+  applyAnchor,
+  Position,
+  Button,
+  ToggleButton,
+  HorizontalLayout,
+} from "../../src/index.js";
+const PARTICLE_SIZE = 32;
+const CONFIG = {
+  particleSize: PARTICLE_SIZE,
+  maxParticles: 500,
+  gravity: 200,
+  container: {
+    marginX: 80,
+    marginY: 200,
+    strokeColor: "#22c55e",
+    strokeWidth: 2,
+  },
+  pointer: {
+    radius: PARTICLE_SIZE * 4,
+    push: 3000,
+    pull: 600,
+  },
+  ui: {
+    margin: 12,
+    width: 130,
+    height: 32,
+    spacing: 6,
+  },
+};
+/**
+ * Simplified fluid demo using FluidSystem.
+ */
+class FluidSimpleDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#0f172a";
+    this.enableFluidSize();
+    this.pointer = { x: 0, y: 0, down: false };
+  }
+  init() {
+    super.init();
+    // Create container bounds
+    this._updateBounds();
+    // Create FluidSystem - ALL the physics is handled internally!
+    this.fluid = new FluidSystem(this, {
+      maxParticles: CONFIG.maxParticles,
+      particleSize: CONFIG.particleSize,
+      width: this.bounds.w,
+      height: this.bounds.h,
+      bounds: this.bounds,
+      physics: "liquid",
+      debug: true,
+      debugColor: CONFIG.container.strokeColor,
+      gravity: CONFIG.gravity,
+      particleColor: { r: 80, g: 180, b: 255, a: 0.9 },
+    });
+    // Spawn particles
+    this.fluid.spawn(CONFIG.maxParticles);
+    this.pipeline.add(this.fluid);
+    // Build UI controls
+    this._buildUI();
+    // FPS counter
+    this.pipeline.add(
+      new FPSCounter(this, { color: "#6af", anchor: "top-right" })
+    );
+    // Mouse interaction
+    this._setupInteraction();
+  }
+  /**
+   * Build the UI control bar.
+   */
+  _buildUI() {
+    const { margin, width, height, spacing } = CONFIG.ui;
+    // Create horizontal layout for buttons, anchored to bottom left
+    const uiPanel = new HorizontalLayout(this, {
+      width: width * 3 + spacing * 2,
+      height: height,
+      spacing,
+      padding: 0,
+      align: "center",
+    });
+    applyAnchor(uiPanel, {
+      anchor: Position.BOTTOM_LEFT,
+      anchorMargin: margin,
+    });
+    this.btnMode = new ToggleButton(this, {
+      width,
+      height,
+      text: "Mode: Liquid",
+      startToggled: false,
+      onToggle: (on) => {
+        this.fluid.setPhysicsMode(on ? "gas" : "liquid");
+        this.btnMode.text = on ? "Mode: Gas" : "Mode: Liquid";
+      },
+    });
+    uiPanel.add(this.btnMode);
+    this.btnGravity = new ToggleButton(this, {
+      width,
+      height,
+      text: "Gravity: On",
+      startToggled: true,
+      onToggle: (on) => {
+        this.fluid.gravityEnabled = on;
+        this.btnGravity.text = on ? "Gravity: On" : "Gravity: Off";
+      },
+    });
+    uiPanel.add(this.btnGravity);
+    this.btnReset = new Button(this, {
+      width,
+      height,
+      text: "Reset",
+      onClick: () => this.fluid.reset(),
+    });
+    uiPanel.add(this.btnReset);
+    this.pipeline.add(uiPanel);
+  }
+  _updateBounds() {
+    const { marginX, marginY } = CONFIG.container;
+    this.bounds = {
+      x: marginX,
+      y: marginY,
+      w: this.width - marginX * 2,
+      h: this.height - marginY * 2,
+    };
+  }
+  onResize() {
+    this._updateBounds();
+    if (this.fluid) {
+      this.fluid.setBounds(this.bounds);
+    }
+  }
+  _setupInteraction() {
+    // Track pointer position and state
+    this.events.on("inputmove", (e) => {
+      this.pointer.x = e.x;
+      this.pointer.y = e.y;
+    });
+    this.events.on("inputdown", () => (this.pointer.down = true));
+    this.events.on("inputup", () => (this.pointer.down = false));
+  }
+  /**
+   * Apply continuous pointer forces to particles.
+   * Push when clicking, gentle pull when hovering.
+   * @param {number} dt - Delta time
+   */
+  _applyPointerForces(dt) {
+    const { radius, push, pull } = CONFIG.pointer;
+    const r2 = radius * radius;
+    const mx = this.pointer.x;
+    const my = this.pointer.y;
+    for (const p of this.fluid.particles) {
+      const dx = mx - p.x;
+      const dy = my - p.y;
+      const dist2 = dx * dx + dy * dy;
+      if (dist2 >= r2 || dist2 < 1) continue;
+      const dist = Math.sqrt(dist2);
+      const t = 1 - dist / radius;
+      const strength = (this.pointer.down ? push : -pull) * t * t;
+      p.vx += (dx / dist) * strength * dt;
+      p.vy += (dy / dist) * strength * dt;
+    }
+  }
+  update(dt) {
+    // Apply pointer forces continuously
+    this._applyPointerForces(dt);
+    super.update(dt);
+    this._colorByVelocity();
+  }
+  /**
+   * Color particles by velocity (Sebastian Lague style).
+   */
+  _colorByVelocity() {
+    const maxSpeed = 300;
+    for (const p of this.fluid.particles) {
+      const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+      const t = Math.min(1, speed / maxSpeed);
+      // Blue (slow) -> Cyan -> Green -> Yellow -> Orange (fast)
+      const hue = 210 - t * 180;
+      const sat = 80;
+      const light = 50 + t * 15;
+      // Simple HSL to RGB approximation
+      const c = ((1 - Math.abs((2 * light) / 100 - 1)) * sat) / 100;
+      const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+      const m = light / 100 - c / 2;
+      let r, g, b;
+      if (hue < 60) {
+        r = c; g = x; b = 0;
+      } else if (hue < 120) {
+        r = x; g = c; b = 0;
+      } else if (hue < 180) {
+        r = 0; g = c; b = x;
+      } else if (hue < 240) {
+        r = 0; g = x; b = c;
+      } else if (hue < 300) {
+        r = x; g = 0; b = c;
+      } else {
+        r = c; g = 0; b = x;
+      }
+      p.color.r = Math.round((r + m) * 255);
+      p.color.g = Math.round((g + m) * 255);
+      p.color.b = Math.round((b + m) * 255);
+    }
+  }
+}
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const demo = new FluidSimpleDemo(canvas);
+  demo.start();
+});