@guinetik/gcanvas 1.0.0

package/demos/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/demos/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 '../../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();
+});

package/demos/js/gendream.js

@@ -0,0 +1,209 @@
+/**
+ * Fractal Plasma - Generative Art Demo
+ *
+ * Animated plasma effect using Fractals.applyColorScheme()
+ * for trippy color palettes. Fast single-image rendering.
+ */
+
+import { Game, ImageGo, Painter } from '../../src/index.js';
+import { Fractals } from '../../src/math/fractal.js';
+
+class PlasmaDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = '#000';
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    // Render at moderate res for balance of quality and performance
+    this.plasmaWidth = 512;
+    this.plasmaHeight = 512;
+
+    // Create plasma data buffer
+    this.plasmaData = new Uint8Array(this.plasmaWidth * this.plasmaHeight);
+
+    // Create ImageData for rendering
+    this.imageData = Painter.img.createImageData(this.plasmaWidth, this.plasmaHeight);
+
+    // Create ImageGo to display (fullscreen from top-left corner)
+    this.plasmaImage = new ImageGo(this, this.imageData, {
+      x: 0,
+      y: 0,
+      width: this.width,
+      height: this.height,
+      anchor: 'top-left',
+    });
+    this.pipeline.add(this.plasmaImage);
+
+    // Animation state
+    this.baseTime = 0;  // Steady clock
+    this.time = 0;      // Modulated time for fluid speed
+    this.colorSchemeIndex = 0;
+    // Only use schemes that animate well with hueShift
+    this.colorSchemes = ['electric', 'rainbow', 'historic', 'psychedelic', 'neon'];
+    this.currentScheme = this.colorSchemes[0];
+    this.schemeTime = 0;
+
+
+    // HSL to RGB helper (needed for some color schemes)
+    this.hslToRgb = (h, s, l) => {
+      h /= 360;
+      const a = s * Math.min(l, 1 - l);
+      const f = (n) => {
+        const k = (n + h * 12) % 12;
+        return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      };
+      return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+    };
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    this.baseTime += dt;
+    this.schemeTime += dt;
+
+    // Fluid speed modulation - breathing effect (slow -> fast -> slow)
+    // Speed varies from 0.3x to 1.7x in smooth waves
+    const speedMod = 1 + Math.sin(this.baseTime * 0.4) * 0.7;
+    this.time += dt * speedMod;
+
+    // Cycle color schemes every 5 seconds
+    if (this.schemeTime > 5) {
+      this.schemeTime = 0;
+      this.colorSchemeIndex = (this.colorSchemeIndex + 1) % this.colorSchemes.length;
+      this.currentScheme = this.colorSchemes[this.colorSchemeIndex];
+    }
+
+    // Generate animated plasma
+    this.generatePlasma();
+
+    // Apply color scheme (use custom for trippy ones, library for others)
+    if (this.currentScheme === 'psychedelic' || this.currentScheme === 'neon') {
+      this.applyCustomScheme(this.currentScheme, this.time * 50);
+    } else {
+      Fractals.applyColorScheme(
+        this.plasmaData,
+        this.imageData,
+        this.currentScheme,
+        256,  // iterations (for normalization)
+        this.time * 50,  // hue shift for animation
+        this.hslToRgb
+      );
+    }
+
+    // Update the image
+    this.plasmaImage.shape.bitmap = this.imageData;
+
+    // Scale to fit screen (fullscreen from top-left)
+    this.plasmaImage.x = 0;
+    this.plasmaImage.y = 0;
+    this.plasmaImage.width = this.width;
+    this.plasmaImage.height = this.height;
+  }
+
+  applyCustomScheme(scheme, hueShift) {
+    const data = this.imageData.data;
+
+    for (let i = 0; i < this.plasmaData.length; i++) {
+      const v = this.plasmaData[i];
+      const idx = i * 4;
+
+      if (scheme === 'psychedelic') {
+        // Multi-frequency color cycling for maximum trippy effect
+        const h1 = (v * 2 + hueShift) % 360;
+        const h2 = (v * 3 + hueShift * 1.5) % 360;
+        const h3 = (v * 5 + hueShift * 0.7) % 360;
+
+        // Blend multiple hues
+        const [r1, g1, b1] = this.hslToRgb(h1, 1, 0.5);
+        const [r2, g2, b2] = this.hslToRgb(h2, 0.8, 0.6);
+        const [r3, g3, b3] = this.hslToRgb(h3, 0.9, 0.4);
+
+        // Mix based on value bands
+        const blend = Math.sin(v * 0.05 + hueShift * 0.01) * 0.5 + 0.5;
+        data[idx] = Math.floor(r1 * blend + r2 * (1 - blend));
+        data[idx + 1] = Math.floor(g1 * (1 - blend) + g3 * blend);
+        data[idx + 2] = Math.floor(b2 * blend + b3 * (1 - blend));
+      } else if (scheme === 'neon') {
+        // Bright neon colors on dark background
+        const phase = (v + hueShift) % 256;
+        const intensity = Math.sin(v * 0.1) * 0.5 + 0.5;
+
+        // Neon pink, cyan, green cycling
+        if (phase < 85) {
+          const t = phase / 85;
+          data[idx] = Math.floor(255 * intensity);  // Pink/Magenta
+          data[idx + 1] = Math.floor(50 * t * intensity);
+          data[idx + 2] = Math.floor(255 * (1 - t * 0.5) * intensity);
+        } else if (phase < 170) {
+          const t = (phase - 85) / 85;
+          data[idx] = Math.floor(50 * (1 - t) * intensity);
+          data[idx + 1] = Math.floor(255 * intensity);  // Cyan
+          data[idx + 2] = Math.floor(255 * intensity);
+        } else {
+          const t = (phase - 170) / 86;
+          data[idx] = Math.floor(50 * t * intensity);
+          data[idx + 1] = Math.floor(255 * (1 - t * 0.5) * intensity);  // Green
+          data[idx + 2] = Math.floor(50 * intensity);
+        }
+      }
+      data[idx + 3] = 255;
+    }
+  }
+
+  generatePlasma() {
+    const w = this.plasmaWidth;
+    const h = this.plasmaHeight;
+    const t = this.time;
+
+    // Multiple overlapping sine waves create plasma effect
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        // Normalized coordinates
+        const nx = x / w;
+        const ny = y / h;
+
+        // Classic plasma formula with multiple sine waves
+        let value = 0;
+
+        // Wave 1: horizontal
+        value += Math.sin(nx * 10 + t * 2);
+
+        // Wave 2: vertical
+        value += Math.sin(ny * 10 + t * 1.5);
+
+        // Wave 3: diagonal
+        value += Math.sin((nx + ny) * 10 + t);
+
+        // Wave 4: radial from center
+        const cx = nx - 0.5;
+        const cy = ny - 0.5;
+        const dist = Math.sqrt(cx * cx + cy * cy);
+        value += Math.sin(dist * 20 - t * 3);
+
+        // Wave 5: spiral
+        const angle = Math.atan2(cy, cx);
+        value += Math.sin(angle * 5 + dist * 15 - t * 2);
+
+        // Wave 6: interference pattern
+        value += Math.sin(nx * 15 * Math.sin(t * 0.5) + ny * 15 * Math.cos(t * 0.5));
+
+        // Normalize to 0-255 range
+        // value is roughly -6 to +6, normalize to 0-255
+        const normalized = Math.floor(((value + 6) / 12) * 255);
+
+        this.plasmaData[y * w + x] = Math.max(0, Math.min(255, normalized));
+      }
+    }
+  }
+}
+
+window.addEventListener('load', () => {
+  const canvas = document.getElementById('game');
+  const demo = new PlasmaDemo(canvas);
+  demo.start();
+});

package/demos/js/group.js

@@ -0,0 +1,140 @@
+import {
+  Game,
+  GameObject,
+  Group,
+  Rectangle,
+  Circle,
+  TextShape,
+  FPSCounter,
+} from "../../src/index";
+
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.enableFluidSize();
+    this.backgroundColor = "black";
+  }
+
+  update(dt) {
+    super.update(dt);
+    // Use transform API for positioning
+    this.groupDemo.transform.position(this.width / 2, this.height / 2);
+    this.pipeline.update(dt);
+  }
+
+  init() {
+    super.init();
+    this.groupDemo = new GroupDemo(this);
+    this.pipeline.add(this.groupDemo);
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+  }
+}
+
+/**
+ * GroupDemo
+ *
+ * Demonstrates the Transform API with groups:
+ *  - Group-wide rotation & scaling using transform.rotation() and transform.scale()
+ *  - Child positioning using transform.position()
+ *  - Batch operations using forEachTransform()
+ *  - Circles arranged radially, color-shifting via HSL
+ */
+export class GroupDemo extends GameObject {
+  constructor(game) {
+    super(game);
+    // Create a Group and set dimensions using Transform API
+    this.group = new Group({ debug: true });
+    this.group.transform.size(450, 450);
+
+    // 1) A central rectangle
+    const centerRect = new Rectangle({
+      width: 145,
+      height: 60,
+      color: "#222",
+      debug: true,
+    });
+    this.group.add(centerRect);
+
+    // 2) Some text in the middle
+    const centerText = new TextShape("Transform API Demo!", {
+      font: "18px sans-serif",
+      color: "#FFF",
+      align: "center",
+      baseline: "middle",
+      opacity: 0.5,
+    });
+    this.group.add(centerText);
+
+    // 3) Create a radial pattern of circles around the origin
+    this.circles = [];
+    this.circleCount = 20;
+    const circleRadius = 200;
+
+    for (let i = 0; i < this.circleCount; i++) {
+      const angle = (Math.PI * 2 * i) / this.circleCount;
+      const x = Math.cos(angle) * circleRadius;
+      const y = Math.sin(angle) * circleRadius;
+
+      const circle = new Circle(20, {
+        color: "#ff0",
+        stroke: "#FFF",
+        lineWidth: 2,
+        visible: true,
+      });
+
+      // Use Transform API to position the circle
+      circle.transform.position(x, y);
+
+      this.circles.push(circle);
+      this.group.add(circle);
+    }
+
+    // Initialize group transforms using the Transform API
+    this.group.transform
+      .rotation(0)
+      .scale(1);
+
+    this.elapsed = 0;
+  }
+
+  /**
+   * update(dt) - Animate using the Transform API:
+   *  1) Group rotation & scale using transform.rotation() and transform.scale()
+   *  2) Each circle's color via forEachTransform pattern
+   *  3) Circle visibility cycling
+   * @param {number} dt - Delta time in seconds.
+   */
+  update(dt) {
+    super.update(dt);
+    this.elapsed += dt;
+
+    // 1) Animate group using Transform API (fluent chaining)
+    const pulse = 0.5 * Math.sin(this.elapsed * 2);
+    this.group.transform
+      .rotation(this.elapsed * 24)
+      .scale(1 + pulse);
+
+    // 2) Animate each circle's color & visibility
+    const cycleSpeed = 0.1;
+    const flashIndex = Math.floor(this.elapsed / cycleSpeed) % this.circleCount;
+
+    this.circles.forEach((circle, i) => {
+      // Animate color
+      const hue = (this.elapsed * 50 + i * 40) % 360;
+      circle.color = `hsl(${hue}, 90%, 60%)`;
+      // One circle is invisible; all others remain visible
+      circle.visible = i !== flashIndex;
+    });
+
+    this.group.update(dt);
+  }
+
+  draw() {
+    this.logger.log("GroupDemo: render");
+    this.group.render();
+  }
+}