@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/easing.js

@@ -0,0 +1,477 @@
+import {
+  Circle,
+  Easing,
+  FPSCounter,
+  Game,
+  GameObject,
+  Painter,
+  TextShape,
+  TileLayout,
+  Rectangle,
+  Tweenetik,
+  ToggleButton,
+  Tooltip,
+  Position,
+} from "/gcanvas.es.min.js";
+
+// Formulas for each easing function
+const EASING_FORMULAS = {
+  linear: "f(t) = t",
+  smoothstep: "f(t) = t² × (3 - 2t)",
+  smootherstep: "f(t) = t³ × (t × (6t - 15) + 10)",
+  easeInQuad: "f(t) = t²",
+  easeOutQuad: "f(t) = t × (2 - t)",
+  easeInOutQuad: "f(t) = t < 0.5 ? 2t² : -1 + (4 - 2t) × t",
+  easeInCubic: "f(t) = t³",
+  easeOutCubic: "f(t) = (t - 1)³ + 1",
+  easeInOutCubic: "f(t) = t < 0.5 ? 4t³ : (t-1)(2t-2)² + 1",
+  easeInQuart: "f(t) = t⁴",
+  easeOutQuart: "f(t) = 1 - (t - 1)⁴",
+  easeInOutQuart: "f(t) = t < 0.5 ? 8t⁴ : 1 - 8(t-1)⁴",
+  easeInSine: "f(t) = 1 - cos(t × π/2)",
+  easeOutSine: "f(t) = sin(t × π/2)",
+  easeInOutSine: "f(t) = -(cos(πt) - 1) / 2",
+  easeInExpo: "f(t) = 2^(10(t - 1))",
+  easeOutExpo: "f(t) = 1 - 2^(-10t)",
+  easeInOutExpo: "f(t) = ½×2^(20t-10) or 1 - ½×2^(-20t+10)",
+  easeInCirc: "f(t) = 1 - √(1 - t²)",
+  easeOutCirc: "f(t) = √(1 - (t-1)²)",
+  easeInOutCirc: "t<½ ? ½(1-√(1-4t²)) : ½(√(-(2t-3)(2t-1))+1)",
+  easeInElastic: "f(t) = -2^(10(t-1)) × sin(2π(t-1-s)/p)",
+  easeOutElastic: "f(t) = 2^(-10t) × sin(2π(t-s)/p) + 1",
+  easeInOutElastic: "t<½ ? easeIn : easeOut (mirrored)",
+  easeInBack: "f(t) = t²((s+1)t - s)  where s≈1.7",
+  easeOutBack: "f(t) = (t-1)²((s+1)(t-1) + s) + 1",
+  easeInOutBack: "t<½ ? easeIn(2t)/2 : easeOut(2t-1)/2 + ½",
+  easeInBounce: "f(t) = 1 - easeOutBounce(1-t)",
+  easeOutBounce: "4 parabolas: 7.5625(t-c)² + k",
+  easeInOutBounce: "t<½ ? easeIn(2t)/2 : easeOut(2t-1)/2 + ½",
+};
+
+/**
+ * EasingBox: A tile showing an easing curve graph with animated circle
+ */
+class EasingBox extends GameObject {
+  constructor(game, label, easingFn, formula, tooltip, options = {}) {
+    super(game, options);
+    this.label = label;
+    this.easingFn = easingFn;
+    this.formula = formula;
+    this.tooltip = tooltip;
+    this.animTime = 0;
+    this.duration = 1;
+    this.pauseDuration = 0.3;
+    this.isPlaying = false;
+    this.inPausePhase = true; // Start with ball hidden
+    this.interactive = true;
+
+    // Background box
+    this.bg = new Rectangle({
+      width: 100,
+      height: 100,
+      color: "rgba(0, 0, 0, 0.1)",
+      stroke: "rgba(255, 255, 255, 0.3)",
+      lineWidth: 1,
+    });
+
+    // Label
+    this.labelText = new TextShape(this.label, {
+      x: 0,
+      y: 44,
+      font: "11px monospace",
+      color: "white",
+    });
+
+    // Glow circle
+    this.glowCircle = new Circle(8, {
+      color: "rgba(0, 255, 0, 0.3)",
+    });
+
+    // Animated circle
+    this.animCircle = new Circle(4, {
+      color: "#0f0",
+    });
+
+    // Cache scale values
+    this.graphScale = 1;
+    this.graphOffset = 0;
+    this.scaleCalculated = false;
+
+    // Flag for "play all" mode (controlled by toggle button)
+    this.playAll = false;
+
+    // Setup hover/touch events to play animation
+    this.on("mouseover", (e) => {
+      this.isHovered = true;
+      if (!this.playAll) {
+        this.isPlaying = true;
+        this.animTime = 0; // restart from beginning
+      }
+      // Scale up effect like shapes.js
+      Tweenetik.to(
+        this,
+        { scaleX: 1.15, scaleY: 1.15 },
+        0.6,
+        Easing.easeOutElastic
+      );
+      // Show tooltip with formula
+      if (this.tooltip && this.formula) {
+        this.tooltip.show(this.formula, e.x, e.y);
+      }
+      // Change cursor to pointer
+      this.game.canvas.style.cursor = "pointer";
+    });
+    this.on("mouseout", () => {
+      this.isHovered = false;
+      if (!this.playAll) {
+        this.isPlaying = false;
+      }
+      // Scale back down
+      Tweenetik.to(
+        this,
+        { scaleX: 1, scaleY: 1 },
+        0.6,
+        Easing.easeOutElastic
+      );
+      // Hide tooltip
+      if (this.tooltip) {
+        this.tooltip.hide();
+      }
+      // Reset cursor
+      this.game.canvas.style.cursor = "default";
+    });
+    // For touch devices - play on touch, stop when touch ends
+    this.on("inputdown", () => {
+      if (!this.playAll) {
+        this.isPlaying = true;
+        this.animTime = 0;
+      }
+    });
+  }
+
+  /**
+   * Set play all mode - when true, animation plays continuously
+   */
+  setPlayAll(playAll) {
+    this.playAll = playAll;
+    if (playAll) {
+      this.isPlaying = true;
+      this.animTime = 0;
+    } else {
+      // Only keep playing if currently hovered
+      this.isPlaying = this.isHovered || false;
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Calculate graph dimensions
+    const size = 100;
+    const padding = 10;
+    const labelSpace = 14;
+    const graphSize = size - padding * 2 - labelSpace;
+    const startX = -size / 2 + padding;
+    const startY = size / 2 - padding - labelSpace;
+
+    // Only animate when playing
+    if (this.isPlaying) {
+      this.animTime += dt;
+
+      const totalCycle = this.duration + this.pauseDuration;
+      if (this.animTime > totalCycle) {
+        this.animTime = 0;
+      }
+
+      // Check if we're in the pause phase (animation finished, waiting to restart)
+      this.inPausePhase = this.animTime > this.duration;
+
+      if (!this.inPausePhase) {
+        const t = this.animTime / this.duration;
+        const easedT = this.easingFn(t);
+        const scaledEasedT = easedT * this.graphScale + this.graphOffset;
+
+        const circleX = startX + t * graphSize;
+        const circleY = startY - scaledEasedT * graphSize;
+
+        // Update circle positions
+        this.glowCircle.x = circleX;
+        this.glowCircle.y = circleY;
+        this.animCircle.x = circleX;
+        this.animCircle.y = circleY;
+      }
+    } else {
+      this.inPausePhase = true; // Hide when not playing
+    }
+  }
+
+  draw() {
+    super.draw();
+
+    // Calculate scale values once on first draw
+    if (!this.scaleCalculated) {
+      let minVal = 0;
+      let maxVal = 1;
+      for (let i = 0; i <= 100; i++) {
+        const t = i / 100;
+        const val = this.easingFn(t);
+        if (val < minVal) minVal = val;
+        if (val > maxVal) maxVal = val;
+      }
+      const range = maxVal - minVal;
+      this.graphScale = range > 1 ? 1 / range : 1;
+      this.graphOffset = minVal < 0 ? -minVal * this.graphScale : 0;
+      this.scaleCalculated = true;
+    }
+
+    // 1. Draw background first
+    this.bg.render();
+
+    const size = 100;
+    const padding = 10;
+    const labelSpace = 14;
+    const graphSize = size - padding * 2 - labelSpace;
+    const startX = -size / 2 + padding;
+    const startY = size / 2 - padding - labelSpace;
+
+    // 2. Draw axes and curve using Painter.useCtx for automatic cleanup
+    Painter.useCtx((ctx) => {
+      // Draw axes
+      ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
+      ctx.lineWidth = 1;
+      ctx.moveTo(startX, startY - graphSize);
+      ctx.lineTo(startX, startY);
+      ctx.lineTo(startX + graphSize, startY);
+      ctx.stroke();
+
+      // Draw the easing curve
+      ctx.beginPath();
+      ctx.strokeStyle = "white";
+      ctx.lineWidth = 2;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+
+      for (let i = 0; i <= graphSize; i++) {
+        const t = i / graphSize;
+        const easedT = this.easingFn(t);
+        const scaledEasedT = easedT * this.graphScale + this.graphOffset;
+        const x = startX + i;
+        const y = startY - scaledEasedT * graphSize;
+
+        if (i === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+      }
+      ctx.stroke();
+    });
+
+    // 3. Draw label
+    this.labelText.render();
+
+    // 4. Draw circles on top (hidden during pause phase)
+    if (!this.inPausePhase) {
+      this.glowCircle.render();
+      this.animCircle.render();
+    }
+  }
+}
+
+/**
+ * EasingDemo: A TileLayout grid displaying all easing function curves
+ */
+class EasingDemo extends TileLayout {
+  constructor(game, tooltip, options = {}) {
+    super(game, options);
+    this.tooltip = tooltip;
+    this.cellSize = 120;
+    this.maxColumns = 6;
+
+    // All easing functions organized by type (In, Out, InOut for each)
+    this.easingDefinitions = [
+      // Basics
+      { label: "linear", fn: Easing.linear },
+      { label: "smoothstep", fn: Easing.smoothstep },
+      { label: "smootherstep", fn: Easing.smootherstep },
+
+      // Quadratic
+      { label: "easeInQuad", fn: Easing.easeInQuad },
+      { label: "easeOutQuad", fn: Easing.easeOutQuad },
+      { label: "easeInOutQuad", fn: Easing.easeInOutQuad },
+
+      // Cubic
+      { label: "easeInCubic", fn: Easing.easeInCubic },
+      { label: "easeOutCubic", fn: Easing.easeOutCubic },
+      { label: "easeInOutCubic", fn: Easing.easeInOutCubic },
+
+      // Quartic
+      { label: "easeInQuart", fn: Easing.easeInQuart },
+      { label: "easeOutQuart", fn: Easing.easeOutQuart },
+      { label: "easeInOutQuart", fn: Easing.easeInOutQuart },
+
+      // Sine
+      { label: "easeInSine", fn: Easing.easeInSine },
+      { label: "easeOutSine", fn: Easing.easeOutSine },
+      { label: "easeInOutSine", fn: Easing.easeInOutSine },
+
+      // Exponential
+      { label: "easeInExpo", fn: Easing.easeInExpo },
+      { label: "easeOutExpo", fn: Easing.easeOutExpo },
+      { label: "easeInOutExpo", fn: Easing.easeInOutExpo },
+
+      // Circular
+      { label: "easeInCirc", fn: Easing.easeInCirc },
+      { label: "easeOutCirc", fn: Easing.easeOutCirc },
+      { label: "easeInOutCirc", fn: Easing.easeInOutCirc },
+
+      // Elastic
+      { label: "easeInElastic", fn: (t) => Easing.easeInElastic(t) },
+      { label: "easeOutElastic", fn: (t) => Easing.easeOutElastic(t) },
+      { label: "easeInOutElastic", fn: (t) => Easing.easeInOutElastic(t) },
+
+      // Back
+      { label: "easeInBack", fn: (t) => Easing.easeInBack(t) },
+      { label: "easeOutBack", fn: (t) => Easing.easeOutBack(t) },
+      { label: "easeInOutBack", fn: (t) => Easing.easeInOutBack(t) },
+
+      // Bounce
+      { label: "easeInBounce", fn: Easing.easeInBounce },
+      { label: "easeOutBounce", fn: Easing.easeOutBounce },
+      { label: "easeInOutBounce", fn: Easing.easeInOutBounce },
+    ];
+  }
+
+  init() {
+    this.boxes = this.easingDefinitions.map((def) => {
+      const formula = EASING_FORMULAS[def.label] || "";
+      const box = new EasingBox(
+        this.game,
+        def.label,
+        def.fn,
+        formula,
+        this.tooltip,
+        { width: 100, height: 100 }
+      );
+      box.transform.size(100, 100);
+      this.add(box);
+      return box;
+    });
+  }
+
+  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)
+    );
+  }
+}
+
+/**
+ * MyGame: Main game class
+ */
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    // Create tooltip for showing formulas
+    this.tooltip = new Tooltip(this, {
+      font: "14px monospace",
+      textColor: "#0f0",
+      bgColor: "rgba(0, 0, 0, 0.9)",
+      borderColor: "rgba(0, 255, 0, 0.5)",
+      padding: 12,
+    });
+
+    // Toggle button to play all animations
+    this.toggleBtn = new ToggleButton(this, {
+      text: "Play All",
+      anchor: Position.BOTTOM_LEFT,
+      width: 100,
+      height: 32,
+      colorDefaultBg: "rgba(0, 0, 0, 0.9)",
+      colorDefaultStroke: "rgba(0, 255, 0, 0.5)",
+      colorDefaultText: "#0f0",
+      colorActiveBg: "rgba(0, 255, 0, 1)",
+      colorActiveStroke: "orange",
+      colorActiveText: "#FFFFFF",
+      colorHoverBg: "rgba(0, 255, 0, 0.5)",
+      colorHoverStroke: "rgba(0, 255, 0, 0.5)",
+      colorHoverText: "#0f0",
+      colorPressedBg: "rgba(0, 255, 0, 0.5)",
+      colorPressedStroke: "rgba(0, 255, 0, 0.5)",
+      colorPressedText: "#0f0",
+      startToggled: false,
+      onToggle: (isOn) => {
+        this.setPlayAll(isOn);
+      },
+    });
+    this.pipeline.add(this.toggleBtn);
+
+    // Calculate initial columns based on screen width
+    const cellSize = 120;
+    const maxColumns = 6;
+    const margin = 40;
+    const initialColumns = Math.min(
+      maxColumns,
+      Math.max(1, Math.floor((this.width - margin) / cellSize))
+    );
+
+    this.easingDemo = new EasingDemo(this, this.tooltip, {
+      debug: false,
+      anchor: "center",
+      spacing: 20,
+      columns: initialColumns,
+      padding: 30,
+      align: "center",
+    });
+    this.pipeline.add(this.easingDemo);
+
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+
+    // Add tooltip last so it renders on top
+    this.pipeline.add(this.tooltip);
+
+    this.easingDemo.onResize();
+  }
+
+  /**
+   * Toggle all animations on/off
+   */
+  setPlayAll(playAll) {
+    if (this.easingDemo && this.easingDemo.boxes) {
+      this.easingDemo.boxes.forEach((box) => {
+        box.setPlayAll(playAll);
+      });
+    }
+  }
+
+  onResize() {
+    if (this.easingDemo) {
+      this.easingDemo.onResize();
+    }
+  }
+}

package/dist/js/fluent.js

@@ -0,0 +1,183 @@
+/**
+ * Fluent API Demo Initializations
+ *
+ * Each function creates a demo on a specific canvas element,
+ * showcasing different aspects of the Fluent API.
+ */
+
+import { gcanvas, sketch } from "/gcanvas.es.min.js";
+
+// ─────────────────────────────────────────────────────────
+// Demo 1: Hello World
+// ─────────────────────────────────────────────────────────
+
+function initHelloDemo() {
+  const canvas = document.getElementById('hello-canvas');
+  if (!canvas) return;
+  gcanvas({ canvas, bg: '#111' })
+    .scene('game')
+      .go({ x: 200, y: 125 })
+        .circle({ radius: 40, fill: '#00ff88' })
+    .start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Demo 2: Builder Chain
+// ─────────────────────────────────────────────────────────
+
+function initChainDemo() {
+  const canvas = document.getElementById('chain-canvas');
+  if (!canvas) return;
+
+  gcanvas({ canvas, bg: '#111' })
+    .scene('game')
+      .go({ x: 80, y: 125 })
+        .circle({ radius: 30, fill: '#ff6b6b' })
+      .end()
+      .go({ x: 200, y: 125 })
+        .star({ points: 5, radius: 35, fill: '#ffd93d' })
+      .end()
+      .go({ x: 320, y: 125 })
+        .rect({ width: 50, height: 50, fill: '#6bcb77' })
+    .start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Demo 3: Shape Variety
+// ─────────────────────────────────────────────────────────
+
+function initShapesDemo() {
+  const canvas = document.getElementById('shapes-canvas');
+  if (!canvas) return;
+
+  gcanvas({ canvas, bg: '#111' })
+    .scene('shapes')
+      .go({ x: 40, y: 125 }).triangle({ size: 30, fill: '#ff6b6b' }).end()
+      .go({ x: 105, y: 125 }).hexagon({ radius: 18, fill: '#c44dff' }).end()
+      .go({ x: 170, y: 125 }).diamond({ width: 28, height: 36, fill: '#4ecdc4' }).end()
+      .go({ x: 235, y: 110 }).heart({ size: 26, fill: '#ff6b9d' }).end()
+      .go({ x: 300, y: 125 }).cross({ size: 26, thickness: 6, fill: '#ffd93d' }).end()
+      .go({ x: 365, y: 125 }).ring({ innerRadius: 10, outerRadius: 18, fill: '#a8e6cf' }).end()
+      .go({ x: 430, y: 125 }).star({ points: 6, radius: 18, fill: '#ff8c42' }).end()
+      .go({ x: 485, y: 125 }).cloud({ size: 25, fill: '#dfe6e9' })
+    .start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Demo 4: Motion Presets
+// ─────────────────────────────────────────────────────────
+
+function initMotionDemo() {
+  const canvas = document.getElementById('motion-canvas');
+  if (!canvas) return;
+
+  gcanvas({ canvas, bg: '#111' })
+    .scene('motion')
+      // Pulsing circle
+      .go({ x: 100, y: 125 })
+        .circle({ radius: 30, fill: '#ff6b6b' })
+        .pulse({ min: 0.7, max: 1.3, duration: 1 })
+      .end()
+      // Oscillating star
+      .go({ x: 220, y: 125 })
+        .star({ points: 5, radius: 25, fill: '#ffd93d' })
+        .oscillate({ prop: 'y', min: -30, max: 30, duration: 2 })
+      .end()
+      // Orbiting shape
+      .go({ x: 300, y: 125 })
+        .hexagon({ radius: 20, fill: '#4ecdc4' })
+        .orbit({ radiusX: 40, radiusY: 40, duration: 3 })
+    .start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Demo 5: Sketch Mode (using gcanvas to target existing canvas)
+// Note: sketch() auto-creates a canvas, so we recreate the pattern with gcanvas
+// ─────────────────────────────────────────────────────────
+
+function initSketchDemo() {
+  const canvas = document.getElementById('sketch-canvas');
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: '#111' });
+  const scene = game.scene('default');
+
+  // Create radial pattern
+  const count = 12;
+  const radius = 80;
+  const cx = 200;
+  const cy = 125;
+
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * Math.PI * 2;
+    const x = cx + Math.cos(angle) * radius;
+    const y = cy + Math.sin(angle) * radius;
+
+    scene.go({ x, y, name: `shape_${i}` })
+      .circle({ radius: 15, fill: `hsl(${i * 30}, 70%, 60%)` });
+  }
+
+  game.on('update', (dt, ctx) => {
+    for (let i = 0; i < count; i++) {
+      const shape = ctx.refs[`shape_${i}`];
+      if (shape) {
+        shape.rotation += dt * (i % 2 === 0 ? 1 : -1);
+      }
+    }
+  });
+
+  game.start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Demo 6: Events & Interactivity
+// ─────────────────────────────────────────────────────────
+
+function initEventsDemo() {
+  const canvas = document.getElementById('events-canvas');
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: '#111' })
+    .state({ clicks: 0 });
+
+  game.scene('interactive')
+    .go({ x: 200, y: 100, name: 'clickTarget' })
+      .circle({ radius: 40, fill: '#ff6b6b' })
+      .on('click', (ctx) => {
+        // Access shared state via game.refs
+        const state = game.getState('clicks') || 0;
+        game.setState('clicks', state + 1);
+
+        // Update label text
+        const label = game.refs.label;
+        if (label && label._fluentShape) {
+          label._fluentShape.text = `Clicks: ${state + 1}`;
+        }
+
+        // Visual feedback - brief pulse
+        ctx.go.scaleX = 1.2;
+        ctx.go.scaleY = 1.2;
+        setTimeout(() => {
+          ctx.go.scaleX = 1;
+          ctx.go.scaleY = 1;
+        }, 100);
+      })
+    .end()
+    .go({ x: 200, y: 200, name: 'label' })
+      .text('Click the circle!', { fill: '#aaa', font: '14px monospace' });
+
+  game.start();
+}
+
+// ─────────────────────────────────────────────────────────
+// Initialize all demos on page load
+// ─────────────────────────────────────────────────────────
+
+window.addEventListener('load', () => {
+  initHelloDemo();
+  initChainDemo();
+  initShapesDemo();
+  initMotionDemo();
+  initSketchDemo();
+  initEventsDemo();
+});