@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/fractalworker.js

@@ -0,0 +1,93 @@
+/**
+ * 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/dist/js/gameobjects.js

@@ -0,0 +1,176 @@
+/**
+ * Gameobjects.html - Live demos for Shapes vs GameObjects documentation
+ */
+import {
+  Circle,
+  Game,
+  Group,
+  Painter,
+  Rectangle,
+  Scene,
+  ShapeGOFactory,
+  Sprite,
+} from "/gcanvas.es.min.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/dist/js/genart.js

@@ -0,0 +1,268 @@
+/**
+ * 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 "/gcanvas.es.min.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();
+});