@guinetik/gcanvas 1.0.0

package/src/shapes/circle.js

@@ -0,0 +1,62 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+/**
+ * Circle - A drawable canvas circle shape.
+ *
+ * Responsibilities:
+ * - Draws a circle using the Painter API
+ * - Supports fill and stroke styles
+ * - Supports canvas transforms (position, rotation, scale)
+ * - Optional drawing constraints (bounds)
+ *
+ * Limitations:
+ * - Not interactive or self-animated (wrap in a GameObject for that)
+ */
+export class Circle extends Shape {
+  constructor(radius, options = {}) {
+    super(options);
+    this._radius = radius;
+    this.width = radius * 2;
+    this.height = radius * 2;
+  }
+
+  /**
+   * Renders the circle using the Painter API.
+   */
+  draw() {
+    super.draw();
+    if (this.color) {
+      Painter.shapes.fillCircle(0, 0, this._radius, this.color);
+    }
+    if (this.stroke) {
+      Painter.shapes.strokeCircle(
+        0,
+        0,
+        this._radius,
+        this.stroke,
+        this.lineWidth
+      );
+    }
+  }
+
+  calculateBounds() {
+    const size = this._radius * 2;
+    this.trace("Circle.calculateBounds:" + size);
+    return { x: this.x, y: this.y, width: size, height: size };
+  }
+
+  get radius() {
+    return this._radius;
+  }
+
+  set radius(v) {
+    this.validateProp(v, "radius");
+    if (v != this._radius) {
+      this._radius = v;
+      this.width = v * 2;
+      this.height = v * 2;
+      this._boundsDirty = true;
+      this.calculateBounds();
+    }
+  }
+}

package/src/shapes/clouds.js

@@ -0,0 +1,56 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+export class Cloud extends Shape {
+  constructor(size = 40, options = {}) {
+    super(options);
+    this.size = size;
+    this.width = size * 2;
+    this.height = size * 2;
+  }
+
+  draw() {
+    super.draw();
+    const s = this.size;
+    const ctx = Painter.ctx;
+
+    // Draw cloud as overlapping filled circles
+    const circles = [
+      { x: -s * 0.5, y: 0, r: s * 0.4 },      // left
+      { x: -s * 0.2, y: -s * 0.3, r: s * 0.35 }, // top-left
+      { x: s * 0.2, y: -s * 0.35, r: s * 0.4 },  // top-right
+      { x: s * 0.5, y: 0, r: s * 0.35 },      // right
+      { x: 0, y: s * 0.15, r: s * 0.5 },      // bottom center (base)
+    ];
+
+    if (this.color) {
+      ctx.fillStyle = this.color;
+      for (const c of circles) {
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    if (this.stroke) {
+      // For stroke, we'd need a more complex outline - skip for now
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth = this.lineWidth;
+      for (const c of circles) {
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
+        ctx.stroke();
+      }
+    }
+  }
+
+  getBounds() {
+    const s = this.size * 2;
+    return {
+      x: this.x,
+      y: this.y,
+      width: s,
+      height: s,
+    };
+  }
+}

package/src/shapes/cone.js

@@ -0,0 +1,219 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * Cone - A 3D-looking isometric cone with rotation support.
+ *
+ * Supports:
+ * - Bottom circular face and side triangular segments
+ * - Full bounding box
+ * - Face visibility control
+ * - Rotation around X, Y, and Z axes
+ * - Adjustable segment count for smoother curves
+ *
+ * Note: This is a 2.5D visual illusion — not actual 3D rendering.
+ */
+export class Cone extends Shape {
+  /**
+   * Create a cone
+   * @param {number} radius - Radius of the cone base
+   * @param {number} height - Height of the cone
+   * @param {object} options - Customization options
+   * @param {string} [options.bottomColor] - Color of the bottom face
+   * @param {string} [options.sideColor] - Color of the side face(s)
+   * @param {number} [options.segments] - Number of segments to approximate the curved surface
+   * @param {Array<string>} [options.visibleFaces] - Array of face keys to render
+   * @param {string} [options.stroke] - Optional stroke around each face
+   * @param {number} [options.lineWidth] - Stroke width
+   * @param {number} [options.rotationX] - Rotation around X axis in radians
+   * @param {number} [options.rotationY] - Rotation around Y axis in radians
+   * @param {number} [options.rotationZ] - Rotation around Z axis in radians
+   */
+  constructor(radius = 50, height = 100, options = {}) {
+    super(options);
+    this.radius = radius;
+    this.height = height || options.height || 100;
+
+    // Number of segments used to approximate the circle
+    this.segments = options.segments || 24;
+
+    // Colors for each face
+    this.bottomColor = options.bottomColor || "#eee";
+    this.sideColor = options.sideColor || "#aaa";
+
+    this.stroke = options.stroke || null;
+    this.lineWidth = options.lineWidth || 1;
+
+    // Rotation angles (in radians)
+    this.rotationX = options.rotationX || 0;
+    this.rotationY = options.rotationY || 0;
+    this.rotationZ = options.rotationZ || 0;
+
+    /** @type {Array<'bottom'|'side'>} */
+    this.visibleFaces = options.visibleFaces || ["bottom", "side"];
+  }
+
+  /**
+   * Set rotation angles
+   * @param {number} x - Rotation around X axis in radians
+   * @param {number} y - Rotation around Y axis in radians
+   * @param {number} z - Rotation around Z axis in radians
+   */
+  setRotation(x, y, z) {
+    this.rotationX = x;
+    this.rotationY = y;
+    this.rotationZ = z;
+    return this; // Enable method chaining
+  }
+
+  /**
+   * Rotate the cone incrementally
+   * @param {number} x - Increment for X rotation in radians
+   * @param {number} y - Increment for Y rotation in radians
+   * @param {number} z - Increment for Z rotation in radians
+   */
+  rotate(x, y, z) {
+    this.rotationX += x;
+    this.rotationY += y;
+    this.rotationZ += z;
+    return this; // Enable method chaining
+  }
+
+  /**
+   * Internal draw logic
+   */
+  draw() {
+    super.draw();
+    const r = this.radius;
+    const h = this.height; // Height from base to apex
+    const hh = h / 2; // Half height for positioning
+
+    /**
+     * Apply 3D rotation to a point
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {{x: number, y: number, z: number}}
+     */
+    const rotate3D = (x, y, z) => {
+      // Apply X-axis rotation
+      let y1 = y;
+      let z1 = z;
+      y = y1 * Math.cos(this.rotationX) - z1 * Math.sin(this.rotationX);
+      z = y1 * Math.sin(this.rotationX) + z1 * Math.cos(this.rotationX);
+
+      // Apply Y-axis rotation
+      let x1 = x;
+      z1 = z;
+      x = x1 * Math.cos(this.rotationY) + z1 * Math.sin(this.rotationY);
+      z = -x1 * Math.sin(this.rotationY) + z1 * Math.cos(this.rotationY);
+
+      // Apply Z-axis rotation
+      x1 = x;
+      y1 = y;
+      x = x1 * Math.cos(this.rotationZ) - y1 * Math.sin(this.rotationZ);
+      y = x1 * Math.sin(this.rotationZ) + y1 * Math.cos(this.rotationZ);
+
+      return { x, y, z };
+    };
+
+    /**
+     * Isometric projection of 3D point
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {{x: number, y: number, z: number}}
+     */
+    const iso = (x, y, z) => {
+      // Apply rotations first
+      const rotated = rotate3D(x, y, z);
+
+      // Then apply isometric projection
+      const isoX = (rotated.x - rotated.y) * Math.cos(Math.PI / 6);
+      const isoY = (rotated.x + rotated.y) * Math.sin(Math.PI / 6) - rotated.z;
+      return { x: isoX, y: isoY, z: rotated.z }; // Include z for depth sorting
+    };
+
+    // Apex of the cone (top point)
+    const apex = iso(0, 0, hh);
+
+    // Generate points for the base circle
+    const basePoints = [];
+
+    // Calculate segment angle
+    const angleStep = (Math.PI * 2) / this.segments;
+
+    // Generate base circle points
+    for (let i = 0; i < this.segments; i++) {
+      const angle = i * angleStep;
+      const x = Math.cos(angle) * r;
+      const y = Math.sin(angle) * r;
+
+      // Project 3D points to 2D
+      basePoints.push(iso(x, y, -hh)); // Base circle at -halfHeight
+    }
+
+    // Create side faces (triangles from apex to base)
+    const sideFaces = [];
+    for (let i = 0; i < this.segments; i++) {
+      const nextIdx = (i + 1) % this.segments;
+
+      // Each side face is a triangle: apex, current base point, next base point
+      sideFaces.push({
+        points: [apex, basePoints[i], basePoints[nextIdx]],
+        // Calculate depth as average Z-value of the three points
+        z: (apex.z + basePoints[i].z + basePoints[nextIdx].z) / 3,
+      });
+    }
+
+    // Prepare faces for depth sorting
+    const facesWithDepth = [];
+
+    // Add bottom face if visible
+    if (this.visibleFaces.includes("bottom")) {
+      facesWithDepth.push({
+        type: "bottom",
+        points: [...basePoints].reverse(), // Reverse for correct winding
+        z: -hh, // Z-value of the base
+      });
+    }
+
+    // Add side faces if visible
+    if (this.visibleFaces.includes("side")) {
+      facesWithDepth.push(
+        ...sideFaces.map((face) => ({
+          type: "side",
+          points: face.points,
+          z: face.z,
+        }))
+      );
+    }
+
+    // Sort faces by depth (back to front)
+    facesWithDepth.sort((a, b) => b.z - a.z);
+
+    // Draw faces in depth order
+    for (const face of facesWithDepth) {
+      const color = face.type === "bottom" ? this.bottomColor : this.sideColor;
+      Painter.shapes.polygon(face.points, color, this.stroke, this.lineWidth);
+    }
+  }
+
+  /**
+   * Compute bounding box for interactivity and layout
+   * @returns {{x: number, y: number, width: number, height: number}}
+   */
+  getBounds() {
+    // Calculate actual bounds based on isometric projection
+    const projectionFactor = 1.5; // Approximation for isometric projection
+    const maxDimension = Math.max(this.radius * 2, this.height);
+    const adjustedSize = maxDimension * projectionFactor;
+
+    return {
+      x: this.x - adjustedSize / 2,
+      y: this.y - adjustedSize / 2,
+      width: adjustedSize,
+      height: adjustedSize,
+    };
+  }
+}

package/src/shapes/cross.js

@@ -0,0 +1,70 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * Cross - A cross shape (plus or X), useful for UI, health, or icons.
+ */
+export class Cross extends Shape {
+  /**
+   * @param {number} x - Center X
+   * @param {number} y - Center Y
+   * @param {number} size - Full size of the cross (width/height of bounding square)
+   * @param {number} thickness - Width of the cross arms
+   * @param {Object} [options] - Fill/stroke/transform options
+   * @param {boolean} [options.diagonal=false] - Whether to draw a rotated X instead of a + shape
+   */
+  constructor(size, thickness, options = {}) {
+    super(options);
+    this.size = size;
+    this.thickness = thickness;
+    this.diagonal = options.diagonal || false;
+  }
+
+  draw() {
+    super.draw();
+    const s = this.size / 2;
+      const t = this.thickness / 2;
+
+      if (this.diagonal) {
+        // Draw an X (rotated +)
+        Painter.lines.beginPath();
+        Painter.lines.moveTo(-s, -s + t);
+        Painter.lines.lineTo(-s + t, -s);
+        Painter.lines.lineTo(0, -t);
+        Painter.lines.lineTo(s - t, -s);
+        Painter.lines.lineTo(s, -s + t);
+        Painter.lines.lineTo(t, 0);
+        Painter.lines.lineTo(s, s - t);
+        Painter.lines.lineTo(s - t, s);
+        Painter.lines.lineTo(0, t);
+        Painter.lines.lineTo(-s + t, s);
+        Painter.lines.lineTo(-s, s - t);
+        Painter.lines.lineTo(-t, 0);
+        Painter.lines.closePath();
+      } else {
+        // Draw a + shape
+        Painter.lines.beginPath();
+        Painter.lines.moveTo(-t, -s);
+        Painter.lines.lineTo(t, -s);
+        Painter.lines.lineTo(t, -t);
+        Painter.lines.lineTo(s, -t);
+        Painter.lines.lineTo(s, t);
+        Painter.lines.lineTo(t, t);
+        Painter.lines.lineTo(t, s);
+        Painter.lines.lineTo(-t, s);
+        Painter.lines.lineTo(-t, t);
+        Painter.lines.lineTo(-s, t);
+        Painter.lines.lineTo(-s, -t);
+        Painter.lines.lineTo(-t, -t);
+        Painter.lines.closePath();
+      }
+
+    if (this.color) {
+      Painter.colors.fill(this.color);
+    }
+
+      if (this.stroke) {
+      Painter.colors.stroke(this.stroke, this.lineWidth);
+    }
+  }
+}

package/src/shapes/cube.js

@@ -0,0 +1,244 @@
+import { Shape } from "./shape.js";
+import { Painter } from "../painter/painter.js";
+
+/**
+ * Cube - A 3D-looking isometric cube built from 6 square faces with rotation support.
+ *
+ * Supports:
+ * - Individual face colors
+ * - Full bounding box
+ * - Face visibility control (top, bottom, left, right, front, back)
+ * - Rotation around X, Y, and Z axes
+ *
+ * Note: This is a 2.5D visual illusion — not actual 3D rendering.
+ */
+export class Cube extends Shape {
+  /**
+   * Create a cube
+   * @param {number} x - X position (center of the cube)
+   * @param {number} y - Y position (center of the cube)
+   * @param {number} size - Size of the cube (edge length)
+   * @param {object} options - Customization options
+   * @param {string} [options.faceTopColor] - Color of the top face
+   * @param {string} [options.faceBottomColor] - Color of the bottom face
+   * @param {string} [options.faceLeftColor] - Color of the left face
+   * @param {string} [options.faceRightColor] - Color of the right face
+   * @param {string} [options.faceFrontColor] - Color of the front face
+   * @param {string} [options.faceBackColor] - Color of the back face
+   * @param {Array<string>} [options.visibleFaces] - Array of face keys to render
+   * @param {string} [options.strokeColor] - Optional stroke around each face
+   * @param {number} [options.lineWidth] - Stroke width
+   * @param {number} [options.rotationX] - Rotation around X axis in radians
+   * @param {number} [options.rotationY] - Rotation around Y axis in radians
+   * @param {number} [options.rotationZ] - Rotation around Z axis in radians
+   */
+  constructor(size = 50, options = {}) {
+    super(options);
+    this.size = size;
+
+    this.faceTopColor = options.faceTopColor || "#eee";
+    this.faceBottomColor = options.faceBottomColor || "#ccc";
+    this.faceLeftColor = options.faceLeftColor || "#aaa";
+    this.faceRightColor = options.faceRightColor || "#888";
+    this.faceFrontColor = options.faceFrontColor || "#666";
+    this.faceBackColor = options.faceBackColor || "#444";
+
+    this.strokeColor = options.strokeColor || null;
+    this.lineWidth = options.lineWidth || 1;
+
+    // Rotation angles (in radians)
+    this.rotationX = options.rotationX || 0;
+    this.rotationY = options.rotationY || 0;
+    this.rotationZ = options.rotationZ || 0;
+
+    /** @type {Array<'top'|'bottom'|'left'|'right'|'front'|'back'>} */
+    this.visibleFaces = options.visibleFaces || [
+      "top",
+      "left",
+      "right",
+      "front",
+      "back",
+      "bottom",
+    ];
+  }
+
+  /**
+   * Set rotation angles
+   * @param {number} x - Rotation around X axis in radians
+   * @param {number} y - Rotation around Y axis in radians
+   * @param {number} z - Rotation around Z axis in radians
+   */
+  setRotation(x, y, z) {
+    this.rotationX = x;
+    this.rotationY = y;
+    this.rotationZ = z;
+    return this; // Enable method chaining
+  }
+
+  /**
+   * Rotate the cube incrementally
+   * @param {number} x - Increment for X rotation in radians
+   * @param {number} y - Increment for Y rotation in radians
+   * @param {number} z - Increment for Z rotation in radians
+   */
+  rotate(x, y, z) {
+    this.rotationX += x;
+    this.rotationY += y;
+    this.rotationZ += z;
+    return this; // Enable method chaining
+  }
+
+  /**
+   * Internal draw logic
+   */
+  draw() {
+    super.draw();
+    const s = this.size;
+    // Half size for positioning around center point
+    const hs = s / 2;
+
+    /**
+     * Apply 3D rotation to a point
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {{x: number, y: number, z: number}}
+     */
+    const rotate3D = (x, y, z) => {
+      // Apply X-axis rotation
+      let y1 = y;
+      let z1 = z;
+      y = y1 * Math.cos(this.rotationX) - z1 * Math.sin(this.rotationX);
+      z = y1 * Math.sin(this.rotationX) + z1 * Math.cos(this.rotationX);
+
+      // Apply Y-axis rotation
+      let x1 = x;
+      z1 = z;
+      x = x1 * Math.cos(this.rotationY) + z1 * Math.sin(this.rotationY);
+      z = -x1 * Math.sin(this.rotationY) + z1 * Math.cos(this.rotationY);
+
+      // Apply Z-axis rotation
+      x1 = x;
+      y1 = y;
+      x = x1 * Math.cos(this.rotationZ) - y1 * Math.sin(this.rotationZ);
+      y = x1 * Math.sin(this.rotationZ) + y1 * Math.cos(this.rotationZ);
+
+      return { x, y, z };
+    };
+
+    /**
+     * Isometric projection of 3D point
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {{x: number, y: number}}
+     */
+    const iso = (x, y, z) => {
+      // Apply rotations first
+      const rotated = rotate3D(x, y, z);
+
+      // Then apply isometric projection
+      const isoX = (rotated.x - rotated.y) * Math.cos(Math.PI / 6);
+      const isoY = (rotated.x + rotated.y) * Math.sin(Math.PI / 6) - rotated.z;
+      return { x: isoX, y: isoY };
+    };
+
+    // 8 corners of the cube, centered on the origin
+    const p = {
+      p0: iso(-hs, -hs, -hs), // bottom front left
+      p1: iso(hs, -hs, -hs), // bottom front right
+      p2: iso(hs, hs, -hs), // bottom back right
+      p3: iso(-hs, hs, -hs), // bottom back left
+      p4: iso(-hs, -hs, hs), // top front left
+      p5: iso(hs, -hs, hs), // top front right
+      p6: iso(hs, hs, hs), // top back right
+      p7: iso(-hs, hs, hs), // top back left
+    };
+
+    // Faces mapped to corner points
+    const faces = {
+      top: {
+        points: [p.p4, p.p5, p.p6, p.p7],
+        color: this.faceTopColor,
+        normal: [0, 0, 1],
+      },
+      bottom: {
+        points: [p.p0, p.p1, p.p2, p.p3],
+        color: this.faceBottomColor,
+        normal: [0, 0, -1],
+      },
+      left: {
+        points: [p.p0, p.p4, p.p7, p.p3],
+        color: this.faceLeftColor,
+        normal: [-1, 0, 0],
+      },
+      right: {
+        points: [p.p1, p.p5, p.p6, p.p2],
+        color: this.faceRightColor,
+        normal: [1, 0, 0],
+      },
+      front: {
+        points: [p.p0, p.p1, p.p5, p.p4],
+        color: this.faceFrontColor,
+        normal: [0, -1, 0],
+      },
+      back: {
+        points: [p.p3, p.p2, p.p6, p.p7],
+        color: this.faceBackColor,
+        normal: [0, 1, 0],
+      },
+    };
+
+    // Calculate visibility based on face normals after rotation
+    const visibleFacesWithDepth = this.visibleFaces
+      .map((key) => {
+        const face = faces[key];
+        if (!face) return null;
+
+        // Calculate face center for z-ordering
+        const center = face.points.reduce(
+          (acc, pt) => ({ x: acc.x + pt.x, y: acc.y + pt.y }),
+          { x: 0, y: 0 }
+        );
+        center.x /= face.points.length;
+        center.y /= face.points.length;
+
+        // Calculate approximate depth
+        // Higher value = farther back
+        const depth = center.x * center.x + center.y * center.y;
+
+        return { key, face, depth };
+      })
+      .filter((item) => item !== null)
+      .sort((a, b) => b.depth - a.depth); // Sort by depth (back to front)
+
+    // Draw faces in depth order
+    visibleFacesWithDepth.forEach(({ key, face }) => {
+      if (face?.color) {
+        Painter.shapes.polygon(
+          face.points,
+          face.color,
+          this.strokeColor,
+          this.lineWidth
+        );
+      }
+    });
+  }
+
+  /**
+   * Compute bounding box for interactivity and layout
+   * @returns {{x: number, y: number, width: number, height: number}}
+   */
+  getBounds() {
+    // Calculate actual bounds based on isometric projection
+    const projectionFactor = 1.5; // Approximation for isometric projection
+    const adjustedSize = this.size * projectionFactor;
+
+    return {
+      x: this.x - adjustedSize / 2,
+      y: this.y - adjustedSize / 2,
+      width: adjustedSize,
+      height: adjustedSize,
+    };
+  }
+}