npm - @guinetik/gcanvas - Versions diffs - 1.0.2 → 1.0.4 - Mend

@guinetik/gcanvas 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/dist/gcanvas.es.js +25656 -0
package/dist/gcanvas.es.min.js +1 -0
package/dist/gcanvas.umd.js +1 -0
package/dist/gcanvas.umd.min.js +1 -0
package/package.json +23 -6
package/src/game/objects/index.js +1 -0
package/src/game/objects/spritesheet.js +260 -0
package/src/game/ui/theme.js +6 -0
package/src/io/keys.js +9 -1
package/src/math/boolean.js +481 -0
package/src/math/index.js +1 -0
package/.github/workflows/release.yaml +0 -70
package/.jshintrc +0 -4
package/.vscode/settings.json +0 -22
package/CLAUDE.md +0 -310
package/blackhole.jpg +0 -0
package/demo.png +0 -0
package/demos/CNAME +0 -1
package/demos/animations.html +0 -31
package/demos/basic.html +0 -38
package/demos/baskara.html +0 -31
package/demos/bezier.html +0 -35
package/demos/beziersignature.html +0 -29
package/demos/blackhole.html +0 -28
package/demos/blob.html +0 -35
package/demos/coordinates.html +0 -698
package/demos/cube3d.html +0 -23
package/demos/demos.css +0 -303
package/demos/dino.html +0 -42
package/demos/easing.html +0 -28
package/demos/events.html +0 -195
package/demos/fluent.html +0 -647
package/demos/fluid-simple.html +0 -22
package/demos/fluid.html +0 -37
package/demos/fractals.html +0 -36
package/demos/gameobjects.html +0 -626
package/demos/genart.html +0 -26
package/demos/gendream.html +0 -26
package/demos/group.html +0 -36
package/demos/home.html +0 -587
package/demos/index.html +0 -376
package/demos/isometric.html +0 -34
package/demos/js/animations.js +0 -452
package/demos/js/basic.js +0 -204
package/demos/js/baskara.js +0 -751
package/demos/js/bezier.js +0 -692
package/demos/js/beziersignature.js +0 -241
package/demos/js/blackhole/accretiondisk.obj.js +0 -379
package/demos/js/blackhole/blackhole.obj.js +0 -318
package/demos/js/blackhole/index.js +0 -409
package/demos/js/blackhole/particle.js +0 -56
package/demos/js/blackhole/starfield.obj.js +0 -218
package/demos/js/blob.js +0 -2276
package/demos/js/coordinates.js +0 -840
package/demos/js/cube3d.js +0 -789
package/demos/js/dino.js +0 -1420
package/demos/js/easing.js +0 -477
package/demos/js/fluent.js +0 -183
package/demos/js/fluid-simple.js +0 -253
package/demos/js/fluid.js +0 -527
package/demos/js/fractals.js +0 -931
package/demos/js/fractalworker.js +0 -93
package/demos/js/gameobjects.js +0 -176
package/demos/js/genart.js +0 -268
package/demos/js/gendream.js +0 -209
package/demos/js/group.js +0 -140
package/demos/js/info-toggle.js +0 -25
package/demos/js/isometric.js +0 -863
package/demos/js/kerr.js +0 -1556
package/demos/js/lavalamp.js +0 -590
package/demos/js/layout.js +0 -354
package/demos/js/mondrian.js +0 -285
package/demos/js/opacity.js +0 -275
package/demos/js/painter.js +0 -484
package/demos/js/particles-showcase.js +0 -514
package/demos/js/particles.js +0 -299
package/demos/js/patterns.js +0 -397
package/demos/js/penrose/artifact.js +0 -69
package/demos/js/penrose/blackhole.js +0 -121
package/demos/js/penrose/constants.js +0 -73
package/demos/js/penrose/game.js +0 -943
package/demos/js/penrose/lore.js +0 -278
package/demos/js/penrose/penrosescene.js +0 -892
package/demos/js/penrose/ship.js +0 -216
package/demos/js/penrose/sounds.js +0 -211
package/demos/js/penrose/voidparticle.js +0 -55
package/demos/js/penrose/voidscene.js +0 -258
package/demos/js/penrose/voidship.js +0 -144
package/demos/js/penrose/wormhole.js +0 -46
package/demos/js/pipeline.js +0 -555
package/demos/js/plane3d.js +0 -256
package/demos/js/platformer.js +0 -1579
package/demos/js/scene.js +0 -304
package/demos/js/scenes.js +0 -320
package/demos/js/schrodinger.js +0 -410
package/demos/js/schwarzschild.js +0 -1023
package/demos/js/shapes.js +0 -628
package/demos/js/space/alien.js +0 -171
package/demos/js/space/boom.js +0 -98
package/demos/js/space/boss.js +0 -353
package/demos/js/space/buff.js +0 -73
package/demos/js/space/bullet.js +0 -102
package/demos/js/space/constants.js +0 -85
package/demos/js/space/game.js +0 -1884
package/demos/js/space/hud.js +0 -112
package/demos/js/space/laserbeam.js +0 -179
package/demos/js/space/lightning.js +0 -277
package/demos/js/space/minion.js +0 -192
package/demos/js/space/missile.js +0 -212
package/demos/js/space/player.js +0 -430
package/demos/js/space/powerup.js +0 -90
package/demos/js/space/starfield.js +0 -58
package/demos/js/space/starpower.js +0 -90
package/demos/js/spacetime.js +0 -559
package/demos/js/sphere3d.js +0 -229
package/demos/js/sprite.js +0 -473
package/demos/js/svgtween.js +0 -204
package/demos/js/tde/accretiondisk.js +0 -471
package/demos/js/tde/blackhole.js +0 -219
package/demos/js/tde/blackholescene.js +0 -209
package/demos/js/tde/config.js +0 -59
package/demos/js/tde/index.js +0 -820
package/demos/js/tde/jets.js +0 -290
package/demos/js/tde/lensedstarfield.js +0 -154
package/demos/js/tde/tdestar.js +0 -297
package/demos/js/tde/tidalstream.js +0 -372
package/demos/js/tde_old/blackhole.obj.js +0 -354
package/demos/js/tde_old/debris.obj.js +0 -791
package/demos/js/tde_old/flare.obj.js +0 -239
package/demos/js/tde_old/index.js +0 -448
package/demos/js/tde_old/star.obj.js +0 -812
package/demos/js/tiles.js +0 -312
package/demos/js/tweendemo.js +0 -79
package/demos/js/visibility.js +0 -102
package/demos/kerr.html +0 -28
package/demos/lavalamp.html +0 -27
package/demos/layouts.html +0 -37
package/demos/logo.svg +0 -4
package/demos/loop.html +0 -84
package/demos/mondrian.html +0 -32
package/demos/og_image.png +0 -0
package/demos/opacity.html +0 -36
package/demos/painter.html +0 -39
package/demos/particles-showcase.html +0 -28
package/demos/particles.html +0 -24
package/demos/patterns.html +0 -33
package/demos/penrose-game.html +0 -31
package/demos/pipeline.html +0 -737
package/demos/plane3d.html +0 -24
package/demos/platformer.html +0 -43
package/demos/scene.html +0 -33
package/demos/scenes.html +0 -96
package/demos/schrodinger.html +0 -27
package/demos/schwarzschild.html +0 -27
package/demos/shapes.html +0 -16
package/demos/space.html +0 -85
package/demos/spacetime.html +0 -27
package/demos/sphere3d.html +0 -24
package/demos/sprite.html +0 -18
package/demos/svgtween.html +0 -29
package/demos/tde.html +0 -28
package/demos/tiles.html +0 -28
package/demos/transforms.html +0 -400
package/demos/tween.html +0 -45
package/demos/visibility.html +0 -33
package/docs/README.md +0 -230
package/docs/api/FluidSystem.md +0 -173
package/docs/concepts/architecture-overview.md +0 -204
package/docs/concepts/coordinate-system.md +0 -384
package/docs/concepts/lifecycle.md +0 -255
package/docs/concepts/rendering-pipeline.md +0 -279
package/docs/concepts/shapes-vs-gameobjects.md +0 -187
package/docs/concepts/tde-zorder.md +0 -106
package/docs/concepts/two-layer-architecture.md +0 -229
package/docs/fluid-dynamics.md +0 -99
package/docs/getting-started/first-game.md +0 -354
package/docs/getting-started/hello-world.md +0 -269
package/docs/getting-started/installation.md +0 -175
package/docs/modules/collision/README.md +0 -453
package/docs/modules/fluent/README.md +0 -1075
package/docs/modules/game/README.md +0 -303
package/docs/modules/isometric-camera.md +0 -210
package/docs/modules/isometric.md +0 -275
package/docs/modules/painter/README.md +0 -328
package/docs/modules/particle/README.md +0 -559
package/docs/modules/shapes/README.md +0 -221
package/docs/modules/shapes/base/euclidian.md +0 -123
package/docs/modules/shapes/base/geometry2d.md +0 -204
package/docs/modules/shapes/base/renderable.md +0 -215
package/docs/modules/shapes/base/shape.md +0 -262
package/docs/modules/shapes/base/transformable.md +0 -243
package/docs/modules/shapes/hierarchy.md +0 -218
package/docs/modules/state/README.md +0 -577
package/docs/modules/util/README.md +0 -99
package/docs/modules/util/camera3d.md +0 -412
package/docs/modules/util/scene3d.md +0 -395
package/index.html +0 -17
package/jsdoc.json +0 -50
package/scripts/build-demo.js +0 -69
package/scripts/bundle4llm.js +0 -276
package/scripts/clearconsole.js +0 -48
package/test/math/orbital.test.js +0 -61
package/test/math/tensor.test.js +0 -114
package/test/particle/emitter.test.js +0 -204
package/test/particle/particle-system.test.js +0 -310
package/test/particle/particle.test.js +0 -116
package/test/particle/updaters.test.js +0 -386
package/test/setup.js +0 -120
package/test/shapes/euclidian.test.js +0 -44
package/test/shapes/geometry.test.js +0 -86
package/test/shapes/group.test.js +0 -86
package/test/shapes/rectangle.test.js +0 -64
package/test/shapes/transform.test.js +0 -379
package/test/util/camera3d.test.js +0 -428
package/test/util/scene3d.test.js +0 -352
package/vite.config.js +0 -50
package/vitest.config.js +0 -13

package/demos/transforms.html DELETED Viewed

@@ -1,400 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Transform API Demo</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-  <style>
-    #debug-toggle {
-      position: absolute;
-      bottom: 20px;
-      left: 20px;
-      z-index: 100;
-      padding: 10px 20px;
-      font-family: monospace;
-      font-size: 14px;
-      background: #333;
-      color: #ff00ff;
-      border: 2px solid #ff00ff;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-    #debug-toggle:hover {
-      background: #ff00ff;
-      color: #000;
-    }
-    #debug-toggle.active {
-      background: #ff00ff;
-      color: #000;
-    }
-  </style>
-</head>
-<body>
-  <div id="info" class="light">
-    <strong>Transform API Demo</strong> — The <code>Transform</code> API provides a consistent, chainable interface for modifying shape properties.
-    Use <code>shape.transform.x(100).y(200).rotation(45).scale(0.8)</code> for fluent chaining,
-    <code>shape.transform.set({ x: 100, rotation: 45 })</code> for batch updates, or
-    <code>shape.transform.translateBy(10, 20)</code> for relative transforms.
-    Click to randomize colors.
-  </div>
-  <button id="debug-toggle">Toggle Debug</button>
-  <canvas id="game"></canvas>
-  <script type="module">
-    import {
-      Game,
-      Scene,
-      GameObject,
-      FPSCounter,
-      Rectangle,
-      Circle,
-      Star,
-      Triangle,
-      TextShape,
-      Group,
-      Transform,
-      Painter,
-      Easing
-    } from "../src/index";
-    // Track all shapes for debug toggle
-    const allShapes = [];
-    /**
-     * TransformDemo Game
-     * Showcases the new Transform API with animated shapes
-     */
-    class TransformDemoGame extends Game {
-      constructor(canvas) {
-        super(canvas);
-        this.enableFluidSize();
-        this.backgroundColor = "black";
-      }
-      onResize() {
-        if (this.scene) {
-          this.scene.width = this.width - 20;
-          this.scene.height = this.height - 20;
-        }
-      }
-      init() {
-        super.init();
-        // Main scene
-        this.scene = new Scene(this, {
-          width: this.width - 20,
-          height: this.height - 20,
-          debug: false,
-          anchor: "center"
-        });
-        this.pipeline.add(this.scene);
-        // Add demos
-        this.scene.add(new FluentAPIDemo(this));
-        this.scene.add(new GroupTransformDemo(this));
-        this.scene.add(new BatchUpdateDemo(this));
-        this.scene.add(new RelativeTransformDemo(this));
-        // FPS counter
-        this.pipeline.add(new FPSCounter(this, { anchor: "bottom-right" }));
-      }
-    }
-    /**
-     * Demo 1: Fluent API Chaining
-     * Shows basic chained transform calls
-     */
-    class FluentAPIDemo extends GameObject {
-      constructor(game) {
-        super(game);
-        // Create a rectangle using the new Transform API
-        this.rect = new Rectangle({
-          width: 80,
-          height: 60,
-          color: "#e94560",
-          stroke: "#fff",
-          lineWidth: 2,
-          debug: false,
-          debugColor: "#ff00ff"
-        });
-        allShapes.push(this.rect);
-        // Use fluent API to set initial position
-        this.rect.transform
-          .x(-200)
-          .y(-120);
-        // Label
-        this.label = new TextShape("Fluent API", {
-          x: -200,
-          y: -170,
-          font: "bold 14px monospace",
-          color: "#fff",
-          align: "center"
-        });
-        this.elapsed = 0;
-      }
-      update(dt) {
-        super.update(dt);
-        this.elapsed += dt;
-        // Animate using the transform API
-        this.rect.transform
-          .rotation(this.elapsed * 45)
-          .scaleX(0.8 + Math.sin(this.elapsed * 2) * 0.3)
-          .scaleY(0.8 + Math.cos(this.elapsed * 2) * 0.3);
-      }
-      draw() {
-        super.draw();
-        this.rect.render();
-        this.label.render();
-      }
-    }
-    /**
-     * Demo 2: Group Transform Operations
-     * Shows group-wide transform operations
-     */
-    class GroupTransformDemo extends GameObject {
-      constructor(game) {
-        super(game);
-        // Create a group with multiple shapes
-        this.group = new Group({ debug: false, debugColor: "#ff00ff" });
-        allShapes.push(this.group);
-        // Add shapes to group using transform API
-        for (let i = 0; i < 3; i++) {
-          const circle = new Circle(15 + i * 5, {
-            color: Painter.colors.randomColorHSL(),
-            stroke: "#fff",
-            lineWidth: 1,
-            debug: false,
-            debugColor: "#ff00ff"
-          });
-          allShapes.push(circle);
-          // Position using transform
-          circle.transform.position(i * 40 - 40, 0);
-          this.group.add(circle);
-        }
-        // Position the group
-        this.group.transform.position(0, -120);
-        // Label
-        this.label = new TextShape("Group Transforms", {
-          x: 0,
-          y: -170,
-          font: "bold 14px monospace",
-          color: "#fff",
-          align: "center"
-        });
-        this.elapsed = 0;
-      }
-      update(dt) {
-        super.update(dt);
-        this.elapsed += dt;
-        // Animate group transform
-        this.group.transform
-          .rotation(this.elapsed * 30)
-          .scale(0.9 + Math.sin(this.elapsed * 1.5) * 0.2);
-        // Animate individual children using forEachTransform
-        this.group.forEachTransform((t, child, i) => {
-          // Each child rotates at different speed
-          t.rotation(-this.elapsed * (60 + i * 30));
-        });
-      }
-      draw() {
-        super.draw();
-        this.group.render();
-        this.label.render();
-      }
-    }
-    /**
-     * Demo 3: Batch Updates
-     * Shows using set() for multiple properties at once
-     */
-    class BatchUpdateDemo extends GameObject {
-      constructor(game) {
-        super(game);
-        this.star = new Star(30, 5, 0.5, {
-          color: "#ffc107",
-          stroke: "#fff",
-          lineWidth: 2,
-          debug: false,
-          debugColor: "#ff00ff"
-        });
-        allShapes.push(this.star);
-        // Use batch set for initial state
-        this.star.transform.set({
-          x: 200,
-          y: -120,
-          rotation: 0,
-          scaleX: 1,
-          scaleY: 1
-        });
-        // Label
-        this.label = new TextShape("Batch set()", {
-          x: 200,
-          y: -170,
-          font: "bold 14px monospace",
-          color: "#fff",
-          align: "center"
-        });
-        this.elapsed = 0;
-      }
-      update(dt) {
-        super.update(dt);
-        this.elapsed += dt;
-        // Use batch update for animation
-        const pulse = Math.sin(this.elapsed * 3);
-        const wobble = Math.sin(this.elapsed * 5) * 5;
-        this.star.transform.set({
-          rotation: this.elapsed * 60,
-          scaleX: 1 + pulse * 0.3,
-          scaleY: 1 - pulse * 0.3
-        });
-        // Also translate using relative method
-        this.star.transform.x(200 + wobble);
-      }
-      draw() {
-        super.draw();
-        this.star.render();
-        this.label.render();
-      }
-    }
-    /**
-     * Demo 4: Animated Transforms
-     * Shows position, rotation, and scale animations
-     */
-    class RelativeTransformDemo extends GameObject {
-      constructor(game) {
-        super(game);
-        // Create shapes for demonstrating animated transforms
-        this.shapes = [];
-        const positions = [
-          { x: -200, y: 80 },
-          { x: 0, y: 80 },
-          { x: 200, y: 80 }
-        ];
-        const types = [
-          { name: "position", shape: new Rectangle({ width: 50, height: 50, color: "#00d9ff", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) },
-          { name: "rotation", shape: new Triangle(40, { color: "#ff6b6b", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) },
-          { name: "scale", shape: new Circle(25, { color: "#7bed9f", stroke: "#fff", lineWidth: 2, debug: false, debugColor: "#ff00ff" }) }
-        ];
-        types.forEach((type, i) => {
-          allShapes.push(type.shape);
-          type.shape.transform.position(positions[i].x, positions[i].y);
-          type.label = new TextShape(type.name + "()", {
-            x: positions[i].x,
-            y: 30,
-            font: "bold 14px monospace",
-            color: "#fff",
-            align: "center"
-          });
-          type.baseX = positions[i].x;
-          type.baseY = positions[i].y;
-          this.shapes.push(type);
-        });
-        this.elapsed = 0;
-        this.lastUpdate = 0;
-      }
-      update(dt) {
-        super.update(dt);
-        this.elapsed += dt;
-        // position demo - oscillate position
-        const tx = Math.sin(this.elapsed * 2) * 30;
-        const ty = Math.cos(this.elapsed * 3) * 15;
-        this.shapes[0].shape.transform.position(this.shapes[0].baseX + tx, this.shapes[0].baseY + ty);
-        // rotation demo - continuous rotation
-        this.shapes[1].shape.transform.rotation(this.elapsed * 90);
-        // scale demo - pulsing scale
-        const scale = 0.7 + Math.abs(Math.sin(this.elapsed * 2)) * 0.6;
-        this.shapes[2].shape.transform.scale(scale);
-      }
-      draw() {
-        super.draw();
-        this.shapes.forEach(s => {
-          s.shape.render();
-          s.label.render();
-        });
-      }
-    }
-    // Start the game
-    window.addEventListener("load", () => {
-      const canvas = document.getElementById("game");
-      const game = new TransformDemoGame(canvas);
-      game.start();
-      // Debug toggle button
-      let debugEnabled = false;
-      const debugBtn = document.getElementById("debug-toggle");
-      debugBtn.addEventListener("click", () => {
-        debugEnabled = !debugEnabled;
-        debugBtn.classList.toggle("active", debugEnabled);
-        debugBtn.textContent = debugEnabled ? "Debug: ON" : "Toggle Debug";
-        // Toggle debug on all shapes
-        allShapes.forEach(shape => {
-          shape._debug = debugEnabled;
-        });
-      });
-      // Randomize colors on click
-      canvas.addEventListener("click", () => {
-        game.scene.children.forEach(child => {
-          if (child.rect) child.rect.color = Painter.colors.randomColorHSL();
-          if (child.star) child.star.color = Painter.colors.randomColorHSL();
-          if (child.group) {
-            child.group.children.forEach(c => {
-              c.color = Painter.colors.randomColorHSL();
-            });
-          }
-          if (child.shapes) {
-            child.shapes.forEach(s => {
-              s.shape.color = Painter.colors.randomColorHSL();
-            });
-          }
-        });
-      });
-    });
-  </script>
-</body>
-</html>

package/demos/tween.html DELETED Viewed

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tween</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-</head>
-<body>
-  <div id="info">
-    <strong>Tween Demo</strong> - A box animated over time. The library features two motion-related classes:
-    <span style="color:#CCC">
-      <li><code>Tween</code> - Contains motion primitives, lerps and easing functions.</li>
-      <li><code>Tweenetik</code> - A shorcut class that leverates Tween to interpolate object properties over time</li>
-      <pre>
-Tweenetik.to(
-  mySprite,                         // an object or sprite
-  { scaleX: scale, scaleY: scale},  // the properties & end-values
-  2.0,                              // duration in seconds
-  Easing.easeOutBounce,             // easing function
-  {
-    delay: 0.5,                     // optional 0.5s delay
-    onStart: () => console.log("Tween started!"),
-    onComplete: () => console.log("Tween done!"),
-    onUpdate: () => console.log("Updated frame"),
-  }
-);</pre>
-    </span>
-  </div>
-  <canvas id="game"></canvas>
-  <script type="module">
-    import { MyGame } from './js/tweendemo.js';
-    window.addEventListener("load", () => {
-      const canvas = document.getElementById("game");
-      const game = new MyGame(canvas);
-      game.start();
-    });
-  </script>
-</body>
-</html>

package/demos/visibility.html DELETED Viewed

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Opacity</title>
-  <link rel="stylesheet" href="demos.css" />
-  <script src="./js/info-toggle.js"></script>
-</head>
-<body>
-  <div id="info">
-    <strong>Visibility Toggle Demo</strong> - Shows how game objects can be dynamically shown or hidden.
-    <span style="color:#CCC">
-      <li><code>Transformable</code> — The base class providing the <code>visible</code> property.</li>
-      <li><code>Pipeline Integration</code> — The pipeline skips invisible objects during rendering.</li>
-      <li><code>Dynamic Toggling</code> — Click the button to toggle visibility of a random square.</li>
-    </span>
-  </div>
-  <canvas id="game"></canvas>
-  <script type="module">
-    import { MyGame } from './js/visibility.js';
-    window.addEventListener("load", () => {
-      const canvas = document.getElementById("game");
-      const game = new MyGame(canvas);
-      game.start();
-    });
-  </script>
-</body>
-</html>

package/docs/README.md DELETED Viewed

@@ -1,230 +0,0 @@
-# GCanvas Documentation
-> A minimalist 2D canvas rendering library built for learning, expression, and creative coding.
-GCanvas is a modular 2D rendering and game framework built on top of the HTML5 Canvas API. Inspired by the simplicity of p5.js and the composability of game engines.
-## Quick Navigation
-| Section | Description |
-|---------|-------------|
-| [Getting Started](./getting-started/installation.md) | Installation and first steps |
-| [Concepts](./concepts/architecture-overview.md) | Core architecture and design |
-| [Shapes Module](./modules/shapes/README.md) | Drawing primitives and hierarchy |
-| [Game Module](./modules/game/README.md) | Game loop and GameObjects |
-| [Particle Module](./modules/particle/README.md) | High-performance particle systems |
-| [Util Module](./modules/util/README.md) | Camera3D, Scene3D, layouts |
-| [Collision Module](./modules/collision/README.md) | Collision detection and management |
-| [State Module](./modules/state/README.md) | State machines for entities and games |
-| [Painter Module](./modules/painter/README.md) | Low-level canvas API |
-## Architecture Overview
-```
-┌─────────────────────────────────────────────────────────────┐
-│                         GCanvas                              │
-├─────────────────────────────────────────────────────────────┤
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
-│  │   Shapes    │  │    Game     │  │      Painter        │  │
-│  │  (Drawing)  │  │ (Lifecycle) │  │   (Canvas API)      │  │
-│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
-├─────────────────────────────────────────────────────────────┤
-│  ┌───────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐         │
-│  │ Collision │ │  State  │ │ Motion  │ │   IO    │  ...    │
-│  │ (Physics) │ │  (FSM)  │ │ (Anim)  │ │ (Input) │         │
-│  └───────────┘ └─────────┘ └─────────┘ └─────────┘         │
-└─────────────────────────────────────────────────────────────┘
-```
-GCanvas is organized into **12 core modules**:
-| Module | Purpose |
-|--------|---------|
-| **[shapes](./modules/shapes/README.md)** | 40+ drawable primitives and shape classes |
-| **[game](./modules/game/README.md)** | Core game loop, Pipeline, GameObjects, Scenes |
-| **[particle](./modules/particle/README.md)** | High-performance particle systems with pooling |
-| **[collision](./modules/collision/README.md)** | Collision detection algorithms and group management |
-| **[state](./modules/state/README.md)** | State machines with lifecycle callbacks |
-| **[painter](./modules/painter/README.md)** | Low-level canvas drawing API |
-| **[util](./modules/util/README.md)** | Camera3D, Scene3D, Layout, Position utilities |
-| **motion** | Animation with Tweenetik and Motion patterns |
-| **io** | Input handling (Mouse, Keyboard, Touch, Events) |
-| **math** | Random, Noise, Fractals, Patterns |
-| **mixins** | Draggable, Anchor behaviors |
-| **logger** | Debug logging system |
-## Two-Layer Architecture
-GCanvas provides two complementary ways to work:
-### Shape Layer (Declarative Drawing)
-For static visuals and simple graphics. Use shapes directly without a game loop:
-```js
-import { Circle, Rectangle, Painter } from '@guinetik/gcanvas';
-Painter.init(ctx);
-const circle = new Circle(100, { x: 200, y: 150, color: 'red' });
-circle.draw();
-```
-### Game Layer (Interactive Entities)
-For games, simulations, and interactive applications:
-```js
-import { Game, Scene, GameObject, Circle } from '@guinetik/gcanvas';
-class Player extends GameObject {
-  constructor(game) {
-    super(game);
-    this.shape = new Circle(40, { color: 'blue' });
-    this.enableInteractivity(this.shape);
-  }
-  update(dt) {
-    // Game logic here
-  }
-  render() {
-    this.shape.draw();
-  }
-}
-```
-[Learn more about the Two-Layer Architecture](./concepts/two-layer-architecture.md)
-## The Rendering Pipeline
-Every visual element inherits from a chain of base classes:
-```
-Euclidian          ─── Position (x, y) and size (width, height)
-    │
-Geometry2d         ─── Bounding boxes and constraints
-    │
-Traceable          ─── Debug visualization
-    │
-Renderable         ─── Visibility, opacity, shadows
-    │
-Transformable      ─── Rotation and scaling
-    │
-Shape              ─── Fill color, stroke, line styling
-    │
-[Circle, Rectangle, Star, Cube, ...]  ─── Concrete implementations
-```
-[Learn more about the Rendering Pipeline](./concepts/rendering-pipeline.md)
-## Quick Start
-### Installation
-**NPM (Recommended):**
-```bash
-npm install @guinetik/gcanvas
-```
-**Or clone the repository:**
-```bash
-git clone https://github.com/guinetik/gcanvas.git
-cd gcanvas
-npm install
-npm run dev
-```
-### Hello World
-```html
-<canvas id="game"></canvas>
-<script type="module">
-  import { Game, Scene, Rectangle, TextShape, Group } from '@guinetik/gcanvas';
-  class HelloWorld extends Game {
-    init() {
-      this.enableFluidSize();
-      this.backgroundColor = 'black';
-      const box = new Rectangle(200, 80, {
-        color: '#111',
-        stroke: '#0f0',
-        lineWidth: 2
-      });
-      const label = new TextShape('Hello World!', {
-        font: '18px monospace',
-        color: '#0f0',
-        align: 'center',
-        baseline: 'middle'
-      });
-      const group = new Group({ x: this.width / 2, y: this.height / 2 });
-      group.add(box);
-      group.add(label);
-      const scene = new Scene(this);
-      scene.add(group);
-      this.pipeline.add(scene);
-    }
-  }
-  const game = new HelloWorld(document.getElementById('game'));
-  game.start();
-</script>
-```
-[Full getting started guide](./getting-started/hello-world.md)
-## Features
-- **40+ Shape Primitives** - Circle, Rectangle, Star, Polygon, Heart, and more
-- **2.5D Shapes** - Cube, Cylinder, Sphere, Cone, Prism with pseudo-3D rendering
-- **Groups** - Composite shapes with collective transforms
-- **Transforms** - Rotation, scale, opacity, constraints
-- **Painter API** - Direct canvas control when needed
-- **GameObjects** - Interactive entities with lifecycle methods
-- **Scenes & Scene3D** - Hierarchical organization with optional 3D projection
-- **Camera3D** - Pseudo-3D projection with mouse-controlled rotation
-- **Particle Systems** - High-performance particles with object pooling and composable updaters
-- **Collision Detection** - AABB, circles, lines, sweep tests, and group management
-- **State Machines** - FSM with enter/update/exit lifecycle, timed transitions
-- **UI Components** - Button, ToggleButton, Cursor, Layout managers
-- **Motion System** - Stateless animation patterns (orbit, bounce, spiral...)
-- **Tweenetik** - Property-based tweening with easing
-- **Event System** - Mouse, touch, keyboard with unified input
-- **Zero Dependencies** - Pure JavaScript, works everywhere
-## Demo
-See GCanvas in action: [gcanvas.guinetik.com](https://gcanvas.guinetik.com)
-Or run locally:
-```bash
-npm run dev
-```
-## API Documentation
-- [Shapes Module](./modules/shapes/README.md) - All drawable primitives
-- [Game Module](./modules/game/README.md) - Game loop and objects
-- [Particle Module](./modules/particle/README.md) - Particle systems
-- [Util Module](./modules/util/README.md) - Camera3D, Scene3D, layouts
-- [Collision Module](./modules/collision/README.md) - Collision detection
-- [State Module](./modules/state/README.md) - State machines
-- [Painter Module](./modules/painter/README.md) - Canvas abstraction
-## Learn More
-- [Architecture Overview](./concepts/architecture-overview.md)
-- [Rendering Pipeline](./concepts/rendering-pipeline.md)
-- [Game Lifecycle](./concepts/lifecycle.md)
-- [Installation Guide](./getting-started/installation.md)
----
-**Source:** [github.com/guinetik/gcanvas](https://github.com/guinetik/gcanvas)