@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/particles-showcase.js

@@ -1,514 +0,0 @@
-/**
- * Particle System Showcase
- *
- * Organized display of particle effects in labeled stations:
- * - Fountain (water spray with gravity)
- * - Fire (rising flames with color gradient)
- * - Snow (gentle falling flakes)
- * - Confetti (burst on click)
- */
-
-import {
-  Game,
-  GameObject,
-  Scene3D,
-  Rectangle,
-  TextShape,
-  Painter,
-  Camera3D,
-  ParticleSystem,
-  ParticleEmitter,
-  Updaters,
-  FPSCounter,
-  Position,
-} from "../../src/index.js";
-
-const CONFIG = {
-  backgroundColor: "#0a0a12",
-  maxParticles: 20000, // Stress test: 20k particles
-
-  // Station layout (as ratios of screen size)
-  stationWidthRatio: 0.18, // 18% of screen width per station
-  stationHeightRatio: 0.45, // 45% of screen height
-  stationSpacingRatio: 0.03, // 3% of screen width between stations
-  minStationWidth: 120,
-  maxStationWidth: 220,
-  minStationHeight: 150,
-  maxStationHeight: 280,
-
-  // Fountain settings
-  fountain: {
-    rate: 150, // 4x more
-    velocity: { x: 0, y: -350, z: 0 },
-    velocitySpread: { x: 40, y: 20, z: 40 },
-    lifetime: { min: 2, max: 4 }, // Longer life
-    size: { min: 3, max: 6 },
-    color: { r: 100, g: 180, b: 255, a: 1 },
-  },
-
-  // Fire settings
-  fire: {
-    rate: 250, // Dense flames
-    velocity: { x: 0, y: -60, z: 0 },
-    velocitySpread: { x: 15, y: 10, z: 15 },
-    lifetime: { min: 1, max: 2 }, // Longer life
-    size: { min: 6, max: 12 },
-  },
-
-  // Snow settings
-  snow: {
-    rate: 80, // 5x more
-    velocity: { x: 0, y: 40, z: 0 },
-    velocitySpread: { x: 10, y: 5, z: 10 },
-    lifetime: { min: 4, max: 7 }, // Longer life
-    size: { min: 2, max: 4 },
-    color: { r: 255, g: 255, b: 255, a: 0.9 },
-  },
-
-  // Confetti burst settings
-  confetti: {
-    velocity: { x: 0, y: -150, z: 0 },
-    velocitySpread: { x: 100, y: 60, z: 100 },
-    lifetime: { min: 2, max: 4 }, // Longer life
-    size: { min: 5, max: 10 },
-  },
-};
-
-/**
- * Station box GameObject for displaying a particle effect
- */
-class ParticleStation extends GameObject {
-  constructor(game, x, y, width, height, label) {
-    super(game, { x, y, width, height });
-    this.z = 0; // For Scene3D projection
-    this.label = label;
-
-    // Background box using Rectangle shape
-    this.bg = new Rectangle({
-      width,
-      height,
-      color: "rgba(255, 255, 255, 0.03)",
-      stroke: "rgba(255, 255, 255, 0.15)",
-      lineWidth: 1,
-    });
-
-    // Label using TextShape
-    this.labelText = new TextShape(label, {
-      y: height / 2 - 15,
-      font: "12px monospace",
-      color: "#00FF00",
-      align: "center",
-      baseline: "middle",
-    });
-    this.labelText.x = x;
-    this.bg.x = x;
-    this.bg.y = y;
-  }
-
-  /**
-   * Update station size and position
-   */
-  updateLayout(x, width, height) {
-    this.x = x;
-    this.width = width;
-    this.height = height;
-
-    // Update background rectangle
-    this.bg.width = width;
-    this.bg.height = height;
-    this.bg.x = x;
-    this.bg.y = this.y;
-
-    // Update label position
-    this.labelText.y = height / 2 - 15;
-    this.labelText.x = x;
-  }
-
-  // Get emitter spawn position (center-bottom of station)
-  getEmitterPosition() {
-    return {
-      x: this.x,
-      y: this.y + this.height / 2 - 40,
-      z: 0,
-    };
-  }
-
-  // Get top position for snow
-  getTopPosition() {
-    return {
-      x: this.x,
-      y: -this.height / 2 + 10,
-      z: 0,
-    };
-  }
-
-  // Get bottom position for fountain/fire
-  getBottomPosition() {
-    return {
-      x: this.x,
-      y: this.height / 2 - 10,
-      z: 0,
-    };
-  }
-
-  // Get center position for confetti
-  getCenterPosition() {
-    return { x: this.x, y: this.y, z: 0 };
-  }
-
-  render() {
-    super.render();
-    this.bg.render();
-    this.labelText.render();
-  }
-}
-
-class ParticlesShowcase extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = CONFIG.backgroundColor;
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-
-    // Calculate initial sizes
-    this.updateScaledSizes();
-
-    // Setup Camera3D (subtle rotation for depth)
-    this.camera = new Camera3D({
-      rotationX: 0.2,
-      rotationY: 0,
-      perspective: 800,
-      autoRotate: false,
-    });
-    this.camera.enableMouseControl(this.canvas);
-
-    // Create stations layout
-    this.createStations();
-
-    // Create particle system with Camera3D
-    this.particles = new ParticleSystem(this, {
-      camera: this.camera,
-      depthSort: true,
-      maxParticles: CONFIG.maxParticles,
-      blendMode: "screen",
-      updaters: [
-        Updaters.velocity,
-        Updaters.lifetime,
-        Updaters.gravity(120),
-        Updaters.fadeOut,
-        this.fireColorUpdater.bind(this),
-        Updaters.shrink(0.2),
-      ],
-    });
-
-    // Create emitters for each station
-    this.createEmitters();
-
-    this.pipeline.add(this.particles);
-
-    // Confetti emitter (for bursts, not continuous)
-    this.confettiEmitter = new ParticleEmitter({
-      position: { x: 0, y: 0, z: 0 },
-      velocity: CONFIG.confetti.velocity,
-      velocitySpread: CONFIG.confetti.velocitySpread,
-      lifetime: CONFIG.confetti.lifetime,
-      size: CONFIG.confetti.size,
-      color: { r: 255, g: 255, b: 0, a: 1 },
-      rate: 0,
-      shape: "triangle",
-    });
-
-    // Track emitter state
-    this.emittersActive = true;
-
-    // Click to burst confetti
-    this.canvas.addEventListener("click", (e) => this.handleClick(e));
-
-    // Space to toggle emitters
-    window.addEventListener("keydown", (e) => {
-      if (e.code === "Space") {
-        this.toggleEmitters();
-      }
-    });
-
-    // FPS counter anchored to bottom right
-    this.fpsCounter = new FPSCounter(this, {
-      anchor: Position.BOTTOM_RIGHT,
-      anchorOffsetX: 0,
-      anchorOffsetY: 0,
-      color: "#0f0",
-    });
-    this.pipeline.add(this.fpsCounter);
-  }
-
-  createStations() {
-    const labels = ["Fountain", "Fire", "Snow", "Confetti"];
-    const totalWidth =
-      labels.length * this.stationWidth +
-      (labels.length - 1) * this.stationSpacing;
-    const startX = -totalWidth / 2 + this.stationWidth / 2;
-
-    // Create Scene3D to hold stations with camera projection
-    this.stationScene = new Scene3D(this, {
-      x: this.width / 2,
-      y: this.height / 2,
-      camera: this.camera,
-      depthSort: false, // Stations are all at z=0
-      scaleByDepth: true,
-    });
-
-    this.stations = labels.map((label, i) => {
-      const x = startX + i * (this.stationWidth + this.stationSpacing);
-      const station = new ParticleStation(
-        this,
-        x,
-        0,
-        this.stationWidth,
-        this.stationHeight,
-        label,
-      );
-      this.stationScene.add(station);
-      return station;
-    });
-
-    // Add to pipeline (will render before particles)
-    this.pipeline.add(this.stationScene);
-  }
-
-  createEmitters() {
-    // Fountain (station 0) - bottom of station, shoots up
-    const fountainStation = this.stations[0];
-    const fountainPos = fountainStation.getBottomPosition();
-    this.particles.addEmitter(
-      "fountain",
-      new ParticleEmitter({
-        position: { x: fountainPos.x, y: fountainPos.y + 20, z: 0 },
-        spread: { x: 5, y: 0, z: 5 },
-        velocity: CONFIG.fountain.velocity,
-        velocitySpread: CONFIG.fountain.velocitySpread,
-        lifetime: CONFIG.fountain.lifetime,
-        size: CONFIG.fountain.size,
-        color: CONFIG.fountain.color,
-        rate: CONFIG.fountain.rate,
-        shape: "circle",
-      }),
-    );
-
-    // Fire (station 1) - bottom of station, flames rise up
-    const fireStation = this.stations[1];
-    const firePos = fireStation.getBottomPosition();
-    this.particles.addEmitter(
-      "fire",
-      new ParticleEmitter({
-        position: { x: firePos.x, y: firePos.y, z: 0 },
-        spread: { x: 60, y: 0, z: 30 },
-        velocity: CONFIG.fire.velocity,
-        velocitySpread: { x: 40, y: 15, z: 40 },
-        lifetime: CONFIG.fire.lifetime,
-        size: CONFIG.fire.size,
-        color: { r: 255, g: 120, b: 40, a: 1 },
-        rate: CONFIG.fire.rate,
-        shape: "square",
-      }),
-    );
-
-    // Snow (station 2) - top of station, falls down
-    const snowStation = this.stations[2];
-    const snowPos = snowStation.getTopPosition();
-    this.particles.addEmitter(
-      "snow",
-      new ParticleEmitter({
-        position: { x: snowPos.x, y: snowPos.y - 10, z: 0 },
-        spread: { x: this.stationWidth * 0.4, y: 0, z: 30 },
-        velocity: CONFIG.snow.velocity,
-        velocitySpread: CONFIG.snow.velocitySpread,
-        lifetime: CONFIG.snow.lifetime,
-        size: CONFIG.snow.size,
-        color: CONFIG.snow.color,
-        rate: CONFIG.snow.rate,
-        shape: "circle",
-      }),
-    );
-  }
-
-  fireColorUpdater(p, dt) {
-    // Only apply to fire particles (squares)
-    if (p.shape !== "square") return;
-
-    const t = p.progress;
-    // Orange -> Red -> Dark
-    p.color.r = Math.floor(255 * (1 - t * 0.2));
-    p.color.g = Math.floor(120 * (1 - t * 0.9));
-    p.color.b = Math.floor(40 * (1 - t));
-  }
-
-  handleClick(e) {
-    // Confetti always spawns at its station center
-    const confettiStation = this.stations[3];
-    const pos = confettiStation.getCenterPosition();
-
-    this.confettiEmitter.position.x = pos.x;
-    this.confettiEmitter.position.y = pos.y;
-    this.confettiEmitter.position.z = pos.z;
-
-    // Randomize confetti colors
-    const colors = [
-      { r: 255, g: 80, b: 80 },
-      { r: 80, g: 255, b: 80 },
-      { r: 80, g: 80, b: 255 },
-      { r: 255, g: 255, b: 80 },
-      { r: 255, g: 80, b: 255 },
-      { r: 80, g: 255, b: 255 },
-    ];
-
-    // Burst with random colors
-    for (let i = 0; i < 40; i++) {
-      const color = colors[Math.floor(Math.random() * colors.length)];
-      this.confettiEmitter.color = { ...color, a: 1 };
-      this.particles.burst(1, this.confettiEmitter);
-    }
-  }
-
-  toggleEmitters() {
-    this.emittersActive = !this.emittersActive;
-
-    for (const emitter of this.particles.emitters.values()) {
-      emitter.active = this.emittersActive;
-    }
-  }
-
-  /**
-   * Calculate responsive station sizes based on screen dimensions
-   */
-  updateScaledSizes() {
-    // Calculate station dimensions from ratios with min/max bounds
-    this.stationWidth = Math.max(
-      CONFIG.minStationWidth,
-      Math.min(CONFIG.maxStationWidth, this.width * CONFIG.stationWidthRatio),
-    );
-    this.stationHeight = Math.max(
-      CONFIG.minStationHeight,
-      Math.min(CONFIG.maxStationHeight, this.height * CONFIG.stationHeightRatio),
-    );
-    this.stationSpacing = this.width * CONFIG.stationSpacingRatio;
-  }
-
-  /**
-   * Update station positions and sizes, then update emitters to match
-   */
-  updateStationLayout() {
-    if (!this.stations) return;
-
-    const totalWidth =
-      this.stations.length * this.stationWidth +
-      (this.stations.length - 1) * this.stationSpacing;
-    const startX = -totalWidth / 2 + this.stationWidth / 2;
-
-    // Update each station's position and size
-    for (let i = 0; i < this.stations.length; i++) {
-      const x = startX + i * (this.stationWidth + this.stationSpacing);
-      this.stations[i].updateLayout(x, this.stationWidth, this.stationHeight);
-    }
-
-    // Update emitter positions to follow stations
-    this.updateEmitterPositions();
-  }
-
-  /**
-   * Update emitter positions to match station positions
-   */
-  updateEmitterPositions() {
-    if (!this.particles || !this.stations) return;
-
-    // Fountain emitter
-    const fountainEmitter = this.particles.emitters.get("fountain");
-    if (fountainEmitter) {
-      const pos = this.stations[0].getBottomPosition();
-      fountainEmitter.position.x = pos.x;
-      fountainEmitter.position.y = pos.y + 20;
-    }
-
-    // Fire emitter
-    const fireEmitter = this.particles.emitters.get("fire");
-    if (fireEmitter) {
-      const pos = this.stations[1].getBottomPosition();
-      fireEmitter.position.x = pos.x;
-      fireEmitter.position.y = pos.y;
-    }
-
-    // Snow emitter
-    const snowEmitter = this.particles.emitters.get("snow");
-    if (snowEmitter) {
-      const pos = this.stations[2].getTopPosition();
-      snowEmitter.position.x = pos.x;
-      snowEmitter.position.y = pos.y - 10;
-      snowEmitter.spread.x = this.stationWidth * 0.4;
-    }
-  }
-
-  /**
-   * Handle window resize
-   */
-  onResize() {
-    this.updateScaledSizes();
-    this.updateStationLayout();
-  }
-
-  update(dt) {
-    super.update(dt);
-    this.camera.update(dt);
-
-    // Keep stationScene centered
-    this.stationScene.x = this.width / 2;
-    this.stationScene.y = this.height / 2;
-  }
-
-  render() {
-    super.render();
-    // Stations are rendered by Scene3D through the pipeline
-    // Draw HUD on top
-    this.drawHUD();
-  }
-
-  drawHUD() {
-    Painter.useCtx((ctx) => {
-      ctx.font = "11px monospace";
-      ctx.textAlign = "left";
-
-      // Particle count
-      ctx.fillStyle = "#666";
-      ctx.fillText(
-        `Particles: ${this.particles.particleCount} / ${CONFIG.maxParticles}`,
-        15,
-        this.height - 45,
-      );
-      ctx.fillText(`Pool: ${this.particles.poolSize}`, 15, this.height - 30);
-
-      // Emitter status
-      ctx.fillStyle = this.emittersActive ? "#8a8" : "#a88";
-      ctx.fillText(
-        `Emitters: ${this.emittersActive ? "ON" : "OFF"} (Space)`,
-        15,
-        this.height - 15,
-      );
-
-      // Instructions (bottom center)
-      ctx.textAlign = "center";
-      ctx.fillStyle = "#444";
-      ctx.fillText(
-        "click to burst confetti  |  drag to orbit",
-        this.width / 2,
-        this.height - 15,
-      );
-    });
-  }
-}
-
-window.addEventListener("load", () => {
-  const canvas = document.getElementById("game");
-  const demo = new ParticlesShowcase(canvas);
-  demo.start();
-});