@guinetik/gcanvas 1.0.0

package/demos/js/animations.js

@@ -0,0 +1,452 @@
+import {
+  Arc,
+  Circle,
+  Easing,
+  FPSCounter,
+  Game,
+  GameObjectShapeWrapper,
+  Group,
+  Heart,
+  Painter,
+  PieSlice,
+  Rectangle,
+  Scene,
+  Square,
+  Star,
+  StickFigure,
+  TextShape,
+  TileLayout,
+  Triangle,
+  Motion,
+  Tween,
+  GameObject,
+} from "../../src/index";
+
+/**
+ * ShapeBox: A GameObject that wraps an inner shape within a background
+ *
+ * Demonstrates the Transform API for animations:
+ * - Uses transform.position() for x/y updates
+ * - Uses transform.rotation() for rotation updates
+ * - Uses transform.scale() for scale updates
+ */
+class ShapeBox extends GameObject {
+  constructor(game, innerShape, type, options = {}) {
+    super(game, options);
+    const whites = ["bezier", "patrol", "follow", "waypoint"];
+    const group = new Group();
+    // Use Transform API to set group dimensions
+    group.transform.size(options.width, options.height);
+
+    const bg = new Rectangle({
+      width: 100,
+      height: 100,
+      color: whites.includes(type) ? "white" : "transparent",
+      stroke: "white",
+      lineWidth: 2,
+    });
+    group.add(bg);
+    group.add(innerShape);
+    this.type = type;
+    this.group = group;
+    this.group.add(
+      new TextShape(this.type, {
+        x: 0,
+        y: 40,
+        font: "16px monospace",
+        color: whites.includes(type) ? "black" : "white",
+      })
+    );
+    // Store a reference to the inner shape so you can update its animation separately.
+    this.innerShape = innerShape;
+  }
+
+  draw() {
+    super.draw();
+    this.group.render();
+  }
+
+  swing(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+    if (!box.swingState) box.swingState = null;
+    const result = Motion.swing(
+      0, 0,
+      90,
+      box.animTime,
+      3.0,
+      true, true, null, {},
+      box.swingState
+    );
+    box.swingState = result.state;
+    // Use Transform API for rotation
+    box.innerShape.transform.rotation(45 + result.angle);
+  }
+
+  pendulum(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+    if (!box.pendulumState) box.pendulumState = null;
+
+    const result = Motion.pendulum(
+      60, 120,
+      box.animTime,
+      3.0,
+      true, true, null, {},
+      box.pendulumState
+    );
+
+    box.pendulumState = result.state;
+    // Use Transform API for rotation
+    box.innerShape.transform.rotation(result.angle);
+  }
+
+  hop(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+    if (!box.hopState) box.hopState = null;
+
+    const result = Motion.hop(
+      -20, -40,
+      box.animTime,
+      1.2,
+      true, true,
+      Easing.easeInOutQuart,
+      { onLoop: () => {} },
+      box.hopState
+    );
+
+    box.hopState = result.state;
+    // Use Transform API for y position
+    box.innerShape.transform.y(result.y);
+  }
+
+  parabolic(box) {
+    const startPos = { x: -45, y: 30 };
+    const endPos = { x: 30, y: -40 };
+    const cycleDuration = 2;
+
+    const frameX = Motion.parabolic(
+      startPos.x, -50, endPos.x,
+      box.animTime, cycleDuration,
+      true, true,
+      Easing.easeInOutBack
+    );
+    const frameY = Motion.parabolic(
+      startPos.y, -50, endPos.y,
+      box.animTime, cycleDuration,
+      true, true,
+      Easing.easeInOutBack
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(frameX.value, frameY.value);
+  }
+
+  spiral(box) {
+    if (!box.easingFun) box.easingFun = Easing.easeInOutSine;
+    const result = Motion.spiral(
+      0, 0,     // center
+      0, 40,    // start/end radius
+      0, 2,     // start angle, revolutions
+      box.animTime, 3,
+      true, true,
+      box.easingFun
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(result.x, result.y);
+  }
+
+  orbit(box) {
+    const result = Motion.orbit(
+      0, 0,           // center
+      -40, 30,        // radius X/Y
+      Math.PI / 2,    // start angle
+      box.animTime, 3,
+      true, true,
+      Easing.easeInOutSine
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(result.x, result.y);
+  }
+
+  float(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const result = Motion.float(
+      { x: 0, y: 0 },
+      box.animTime,
+      10, 0.8, 0.7, 30, true
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(result.x, result.y);
+  }
+
+  waypoint(guard, dt) {
+    if (guard.animTime === undefined) guard.animTime = 0;
+    guard.animTime += dt;
+
+    const waypoints = [
+      [0, 0], [40, 0], [40, -30],
+      [-40, -30], [-40, 30], [40, 30],
+    ];
+
+    const result = Motion.waypoint(
+      guard, guard.animTime, waypoints,
+      50, 1.5, true,
+      { onWaypointReached: (index) => {} }
+    );
+    // Use Transform API for position
+    guard.innerShape.transform.position(result.x, result.y);
+  }
+
+  patrol(guard, dt) {
+    if (guard.animTime === undefined) guard.animTime = 0;
+    guard.animTime += dt;
+    if (!guard.patrolState) guard.patrolState = null;
+
+    const result = Motion.patrol(
+      0, 0,
+      guard.animTime,
+      1.5, 2.0, 40, true,
+      guard.patrolState
+    );
+    guard.patrolState = result.state;
+    // Use Transform API for position
+    guard.innerShape.transform.position(result.x, result.y);
+  }
+
+  spring(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const result = Motion.spring(
+      -15, 18,
+      box.animTime, 3,
+      true, true,
+      { stiffness: 0.7, damping: 0.5 }
+    );
+    // Use Transform API for y position
+    box.innerShape.transform.y(result.value);
+  }
+
+  bounce(box) {
+    const frame = Motion.bounce(
+      -20, 25, 3,
+      box.animTime, 3, true
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(0, frame.y);
+  }
+
+  bezier(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const p0 = [-30, 30];
+    const p1 = [-75, 10];
+    const p2 = [100, 40];
+    const p3 = [-40, -40];
+
+    const pos = Motion.bezier(
+      p0, p1, p2, p3,
+      box.animTime, 10,
+      true, true,
+      Easing.easeInOutExpo
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(pos.x, pos.y);
+  }
+
+  pulse(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const result = Motion.pulse(0.5, 1.5, box.animTime, 2, true);
+    // Use Transform API for scale and position
+    box.innerShape.transform
+      .scale(result.value)
+      .y(result.value * -25);
+  }
+
+  shake(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const pos = Motion.shake(
+      0, 0,       // center
+      20, 15,     // max offset X/Y
+      5, 1,       // frequency, decay
+      box.animTime, 5,
+      true,
+      Easing.easeInOutQuad
+    );
+    // Use Transform API for position
+    box.innerShape.transform.position(pos.x, pos.y);
+    box.innerShape.color = "white";
+  }
+
+  oscillate(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    box.animTime += dt;
+
+    const result = Motion.oscillate(-270, 270, box.animTime, 3, true);
+    // Use Transform API for rotation
+    box.innerShape.transform.rotation(result.value);
+  }
+
+  follow(box, dt) {
+    if (box.animTime === undefined) box.animTime = 0;
+    if (!box.followState) box.followState = null;
+    box.animTime += dt;
+
+    const pathPoints = [
+      [-30, 30], [30, 30], [30, -30], [-30, -30],
+    ];
+
+    const result = Motion.follow(
+      pathPoints,
+      true, box.animTime, 6, true,
+      Easing.easeInOutSine,
+      {},
+      box.followState
+    );
+    box.followState = result.state;
+
+    // Use Transform API for position and rotation
+    box.innerShape.transform.position(result.x, result.y);
+
+    // Lerp the rotation for smooth turning
+    const currentRotation = box.innerShape.rotation * 180 / Math.PI; // Convert from radians to degrees
+    const targetRotation = result.angle;
+    const newRotation = Tween.lerpAngle(currentRotation, targetRotation, dt * 10);
+    box.innerShape.transform.rotation(newRotation);
+  }
+}
+
+/**
+ * AnimationsDemo: A demo Scene that uses a TileLayout to arrange ShapeBoxes
+ * Each ShapeBox receives a different inner shape and animates using Transform API
+ */
+class AnimationsDemo extends TileLayout {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.cellSize = 130;
+    this.maxColumns = 4;
+    this.boxDefinitions = [
+      { type: "hop", innerShape: new Square(30, { color: "white" }) },
+      { type: "spring", innerShape: new Square(30, { color: "white" }) },
+      { type: "bounce", innerShape: new Square(30, { color: "white" }) },
+      { type: "shake", innerShape: new Square(30, { color: "white" }) },
+      { type: "parabolic", innerShape: new Circle(5, { x: -40, y: -40, color: "white" }) },
+      { type: "spiral", innerShape: new Circle(5, { color: "white" }) },
+      { type: "orbit", innerShape: new Circle(5, { color: "white" }) },
+      { type: "float", innerShape: new Circle(5, { color: "white" }) },
+      { type: "bezier", innerShape: new StickFigure(0.3, { stroke: "black" }) },
+      { type: "patrol", innerShape: new StickFigure(0.3, { stroke: "black" }) },
+      { type: "follow", innerShape: new StickFigure(0.3, { stroke: "black" }) },
+      { type: "waypoint", innerShape: new StickFigure(0.3, { stroke: "black" }) },
+      { type: "pulse", innerShape: new Heart({ width: 50, height: 50, color: "white", lineWidth: 3 }) },
+      { type: "oscillate", innerShape: new Arc(20, 0, Math.PI * 1.5, { stroke: "white", lineWidth: 10 }) },
+      { type: "swing", innerShape: new PieSlice(30, 0, Math.PI * 0.3, { color: "white" }) },
+      { type: "pendulum", innerShape: new PieSlice(30, 0, Math.PI * 0.3, { color: "white" }) },
+    ];
+  }
+
+  init() {
+    this.boxes = this.boxDefinitions.map((boxDef) => {
+      const innerShape = boxDef.innerShape;
+      const type = boxDef.type;
+      const shapeBox = new ShapeBox(game, innerShape, type, {
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 0,
+      });
+      // Use Transform API to set dimensions
+      shapeBox.transform.size(100, 100);
+      shapeBox.animTime = 0;
+      this.add(shapeBox);
+      return shapeBox;
+    });
+  }
+
+  update(dt) {
+    if (this.boxes && this.boxes.length > 0) {
+      this.boxes.forEach((box) => {
+        box.animTime += dt;
+        box[box.type](box, dt);
+      });
+    }
+    super.update(dt);
+  }
+
+  onResize() {
+    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.columns !== columns) {
+      this.columns = columns;
+      this.markBoundsDirty();
+    }
+
+    // Center the layout
+    this.transform.position(
+      Math.round(this.game.width / 2),
+      Math.round(this.game.height / 2)
+    );
+  }
+}
+
+// Boilerplate game to run our scene
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  /** Override clear function to give pseudo trailing effect */
+  clear() {
+    this.ctx.fillStyle = "rgba(0, 0, 0, 0.21)";
+    this.ctx.fillRect(0, 0, this.width, this.height);
+  }
+
+  init() {
+    super.init();
+    // Calculate initial columns based on screen width
+    const cellSize = 130;
+    const maxColumns = 4;
+    const margin = 40;
+    const initialColumns = Math.min(
+      maxColumns,
+      Math.max(1, Math.floor((this.width - margin) / cellSize))
+    );
+
+    this.animationsDemo = new AnimationsDemo(this, {
+      debug: true,
+      anchor: "center",
+      spacing: 30,
+      columns: initialColumns,
+      padding: 30,
+      align: "center",
+    });
+    this.pipeline.add(this.animationsDemo);
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+    this.animationsDemo.onResize();
+  }
+
+  onResize() {
+    if (this.animationsDemo) {
+      this.animationsDemo.onResize();
+    }
+  }
+}

package/demos/js/basic.js

@@ -0,0 +1,204 @@
+import {
+  Game,
+  GameObject,
+  Rectangle,
+  TextShape,
+  Motion,
+  Easing,
+  Scene,
+  Circle,
+  Group,
+  FPSCounter,
+} from "../../src/index";
+/**
+ * HelloWorldBox - A simple GameObject that displays a box with text.
+ * The text pulses in and out with a simple animation.
+ */
+class HelloWorldBox extends GameObject {
+  /**
+   * Create a new HelloWorldBox
+   * @param {Game} game - Reference to the main game
+   * @param {Object} options - Configuration options
+   */
+  constructor(game, options = {}) {
+    // Initialize GameObject with game and options
+    super(game, options);
+
+    // Create a group to hold our shapes
+    this.group = new Group({});
+
+    // Create the rectangle background
+    this.box = new Rectangle({
+      width: 200,
+      height: 80,
+      color: "#333",
+      debug: true,
+      debugColor: "#00FF00",
+    });
+
+    // Create the text label
+    this.label = new TextShape("Hello World!", {
+      x: 0,
+      y: 0,
+      font: "18px monospace",
+      color: "#0f0",
+      align: "center",
+      baseline: "middle",
+      debug: false,
+    });
+
+    // Add shapes to our group
+    this.group.add(this.box);
+    this.group.add(this.label);
+
+    // Initialize animation state
+    this.animTime = 0;
+  }
+
+  update(dt) {
+    this.animate(dt);
+    // Call parent update
+    super.update(dt);
+  }
+
+  /**
+   * Update logic - called each frame
+   * @param {number} dt - Delta time in seconds
+   */
+  animate(dt) {
+    // Track animation time
+    if (this.animTime == null) this.animTime = 0;
+    this.animTime += dt;
+    // Create a pulsing effect on the label opacity
+    const result = Motion.pulse(
+      0, // Min opacity
+      1, // Max opacity
+      this.animTime,
+      2, // Duration (2 seconds)
+      true, // Loop
+      false, // No yoyo
+      Easing.easeInOutSine
+    );
+    // Apply the pulse animation
+    this.label.opacity = result.value;
+    // Add a floating motion to the entire group
+    const float = Motion.float(
+      {x: 0, y: 0}, // Center point
+      this.animTime,
+      5, // 5-second cycle
+      0.5, // Medium speed
+      0.5, // Medium randomness
+      50, // Radius of movement
+      true,
+      Easing.easeInOutSine
+    );
+    //console.log("float", float);
+    // Apply a slight random motion to the group
+    this.group.x = float.x;
+    this.group.y = float.y;
+  }
+
+  /**
+   * Render our box - called each frame after update
+   */
+  draw() {
+    super.draw();
+    // Draw the group which contains our shapes
+    this.group.render();
+  }
+}
+
+/**
+ * DemoGame - Main game class that sets up the demo
+ */
+export class DemoGame extends Game {
+  /**
+   * Create a new DemoGame
+   * @param {HTMLCanvasElement} canvas - The canvas element to render to
+   */
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+    this.backgroundColor = "black";
+
+    // Log that the game was created
+    //console.log("DemoGame created!");
+  }
+
+  /**
+   * Initialize the game
+   * Create scenes, game objects, and set up the game world
+   */
+  init() {
+    // Call parent init to set up core systems
+    super.init();
+    // Create main game scene
+    this.gameScene = new Scene(this, { width: 400, height: 200 });
+    this.gameScene.name = "Game Scene";
+    // Create a HelloWorldBox and add it to the game scene
+    const box = new HelloWorldBox(this);
+    this.gameScene.add(box);
+    // Add scenes to the pipeline (order matters - last is on top)
+    this.pipeline.add(this.gameScene);
+    // Add a floating circle for visual interest
+    this.addFloatingCircle();
+    //
+    this.fpsCounter = new FPSCounter(this, {
+      color: "#00FF00",
+      debug: false,
+      anchor: "bottom-right",
+    });
+    // Add FPS counter
+    this.pipeline.add(this.fpsCounter);
+    //console.log("Game initialized with scenes and objects");
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.logger.groupCollapsed("DemoGame.update");
+    this.gameScene.x = this.width / 2;
+    this.gameScene.y = this.height / 2;
+    this.floatingCircle.animTime += dt;
+    // Calculate orbit position
+    const orbit = Motion.orbit(
+      this.gameScene.x,
+      this.gameScene.y, // Center Y
+      200, // X radius
+      200, // Y radius
+      0, // Start angle
+      this.floatingCircle.animTime, // Current time
+      8, // Duration (8 seconds)
+      true, // Loop
+      true // Clockwise
+    );
+    //console.log("orbit", orbit);
+    // Apply the orbital motion
+    this.floatingCircle.x = orbit.x;
+    this.floatingCircle.y = orbit.y;
+    this.logger.groupEnd();
+  }
+
+  /**
+   * Add a floating circle to the game.
+   * This method demonstrates how the shape and game object can be used interchangeably.
+   * Since a Shape is a Transformable, it can be added to the pipeline and will be rendered.
+   */
+  addFloatingCircle() {
+    // Determine the center position for the orbit
+    const centerX = this.width / 2;
+    const centerY = this.height / 2;
+
+    // Create a circle that will float around - set initial position on the orbit path
+    this.floatingCircle = new Circle(30, {
+      name: "Floating Circle",
+      x: centerX + 100, // Start at right side of orbit (centerX + radiusX)
+      y: centerY, // Start at center Y
+      color: "#00FF00",
+      debug: false
+    });
+
+    // Initialize animation time
+    this.floatingCircle.animTime = 0;
+    this.pipeline.add(this.floatingCircle);
+  }
+}