@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/halvorsen.js

@@ -0,0 +1,405 @@
+/**
+ * Halvorsen Attractor 3D Visualization
+ *
+ * A symmetric chaotic attractor with three-fold rotational symmetry.
+ * Creates beautiful intertwined spiral structures.
+ *
+ * Uses the Attractors module for pure math functions and WebGL for
+ * high-performance line rendering.
+ */
+
+import { Game, Gesture, Screen, Attractors } from "/gcanvas.es.min.js";
+import { Camera3D } from "/gcanvas.es.min.js";
+import { WebGLLineRenderer } from "/gcanvas.es.min.js";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CONFIGURATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+const CONFIG = {
+  // Attractor settings (uses Attractors.halvorsen for equations)
+  attractor: {
+    dt: 0.004, // Integration time step
+    scale: 25, // Scale factor for display
+  },
+
+  // Particle settings
+  particles: {
+    count: 420,
+    trailLength: 280,
+    spawnRange: 1,
+  },
+
+  // Center offset - Halvorsen barycenter is around (-5,-5,-5) due to symmetry
+  // With Y/Z swap: x→screen X, z→screen Y, y→depth
+  center: {
+    x: 0,
+    y: 0,
+    z: 0,
+  },
+
+  // Camera settings
+  camera: {
+    perspective: 300,
+    rotationX: 0.615,
+    rotationY: 0.495,
+    inertia: true,
+    friction: 0.95,
+    clampX: false,
+  },
+
+  // Visual settings - cool blue/purple palette
+  visual: {
+    minHue: 320, // Pink (fast)
+    maxHue: 220, // Blue (slow)
+    maxSpeed: 40,
+    saturation: 80,
+    lightness: 55,
+    maxAlpha: 0.85,
+    hueShiftSpeed: 15,
+  },
+
+  // Glitch/blink effect
+  blink: {
+    chance: 0.02,
+    minDuration: 0.04,
+    maxDuration: 0.18,
+    intensityBoost: 1.5,
+    saturationBoost: 1.2,
+    alphaBoost: 1.3,
+  },
+
+  // Zoom settings
+  zoom: {
+    min: 0.25,
+    max: 2.5,
+    speed: 0.5,
+    easing: 0.12,
+    baseScreenSize: 600,
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// HELPER FUNCTIONS
+// ─────────────────────────────────────────────────────────────────────────────
+
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4)),
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ATTRACTOR PARTICLE
+// ─────────────────────────────────────────────────────────────────────────────
+
+class AttractorParticle {
+  constructor(stepFn, spawnRange) {
+    this.stepFn = stepFn;
+    this.position = {
+      x: (Math.random() - 0.5) * spawnRange,
+      y: (Math.random() - 0.5) * spawnRange,
+      z: (Math.random() - 0.5) * spawnRange,
+    };
+    this.trail = [];
+    this.speed = 0;
+    this.blinkTime = 0;
+    this.blinkIntensity = 0;
+  }
+
+  updateBlink(dt) {
+    const { chance, minDuration, maxDuration } = CONFIG.blink;
+
+    if (this.blinkTime > 0) {
+      this.blinkTime -= dt;
+      this.blinkIntensity = Math.max(
+        0,
+        this.blinkTime > 0
+          ? Math.sin((this.blinkTime / ((minDuration + maxDuration) * 0.5)) * Math.PI)
+          : 0
+      );
+    } else {
+      if (Math.random() < chance) {
+        this.blinkTime = minDuration + Math.random() * (maxDuration - minDuration);
+        this.blinkIntensity = 1;
+      } else {
+        this.blinkIntensity = 0;
+      }
+    }
+  }
+
+  update(dt, scale, spawnRange) {
+    const result = this.stepFn(this.position, dt);
+    this.position = result.position;
+    this.speed = result.speed;
+
+    // Small chance to respawn at random position (keeps transient "thickness")
+    if (Math.random() < 0.003) {
+      this.position = {
+        x: (Math.random() - 0.5) * spawnRange,
+        y: (Math.random() - 0.5) * spawnRange,
+        z: (Math.random() - 0.5) * spawnRange,
+      };
+      this.trail = [];
+    }
+
+    // Add to trail (centered and scaled for display)
+    // Swap Y/Z so vertical mouse drag rotates naturally
+    this.trail.unshift({
+      x: (this.position.x - CONFIG.center.x) * scale,
+      y: (this.position.z - CONFIG.center.z) * scale,  // Z becomes screen Y (vertical)
+      z: (this.position.y - CONFIG.center.y) * scale,  // Y becomes depth
+      speed: this.speed,
+    });
+
+    if (this.trail.length > CONFIG.particles.trailLength) {
+      this.trail.pop();
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DEMO CLASS
+// ─────────────────────────────────────────────────────────────────────────────
+
+class HalvorsenDemo extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "#000";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+
+    this.attractor = Attractors.halvorsen;
+    console.log(`Attractor: ${this.attractor.name}`);
+    console.log(`Equations:`, this.attractor.equations);
+
+    this.stepFn = this.attractor.createStepper();
+
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    const initialZoom = Math.min(max, Math.max(min, Screen.minDimension() / baseScreenSize));
+    this.zoom = initialZoom;
+    this.targetZoom = initialZoom;
+    this.defaultZoom = initialZoom;
+
+    this.camera = new Camera3D({
+      perspective: CONFIG.camera.perspective,
+      rotationX: CONFIG.camera.rotationX,
+      rotationY: CONFIG.camera.rotationY,
+      inertia: CONFIG.camera.inertia,
+      friction: CONFIG.camera.friction,
+      clampX: CONFIG.camera.clampX,
+    });
+    this.camera.enableMouseControl(this.canvas);
+
+    this.gesture = new Gesture(this.canvas, {
+      onZoom: (delta) => {
+        this.targetZoom *= 1 + delta * CONFIG.zoom.speed;
+      },
+      onPan: null,
+    });
+
+    this.canvas.addEventListener("dblclick", () => {
+      this.targetZoom = this.defaultZoom;
+    });
+
+    // Log camera params and barycenter on mouse release
+    this.canvas.addEventListener("mouseup", () => {
+      console.log(`Camera: rotationX: ${this.camera.rotationX.toFixed(3)}, rotationY: ${this.camera.rotationY.toFixed(3)}`);
+      let sumX = 0, sumY = 0, sumZ = 0, count = 0;
+      for (const p of this.particles) {
+        sumX += p.position.x;
+        sumY += p.position.y;
+        sumZ += p.position.z;
+        count++;
+      }
+      console.log(`Barycenter: x: ${(sumX/count).toFixed(3)}, y: ${(sumY/count).toFixed(3)}, z: ${(sumZ/count).toFixed(3)}`);
+    });
+
+    this.particles = [];
+    for (let i = 0; i < CONFIG.particles.count; i++) {
+      this.particles.push(
+        new AttractorParticle(this.stepFn, CONFIG.particles.spawnRange)
+      );
+    }
+
+    const maxSegments = CONFIG.particles.count * CONFIG.particles.trailLength;
+    this.lineRenderer = new WebGLLineRenderer(maxSegments, {
+      width: this.width,
+      height: this.height,
+      blendMode: "additive",
+    });
+
+    this.segments = [];
+
+    if (!this.lineRenderer.isAvailable()) {
+      console.warn("WebGL not available, falling back to Canvas 2D");
+      this.useWebGL = false;
+    } else {
+      this.useWebGL = true;
+      console.log(`WebGL enabled, ${maxSegments} max segments`);
+    }
+
+    this.time = 0;
+  }
+
+  onResize() {
+    if (this.lineRenderer?.isAvailable()) {
+      this.lineRenderer.resize(this.width, this.height);
+    }
+    const { min, max, baseScreenSize } = CONFIG.zoom;
+    this.defaultZoom = Math.min(max, Math.max(min, Screen.minDimension() / baseScreenSize));
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.camera.update(dt);
+    this.zoom += (this.targetZoom - this.zoom) * CONFIG.zoom.easing;
+    this.time += dt;
+
+    for (const particle of this.particles) {
+      particle.update(CONFIG.attractor.dt, CONFIG.attractor.scale, CONFIG.particles.spawnRange);
+      particle.updateBlink(dt);
+    }
+  }
+
+  collectSegments(cx, cy) {
+    const { minHue, maxHue, maxSpeed, saturation, lightness, maxAlpha, hueShiftSpeed } =
+      CONFIG.visual;
+    const { intensityBoost, saturationBoost, alphaBoost } = CONFIG.blink;
+    const hueOffset = (this.time * hueShiftSpeed) % 360;
+
+    this.segments.length = 0;
+
+    for (const particle of this.particles) {
+      if (particle.trail.length < 2) continue;
+
+      const blink = particle.blinkIntensity;
+
+      for (let i = 1; i < particle.trail.length; i++) {
+        const curr = particle.trail[i];
+        const prev = particle.trail[i - 1];
+
+        const p1 = this.camera.project(prev.x, prev.y, prev.z);
+        const p2 = this.camera.project(curr.x, curr.y, curr.z);
+
+        if (p1.scale <= 0 || p2.scale <= 0) continue;
+
+        const age = i / particle.trail.length;
+        const speedNorm = Math.min(curr.speed / maxSpeed, 1);
+        const baseHue = maxHue + speedNorm * (minHue - maxHue);
+        const hue = (baseHue + hueOffset + 360) % 360;
+
+        const sat = Math.min(100, saturation * (1 + blink * (saturationBoost - 1)));
+        const lit = Math.min(100, lightness * (1 + blink * (intensityBoost - 1)));
+        const rgb = hslToRgb(hue, sat, lit);
+        const alpha = Math.min(1, (1 - age) * maxAlpha * (1 + blink * (alphaBoost - 1)));
+
+        this.segments.push({
+          x1: cx + p1.x * this.zoom,
+          y1: cy + p1.y * this.zoom,
+          x2: cx + p2.x * this.zoom,
+          y2: cy + p2.y * this.zoom,
+          r: rgb.r,
+          g: rgb.g,
+          b: rgb.b,
+          a: alpha,
+        });
+      }
+    }
+
+    return this.segments.length;
+  }
+
+  renderCanvas2D(cx, cy) {
+    const { minHue, maxHue, maxSpeed, saturation, lightness, maxAlpha, hueShiftSpeed } =
+      CONFIG.visual;
+    const { intensityBoost, saturationBoost, alphaBoost } = CONFIG.blink;
+    const hueOffset = (this.time * hueShiftSpeed) % 360;
+
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.lineCap = "round";
+
+    for (const particle of this.particles) {
+      if (particle.trail.length < 2) continue;
+
+      const blink = particle.blinkIntensity;
+
+      for (let i = 1; i < particle.trail.length; i++) {
+        const curr = particle.trail[i];
+        const prev = particle.trail[i - 1];
+
+        const p1 = this.camera.project(prev.x, prev.y, prev.z);
+        const p2 = this.camera.project(curr.x, curr.y, curr.z);
+
+        if (p1.scale <= 0 || p2.scale <= 0) continue;
+
+        const age = i / particle.trail.length;
+        const speedNorm = Math.min(curr.speed / maxSpeed, 1);
+        const baseHue = maxHue + speedNorm * (minHue - maxHue);
+        const hue = (baseHue + hueOffset + 360) % 360;
+
+        const sat = Math.min(100, saturation * (1 + blink * (saturationBoost - 1)));
+        const lit = Math.min(100, lightness * (1 + blink * (intensityBoost - 1)));
+        const alpha = Math.min(1, (1 - age) * maxAlpha * (1 + blink * (alphaBoost - 1)));
+
+        ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${lit}%, ${alpha})`;
+        ctx.lineWidth = 1;
+
+        ctx.beginPath();
+        ctx.moveTo(cx + p1.x * this.zoom, cy + p1.y * this.zoom);
+        ctx.lineTo(cx + p2.x * this.zoom, cy + p2.y * this.zoom);
+        ctx.stroke();
+      }
+    }
+
+    ctx.restore();
+  }
+
+  render() {
+    super.render();
+    if (!this.particles) return;
+
+    const cx = this.width / 2;
+    const cy = this.height / 2;
+
+    if (this.useWebGL && this.lineRenderer.isAvailable()) {
+      const segmentCount = this.collectSegments(cx, cy);
+      if (segmentCount > 0) {
+        this.lineRenderer.clear();
+        this.lineRenderer.updateLines(this.segments);
+        this.lineRenderer.render(segmentCount);
+        this.lineRenderer.compositeOnto(this.ctx, 0, 0);
+      }
+    } else {
+      this.renderCanvas2D(cx, cy);
+    }
+  }
+
+  destroy() {
+    this.gesture?.destroy();
+    this.lineRenderer?.destroy();
+    super.destroy?.();
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// INITIALIZATION
+// ─────────────────────────────────────────────────────────────────────────────
+
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const demo = new HalvorsenDemo(canvas);
+  demo.start();
+});

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();
+});
+