@guinetik/gcanvas 1.0.4 → 1.0.5

package/dist/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 "/gcanvas.es.min.js";
+import { Fractals } from "/gcanvas.es.min.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/dist/js/group.js

@@ -0,0 +1,140 @@
+import {
+  Game,
+  GameObject,
+  Group,
+  Rectangle,
+  Circle,
+  TextShape,
+  FPSCounter,
+} from "/gcanvas.es.min.js";
+
+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();
+  }
+}

package/dist/js/hyperbolic001.js

@@ -0,0 +1,310 @@
+/**
+ * Hyperbolic 001 - Wireframe Flux
+ *
+ * Inspired by hyperbolic space - a torus wireframe that breathes and
+ * deforms with noise. Click to disturb, watch it settle to equilibrium.
+ *
+ * Features:
+ * - Torus geometry with simplex noise deformation
+ * - Click to add energy - more clicks = more chaos
+ * - Settles to subtle vibration equilibrium
+ * - Drag to rotate, auto-rotates when idle
+ */
+
+import { gcanvas, Noise, Painter } from "/gcanvas.es.min.js";
+
+// Configuration
+const CONFIG = {
+  // Torus geometry
+  majorRadius: 350,
+  minorRadius: 140,
+  rows: 50,
+  cols: 30,
+
+  // Noise settings
+  noiseScale: 0.005,
+  noiseSpeed: 0.5,
+  noiseStrengthBase: 15,    // Calm equilibrium - subtle breathing
+  noiseStrengthMax: 120,    // Max when fully energized
+  
+  // Projection
+  fov: 800, // Slightly wider FOV for larger object
+  
+  // Colors
+  baseColor: { h: 280, s: 100, l: 60 },
+  bgColor: "#000000",
+};
+
+/**
+ * 3D Vector helper
+ */
+class Vec3 {
+  constructor(x, y, z) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+  }
+}
+
+/**
+ * Main Study Class
+ */
+class WireframeFlux {
+  constructor(game) {
+    this.game = game;
+    this.width = game.width;
+    this.height = game.height;
+    
+    // Mesh data
+    this.vertices = [];
+    this.projected = [];
+    this.indices = [];
+    
+    // Animation state
+    this.time = 0;
+    this.rotation = { x: 0, y: 0 };
+    this.targetRotation = { x: 0.5, y: 0.5 };
+    this.autoRotate = true;
+    
+    // Interaction state - energy decays toward equilibrium
+    this.energy = 0;
+    this.noiseStrength = CONFIG.noiseStrengthBase;
+    
+    this.initMesh();
+  }
+
+  initMesh() {
+    this.vertices = [];
+    this.indices = [];
+    
+    // Generate Torus vertices
+    for (let i = 0; i < CONFIG.rows; i++) {
+      const u = (i / CONFIG.rows) * Math.PI * 2;
+      
+      for (let j = 0; j < CONFIG.cols; j++) {
+        const v = (j / CONFIG.cols) * Math.PI * 2;
+        
+        // Torus parametric equation
+        // x = (R + r * cos(v)) * cos(u)
+        // y = (R + r * cos(v)) * sin(u)
+        // z = r * sin(v)
+        
+        const r = CONFIG.minorRadius;
+        const R = CONFIG.majorRadius;
+        
+        const x = (R + r * Math.cos(v)) * Math.cos(u);
+        const y = (R + r * Math.cos(v)) * Math.sin(u);
+        const z = r * Math.sin(v);
+        
+        this.vertices.push(new Vec3(x, y, z));
+        
+        // Generate indices for wireframe (quads)
+        const nextI = (i + 1) % CONFIG.rows;
+        const nextJ = (j + 1) % CONFIG.cols;
+        
+        const current = i * CONFIG.cols + j;
+        const right = nextI * CONFIG.cols + j;
+        const down = i * CONFIG.cols + nextJ;
+        
+        // Horizontal line
+        this.indices.push([current, right]);
+        // Vertical line
+        this.indices.push([current, down]);
+      }
+    }
+  }
+
+  update(dt) {
+    this.time += dt;
+    
+    // Update dimensions in case of resize
+    this.width = this.game.width;
+    this.height = this.game.height;
+
+    // Responsive scaling: Adjust radius based on screen size
+    const minDim = Math.min(this.width, this.height);
+    const scaleFactor = minDim / 1000; // Base scale on ~1000px screen
+    
+    // Smoothly interpolate the actual drawing scale
+    // (We'll use a local property for rendering scale to avoid rebuilding mesh)
+    this.renderScale = scaleFactor;
+
+    // Smooth rotation
+    this.rotation.x += (this.targetRotation.x - this.rotation.x) * 0.1;
+    this.rotation.y += (this.targetRotation.y - this.rotation.y) * 0.1;
+    
+    // Auto rotate
+    if (this.autoRotate) {
+      this.targetRotation.y += dt * 0.2;
+      this.targetRotation.x += dt * 0.1;
+    }
+    
+    // Decay energy smoothly toward 0
+    this.energy *= 0.95;
+    if (this.energy < 0.001) this.energy = 0;
+
+    // Interpolate noise strength: base (calm) + energy * (max - base)
+    const targetStrength = CONFIG.noiseStrengthBase + this.energy * (CONFIG.noiseStrengthMax - CONFIG.noiseStrengthBase);
+    this.noiseStrength += (targetStrength - this.noiseStrength) * 0.1;
+  }
+
+  render(ctx, width, height) {
+    const cx = width / 2;
+    const cy = height / 2;
+    
+    // Clear
+    ctx.fillStyle = CONFIG.bgColor;
+    ctx.fillRect(0, 0, width, height);
+    
+    // Pre-calculate rotation matrices
+    const cosX = Math.cos(this.rotation.x);
+    const sinX = Math.sin(this.rotation.x);
+    const cosY = Math.cos(this.rotation.y);
+    const sinY = Math.sin(this.rotation.y);
+    
+    // Transform and project vertices
+    const projectedVertices = new Array(this.vertices.length);
+    
+    for (let i = 0; i < this.vertices.length; i++) {
+      const v = this.vertices[i];
+      
+      // 1. Apply Noise Displacement
+      // We calculate noise based on the original position + time
+      const nX = v.x * CONFIG.noiseScale;
+      const nY = v.y * CONFIG.noiseScale;
+      const nZ = v.z * CONFIG.noiseScale;
+      const t = this.time * CONFIG.noiseSpeed;
+      
+      const noiseVal = Noise.simplex3(nX + t, nY + t, nZ);
+      const displacement = noiseVal * this.noiseStrength;
+      
+      // Displace along the normal (approximated by position for torus)
+      // Or just simple directional displacement for "glitch" look
+      let dx = v.x + displacement * (v.x / CONFIG.majorRadius);
+      let dy = v.y + displacement * (v.y / CONFIG.majorRadius);
+      let dz = v.z + displacement * (v.z / CONFIG.minorRadius);
+      
+      // 2. Rotate
+      // Rotate around Y
+      let x1 = dx * cosY - dz * sinY;
+      let z1 = dz * cosY + dx * sinY;
+      let y1 = dy;
+      
+      // Rotate around X
+      let y2 = y1 * cosX - z1 * sinX;
+      let z2 = z1 * cosX + y1 * sinX;
+      let x2 = x1;
+      
+      // 3. Project
+      // Apply responsive scale factor to coordinates before projection
+      const sx = x2 * (this.renderScale || 1);
+      const sy = y2 * (this.renderScale || 1);
+      const sz = z2 * (this.renderScale || 1);
+      
+      const scale = CONFIG.fov / (CONFIG.fov + sz + 400); 
+      const px = sx * scale + cx;
+      const py = sy * scale + cy;
+      
+      projectedVertices[i] = { x: px, y: py, z: sz, scale: scale };
+    }
+    
+    // Draw edges
+    ctx.lineWidth = 2 * (this.renderScale || 1); // Scale line width too
+    
+    // We can batch stroke calls by color for performance
+    // Simple depth sorting approach: draw lines based on average Z of endpoints
+    
+    for (let i = 0; i < this.indices.length; i++) {
+      const [idx1, idx2] = this.indices[i];
+      const p1 = projectedVertices[idx1];
+      const p2 = projectedVertices[idx2];
+      
+      // Simple culling
+      if (p1.z < -CONFIG.fov + 10 || p2.z < -CONFIG.fov + 10) continue;
+      
+      // Depth color
+      const avgZ = (p1.z + p2.z) / 2;
+      // Map Z (-200 to 200) to hue/lightness
+      // Close = Bright, Far = Dim
+      const depthAlpha = Math.max(0.1, Math.min(1, (300 - avgZ) / 500));
+      
+      // Color shift based on position
+      const hue = (CONFIG.baseColor.h + avgZ * 0.2 + this.time * 10) % 360;
+      
+      ctx.strokeStyle = `hsla(${hue}, ${CONFIG.baseColor.s}%, ${CONFIG.baseColor.l}%, ${depthAlpha})`;
+      
+      ctx.beginPath();
+      ctx.moveTo(p1.x, p1.y);
+      ctx.lineTo(p2.x, p2.y);
+      ctx.stroke();
+    }
+  }
+}
+
+// Initialize
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: CONFIG.bgColor, fluid: true });
+  const gameInstance = game.game;
+  
+  const flux = new WireframeFlux(gameInstance);
+
+  // Custom render loop
+  gameInstance.clear = function() {
+    flux.render(this.ctx, this.width, this.height);
+  };
+
+  game.on("update", (dt) => {
+    flux.update(dt);
+  });
+  
+  // Interaction
+  let isDragging = false;
+  let lastX = 0;
+  let lastY = 0;
+
+  gameInstance.events.on("mousedown", (e) => {
+    isDragging = true;
+    lastX = e.x;
+    lastY = e.y;
+  });
+
+  gameInstance.events.on("mouseup", () => {
+    isDragging = false;
+  });
+  
+  gameInstance.events.on("mousemove", (e) => {
+    if (isDragging) {
+      const dx = (e.x - lastX) * 0.01;
+      const dy = (e.y - lastY) * 0.01;
+      
+      flux.targetRotation.y += dx;
+      flux.targetRotation.x += dy;
+      
+      // Stop auto-rotation while dragging
+      flux.autoRotate = false;
+      
+      lastX = e.x;
+      lastY = e.y;
+    }
+  });
+
+  gameInstance.events.on("mouseup", () => {
+    isDragging = false;
+    // Resume auto-rotation after a short delay or immediately?
+    // Let's resume it with current momentum perhaps, or just standard auto
+    setTimeout(() => { flux.autoRotate = true; }, 500);
+  });
+  
+  // Click for glitch intensity
+  gameInstance.events.on("click", () => {
+    // Add energy on click
+    flux.energy = Math.min(flux.energy + 0.4, 1.0);
+    CONFIG.baseColor.h = Math.random() * 360;
+  });
+
+  game.start();
+});
+