@guinetik/gcanvas 1.0.0

package/demos/js/particles.js

@@ -0,0 +1,299 @@
+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

@@ -0,0 +1,397 @@
+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();
+    }
+  }
+}