@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/easing.js

@@ -1,477 +0,0 @@
-import {
-  Circle,
-  Easing,
-  FPSCounter,
-  Game,
-  GameObject,
-  Painter,
-  TextShape,
-  TileLayout,
-  Rectangle,
-  Tweenetik,
-  ToggleButton,
-  Tooltip,
-  Position,
-} from "../../src/index";
-
-// 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/demos/js/fluent.js

@@ -1,183 +0,0 @@
-/**
- * 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 '../../src/index.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();
-});