@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/particles.js

@@ -1,299 +0,0 @@
-import {
-  Game,
-  GameObject,
-  FPSCounter,
-  Button,
-  Scene,
-  Text,
-  Painter,
-  Circle,
-  Square,
-  Triangle,
-  Star,
-  VerticalLayout,
-  applyAnchor,
-  Position,
-  ShapeGOFactory,
-  Rectangle,
-} from "../../src/index";
-
-class ParticlesGame extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = "black";
-    this.enableFluidSize();
-    this.NUM_PARTICLES = 500;
-    this.MARGIN = 0;
-  }
-
-  init() {
-    super.init();
-    this.mouse = { x: this.width / 2, y: this.height / 2 };
-    // Create particle scene (below UI)
-    this.particleScene = new Scene(this, {
-      width: this.width - this.MARGIN * 2,
-      height: this.height - this.MARGIN * 2,
-      debug: true,
-      debugColor: "#0f0",
-    });
-    this.pipeline.add(this.particleScene);
-    // Create UI scene (above particles)
-    this.uiScene = new Scene(this, {
-      debug: true,
-      debugColor: "#0f0",
-      width: 150,
-      height: 140,
-    });
-    this.pipeline.add(this.uiScene);
-    this.uiScene.add(ShapeGOFactory.create(this, new Rectangle({ width: 148, height: 130, color: Painter.colors.rgba(0, 0, 0, 0.5) })))
-    this.buttons = new VerticalLayout(this);
-    this.buttons.y = 10;
-    this.uiScene.add(this.buttons);
-    // Add buttons
-    this.buttons.add(
-      new Button(this, {
-        text: "Clear",
-        onClick: this.clearParticles.bind(this),
-      })
-    );
-    this.buttons.add(
-      new Button(this, {
-        text: "Reset",
-        onClick: () => {
-          Painter.clear();
-          this.clearParticles();
-          this.spawnParticles();
-        },
-      })
-    );
-    this.particlesCounter = this.buttons.add(
-      new Text(this, "Particles", {
-        height: 20,
-        color: "white",
-        align: "center",
-        baseline: "middle",
-      })
-    );
-    // Anchor UI to bottom-left
-    applyAnchor(this.uiScene, {
-      anchor: Position.BOTTOM_LEFT,
-    });
-    // Input logic...
-    this.freeToCreate = true;
-    this.events.on("inputmove", (e) => {
-      if (e.touches && e.touches.length > 0) {
-        // Multi-touch support
-        const rect = this.canvas.getBoundingClientRect();
-        for (let i = 0; i < e.touches.length; i++) {
-          const touch = e.touches[i];
-          const tx = touch.clientX - rect.left - this.particleScene.x;
-          const ty = touch.clientY - rect.top - this.particleScene.y;
-          this.mouse.x = tx;
-          this.mouse.y = ty;
-          this.createParticle();
-        }
-      } else {
-        // Normalized mouse/single-touch
-        this.mouse.x = e.x - this.particleScene.x;
-        this.mouse.y = e.y - this.particleScene.y;
-        this.createParticle();
-      }
-    });
-    this.events.on("inputdown", () => (this.isDown = this.createParticle()));
-    this.events.on("inputup", () => (this.isDown = false));
-    // Add particles
-    this.spawnParticles();
-    // Add FPS
-    this.pipeline.add(
-      new FPSCounter(this, { color: "white", anchor: "bottom-right" })
-    );
-  }
-
-  createParticle() {
-    if (this.isDown && this.freeToCreate) {
-      this.freeToCreate = false;
-      const p = new Particle(this, this.mouse.x, this.mouse.y);
-      p._particleId = this.particles.length;
-      this.particleScene.add(p);
-      p.vx = 10;
-      p.vy = 10;
-      p.reset(this.mouse.x, this.mouse.y);
-      this.particles.push(p);
-      setTimeout(() => {
-        this.freeToCreate = true;
-        p.x = this.mouse.x;
-        p.y = this.mouse.y;
-      }, 1);
-      //console.log(x, y)
-    }
-    return true;
-  }
-
-  #prevWidth = 0;
-  #prevHeight = 0;
-  update(dt) {
-    // Update scene dimensions based on game dimensions (full screen)
-    this.particleScene.width = this.width;
-    this.particleScene.height = this.height;
-    // Center the scene in the game
-    this.particleScene.x = this.width / 2;
-    this.particleScene.y = this.height / 2;
-
-    this.particlesCounter.text = `Particles: ${this.particles.length}`;
-    super.update(dt);
-  }
-
-  /**
-   * Clear the particles
-   */
-  clearParticles() {
-    this.particles.forEach((particle) => {
-      this.particleScene.remove(particle);
-    });
-    this.particles = [];
-  }
-
-  /**
-   * Spawn all particles
-   */
-  spawnParticles() {
-    this.particles = [];
-    for (let i = 0; i < this.NUM_PARTICLES; i++) {
-      const particle = new Particle(this);
-      particle._particleId = i;
-      this.particleScene.add(particle);
-      this.particles.push(particle);
-      particle.reset();
-    }
-  }
-
-  /**Override clear function to give pseudo trailling effect */
-  clear() {
-    this.ctx.fillStyle = "rgba(0, 0, 0, 0.21)";
-    this.ctx.fillRect(0, 0, this.width, this.height);
-  }
-}
-
-class Particle extends GameObject {
-  constructor(game, _x, _y) {
-    super(game, { crisp: false });
-    this.size = Math.random() * 5 + 5;
-    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
-    this.x = _x == undefined ? 0 : _x;
-    this.y = _y == undefined ? 0 : _y;
-    this.shape = this.createRandomShape();
-    this.spin = (Math.random() - 0.5) * 0.2;
-    this._influenceRadius = 100;
-    this.resetVelocity();
-  }
-
-  createRandomShape() {
-    const r = Math.random();
-    const options = { color: this.color, cacheRendering: true };
-    if (r < 0.5) {
-      return new Circle(this.size, options);
-    } else if (r < 0.66) {
-      return new Square(this.size, options);
-    } else if (r < 0.83) {
-      return new Triangle(this.size * 2, options);
-    } else {
-      return new Star(this.size, 5, 0.5, options);
-    }
-  }
-
-  draw() {
-    super.draw();
-    this.shape.render();
-  }
-
-  resetVelocity() {
-    this.vx = Math.random() * 2 + 1;
-    this.vy = Math.random() * 2 + 1;
-  }
-
-  reset(x, y) {
-    const { width, height } = this.parent;
-    this.x = (Math.random() - 0.5) * width;
-    this.y = (Math.random() - 0.5) * height;
-    this.resetVelocity();
-  }
-
-  update(dt) {
-    const { mouse } = this.game;
-    const { width, height } = this.parent;
-    const halfWidth = width * 0.5 - this.size;
-    const halfHeight = height * 0.5 - this.size;
-    const timeScale = dt * 60;
-
-    // ---- Mouse repulsion (optimized) ----
-    const dx = this.x - mouse.x;
-    const dy = this.y - mouse.y;
-    const distSq = dx * dx + dy * dy;
-    const maxDistSq = 10000; // 100^2
-
-    if (distSq < maxDistSq && distSq > 0) {
-      const invDist = 1 / Math.sqrt(distSq);
-      const force = (100 - distSq * invDist) * 0.006; // 0.6/100
-
-      this.vx += dx * invDist * force;
-      this.vy += dy * invDist * force;
-
-      // Add some randomness but less frequently for performance
-      if (Math.random() < 0.1) {
-        this.vx += (Math.random() - 0.5) * 0.5;
-        this.vy += (Math.random() - 0.5) * 0.5;
-      }
-    }
-
-    // ---- Movement physics ----
-    this.vx *= 0.98;
-    this.vy *= 0.98;
-
-    // Store previous position for rotation calculation
-    const prevX = this.x;
-    const prevY = this.y;
-
-    // Update position with slight acceleration
-    this.x += this.vx;
-    this.y += this.vy;
-    this.vx *= 1.019;
-    this.vy *= 1.019;
-
-    // ---- Boundary handling (optimized) ----
-    const bounce = 0.8;
-    const randomPush = 0.5;
-
-    if (this.x < -halfWidth) {
-      this.x = -halfWidth;
-      this.vx = Math.abs(this.vx) * bounce;
-      this.vy += (Math.random() - 0.5) * randomPush;
-    } else if (this.x > halfWidth) {
-      this.x = halfWidth;
-      this.vx = -Math.abs(this.vx) * bounce;
-      this.vy += (Math.random() - 0.5) * randomPush;
-    }
-
-    if (this.y < -halfHeight) {
-      this.y = -halfHeight;
-      this.vy = Math.abs(this.vy) * bounce;
-      this.vx += (Math.random() - 0.5) * randomPush;
-    } else if (this.y > halfHeight) {
-      this.y = halfHeight;
-      this.vy = -Math.abs(this.vy) * bounce;
-      this.vx += (Math.random() - 0.5) * randomPush;
-    }
-    const moveX = this.x - prevX;
-    const moveY = this.y - prevY;
-
-    this.rotation += this.spin * timeScale;
-
-
-    super.update(dt);
-  }
-}
-
-window.addEventListener("load", () => {
-  const canvas = document.getElementById("game");
-  const game = new ParticlesGame(canvas);
-  game.start();
-});

package/demos/js/patterns.js

@@ -1,397 +0,0 @@
-import {
-  Game,
-  Scene,
-  TileLayout,
-  HorizontalLayout,
-  Rectangle,
-  ShapeGOFactory,
-  Button,
-  FPSCounter,
-  Painter,
-  PatternRectangle,
-  Patterns,
-  Group,
-  TextShape,
-  Text,
-  applyAnchor,
-  Position,
-} from "../../src/index";
-
-export class PatternDemo extends Scene {
-  constructor(game, options = {}) {
-    super(game, options);
-    this.elapsedTime = this.lastChangeTime = 0;
-    this.cellSize = 120;
-    this.maxColumns = 6;
-  }
-
-  init() {
-    const game = this.game;
-    // 1) Create a tile grid
-    const margin = 40;
-    const initialColumns = Math.min(
-      this.maxColumns,
-      Math.max(1, Math.floor((game.width - margin) / this.cellSize))
-    );
-
-    this.grid = new TileLayout(game, {
-      columns: initialColumns,
-      spacing: 12,
-      padding: 20,
-      autoSize: true,
-      debug: true,
-    });
-
-    // Add Title & Subtitle
-    this.add(
-      applyAnchor(
-        new Text(game, "GCanvas Pattern Gallery", {
-          font: "bold 24px monospace",
-          color: "white",
-        }),
-        { anchor: Position.TOP_CENTER, anchorOffsetY: 30 }
-      )
-    );
-
-    this.add(
-      applyAnchor(
-        new Text(game, "Procedural pixel patterns and noise algorithms", {
-          font: "16px monospace",
-          color: "#999",
-        }),
-        { anchor: Position.TOP_CENTER, anchorOffsetY: 60 }
-      )
-    );
-
-    const size = 10;
-    // Define pattern types
-    const patternSources = [
-      {
-        name: "dots",
-        size: size * 2,
-        raw: Patterns.dotPattern(size * 2, size * 2, {
-          dotSize: 1,
-          spacing: size,
-          dotColor: Painter.colors.randomColorRGBA(),
-          background: [0, 0, 0, 0]
-        }),
-      },
-      {
-        name: "cross",
-        size: size * 6,
-        raw: Patterns.cross(size * 6, size * 6, {
-          size: 10,
-          thickness: 1,
-          spacing: 20,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "stripes",
-        size: size * 4,
-        raw: Patterns.stripes(size * 4, size * 4, {
-          spacing: 10,
-          thickness: 4,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA(),
-        }),
-      },
-      {
-        name: "grid",
-        size,
-        raw: Patterns.solidGrid(size, size, {
-          spacing: 9,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorHSL_RGBA(),
-        }),
-      },
-      {
-        name: "mesh",
-        size: size * 2,
-        raw: Patterns.mesh(size * 2, size * 2, {
-          spacing: size * 2,         // Keep the same spacing (20)
-          lineWidth: 1,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "isometric",
-        size: size * 4,
-        raw: Patterns.isometric(size * 4, size * 4, {
-          cellSize: size * 4,
-          lineWidth: 2,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "checkerboard",
-        size: size * 2,
-        raw: Patterns.checkerboard(size * 2, size * 2, {
-          cellSize: 9,
-          color1: [0, 0, 0, 255],
-          color2: Painter.colors.randomColorRGBA(),
-        }),
-      },
-      {
-        name: "harlequin",
-        size: size * 2,
-        raw: Patterns.harlequin(size * 2, size * 2, {
-          size: size,
-          lineWidth: size / 2,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "diamonds",
-        size: size * 3,
-        raw: Patterns.diamonds(size * 3, size * 3, {
-          size: size * 3,
-          spacing: 3,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "cubes",
-        size: size * 2,
-        raw: Patterns.cubes(size * 2, size * 2, {
-          size: size,
-          spacing: 1,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "penrose",
-        size: size * 4,
-        raw: Patterns.penrose(size * 4, size * 4, {
-          divisions: 3,
-          color1: Painter.colors.randomColorRGBA(),
-          color2: Painter.colors.randomColorRGBA(),
-          color3: Painter.colors.randomColorRGBA(),
-          lineWidth: 1,
-        }),
-      },
-      {
-        name: "TBA",
-        size: size * 2,
-        raw: Patterns.void(size * 2, size * 2, {
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "honeycomb",
-        size: size * 4,
-        raw: Patterns.honeycomb(size * 4, size * 4, {
-          radius: size * 2,
-          lineWidth: 1,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "honeycomb (fill)",
-        size: size * 4,
-        raw: Patterns.honeycomb(size * 4, size * 4, {
-          radius: size * 2,
-          lineWidth: 5,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "circles",
-        size: size * 4,
-        raw: Patterns.circles(size * 4, size * 4, {
-          radius: size * 2,
-          lineWidth: 1,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "circles (fill)",
-        size: size * 4,
-        raw: Patterns.circles(size * 4, size * 4, {
-          radius: size * 2,
-          lineWidth: 7,
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "voronoi",
-        size: size * 10,
-        raw: Patterns.voronoi(size * 10, size * 10, {
-          cellCount: size,
-          edgeColor: [0, 0, 0, 255],
-          edgeThickness: 1.5,
-          jitter: 0.5,
-          seed: Math.random() * 2000
-        }),
-      },
-      {
-        name: "voronoi-themed",
-        size: size * 10,
-        raw: Patterns.voronoi(size * 10, size * 10, {
-          cellCount: size,
-          baseColor: [10, 255, 10, 255],
-          colorVariation: 0.5,
-          edgeColor: [0, 0, 0, 255],
-          edgeThickness: 1.5,
-          jitter: 0.5,
-          seed: Math.random() * 2000
-        }),
-      },
-      {
-        name: "TBA",
-        size: size * 2,
-        raw: Patterns.void(size * 2, size * 2, {
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "TBA",
-        size: size * 2,
-        raw: Patterns.void(size * 2, size * 2, {
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorRGBA()
-        }),
-      },
-      {
-        name: "gradient",
-        size: size * 4,
-        raw: Patterns.circularGradient(size * 4, size * 4, {
-          innerColor: Painter.colors.randomColorRGBA(),
-          outerColor: [0, 0, 0, 0],
-          fadeExponent: 2.0
-        }),
-      },
-
-      {
-        name: "perlin-noise",
-        size: size * 2,
-        raw: Patterns.perlinNoise(size * 2, size * 2, {
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorHSL_RGBA(),
-          scale: 0.05,          // Fine detail
-          octaves: 6,           // More octaves for complexity
-          persistence: 0.7,     // Higher persistence for stronger details
-          seed: 12345           // Fixed seed for reproducibility
-        }),
-      },
-      {
-        name: "perlin-noise-2",
-        size: size * 2,
-        raw: Patterns.perlinNoise(size * 2, size * 2, {
-          background: [0, 0, 0, 0],
-          foreground: Painter.colors.randomColorHSL_RGBA(),
-          scale: 0.2,           // Medium detail
-          octaves: 2,           // Fewer octaves for smoother pattern
-          persistence: 0.4,     // Medium persistence
-          lacunarity: 3.0,      // Higher lacunarity for more varied frequencies
-          seed: 54321           // Different seed
-        }),
-      },
-      {
-        name: "perlin-noise-3",
-        size: size * 2,
-        raw: Patterns.perlinNoise(size * 2, size * 2, {
-          background: [0, 0, 0, 0],   // Dark background instead of transparent
-          foreground: Painter.colors.randomColorHSL_RGBA(), // White foreground for high contrast
-          scale: 0.01,          // Very fine detail
-          octaves: 1,           // Single octave for pure noise
-          persistence: 0.5,     // Standard persistence
-          lacunarity: 2.0,      // Standard lacunarity
-          seed: 98765           // Another seed
-        }),
-      },
-    ];
-
-    // Add grid of rectangles based on the patternSources
-    for (let i = 0; i < patternSources.length; i++) {
-      const pattern = patternSources[i % patternSources.length];
-
-      const group = new Group({ width: 100, height: 130 });
-      const rect = new PatternRectangle(null, "repeat", {
-        width: 100,
-        height: 100,
-        color: Painter.colors.randomColorHSL(),
-        debug: true,
-        debugColor: "gray"
-      });
-      const label = new TextShape(pattern.name, {
-        font: "12px monospace",
-        color: "white",
-        y: 100
-      });
-      label.y = 60;
-      group.add(rect);
-      group.add(label);
-
-      Painter.img
-        .createImageBitmapFromPixels(pattern.raw, pattern.size, pattern.size)
-        .then((bitmap) => rect.setImage(bitmap));
-
-      const go = ShapeGOFactory.create(game, group);
-      this.grid.add(go);
-    }
-
-    this.add(this.grid);
-    this.onResize();
-  }
-
-  onResize() {
-    if (this.grid) {
-      const margin = 40;
-      const availableWidth = this.game.width - margin;
-      const columns = Math.min(
-        this.maxColumns,
-        Math.max(1, Math.floor(availableWidth / this.cellSize))
-      );
-
-      if (this.grid.columns !== columns) {
-        this.grid.columns = columns;
-        this.grid.markBoundsDirty();
-      }
-
-      // Center the grid
-      this.grid.transform.position(
-        Math.round(this.game.width / 2),
-        Math.round(this.game.height / 2)
-      );
-    }
-  }
-}
-
-//
-export class MyGame extends Game {
-  constructor(canvas) {
-    super(canvas);
-    this.backgroundColor = "black";
-    this.enableFluidSize();
-  }
-
-  init() {
-    super.init();
-    this.demo = new PatternDemo(this);
-    this.pipeline.add(this.demo);
-    this.pipeline.add(
-      new FPSCounter(this, {
-        anchor: "bottom-right",
-      })
-    );
-  }
-
-  onResize() {
-    if (this.demo) {
-      this.demo.onResize();
-    }
-  }
-}