@guinetik/gcanvas 1.0.0 → 1.0.2

package/demos/js/fluid.js

@@ -0,0 +1,527 @@
+/**
+ * Fluid & Gas Explorer Demo
+ * 
+ * Advanced fluid simulation demo using FluidSystem with thermal physics.
+ * Demonstrates gas mode with heat zones, thermal convection, and temperature coloring.
+ * 
+ * Features:
+ * - Smooth Particle Hydrodynamics for liquid behavior
+ * - Gas mode with thermal convection (hot rises, cold sinks)
+ * - Temperature-based coloring (blue=cold, red=hot)
+ * - Visual heat zone indicators
+ * - Mouse interaction (hover to stir, click to push)
+ */
+import {
+  Game,
+  FluidSystem,
+  FPSCounter,
+  Painter,
+  Button,
+  ToggleButton,
+  Stepper,
+  Position,
+  Rectangle,
+  ShapeGOFactory,
+  HorizontalLayout,
+} from "../../src/index.js";
+import { zoneTemperature } from "../../src/math/heat.js";
+import { Easing } from "../../src/motion/easing.js";
+
+// Base particle size - all proportional values derive from this
+const PARTICLE_SIZE = Math.PI * 10;
+
+const CONFIG = {
+  particleSize: PARTICLE_SIZE,
+  
+  sim: {
+    maxParticles: Math.floor(PARTICLE_SIZE * 11),
+    gravity: 200,
+    damping: 0.98,
+    bounce: 0.3,
+    maxSpeed: 400,
+  },
+  fluid: {
+    smoothingRadius: PARTICLE_SIZE * 2,
+    restDensity: 3.0,
+    pressureStiffness: 80,
+    nearPressureStiffness: 3,
+    viscosity: 0.005,
+    maxForce: 5000,
+  },
+  gas: {
+    interactionRadius: PARTICLE_SIZE * 4,
+    pressure: 150,
+    diffusion: 0.15,
+    drag: 0.02,
+    turbulence: 50,
+    buoyancy: 300,
+    sinking: 200,
+    repulsion: 300,
+  },
+  heat: {
+    enabled: true,
+    heatZone: 0.88,
+    coolZone: 0.25,
+    rate: 0.03,
+    heatMultiplier: 1.5,
+    coolMultiplier: 2.0,
+    middleMultiplier: 0.005,
+    transitionWidth: 0.08,
+    neutralTemp: 0.5,
+    deadZone: 0.15,
+    buoyancy: 300,
+    sinking: 200,
+  },
+  pointer: {
+    radius: PARTICLE_SIZE * 6,
+    push: 8000,
+    pull: 2000,
+  },
+  visuals: {
+    liquid: {
+      baseHue: 200,
+      hueRange: 40,
+      saturation: 75,
+      minLight: 50,
+      maxLight: 65,
+    },
+    gas: {
+      coldHue: 220,
+      hotHue: 0,
+      saturation: 85,
+      minLight: 45,
+      maxLight: 70,
+    },
+    alpha: 0.9,
+  },
+  ui: {
+    margin: 16,
+    width: 130,
+    height: 32,
+    spacing: 8,
+  },
+  container: {
+    marginX: 80,
+    marginY: 150,
+    strokeColor: "#22c55e",
+    strokeWidth: 2,
+  },
+};
+
+/**
+ * FluidGasGame - SPH-based fluid simulation demo using FluidSystem.
+ */
+class FluidGasGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#0a0e1a";
+    this.enableFluidSize();
+    this.pointer = { x: 0, y: 0, down: false };
+    this.mode = "liquid";
+    this.gravityOn = true;
+  }
+
+  init() {
+    super.init();
+    this.pointer.x = this.width * 0.5;
+    this.pointer.y = this.height * 0.5;
+
+    // Calculate container bounds
+    this._updateContainerBounds();
+
+    // Create container outline
+    const containerShape = new Rectangle({
+      width: this.bounds.w,
+      height: this.bounds.h,
+      stroke: CONFIG.container.strokeColor,
+      lineWidth: CONFIG.container.strokeWidth,
+      color: null,
+    });
+    this.containerRect = ShapeGOFactory.create(this, containerShape, {
+      x: this.bounds.x + this.bounds.w / 2,
+      y: this.bounds.y + this.bounds.h / 2,
+    });
+    this.pipeline.add(this.containerRect);
+
+    // Create FluidSystem - handles all physics internally
+    this.fluid = new FluidSystem(this, {
+      maxParticles: CONFIG.sim.maxParticles,
+      particleSize: CONFIG.particleSize,
+      bounds: this.bounds,
+      physics: "liquid",
+      gravity: CONFIG.sim.gravity,
+      damping: CONFIG.sim.damping,
+      bounce: CONFIG.sim.bounce,
+      maxSpeed: CONFIG.sim.maxSpeed,
+      fluid: CONFIG.fluid,
+      gas: CONFIG.gas,
+      heat: CONFIG.heat,
+      blendMode: "source-over",
+    });
+
+    // Spawn particles
+    this.fluid.spawn(CONFIG.sim.maxParticles);
+    this.pipeline.add(this.fluid);
+
+    // Build UI controls
+    this._buildUI();
+
+    // Input events
+    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));
+    window.addEventListener("keydown", (e) => this._handleKey(e));
+
+    // Handle resize
+    this.onResize = () => this._handleResize();
+  }
+
+  /**
+   * Handle window resize
+   */
+  _handleResize() {
+    this._updateContainerBounds();
+    
+    if (this.containerRect) {
+      this.containerRect.transform
+        .position(this.bounds.x + this.bounds.w / 2, this.bounds.y + this.bounds.h / 2)
+        .size(this.bounds.w, this.bounds.h);
+    }
+    
+    if (this.fluid) {
+      this.fluid.setBounds(this.bounds);
+    }
+    
+    if (this.buttonRow) this.buttonRow.markBoundsDirty();
+    if (this.stepperRow) this.stepperRow.markBoundsDirty();
+  }
+
+  update(dt) {
+    dt = Math.min(dt, 0.033);
+    
+    // Update physics mode on FluidSystem
+    this.fluid.setPhysicsMode(this.mode);
+    this.fluid.gravityEnabled = this.gravityOn;
+
+    // Apply pointer forces
+    this._pointerForces(this.fluid.particles);
+
+    super.update(dt);
+
+    // Apply demo-specific coloring
+    this._applyColors(this.fluid.particles);
+  }
+
+  /**
+   * Render with optional heat zone visualization
+   */
+  render() {
+    super.render();
+    
+    if (this.fluid.modeMix > 0.5 && this.bounds) {
+      this._drawHeatZones();
+    }
+  }
+
+  /**
+   * Draw visual indicators for thermal zones
+   */
+  _drawHeatZones() {
+    const { heatZone, coolZone } = CONFIG.heat;
+    const { x, y, w, h } = this.bounds;
+    const ctx = this.ctx;
+    
+    const coldZoneHeight = coolZone * h;
+    const hotZoneStart = heatZone * h;
+    const hotZoneHeight = h - hotZoneStart;
+    
+    const alpha = Math.min(1, (this.fluid.modeMix - 0.5) * 4) * 0.25;
+    
+    ctx.save();
+    
+    // Cold zone at top
+    const coldGrad = ctx.createLinearGradient(x, y, x, y + coldZoneHeight);
+    coldGrad.addColorStop(0, `rgba(100, 150, 255, ${alpha})`);
+    coldGrad.addColorStop(1, `rgba(100, 150, 255, 0)`);
+    ctx.fillStyle = coldGrad;
+    ctx.fillRect(x, y, w, coldZoneHeight);
+    
+    // Hot zone at bottom
+    const hotGrad = ctx.createLinearGradient(x, y + hotZoneStart, x, y + h);
+    hotGrad.addColorStop(0, `rgba(255, 100, 50, 0)`);
+    hotGrad.addColorStop(1, `rgba(255, 100, 50, ${alpha})`);
+    ctx.fillStyle = hotGrad;
+    ctx.fillRect(x, y + hotZoneStart, w, hotZoneHeight);
+    
+    // Zone boundary lines
+    ctx.strokeStyle = `rgba(100, 150, 255, ${alpha * 0.8})`;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath();
+    ctx.moveTo(x, y + coldZoneHeight);
+    ctx.lineTo(x + w, y + coldZoneHeight);
+    ctx.stroke();
+    
+    ctx.strokeStyle = `rgba(255, 100, 50, ${alpha * 0.8})`;
+    ctx.beginPath();
+    ctx.moveTo(x, y + hotZoneStart);
+    ctx.lineTo(x + w, y + hotZoneStart);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    
+    ctx.restore();
+  }
+
+  _buildUI() {
+    const { margin, width, height, spacing } = CONFIG.ui;
+    const buttonRowWidth = width * 3 + spacing * 2;
+    const buttonRowHeight = height;
+    const stepperWidth = 130;
+    const stepperHeight = 46;
+    const stepperRowWidth = stepperWidth * 4 - (spacing + 32);
+
+    // Button row
+    const buttonRow = new HorizontalLayout(this, {
+      width: buttonRowWidth,
+      height: buttonRowHeight,
+      spacing,
+      padding: 0,
+      anchor: Position.BOTTOM_LEFT,
+      margin: margin,
+    });
+
+    this.btnMode = new ToggleButton(this, {
+      width,
+      height,
+      text: "Mode: Liquid",
+      startToggled: false,
+      onToggle: (on) => {
+        this.mode = on ? "gas" : "liquid";
+        this.btnMode.text = on ? "Mode: Gas" : "Mode: Liquid";
+      },
+    });
+    buttonRow.add(this.btnMode);
+
+    this.btnGravity = new ToggleButton(this, {
+      width,
+      height,
+      text: "Gravity: On",
+      startToggled: true,
+      onToggle: (on) => {
+        this.gravityOn = on;
+        this.btnGravity.text = on ? "Gravity: On" : "Gravity: Off";
+      },
+    });
+    buttonRow.add(this.btnGravity);
+
+    this.btnReset = new Button(this, {
+      width,
+      height,
+      text: "Reset",
+      onClick: () => this.fluid.reset(),
+    });
+    buttonRow.add(this.btnReset);
+
+    // Stepper row
+    const stepperRow = new HorizontalLayout(this, {
+      width: stepperRowWidth,
+      height: stepperHeight,
+      spacing: spacing + 8,
+      padding: 0,
+      anchor: Position.BOTTOM_LEFT,
+      margin: margin,
+      anchorOffsetY: -(buttonRowHeight + spacing),
+    });
+
+    this.gravityStep = new Stepper(this, {
+      value: CONFIG.sim.gravity,
+      min: 0,
+      max: 500,
+      step: 25,
+      label: "Gravity",
+      valueWidth: 48,
+      buttonSize: 26,
+      height: 26,
+      onChange: (val) => {
+        this.fluid.config.gravity = val;
+      },
+    });
+    stepperRow.add(this.gravityStep);
+
+    this.viscosityStep = new Stepper(this, {
+      value: CONFIG.fluid.viscosity * 1000,
+      min: 0,
+      max: 100,
+      step: 5,
+      label: "Viscosity",
+      valueWidth: 48,
+      buttonSize: 26,
+      height: 26,
+      formatValue: (v) => (v / 1000).toFixed(2),
+      onChange: (val) => {
+        this.fluid.config.fluid.viscosity = val / 1000;
+      },
+    });
+    stepperRow.add(this.viscosityStep);
+
+    this.pressureStep = new Stepper(this, {
+      value: CONFIG.fluid.pressureStiffness,
+      min: 10,
+      max: 500,
+      step: 20,
+      label: "Pressure",
+      valueWidth: 48,
+      buttonSize: 26,
+      height: 26,
+      onChange: (val) => {
+        this.fluid.config.fluid.pressureStiffness = val;
+      },
+    });
+    stepperRow.add(this.pressureStep);
+
+    this.bounceStep = new Stepper(this, {
+      value: Math.round(CONFIG.sim.bounce * 100),
+      min: 0,
+      max: 100,
+      step: 5,
+      label: "Bounce",
+      valueWidth: 48,
+      buttonSize: 26,
+      height: 26,
+      formatValue: (v) => `${v}%`,
+      onChange: (val) => {
+        this.fluid.config.bounce = val / 100;
+      },
+    });
+    stepperRow.add(this.bounceStep);
+
+    this.pipeline.add(buttonRow);
+    this.pipeline.add(stepperRow);
+    
+    this.buttonRow = buttonRow;
+    this.stepperRow = stepperRow;
+    
+    this.pipeline.add(new FPSCounter(this, { anchor: "bottom-right" }));
+    
+    buttonRow.markBoundsDirty();
+    stepperRow.markBoundsDirty();
+  }
+
+  /**
+   * Apply visual coloring based on mode and temperature
+   */
+  _applyColors(particles) {
+    const { liquid, gas, alpha } = CONFIG.visuals;
+    const maxSpeed = CONFIG.sim.maxSpeed;
+    const containerTop = this.bounds?.y || 0;
+    const containerHeight = this.bounds?.h || this.height || 1;
+
+    for (let i = 0; i < particles.length; i++) {
+      const p = particles[i];
+      const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+      const speedNorm = Math.min(1, speed / maxSpeed);
+      
+      let hue, saturation, light;
+      
+      if (this.fluid.modeMix < 0.5) {
+        // LIQUID MODE: Blue water
+        hue = liquid.baseHue - speedNorm * liquid.hueRange;
+        saturation = liquid.saturation;
+        light = Easing.lerp(liquid.minLight, liquid.maxLight, 0.3 + speedNorm * 0.5);
+      } else {
+        // GAS MODE: Temperature-based coloring
+        const temp = p.custom.temperature ?? CONFIG.heat.neutralTemp;
+        
+        // Blue -> Purple -> Magenta -> Red
+        if (temp < 0.33) {
+          hue = gas.coldHue + (280 - gas.coldHue) * (temp / 0.33);
+        } else if (temp < 0.66) {
+          hue = 280 + 40 * ((temp - 0.33) / 0.33);
+        } else {
+          hue = 320 + 40 * ((temp - 0.66) / 0.34);
+          if (hue >= 360) hue -= 360;
+        }
+        saturation = gas.saturation;
+        light = Easing.lerp(gas.minLight, gas.maxLight, 0.4 + temp * 0.4);
+      }
+
+      const [r, g, b] = Painter.colors.hslToRgb(hue, saturation, light);
+      p.color.r = r;
+      p.color.g = g;
+      p.color.b = b;
+      p.color.a = alpha;
+    }
+  }
+
+  /**
+   * Apply pointer interaction forces
+   */
+  _pointerForces(particles) {
+    const { radius, push, pull } = CONFIG.pointer;
+    const r2 = radius * radius;
+    const mx = this.pointer.x;
+    const my = this.pointer.y;
+
+    for (let i = 0; i < particles.length; i++) {
+      const p = particles[i];
+      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;
+      
+      // Apply directly to velocity (simpler than accumulating forces)
+      const dt = 0.016; // Approximate frame time
+      p.vx += (dx / dist) * strength * dt;
+      p.vy += (dy / dist) * strength * dt;
+    }
+  }
+
+  _updateContainerBounds() {
+    const { marginX, marginY } = CONFIG.container;
+    this.bounds = {
+      x: marginX,
+      y: marginY,
+      w: this.width - marginX * 2,
+      h: this.height - marginY * 2,
+    };
+  }
+
+  _handleKey(e) {
+    if (e.key === "1") {
+      this.mode = "liquid";
+      this.btnMode.toggle(false);
+      this.btnMode.text = "Mode: Liquid";
+    } else if (e.key === "2") {
+      this.mode = "gas";
+      this.btnMode.toggle(true);
+      this.btnMode.text = "Mode: Gas";
+    } else if (e.key === " ") {
+      e.preventDefault();
+      const newMode = this.mode === "liquid" ? "gas" : "liquid";
+      this.mode = newMode;
+      this.btnMode.toggle(newMode === "gas");
+      this.btnMode.text = newMode === "gas" ? "Mode: Gas" : "Mode: Liquid";
+    } else if (e.key === "r" || e.key === "R") {
+      this.fluid.reset();
+    } else if (e.key === "g" || e.key === "G") {
+      this.gravityOn = !this.gravityOn;
+      this.btnGravity.toggle(this.gravityOn);
+      this.btnGravity.text = this.gravityOn ? "Gravity: On" : "Gravity: Off";
+    }
+  }
+}
+
+export { FluidGasGame };
+
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const game = new FluidGasGame(canvas);
+  game.start();
+});

package/demos/js/gameobjects.js

@@ -0,0 +1,176 @@
+/**
+ * Gameobjects.html - Live demos for Shapes vs GameObjects documentation
+ */
+import {
+  Circle,
+  Game,
+  Group,
+  Painter,
+  Rectangle,
+  Scene,
+  ShapeGOFactory,
+  Sprite,
+} from "../../src/index.js";
+
+// ==================== Demo 1: Shapes Only ====================
+// Even "shapes only" needs Painter initialized, so we use a minimal Game
+class ShapesDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+    // Shapes are created and rendered in render() below
+  }
+
+  render() {
+    super.render(); // Clears canvas
+
+    const centerY = this.canvas.height / 2;
+
+    // Create shapes - spread across canvas
+    const circle = new Circle(35, { x: this.canvas.width * 0.2, y: centerY, color: "#0f0" });
+    const rect = new Rectangle({ x: this.canvas.width * 0.5, y: centerY, width: 80, height: 50, color: "#0ff" });
+
+    // Group with rotation
+    const group = new Group({ x: this.canvas.width * 0.8, y: centerY, rotation: Math.PI / 4 });
+    group.add(new Circle(20, { color: "#f0f" }));
+    group.add(new Rectangle({ y: 30, width: 40, height: 20, color: "#ff0" }));
+
+    // Render directly - calling render() on shapes, not using pipeline
+    circle.render();
+    rect.render();
+    group.render();
+  }
+}
+
+function initShapesDemo() {
+  const canvas = document.getElementById("shapes-canvas");
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new ShapesDemo(canvas);
+  demo.start();
+}
+
+// ==================== Demo 2: GameObjects with Pipeline ====================
+class GameObjectsDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+
+    const centerX = this.canvas.width / 2;
+    const centerY = this.canvas.height / 2;
+
+    // Create a scene (GameObject container)
+    this.scene = new Scene(this, { x: centerX, y: centerY });
+
+    // Create a sprite with animation (GameObject)
+    this.player = new Sprite(this, { frameRate: 8, loop: true, autoPlay: true });
+
+    // Add frames - pulsing circle animation
+    const colors = ["#0f0", "#0ff", "#0f0", "#ff0", "#0f0"];
+    const sizes = [20, 25, 30, 25, 20];
+    colors.forEach((color, i) => {
+      this.player.addFrame(new Circle(sizes[i], { color, stroke: "#fff", lineWidth: 2 }));
+    });
+
+    // Add to scene
+    this.scene.add(this.player);
+
+    // Add scene to pipeline - now it's managed
+    this.pipeline.add(this.scene);
+  }
+}
+
+function initGameObjectsDemo() {
+  const canvas = document.getElementById("gameobjects-canvas");
+  if (!canvas) return;
+
+  // Set actual canvas size
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new GameObjectsDemo(canvas);
+  demo.start();
+}
+
+// ==================== Demo 3: Bridging Shape to GameObject ====================
+class BridgingDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+
+    const centerX = this.canvas.width / 2;
+    const centerY = this.canvas.height / 2;
+
+    // Create a Group of shapes (like a simple avatar)
+    const avatar = new Group();
+    avatar.add(new Circle(25, { y: -30, color: "#0f0", stroke: "#0a0", lineWidth: 2 })); // head
+    avatar.add(new Rectangle({ y: 20, width: 40, height: 50, color: "#0f0", stroke: "#0a0", lineWidth: 2 })); // body
+
+    // Wrap it as a GameObject so it can join the pipeline
+    const avatarGO = ShapeGOFactory.create(this, avatar, {
+      x: centerX,
+      y: centerY,
+    });
+
+    // Now it's a proper GameObject - add to pipeline
+    this.pipeline.add(avatarGO);
+
+    // Add a second avatar to show multiple instances
+    const avatar2 = new Group();
+    avatar2.add(new Circle(20, { y: -25, color: "#0ff", stroke: "#0aa", lineWidth: 2 }));
+    avatar2.add(new Rectangle({ y: 15, width: 30, height: 40, color: "#0ff", stroke: "#0aa", lineWidth: 2 }));
+
+    const avatar2GO = ShapeGOFactory.create(this, avatar2, {
+      x: centerX + 100,
+      y: centerY,
+    });
+    this.pipeline.add(avatar2GO);
+
+    // Third one with rotation
+    const avatar3 = new Group({ rotation: 0.2 });
+    avatar3.add(new Circle(18, { y: -22, color: "#f0f", stroke: "#a0a", lineWidth: 2 }));
+    avatar3.add(new Rectangle({ y: 12, width: 25, height: 35, color: "#f0f", stroke: "#a0a", lineWidth: 2 }));
+
+    const avatar3GO = ShapeGOFactory.create(this, avatar3, {
+      x: centerX - 100,
+      y: centerY,
+    });
+    this.pipeline.add(avatar3GO);
+  }
+}
+
+function initBridgingDemo() {
+  const canvas = document.getElementById("bridging-canvas");
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new BridgingDemo(canvas);
+  demo.start();
+}
+
+// ==================== Initialize ====================
+window.addEventListener("load", () => {
+  initShapesDemo();
+  initGameObjectsDemo();
+  initBridgingDemo();
+});