@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/fractalworker.js

@@ -1,93 +0,0 @@
-/**
- * Worker for the fractal demo.
- */
-
-/**
- * Handle messages from the main thread.
- * @param {MessageEvent} e - The message event.
- */
-self.onmessage = function (e) {
-  if (e.data.taskName === "generateFractal") {
-    //console.time("generateFractal");
-    const { width, height } = e.data.params;
-    //console.log("fractalworker", e.data.params);
-    // Generate the raw fractal data
-    const rawData = generateFractalData(width, height, e.data.params.fractalFunction, e.data.params.args);
-    //console.log("rawData",  e.data.params.args);
-    // Create and fill the image data
-    const imageData = new ImageData(width, height);
-    // Apply color scheme
-    const coloredData = applyColorScheme(rawData, imageData, e.data.params.colorFunction, e.data.params.colorArgs);
-    //console.log("coloredData", coloredData);
-    // Send back the completed image data using the format TaskManager expects
-    self.postMessage(
-      {
-        taskId: e.data.taskId, // Include the taskId
-        status: 'complete',    // Use 'complete' status
-        result: {              // Put the data inside 'result'
-          image: coloredData,
-          settings: e.data.params
-        }
-      },
-      [coloredData.data.buffer]
-    );
-    //console.timeEnd("generateFractal");
-  }
-};
-
-/**
- * Generate the raw fractal data.
- * @param {number} width - The width of the fractal.
- * @param {number} height - The height of the fractal.
- * @param {string} fractalFunction - The fractal function.
- * @param {Array} fractalArgs - The arguments for the fractal function.
- * @returns {Array} The raw fractal data.
- */
-function generateFractalData(width, height, fractalFunction, fractalArgs) {
-  try {
-    // For class methods, we need to convert to a standalone function
-    // This extracts just the function part without the name
-    const functionStr = fractalFunction.replace(/^[^(]+/, "function");
-    // Create the function from the string
-    const f = new Function("return (" + functionStr + ")")();
-    // Execute the function with our parameters
-    return f(width, height, ...fractalArgs);
-  } catch (error) {
-    console.error("Error evaluating fractal function:", error);
-    console.log("Function string:", fractalFunction);
-    throw error;
-  }
-}
-
-function applyColorScheme(rawData, imageData, colorFunction, colorArgs) {
-  try {
-    const functionStr = colorFunction.replace(/^[^(]+/, "function");
-
-    // Create the function from the string
-    const f = new Function("return (" + functionStr + ")")();
-    // Execute the function with our parameters
-    return f(rawData, imageData, ...colorArgs, hslToRgb);
-  } catch (error) {
-    console.error("Error evaluating color function:", error);
-    console.log("Function string:", colorFunction);
-    throw error;
-  }
-}
-
-// Copied from Painter.colors for convenience.
-function hslToRgb(h, s, l) {
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const hPrime = h / 60;
-  const x = c * (1 - Math.abs((hPrime % 2) - 1));
-  let [r, g, b] = [0, 0, 0];
-
-  if (hPrime >= 0 && hPrime < 1) [r, g, b] = [c, x, 0];
-  else if (hPrime >= 1 && hPrime < 2) [r, g, b] = [x, c, 0];
-  else if (hPrime >= 2 && hPrime < 3) [r, g, b] = [0, c, x];
-  else if (hPrime >= 3 && hPrime < 4) [r, g, b] = [0, x, c];
-  else if (hPrime >= 4 && hPrime < 5) [r, g, b] = [x, 0, c];
-  else if (hPrime >= 5 && hPrime < 6) [r, g, b] = [c, 0, x];
-
-  const m = l - c / 2;
-  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
-}

package/demos/js/gameobjects.js

@@ -1,176 +0,0 @@
-/**
- * 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/genart.js

@@ -1,268 +0,0 @@
-/**
- * Hypnotic Mandala - Generative Art Demo
- *
- * A trippy, psychedelic mandala using the gcanvas fluent API.
- * Features:
- * - Concentric rings of shapes rotating at different speeds
- * - HSL color cycling based on time and position
- * - Pulsing and breathing effects
- * - Responsive scaling for mobile
- * - 3D rotation with inertia (drag to rotate!)
- */
-
-import { gcanvas, Camera3D } from '../../src/index.js';
-
-// Configuration - base values at 800px reference size
-const CONFIG = {
-  referenceSize: 800,      // Design reference size
-  minScale: 0.4,           // Minimum scale on small screens
-  rings: 6,
-  shapesPerRing: [8, 12, 16, 20, 24, 32],
-  baseRadius: 50,
-  ringSpacing: 45,
-  rotationSpeeds: [0.8, -0.6, 0.5, -0.4, 0.3, -0.2],
-  pulseAmplitudes: [0.12, 0.1, 0.08, 0.06, 0.05, 0.04],
-  colorOffsets: [0, 60, 120, 180, 240, 300],
-};
-
-// Calculate scale factor based on screen size
-function getScaleFactor(width, height) {
-  const minDimension = Math.min(width, height);
-  const scale = minDimension / CONFIG.referenceSize;
-  return Math.max(CONFIG.minScale, Math.min(1.2, scale));
-}
-
-// Shape factory functions
-const shapeTypes = ['circle', 'star', 'triangle', 'hexagon', 'diamond', 'ring'];
-
-function getShapeConfig(ringIndex, shapeIndex) {
-  const type = shapeTypes[ringIndex % shapeTypes.length];
-  const baseSize = 12 - ringIndex;
-
-  switch (type) {
-    case 'circle':
-      return { method: 'circle', opts: { radius: baseSize } };
-    case 'star':
-      return { method: 'star', opts: { radius: baseSize, points: 5 + (ringIndex % 3), inset: 0.5 } };
-    case 'triangle':
-      return { method: 'triangle', opts: { size: baseSize * 1.8 } };
-    case 'hexagon':
-      return { method: 'hexagon', opts: { radius: baseSize } };
-    case 'diamond':
-      return { method: 'diamond', opts: { width: baseSize, height: baseSize * 1.5 } };
-    case 'ring':
-      return { method: 'ring', opts: { innerRadius: baseSize * 0.5, outerRadius: baseSize } };
-    default:
-      return { method: 'circle', opts: { radius: baseSize } };
-  }
-}
-
-// Initialize the mandala
-window.addEventListener('load', () => {
-  const canvas = document.getElementById('game');
-  if (!canvas) return;
-
-  const game = gcanvas({ canvas, bg: '#0a0a0f', fluid: true });
-  const scene = game.scene('mandala');
-
-  // Create 3D camera with inertia for interactive rotation
-  const camera = new Camera3D({
-    rotationX: 0,            // Start flat
-    rotationY: 0,
-    perspective: 600,
-    sensitivity: 0.008,
-    inertia: true,
-    friction: 0.96,          // Higher = more drift before stopping
-    velocityScale: 2.5,      // More momentum on fast flicks
-    autoRotate: false,       // No auto-rotation - stays where user leaves it
-    clampX: false,           // Free rotation in all directions
-  });
-
-  // Enable mouse/touch drag to rotate
-  camera.enableMouseControl(canvas);
-
-  // Store shape references for animation
-  const allShapes = [];
-
-  // Create center piece - a pulsing core (position will be updated dynamically)
-  scene.go({ x: 0, y: 0, name: 'core' })
-    .star({ radius: 25, points: 8, inset: 0.6, fill: '#fff' });
-  allShapes.push({ name: 'core', ring: -1, index: 0 });
-
-  // Create concentric rings
-  for (let ring = 0; ring < CONFIG.rings; ring++) {
-    const shapesInRing = CONFIG.shapesPerRing[ring];
-    const ringRadius = CONFIG.baseRadius + ring * CONFIG.ringSpacing;
-
-    for (let i = 0; i < shapesInRing; i++) {
-      const angle = (i / shapesInRing) * Math.PI * 2;
-      const name = `r${ring}_s${i}`;
-
-      const shapeConfig = getShapeConfig(ring, i);
-      const goBuilder = scene.go({ x: 0, y: 0, name });
-
-      // Apply the shape with initial color
-      const hue = (ring * 60 + i * (360 / shapesInRing)) % 360;
-      goBuilder[shapeConfig.method]({
-        ...shapeConfig.opts,
-        fill: `hsl(${hue}, 80%, 60%)`
-      });
-
-      allShapes.push({
-        name,
-        ring,
-        index: i,
-        baseAngle: angle,
-        ringRadius,
-        shapeConfig
-      });
-    }
-  }
-
-  // Create outer particle ring
-  const particleCount = 48;
-  const particleRadius = CONFIG.baseRadius + CONFIG.rings * CONFIG.ringSpacing + 40;
-
-  for (let i = 0; i < particleCount; i++) {
-    const angle = (i / particleCount) * Math.PI * 2;
-    const name = `particle_${i}`;
-
-    scene.go({ x: 0, y: 0, name })
-      .circle({ radius: 3, fill: '#fff' });
-
-    allShapes.push({
-      name,
-      ring: CONFIG.rings,
-      index: i,
-      baseAngle: angle,
-      ringRadius: particleRadius,
-      isParticle: true
-    });
-  }
-
-  // Animation update loop
-  let time = 0;
-
-  // Get reference to underlying game for live dimensions
-  const gameInstance = game.game;
-
-  // Override clear for trail effect (like particles.js)
-  gameInstance.clear = function() {
-    this.ctx.fillStyle = 'rgba(10, 10, 15, 0.15)';
-    this.ctx.fillRect(0, 0, this.width, this.height);
-  };
-
-  game.on('update', (dt, ctx) => {
-    time += dt;
-
-    // Update camera (handles inertia and auto-rotation)
-    camera.update(dt);
-
-    // Get dynamic center and scale based on LIVE canvas size
-    const cx = gameInstance.width / 2;
-    const cy = gameInstance.height / 2;
-    const scaleFactor = getScaleFactor(gameInstance.width, gameInstance.height);
-
-    // Animate core - project through 3D camera
-    const core = ctx.refs.core;
-    if (core) {
-      // Core at the tip of the cone (closest), with breathing pulse
-      const coreZ = Math.sin(time * 2) * 40 - 150; // Oscillates at the front tip
-      const projected = camera.project(0, 0, coreZ);
-      core.x = cx + projected.x;
-      core.y = cy + projected.y;
-      const coreScale = (1 + Math.sin(time * 4) * 0.25) * scaleFactor * projected.scale;
-      core.scaleX = coreScale;
-      core.scaleY = coreScale;
-      core.rotation = time * 1.5;
-
-      // Update core color
-      if (core._fluentShape) {
-        const coreHue = (time * 100) % 360;
-        core._fluentShape.color = `hsl(${coreHue}, 100%, 70%)`;
-      }
-    }
-
-    // Animate each ring with 3D projection
-    for (const shape of allShapes) {
-      if (shape.ring < 0) continue; // Skip core
-
-      const go = ctx.refs[shape.name];
-      if (!go) continue;
-
-      if (shape.isParticle) {
-        // Particle animation - orbit and twinkle
-        const particleSpeed = 0.15;
-        const newAngle = shape.baseAngle + time * particleSpeed;
-        const wobble = Math.sin(time * 2 + shape.index * 0.3) * 8 * scaleFactor;
-        const scaledRadius = shape.ringRadius * scaleFactor;
-
-        // Calculate 2D position on the mandala plane
-        const localX = Math.cos(newAngle) * (scaledRadius + wobble);
-        const localY = Math.sin(newAngle) * (scaledRadius + wobble);
-
-        // Project through 3D camera (particles at base of cone, furthest back)
-        const projected = camera.project(localX, localY, 300);
-        go.x = cx + projected.x;
-        go.y = cy + projected.y;
-
-        // Scale particle size with perspective
-        go.scaleX = scaleFactor * projected.scale;
-        go.scaleY = scaleFactor * projected.scale;
-
-        // Twinkle effect
-        const alpha = 0.4 + Math.abs(Math.sin(time * 8 + shape.index * 0.3)) * 0.6;
-        if (go._fluentShape) {
-          go._fluentShape.opacity = alpha;
-        }
-      } else {
-        // Ring shape animation
-        const ringIndex = shape.ring;
-        const rotationSpeed = CONFIG.rotationSpeeds[ringIndex];
-        const pulseAmp = CONFIG.pulseAmplitudes[ringIndex];
-
-        // Rotate around center - smooth continuous rotation
-        const newAngle = shape.baseAngle + time * rotationSpeed;
-
-        // Gentle breathing effect on radius (scaled)
-        const breathPhase = time * 0.8 + ringIndex * 0.5;
-        const scaledRadius = shape.ringRadius * scaleFactor;
-        const breathRadius = scaledRadius + Math.sin(breathPhase) * 8 * scaleFactor;
-
-        // Calculate 2D position on the mandala plane
-        const localX = Math.cos(newAngle) * breathRadius;
-        const localY = Math.sin(newAngle) * breathRadius;
-
-        // Project through 3D camera - CONE shape: inner rings close, outer rings far
-        const ringDepth = ringIndex * 60 - 50; // Ring 0 at -50, Ring 5 at 250
-        const projected = camera.project(localX, localY, ringDepth);
-        go.x = cx + projected.x;
-        go.y = cy + projected.y;
-
-        // Smooth pulse scale with perspective
-        const pulsePhase = time * 2 + ringIndex * 0.3;
-        const scale = (1 + Math.sin(pulsePhase) * pulseAmp) * scaleFactor * projected.scale;
-        go.scaleX = scale;
-        go.scaleY = scale;
-
-        // Rotate individual shapes - smooth spin
-        go.rotation = time * (ringIndex % 2 === 0 ? 2 : -2);
-
-        // Color cycling - psychedelic HSL animation
-        if (go._fluentShape) {
-          const baseHue = CONFIG.colorOffsets[ringIndex];
-          const hueShift = time * 60; // Faster color rotation
-          const positionHue = shape.index * (360 / CONFIG.shapesPerRing[ringIndex]);
-
-          const finalHue = (baseHue + hueShift + positionHue) % 360;
-          const saturation = 85;
-          const lightness = 55 + Math.sin(time * 3 + ringIndex) * 10;
-
-          go._fluentShape.color = `hsl(${finalHue}, ${saturation}%, ${lightness}%)`;
-        }
-      }
-    }
-  });
-
-  game.start();
-});