@guinetik/gcanvas 1.0.1 → 1.0.2

package/demos/js/gameobjects.js

@@ -0,0 +1,176 @@
+/**
+ * Gameobjects.html - Live demos for Shapes vs GameObjects documentation
+ */
+import {
+  Circle,
+  Game,
+  Group,
+  Painter,
+  Rectangle,
+  Scene,
+  ShapeGOFactory,
+  Sprite,
+} from "../../src/index.js";
+
+// ==================== Demo 1: Shapes Only ====================
+// Even "shapes only" needs Painter initialized, so we use a minimal Game
+class ShapesDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+    // Shapes are created and rendered in render() below
+  }
+
+  render() {
+    super.render(); // Clears canvas
+
+    const centerY = this.canvas.height / 2;
+
+    // Create shapes - spread across canvas
+    const circle = new Circle(35, { x: this.canvas.width * 0.2, y: centerY, color: "#0f0" });
+    const rect = new Rectangle({ x: this.canvas.width * 0.5, y: centerY, width: 80, height: 50, color: "#0ff" });
+
+    // Group with rotation
+    const group = new Group({ x: this.canvas.width * 0.8, y: centerY, rotation: Math.PI / 4 });
+    group.add(new Circle(20, { color: "#f0f" }));
+    group.add(new Rectangle({ y: 30, width: 40, height: 20, color: "#ff0" }));
+
+    // Render directly - calling render() on shapes, not using pipeline
+    circle.render();
+    rect.render();
+    group.render();
+  }
+}
+
+function initShapesDemo() {
+  const canvas = document.getElementById("shapes-canvas");
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new ShapesDemo(canvas);
+  demo.start();
+}
+
+// ==================== Demo 2: GameObjects with Pipeline ====================
+class GameObjectsDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+
+    const centerX = this.canvas.width / 2;
+    const centerY = this.canvas.height / 2;
+
+    // Create a scene (GameObject container)
+    this.scene = new Scene(this, { x: centerX, y: centerY });
+
+    // Create a sprite with animation (GameObject)
+    this.player = new Sprite(this, { frameRate: 8, loop: true, autoPlay: true });
+
+    // Add frames - pulsing circle animation
+    const colors = ["#0f0", "#0ff", "#0f0", "#ff0", "#0f0"];
+    const sizes = [20, 25, 30, 25, 20];
+    colors.forEach((color, i) => {
+      this.player.addFrame(new Circle(sizes[i], { color, stroke: "#fff", lineWidth: 2 }));
+    });
+
+    // Add to scene
+    this.scene.add(this.player);
+
+    // Add scene to pipeline - now it's managed
+    this.pipeline.add(this.scene);
+  }
+}
+
+function initGameObjectsDemo() {
+  const canvas = document.getElementById("gameobjects-canvas");
+  if (!canvas) return;
+
+  // Set actual canvas size
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new GameObjectsDemo(canvas);
+  demo.start();
+}
+
+// ==================== Demo 3: Bridging Shape to GameObject ====================
+class BridgingDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#050505";
+  }
+
+  init() {
+    super.init();
+
+    const centerX = this.canvas.width / 2;
+    const centerY = this.canvas.height / 2;
+
+    // Create a Group of shapes (like a simple avatar)
+    const avatar = new Group();
+    avatar.add(new Circle(25, { y: -30, color: "#0f0", stroke: "#0a0", lineWidth: 2 })); // head
+    avatar.add(new Rectangle({ y: 20, width: 40, height: 50, color: "#0f0", stroke: "#0a0", lineWidth: 2 })); // body
+
+    // Wrap it as a GameObject so it can join the pipeline
+    const avatarGO = ShapeGOFactory.create(this, avatar, {
+      x: centerX,
+      y: centerY,
+    });
+
+    // Now it's a proper GameObject - add to pipeline
+    this.pipeline.add(avatarGO);
+
+    // Add a second avatar to show multiple instances
+    const avatar2 = new Group();
+    avatar2.add(new Circle(20, { y: -25, color: "#0ff", stroke: "#0aa", lineWidth: 2 }));
+    avatar2.add(new Rectangle({ y: 15, width: 30, height: 40, color: "#0ff", stroke: "#0aa", lineWidth: 2 }));
+
+    const avatar2GO = ShapeGOFactory.create(this, avatar2, {
+      x: centerX + 100,
+      y: centerY,
+    });
+    this.pipeline.add(avatar2GO);
+
+    // Third one with rotation
+    const avatar3 = new Group({ rotation: 0.2 });
+    avatar3.add(new Circle(18, { y: -22, color: "#f0f", stroke: "#a0a", lineWidth: 2 }));
+    avatar3.add(new Rectangle({ y: 12, width: 25, height: 35, color: "#f0f", stroke: "#a0a", lineWidth: 2 }));
+
+    const avatar3GO = ShapeGOFactory.create(this, avatar3, {
+      x: centerX - 100,
+      y: centerY,
+    });
+    this.pipeline.add(avatar3GO);
+  }
+}
+
+function initBridgingDemo() {
+  const canvas = document.getElementById("bridging-canvas");
+  if (!canvas) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  const demo = new BridgingDemo(canvas);
+  demo.start();
+}
+
+// ==================== Initialize ====================
+window.addEventListener("load", () => {
+  initShapesDemo();
+  initGameObjectsDemo();
+  initBridgingDemo();
+});

package/demos/js/plane3d.js

@@ -0,0 +1,256 @@
+import {
+    Game,
+    Plane3D,
+    FPSCounter,
+} from "../../src/index.js";
+import { Camera3D } from "../../src/util/camera3d.js";
+
+/**
+ * Configuration for the Plane3D showcase demo
+ * Sizes are calculated dynamically based on screen size
+ */
+const CONFIG = {
+    // Base sizes (will be scaled)
+    basePlaneWidth: 0.12,   // fraction of min(width, height)
+    basePlaneHeight: 0.09,  // fraction of min(width, height)
+    baseSpacing: 0.18,      // fraction of width
+
+    camera: {
+        perspective: 800,
+        rotationX: 0.3,
+        rotationY: -0.4,
+        inertia: true,
+        friction: 0.95,
+    },
+
+    selfRotation: {
+        speed: 0.8, // radians per second
+    },
+
+    solidPlane: {
+        color: "#4A90D9",
+    },
+
+    gradientPlane: {
+        color1: [1.0, 0.2, 0.4],
+        color2: [0.2, 0.4, 1.0],
+        angle: Math.PI / 4,
+    },
+
+    gridPlane: {
+        lineColor: [0.2, 0.9, 0.4],
+        backgroundColor: [0.1, 0.1, 0.15],
+        gridSize: 8.0,
+        lineWidth: 0.06,
+    },
+};
+
+/**
+ * PlaneData - Holds plane and its world position
+ */
+class PlaneData {
+    constructor(plane, worldX, worldY, worldZ, label) {
+        this.plane = plane;
+        this.worldX = worldX;
+        this.worldY = worldY;
+        this.worldZ = worldZ;
+        this.label = label;
+    }
+}
+
+/**
+ * Plane3DDemo - Showcases different Plane3D rendering modes
+ */
+class Plane3DDemo extends Game {
+    constructor(canvas) {
+        super(canvas);
+        this.backgroundColor = "#000000";
+        this.enableFluidSize();
+    }
+
+    init() {
+        super.init();
+
+        // Create camera with mouse controls
+        this.camera = new Camera3D({
+            perspective: CONFIG.camera.perspective,
+            rotationX: CONFIG.camera.rotationX,
+            rotationY: CONFIG.camera.rotationY,
+            inertia: CONFIG.camera.inertia,
+            friction: CONFIG.camera.friction,
+        });
+        this.camera.enableMouseControl(this.canvas);
+
+        // Calculate initial sizes based on screen
+        this._updateSizes();
+
+        // Plane 1: Solid Color (Canvas 2D rendering)
+        const solidPlane = new Plane3D(
+            this.planeWidth,
+            this.planeHeight,
+            {
+                color: CONFIG.solidPlane.color,
+                camera: this.camera,
+            }
+        );
+        this.solidData = new PlaneData(
+            solidPlane,
+            -this.spacing,
+            0,
+            0,
+            "Solid Color"
+        );
+
+        // Plane 2: Gradient (WebGL shader)
+        const gradientPlane = new Plane3D(
+            this.planeWidth,
+            this.planeHeight,
+            {
+                camera: this.camera,
+                useShader: true,
+                shaderType: "gradient",
+                shaderUniforms: {
+                    uColor1: CONFIG.gradientPlane.color1,
+                    uColor2: CONFIG.gradientPlane.color2,
+                    uAngle: CONFIG.gradientPlane.angle,
+                },
+            }
+        );
+        this.gradientData = new PlaneData(gradientPlane, 0, 0, 0, "Gradient");
+
+        // Plane 3: Grid (WebGL shader)
+        const gridPlane = new Plane3D(
+            this.planeWidth,
+            this.planeHeight,
+            {
+                camera: this.camera,
+                useShader: true,
+                shaderType: "grid",
+                shaderUniforms: {
+                    uLineColor: CONFIG.gridPlane.lineColor,
+                    uBackgroundColor: CONFIG.gridPlane.backgroundColor,
+                    uGridSize: CONFIG.gridPlane.gridSize,
+                    uLineWidth: CONFIG.gridPlane.lineWidth,
+                },
+            }
+        );
+        this.gridData = new PlaneData(gridPlane, this.spacing, 0, 0, "Grid");
+
+        // Store all plane data for rendering
+        this.planeDataList = [this.solidData, this.gradientData, this.gridData];
+
+        // Add FPS counter
+        this.pipeline.add(
+            new FPSCounter(this, {
+                anchor: "bottom-right",
+            })
+        );
+    }
+
+    /**
+     * Calculate sizes based on current screen dimensions
+     */
+    _updateSizes() {
+        const minDim = Math.min(this.width, this.height);
+        this.planeWidth = minDim * CONFIG.basePlaneWidth;
+        this.planeHeight = minDim * CONFIG.basePlaneHeight;
+        this.spacing = this.width * CONFIG.baseSpacing;
+    }
+
+    /**
+     * Handle window resize
+     */
+    onResize() {
+        this._updateSizes();
+
+        // Update plane dimensions
+        if (this.planeDataList) {
+            for (const data of this.planeDataList) {
+                data.plane.planeWidth = this.planeWidth;
+                data.plane.planeHeight = this.planeHeight;
+                data.plane._generateGeometry();
+            }
+
+            // Update world positions
+            this.solidData.worldX = -this.spacing;
+            this.gradientData.worldX = 0;
+            this.gridData.worldX = this.spacing;
+        }
+    }
+
+    update(dt) {
+        super.update(dt);
+
+        // Update camera (for inertia)
+        this.camera.update(dt);
+
+        // Update self-rotation for all planes
+        for (const data of this.planeDataList) {
+            data.plane.selfRotationY += CONFIG.selfRotation.speed * dt;
+        }
+    }
+
+    render() {
+        super.render();
+
+        const ctx = this.ctx;
+        const centerX = this.width / 2;
+        const centerY = this.height / 2;
+
+        // Project and sort by depth (back to front)
+        const projected = this.planeDataList.map((data) => {
+            const proj = this.camera.project(
+                data.worldX,
+                data.worldY,
+                data.worldZ
+            );
+            return { data, proj };
+        });
+        projected.sort((a, b) => b.proj.z - a.proj.z);
+
+        // Render each plane at its projected position
+        for (const { data, proj } of projected) {
+            ctx.save();
+            // Translate to screen center + projected position
+            ctx.translate(centerX + proj.x, centerY + proj.y);
+            // Scale by perspective
+            ctx.scale(proj.scale, proj.scale);
+            // Render plane at origin
+            data.plane.draw();
+            ctx.restore();
+        }
+
+        // Render labels (always on top)
+        this.renderLabels(projected, centerX, centerY);
+    }
+
+    /**
+     * Render plane labels at projected positions
+     */
+    renderLabels(projected, centerX, centerY) {
+        const ctx = this.ctx;
+
+        for (const { data, proj } of projected) {
+            // Calculate label position below the plane
+            const screenX = centerX + proj.x;
+            const screenY =
+                centerY +
+                proj.y +
+                (this.planeHeight / 2) * proj.scale +
+                25;
+
+            ctx.font = "14px monospace";
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
+            ctx.fillText(data.label, screenX, screenY);
+        }
+    }
+}
+
+// Start the demo
+window.addEventListener("load", () => {
+    const canvas = document.getElementById("game");
+    const demo = new Plane3DDemo(canvas);
+    demo.start();
+});