@guinetik/gcanvas 1.0.0

package/demos/js/tiles.js

@@ -0,0 +1,312 @@
+import {
+  Game,
+  Scene,
+  TileLayout,
+  HorizontalLayout,
+  Rectangle,
+  ShapeGOFactory,
+  Button,
+  FPSCounter,
+  Painter,
+  Tween,
+  Easing,
+  Position,
+} from "../../src/index";
+
+// Configuration
+const CONFIG = {
+  tileSize: 50,
+  tileSpacing: 12,
+  tilePadding: 20,
+  initialTiles: 50,
+  maxColumns: 10,
+  uiHeight: 100, // Space reserved for UI at bottom
+};
+
+export class TileDemo extends Scene {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.elapsedTime = this.lastChangeTime = 0;
+  }
+
+  isMobile() {
+    return this.game.width < 600;
+  }
+
+  getResponsiveColumns() {
+    const availableWidth = this.game.width - CONFIG.tilePadding * 2;
+    const tileWithSpacing = CONFIG.tileSize + CONFIG.tileSpacing;
+    const columns = Math.floor(availableWidth / tileWithSpacing);
+    return Math.max(2, Math.min(CONFIG.maxColumns, columns));
+  }
+
+  getViewportDimensions() {
+    const margin = this.isMobile() ? 20 : 40;
+    return {
+      width: this.game.width - margin * 2,
+      height: this.game.height - CONFIG.uiHeight - margin,
+    };
+  }
+
+  init() {
+    const game = this.game;
+    const viewport = this.getViewportDimensions();
+    const columns = this.getResponsiveColumns();
+
+    // 1) Create a scrollable tile grid anchored at center
+    this.grid = new TileLayout(game, {
+      anchor: Position.CENTER,
+      anchorOffsetY: -CONFIG.uiHeight / 2 + 20,
+      columns: columns,
+      spacing: CONFIG.tileSpacing,
+      padding: CONFIG.tilePadding,
+      autoSize: true,
+      debug: true,
+      // Enable scrolling
+      scrollable: true,
+      viewportWidth: viewport.width,
+      viewportHeight: viewport.height,
+    });
+
+    // Add initial tiles
+    for (let i = 0; i < CONFIG.initialTiles; i++) {
+      this.addTile();
+    }
+    this.add(this.grid);
+
+    // 2) Create a HorizontalLayout at bottom-center for UI buttons
+    this.createUI();
+  }
+
+  createUI() {
+    const game = this.game;
+    const isMobile = this.isMobile();
+    const buttonWidth = isMobile ? 70 : 90;
+
+    this.bottomUI = new HorizontalLayout(game, {
+      anchor: Position.BOTTOM_CENTER,
+      anchorOffsetY: -15,
+      spacing: isMobile ? 5 : 10,
+      padding: 10,
+      debug: false,
+      align: "center",
+    });
+    this.add(this.bottomUI);
+
+    // "Add Tile" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+" : "Add",
+      width: isMobile ? 40 : buttonWidth,
+      onClick: () => this.addTile(),
+    }));
+
+    // "Remove Tile" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "-" : "Remove",
+      width: isMobile ? 40 : buttonWidth,
+      onClick: () => this.removeTile(),
+    }));
+
+    // "Add Column" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+Col" : "+ Column",
+      width: isMobile ? 50 : buttonWidth,
+      onClick: () => {
+        const maxColumns = this.getResponsiveColumns();
+        if (this.grid.columns < maxColumns) {
+          this.grid.columns++;
+          this.grid.markBoundsDirty();
+        }
+      },
+    }));
+
+    // "Remove Column" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "-Col" : "- Column",
+      width: isMobile ? 50 : buttonWidth,
+      onClick: () => {
+        this.grid.columns = Math.max(1, this.grid.columns - 1);
+        this.grid.markBoundsDirty();
+      },
+    }));
+
+    // Add 10 tiles button (for quickly testing scroll)
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+10" : "Add 10",
+      width: isMobile ? 45 : buttonWidth,
+      onClick: () => {
+        for (let i = 0; i < 10; i++) this.addTile();
+      },
+    }));
+  }
+
+  addTile() {
+    const rect = new Rectangle({
+      width: CONFIG.tileSize,
+      height: CONFIG.tileSize,
+      color: Painter.colors.randomColorHSL(),
+      strokeColor: "white",
+    });
+    const tileGO = ShapeGOFactory.create(this.game, rect);
+    this.grid.add(tileGO);
+  }
+
+  removeTile() {
+    if (this.grid.children.length > 0) {
+      const last = this.grid.children[this.grid.children.length - 1];
+      this.grid.remove(last);
+    }
+  }
+
+  onResize() {
+    if (!this.grid) return;
+
+    // Update columns based on new width
+    const newColumns = this.getResponsiveColumns();
+    if (this.grid.columns !== newColumns) {
+      this.grid.columns = newColumns;
+    }
+
+    // Update viewport for scrolling
+    const viewport = this.getViewportDimensions();
+    this.grid._viewportWidth = viewport.width;
+    this.grid._viewportHeight = viewport.height;
+
+    this.grid.markBoundsDirty();
+    if (this.bottomUI) {
+      this.bottomUI.markBoundsDirty();
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.elapsedTime += dt;
+
+    // Only process tiles every N seconds to reduce frequency
+    if (this.elapsedTime - this.lastChangeTime > 0.1) {
+      this.lastChangeTime = this.elapsedTime;
+
+      // Random number of tiles to change (between 1 and 10% of total tiles)
+      const tilesToChange = Math.max(
+        1,
+        Math.floor(this.grid.children.length * (0.1 + Math.random() * 0.1))
+      );
+
+      // Filter out tiles that are already tweening
+      const availableTiles = this.grid.children.filter(
+        (tile) => !tile.isTweening
+      );
+
+      // Shuffle and pick random tiles
+      const shuffled = [...availableTiles].sort(() => 0.5 - Math.random());
+      const selectedTiles = shuffled.slice(
+        0,
+        Math.min(tilesToChange, availableTiles.length)
+      );
+
+      // Start tweening on selected tiles
+      for (const tile of selectedTiles) {
+        tile.isTweening = true;
+        
+        // Store RGB values directly instead of CSS string to avoid parsing issues
+        const rgb = tile.shape.color ? 
+          Painter.colors.parseColorString(tile.shape.color) : 
+          [255, 255, 255]; // Default to white if color is undefined
+        
+        tile.startRGB = rgb;
+        
+        // Generate vibrant random color in RGB directly
+        const hue = Math.floor(Math.random() * 360);
+        const saturation = 80 + Math.floor(Math.random() * 20); // 80-100%
+        const lightness = 50 + Math.floor(Math.random() * 30); // 50-80%
+        const targetRGB = Painter.colors.hslToRgb(hue, saturation, lightness);
+        
+        tile.targetRGB = targetRGB;
+        tile.tweenElapsed = 0;
+        tile.tweenDuration = 0.5 + Math.random() * 0.5; // Random duration between 0.5-1.0 seconds
+      }
+    }
+
+    // Update all tweening tiles
+    for (const tile of this.grid.children) {
+      if (tile.isTweening) {
+        try {
+          // Update elapsed time
+          tile.tweenElapsed += dt;
+          
+          // Calculate progress with proper easing
+          const progress = Math.min(tile.tweenElapsed / tile.tweenDuration, 1.0);
+          const easedProgress = Easing.easeInOutQuad(progress);
+          
+          // Use the stored RGB values directly
+          if (tile.startRGB && tile.targetRGB) {
+            const newRGB = Tween.tweenColor(
+              tile.startRGB,
+              tile.targetRGB,
+              easedProgress
+            );
+            
+            // Convert interpolated RGB values to CSS color string
+            tile.shape.color = Painter.colors.rgbArrayToCSS(newRGB);
+            
+            // Check if tween is complete
+            if (progress >= 1) {
+              tile.isTweening = false;
+              tile.shape.color = Painter.colors.rgbArrayToCSS(tile.targetRGB);
+            }
+          } else {
+            // Color missing, reset the tweening state
+            console.warn("Missing color values for tweening");
+            tile.isTweening = false;
+            
+            // Set a fallback color
+            const fallbackRGB = [
+              Math.floor(Math.random() * 255),
+              Math.floor(Math.random() * 255),
+              Math.floor(Math.random() * 255)
+            ];
+            tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
+          }
+        } catch (error) {
+          // Handle any errors in the color transition
+          console.warn("Error during color tweening:", error);
+          tile.isTweening = false;
+          
+          // Set a fallback color
+          const fallbackRGB = [
+            Math.floor(Math.random() * 255),
+            Math.floor(Math.random() * 255),
+            Math.floor(Math.random() * 255)
+          ];
+          tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
+        }
+      }
+    }
+  }
+}
+
+//
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    this.tileDemo = new TileDemo(this);
+    this.pipeline.add(this.tileDemo);
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+  }
+
+  onResize() {
+    if (this.tileDemo) {
+      this.tileDemo.onResize();
+    }
+  }
+}

package/demos/js/tweendemo.js

@@ -0,0 +1,79 @@
+import {
+  Game,
+  Rectangle,
+  Group,
+  Scene,
+  ShapeGOFactory,
+  TextShape,
+  FPSCounter,
+  Tween,
+  Tweenetik,
+  Easing,
+} from "../../src/index";
+export class TweenDemo extends Scene {
+  constructor(game, options = {}) {
+    super(game, options);
+    const bg = new Rectangle({ width: 100, height: 100, color: "#0f0" });
+    const frame = new Rectangle({ width: 80, height: 80, color: "#000" });
+    this.label = new TextShape("1%", {
+      font: "18px monospace",
+      color: "#F0F",
+      align: "center",
+      baseline: "middle",
+    });
+    const group = new Group();
+    group.add(bg);
+    group.add(frame);
+    group.add(this.label);
+    group.scaleX = group.scaleY = 2; // add individual scale to this group to test if the outer group scales it too
+    //
+    const wrapper = new Group();
+    wrapper.add(group);
+    //
+    this.box = ShapeGOFactory.create(game, wrapper);
+    this.box.anchor = "center";
+    this.add(this.box);
+    this.growing = false;
+    this.tween();
+  }
+
+  tween() {
+    this.growing = !this.growing;
+    const scale = this.growing ? 2 : 1;
+    const easing = this.growing ? Easing.easeOutElastic : Easing.easeInOutBack;
+    // Tweenetik is a simple tweening library that works with any object
+    Tweenetik.to(
+      this.box, // an object or sprite
+      { scaleX: scale, scaleY: scale }, // the properties & end-values
+      2.0, // duration in seconds
+      easing, // easing function
+      {
+        delay: 0.3,
+        onComplete: () => this.tween(), // restart the tween
+        onUpdate: () => this.updateText(),
+      }
+    );
+  }
+
+  updateText() {
+    this.label.text = `${Math.round(this.box.scaleX * 100)}%`;
+  }
+}
+//
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    this.pipeline.add(new TweenDemo(this, {debug: true, anchor: "center"}));
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+  }
+}

package/demos/js/visibility.js

@@ -0,0 +1,102 @@
+import {
+  Game,
+  Scene,
+  HorizontalLayout,
+  Rectangle,
+  ShapeGOFactory,
+  Button,
+  FPSCounter,
+  Square,
+  Position,
+} from "../../src/index";
+
+export class VisibilityDemo extends Scene {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.MARGIN = 20;
+    // 1) A horizontal layout of squares at screen center
+    this.squaresLayout = new HorizontalLayout(game, {
+      spacing: 1,
+      padding: 4,
+    });
+    this.add(this.squaresLayout);
+    // Create a few colored squares and add them to the layout
+    const colors = ["#0f0", "#0f0", "#0f0"];
+    for (let i = 0; i < colors.length; i++) {
+      const rect = new Square(100, {
+        color: colors[i],
+      });
+      const squareGO = ShapeGOFactory.create(game, rect);
+      this.squaresLayout.add(squareGO);
+    }
+    // 2) A UI scene that holds the buttons
+    this.uiScene = new Scene(game, {
+      name: "UI Scene",
+      width: 120,
+      height: 40,
+      anchor: Position.BOTTOM_CENTER,
+      anchorMargin: 20,
+    });
+    this.uiScene.width = 150;
+    this.uiScene.height = 50;
+    this.add(this.uiScene);
+    // A button that toggles visibility of a random square
+    let currentSquare = null;
+    const pickOne = () => {
+      if (currentSquare) {
+        currentSquare.visible = !currentSquare.visible;
+      }
+      const index = Math.floor(
+        Math.random() * this.squaresLayout.children.length
+      );
+      const square = this.squaresLayout.children[index];
+      if (currentSquare == square) {
+        currentSquare = null;
+        return pickOne();
+      }
+      currentSquare = square;
+      currentSquare.visible = !currentSquare.visible;
+    };
+    const toggleBtn = new Button(game, {
+      text: "Toggle Random",
+      width: 120,
+      onClick: () => {
+        pickOne();
+      },
+    });
+    this.uiScene.add(toggleBtn);
+  }
+
+  update(dt) {
+    // Update scene dimensions based on margin
+    this.width = this.game.width - this.MARGIN * 2;
+    this.height = this.game.height - this.MARGIN * 2;
+    // Center the scene in the game
+    this.x = this.game.width / 2;
+    this.y = this.game.height / 2;
+    super.update(dt);
+  }
+}
+
+//
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    this.scene = new VisibilityDemo(this, {
+      width: this.width,
+      height: this.height,
+    });
+    this.pipeline.add(this.scene);
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: Position.BOTTOM_RIGHT,
+      })
+    );
+  }
+}

package/demos/kerr.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Math & Physics - Kerr Metric (Rotating Black Hole)</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+  <div id="info">
+    <strong>Kerr Metric</strong> — Rotating black hole with frame dragging.<br/>
+    <span style="color:#CCC">
+      <li><code>Spin</code> — Parameter a controls rotation (0 to M).</li>
+      <li><code>g_t&phi;</code> — Off-diagonal term = frame dragging!</li>
+      <li><code>Ergosphere</code> — Orange region where nothing stays still.</li>
+      <li><code>Two ISCOs</code> — Prograde vs retrograde orbits differ.</li>
+      <li><code>Click</code> — Shuffle mass and spin parameters.</li>
+      <li><code>Drag</code> — Rotate the 3D view.</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/kerr.js"></script>
+</body>
+
+</html>

package/demos/lavalamp.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Generative Art - Lava Lamp</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+  <div id="info">
+    <strong>Lava Lamp</strong> — Metaball lava lamp with heat dynamics.<br/>
+    <span style="color:#CCC">
+      <li><code>ON/OFF</code> — Toggle power. Watch the wax cool and rise!</li>
+      <li><code>Heat zones</code> — Smooth thermal transitions between hot/cold.</li>
+      <li><code>Buoyancy</code> — Hot blobs rise, cold blobs sink.</li>
+      <li><code>Heat transfer</code> — Nearby blobs exchange temperature.</li>
+      <li><code>Metaballs</code> — Blobs merge and split organically.</li>
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+  <script type="module" src="./js/lavalamp.js"></script>
+</body>
+
+</html>

package/demos/layouts.html

@@ -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>Layout Demo</title>
+  <link rel="stylesheet" href="demos.css" />
+  <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+  <div id="info" class="light">
+    <strong>Layout Demo</strong><br>
+    <span>Demonstrates dynamic switching between <code>HorizontalLayout</code> and
+      <code>VerticalLayout</code>.<br>
+      Use the right side buttons to switch layout direction.<br>
+      Use the bottom buttons to add or remove random rectangles from the layout group.<br>
+      Layout auto-sizes and aligns children with spacing and padding.
+    </span>
+  </div>
+  <canvas id="game"></canvas>
+
+  <script type="module">
+    import { LayoutDemo } from "./js/layout.js";
+    window.addEventListener("load", () => {
+      const canvas = document.getElementById("game");
+      const game = new LayoutDemo(canvas);
+      //game.setFPS(1)
+      //game.enableLogging(true);
+      game.start();
+      //setTimeout(game.stop.bind(game), 3000);
+    });
+  </script>
+</body>
+
+</html>

package/demos/logo.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="32.9 174.743 71.888 63.576" width="71.888px" height="63.576px">
+  <path d="M 57.971 224.292 L 57.971 203.374 L 57.971 194.861 L 75.109 194.861 L 75.109 188.769 L 63.16 188.769 L 63.16 174.743 L 57.971 174.743 L 57.971 189.041 L 57.971 194.861 L 32.9 194.861 L 32.9 203.773 L 50.377 203.773 L 50.377 224.292 L 57.971 224.292 Z M 79.717 238.319 L 79.717 224.02 L 79.717 218.2 L 104.788 218.2 L 104.788 209.287 L 87.31 209.287 L 87.31 188.769 L 79.717 188.769 L 79.717 209.686 L 79.717 218.2 L 62.579 218.2 L 62.579 224.293 L 74.526 224.293 L 74.526 238.319 L 79.717 238.319 Z" style="fill: rgb(255, 255, 255); fill-rule: evenodd; stroke-width: 1;" id="path8" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/>
+</svg>

package/demos/loop.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Game Loop Demo</title>
+    <link rel="stylesheet" href="demos.css" />
+    <script src="./js/info-toggle.js"></script>
+</head>
+
+<body>
+    <div id="info">
+        <strong>Game Loop Demo</strong> — Demonstrates the <code>update → render</code> cycle using a bouncing ball.
+        <br>
+        A <strong>Game</strong> runs the loop and delegates updates and rendering to its <strong>Pipeline</strong>. <br>
+        A <strong>GameObject</strong> implements <code>update(dt)</code> and <code>render()</code> to animate and draw
+        itself. <br>
+        This demo shows a ball that moves and bounces off canvas edges on each frame.
+    </div>
+
+    <canvas id="game"></canvas>
+
+    <script type="module">
+        import { Game, Scene, GameObject, FPSCounter, Painter, Circle } from "../src/index";
+        class BouncingBall extends GameObject {
+            constructor(game) {
+                super(game);
+                this.radius = 20;
+                this.circle = new Circle(this.radius, {
+                    color: "#0f0",
+                    debug: false
+                });
+                this.x = game.width / 2;
+                this.y = game.height / 2;
+                this.vx = 150;
+                this.vy = 100;
+            }
+
+            update(dt) {
+                this.x += this.vx * dt;
+                this.y += this.vy * dt;
+                const w = this.game.width;
+                const h = this.game.height;
+                if (this.x - this.radius < 0 || this.x + this.radius > w) this.vx *= -1;
+                if (this.y - this.radius < 0 || this.y + this.radius > h) this.vy *= -1;
+                // Clamp and update shape position
+                this.x = Math.max(this.radius, Math.min(w - this.radius, this.x));
+                this.y = Math.max(this.radius, Math.min(h - this.radius, this.y));
+                super.update(dt);
+            }
+
+            draw() {
+                super.draw();
+                this.circle.render();
+            }
+        }
+
+        class LoopGame extends Game {
+            constructor(canvas) {
+                super(canvas);
+                this.enableFluidSize();
+                this.backgroundColor = "black";
+            }
+
+            init() {
+                super.init();
+                this.pipeline.add(new BouncingBall(this));
+                this.pipeline.add(new FPSCounter(this, { anchor: "bottom-left" }));
+            }
+        }
+
+        window.addEventListener("load", () => {
+            const canvas = document.getElementById("game");
+            const game = new LoopGame(canvas);
+            //game.enableLogging();
+            game.enablePauseOnBlur(true);
+            game.setFPS(60);
+            game.start();
+        });
+    </script>
+</body>
+
+</html>