@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/study005.js

@@ -0,0 +1,209 @@
+/**
+ * Study 005 - Hex Flow
+ *
+ * A hexagonal grid that breathes, warps, and flows with
+ * wave interference patterns. Hypnotic honeycomb energy.
+ *
+ * Features:
+ * - Hexagonal tiling that fills the screen
+ * - Multi-wave interference displacement
+ * - Color cycling based on position + time
+ * - Rotation and scale pulsing per cell
+ * - Click to shift color palette
+ */
+
+import { gcanvas } from "/gcanvas.es.min.js";
+
+const CONFIG = {
+  // Hex grid
+  hexSize: 35,
+
+  // Wave settings
+  waveSpeed: 2.0,
+  waveFreq: 0.015,
+  waveAmp: 12,
+
+  // Rotation
+  rotationSpeed: 0.8,
+  rotationAmp: 0.4,
+
+  // Scale pulsing
+  scaleAmp: 0.3,
+
+  // Color
+  hueSpeed: 30,
+  hueSpread: 120,
+  saturation: 85,
+  lightness: 55,
+
+  // Style
+  strokeWidth: 2,
+  fillAlpha: 0.7,
+
+  bgColor: "#0a0a12",
+};
+
+const HEX_ANGLE = Math.PI / 3;
+const SQRT3 = Math.sqrt(3);
+
+/**
+ * Draw a single hexagon with rotation
+ */
+function drawHex(ctx, x, y, size, rotation, fillColor, strokeColor) {
+  if (size < 2) return;
+
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotation);
+
+  ctx.beginPath();
+  for (let i = 0; i < 6; i++) {
+    const angle = HEX_ANGLE * i - Math.PI / 6;
+    const hx = size * Math.cos(angle);
+    const hy = size * Math.sin(angle);
+    if (i === 0) {
+      ctx.moveTo(hx, hy);
+    } else {
+      ctx.lineTo(hx, hy);
+    }
+  }
+  ctx.closePath();
+
+  ctx.fillStyle = fillColor;
+  ctx.fill();
+
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = CONFIG.strokeWidth;
+  ctx.stroke();
+
+  ctx.restore();
+}
+
+/**
+ * Convert axial hex coords to pixel
+ */
+function hexToPixel(q, r, size) {
+  const x = size * (3/2 * q);
+  const y = size * (SQRT3/2 * q + SQRT3 * r);
+  return { x, y };
+}
+
+// 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;
+
+  let hexGrid = [];
+  let time = Math.random() * 100;
+  let hueOffset = 0;
+
+  function buildGrid(w, h) {
+    hexGrid = [];
+    const size = CONFIG.hexSize;
+
+    // Use diagonal to ensure full coverage during any transform
+    const diagonal = Math.sqrt(w * w + h * h);
+    const cols = Math.ceil(diagonal / (size * 1.5)) + 4;
+    const rows = Math.ceil(diagonal / (size * SQRT3)) + 4;
+
+    const startQ = -Math.floor(cols / 2);
+    const startR = -Math.floor(rows / 2);
+
+    for (let q = startQ; q < startQ + cols; q++) {
+      for (let r = startR; r < startR + rows; r++) {
+        const pos = hexToPixel(q, r, size);
+        hexGrid.push({
+          q, r,
+          baseX: pos.x,
+          baseY: pos.y,
+        });
+      }
+    }
+  }
+
+  buildGrid(gameInstance.width, gameInstance.height);
+
+  window.addEventListener("resize", () => {
+    buildGrid(gameInstance.width, gameInstance.height);
+  });
+
+  gameInstance.clear = function () {
+    const ctx = this.ctx;
+    const w = this.width;
+    const h = this.height;
+    const cx = w / 2;
+    const cy = h / 2;
+
+    // Clear
+    ctx.fillStyle = CONFIG.bgColor;
+    ctx.fillRect(0, 0, w, h);
+
+    const t = time;
+
+    for (const hex of hexGrid) {
+      // World position
+      const wx = hex.baseX + cx;
+      const wy = hex.baseY + cy;
+
+      // Distance from center for radial effects
+      const dx = hex.baseX;
+      const dy = hex.baseY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const angle = Math.atan2(dy, dx);
+
+      // Multi-wave displacement
+      const wave1 = Math.sin(dist * CONFIG.waveFreq - t * CONFIG.waveSpeed);
+      const wave2 = Math.sin(dist * CONFIG.waveFreq * 0.7 + t * CONFIG.waveSpeed * 0.5 + angle * 3);
+      const wave3 = Math.cos(angle * 6 - t * 1.5) * Math.sin(dist * 0.02);
+
+      const combinedWave = (wave1 + wave2 * 0.6 + wave3 * 0.4) / 2;
+
+      // Displacement
+      const displaceX = Math.cos(angle) * combinedWave * CONFIG.waveAmp;
+      const displaceY = Math.sin(angle) * combinedWave * CONFIG.waveAmp;
+
+      const finalX = wx + displaceX;
+      const finalY = wy + displaceY;
+
+      // Scale pulsing
+      const scalePulse = 1 + combinedWave * CONFIG.scaleAmp;
+      const size = CONFIG.hexSize * scalePulse;
+
+      // Rotation
+      const rotation = combinedWave * CONFIG.rotationAmp + t * 0.1;
+
+      // Color based on position + time
+      const hue = (hueOffset + dist * 0.3 + angle * 20 + t * CONFIG.hueSpeed) % 360;
+      const sat = CONFIG.saturation + combinedWave * 15;
+      const light = CONFIG.lightness + combinedWave * 20;
+
+      const fillColor = `hsla(${hue}, ${sat}%, ${light}%, ${CONFIG.fillAlpha})`;
+      const strokeColor = `hsla(${(hue + 30) % 360}, ${sat}%, ${Math.min(light + 20, 80)}%, 0.9)`;
+
+      drawHex(ctx, finalX, finalY, size * 0.9, rotation, fillColor, strokeColor);
+    }
+
+    // Draw center glow
+    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, 150);
+    gradient.addColorStop(0, `hsla(${(hueOffset + t * 50) % 360}, 100%, 70%, 0.15)`);
+    gradient.addColorStop(1, "transparent");
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(cx, cy, 150, 0, Math.PI * 2);
+    ctx.fill();
+  };
+
+  game.on("update", (dt) => {
+    time += dt;
+  });
+
+  // Click to shift palette
+  gameInstance.events.on("click", () => {
+    hueOffset = (hueOffset + 60) % 360;
+  });
+
+  game.start();
+});

package/dist/js/study006.js

@@ -0,0 +1,194 @@
+/**
+ * Study 006 - Psychedelic Drop
+ *
+ * A grid of particles that reacts to a "drop" in the center, creating
+ * psychedelic ripples and interference patterns.
+ *
+ * Features:
+ * - Grid-based particle system
+ * - Wave propagation math (sine waves based on distance)
+ * - Dynamic color cycling (HSL)
+ * - Mouse interaction to move the "drop" source
+ */
+
+import { gcanvas } from "/gcanvas.es.min.js";
+
+// Configuration
+const CONFIG = {
+  // Grid settings
+  spacing: 20,
+  baseSize: 4,
+  
+  // Wave settings
+  waveSpeed: 3.0,
+  waveFreq: 0.05,
+  amplitude: 15,
+  
+  // Color settings
+  colorSpeed: 50,
+  baseHue: 0,
+  hueRange: 180,
+  saturation: 80,
+  lightness: 60,
+  
+  // Interaction
+  dropDecay: 0.95,
+  
+  // Background
+  bgColor: "#050505",
+};
+
+/**
+ * A single particle in the grid
+ */
+class DropParticle {
+  constructor(x, y, col, row) {
+    this.x = x;
+    this.y = y;
+    this.baseX = x;
+    this.baseY = y;
+    this.col = col;
+    this.row = row;
+    this.size = CONFIG.baseSize;
+    this.hue = 0;
+  }
+
+  update(dt, time, dropX, dropY) {
+    // Calculate distance from the "drop" point
+    const dx = this.baseX - dropX;
+    const dy = this.baseY - dropY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    // Calculate wave effect
+    // sin(distance * frequency - time * speed)
+    const angle = dist * CONFIG.waveFreq - time * CONFIG.waveSpeed;
+    const wave = Math.sin(angle);
+    
+    // Secondary interference wave
+    const wave2 = Math.cos(angle * 0.5 + time);
+
+    // Displacement
+    const displacement = wave * CONFIG.amplitude;
+    const displacement2 = wave2 * (CONFIG.amplitude * 0.5);
+
+    // this.x = this.baseX + (dx / dist) * displacement; // Radial displacement
+    // this.y = this.baseY + (dy / dist) * displacement;
+    
+    // Vertical/Z-like displacement simulated by size and color
+    this.size = CONFIG.baseSize + (wave + 1) * 3 + (wave2 + 1);
+
+    // Color calculation
+    // Base hue + wave offset + time cycling
+    this.hue = (CONFIG.baseHue + dist * 0.5 + time * CONFIG.colorSpeed) % 360;
+    
+    // Opacity based on wave peaks
+    this.alpha = 0.3 + (wave + 1) * 0.35;
+  }
+
+  render(ctx) {
+    ctx.fillStyle = `hsla(${this.hue}, ${CONFIG.saturation}%, ${CONFIG.lightness}%, ${this.alpha})`;
+    
+    // Draw circle
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // Optional: Draw a small connection line to neighbors if close enough (too expensive for many particles)
+  }
+}
+
+// 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;
+
+  let particles = [];
+  let dropX = 0;
+  let dropY = 0;
+  let time = 0;
+
+  function createGrid(w, h) {
+    particles = [];
+    const cols = Math.ceil(w / CONFIG.spacing);
+    const rows = Math.ceil(h / CONFIG.spacing);
+    
+    // Center the grid
+    const startX = (w - (cols - 1) * CONFIG.spacing) / 2;
+    const startY = (h - (rows - 1) * CONFIG.spacing) / 2;
+
+    for (let i = 0; i < cols; i++) {
+      for (let j = 0; j < rows; j++) {
+        const x = startX + i * CONFIG.spacing;
+        const y = startY + j * CONFIG.spacing;
+        particles.push(new DropParticle(x, y, i, j));
+      }
+    }
+  }
+
+  // Initial setup
+  dropX = gameInstance.width / 2;
+  dropY = gameInstance.height / 2;
+  createGrid(gameInstance.width, gameInstance.height);
+
+  // Handle resize
+  let resizeTimeout = null;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      dropX = gameInstance.width / 2;
+      dropY = gameInstance.height / 2;
+      createGrid(gameInstance.width, gameInstance.height);
+    }, 100);
+  });
+
+  // Custom render loop
+  gameInstance.clear = function() {
+    // Standard clear
+    this.ctx.fillStyle = CONFIG.bgColor;
+    this.ctx.fillRect(0, 0, this.width, this.height);
+    
+    // Render all particles
+    for (const p of particles) {
+      p.render(this.ctx);
+    }
+  };
+
+  game.on("update", (dt) => {
+    time += dt;
+    
+    // Update all particles
+    for (const p of particles) {
+      p.update(dt, time, dropX, dropY);
+    }
+  });
+
+  // Mouse interaction
+  let isDragging = false;
+  
+  gameInstance.events.on("mousedown", () => {
+    isDragging = true;
+  });
+
+  gameInstance.events.on("mouseup", () => {
+    isDragging = false;
+  });
+
+  gameInstance.events.on("mousemove", (e) => {
+    if (!isDragging) return;
+    dropX = e.x;
+    dropY = e.y;
+  });
+
+  // Click to change palette
+  gameInstance.events.on("click", () => {
+    CONFIG.baseHue = Math.random() * 360;
+    CONFIG.waveFreq = 0.02 + Math.random() * 0.08;
+    CONFIG.waveSpeed = 1.0 + Math.random() * 4.0;
+  });
+
+  game.start();
+});
+

package/dist/js/study007.js

@@ -0,0 +1,192 @@
+/**
+ * Study 009 - Interference
+ *
+ * Fast, colorful wave interference with sharp contrasts.
+ * No white wash - pure RGB separation with dark gaps.
+ *
+ * Features:
+ * - Sparse grid for performance + visual clarity
+ * - High-speed wave propagation
+ * - Sharp color bands, not blurry white
+ * - Click to randomize
+ */
+
+import { gcanvas } from "/gcanvas.es.min.js";
+
+const CONFIG = {
+  spacing: 25,
+  baseSize: 3,
+
+  // Wave settings - FAST
+  numEmitters: 4,
+  emitterSpeed: 1.5,
+  waveFreq: 0.04,
+  waveSpeed: 8.0,
+
+  // Chromatic
+  rgbSpatialOffset: 6,
+
+  // Rotation
+  globalRotationSpeed: 1.2,
+
+  bgColor: "#000",
+};
+
+class Emitter {
+  constructor(index, total) {
+    this.baseAngle = (index / total) * Math.PI * 2;
+    this.orbitRadius = 0.3;
+    this.freq = 0.03 + Math.random() * 0.03;
+    this.phase = Math.random() * Math.PI * 2;
+    this.speed = 6 + Math.random() * 4;
+  }
+
+  getPosition(time, cx, cy, radius) {
+    const angle = this.baseAngle + time * CONFIG.emitterSpeed;
+    return {
+      x: cx + Math.cos(angle) * this.orbitRadius * radius,
+      y: cy + Math.sin(angle) * this.orbitRadius * radius,
+    };
+  }
+
+  wave(x, y, time, ex, ey) {
+    const dist = Math.hypot(x - ex, y - ey);
+    return Math.sin(dist * this.freq - time * this.speed + this.phase);
+  }
+}
+
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: CONFIG.bgColor, fluid: true });
+  const gi = game.game;
+
+  let grid = [];
+  let emitters = [];
+  let time = Math.random() * 100;
+
+  function init() {
+    emitters = [];
+    for (let i = 0; i < CONFIG.numEmitters; i++) {
+      emitters.push(new Emitter(i, CONFIG.numEmitters));
+    }
+  }
+
+  function buildGrid(w, h) {
+    grid = [];
+    // Use the diagonal as the grid size so rotation never shows black corners
+    const diagonal = Math.sqrt(w * w + h * h);
+    const cols = Math.ceil(diagonal / CONFIG.spacing) + 2;
+    const rows = Math.ceil(diagonal / CONFIG.spacing) + 2;
+
+    // Center the oversized grid
+    const ox = (w - (cols - 1) * CONFIG.spacing) / 2;
+    const oy = (h - (rows - 1) * CONFIG.spacing) / 2;
+
+    for (let i = 0; i < cols; i++) {
+      for (let j = 0; j < rows; j++) {
+        grid.push({ x: ox + i * CONFIG.spacing, y: oy + j * CONFIG.spacing });
+      }
+    }
+  }
+
+  init();
+  buildGrid(gi.width, gi.height);
+
+  window.addEventListener("resize", () => {
+    buildGrid(gi.width, gi.height);
+  });
+
+  gi.clear = function () {
+    const ctx = this.ctx;
+    const w = this.width;
+    const h = this.height;
+    const cx = w / 2;
+    const cy = h / 2;
+    const maxR = Math.max(w, h) * 0.5;
+
+    // Hard clear - no trails, sharp image
+    ctx.fillStyle = CONFIG.bgColor;
+    ctx.fillRect(0, 0, w, h);
+
+    const epos = emitters.map(e => e.getPosition(time, cx, cy, maxR));
+
+    const cosG = Math.cos(time * CONFIG.globalRotationSpeed);
+    const sinG = Math.sin(time * CONFIG.globalRotationSpeed);
+
+    for (const p of grid) {
+      // Rotate around center
+      const dx = p.x - cx;
+      const dy = p.y - cy;
+      const rx = cx + dx * cosG - dy * sinG;
+      const ry = cy + dx * sinG + dy * cosG;
+
+      // Get wave from each emitter with phase offsets for RGB
+      let wR = 0, wG = 0, wB = 0;
+      for (let i = 0; i < emitters.length; i++) {
+        const e = emitters[i];
+        const ep = epos[i];
+        wR += e.wave(rx, ry, time, ep.x, ep.y);
+        wG += e.wave(rx, ry, time + 0.3, ep.x, ep.y);
+        wB += e.wave(rx, ry, time + 0.6, ep.x, ep.y);
+      }
+      wR /= emitters.length;
+      wG /= emitters.length;
+      wB /= emitters.length;
+
+      // Only draw if wave is positive (creates dark gaps)
+      const threshold = 0.1;
+
+      // Size pulses with wave
+      const avgWave = (wR + wG + wB) / 3;
+      const size = CONFIG.baseSize + Math.max(0, avgWave) * 5;
+
+      // Offset direction for RGB split
+      const angle = Math.atan2(ry - cy, rx - cx);
+      const offX = Math.cos(angle + Math.PI/2) * CONFIG.rgbSpatialOffset;
+      const offY = Math.sin(angle + Math.PI/2) * CONFIG.rgbSpatialOffset;
+
+      // Draw RGB circles only when wave > threshold
+      if (wR > threshold) {
+        const intensity = Math.floor(wR * 255);
+        ctx.fillStyle = `rgb(${intensity}, 0, 0)`;
+        ctx.beginPath();
+        ctx.arc(rx - offX, ry - offY, size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      if (wG > threshold) {
+        const intensity = Math.floor(wG * 255);
+        ctx.fillStyle = `rgb(0, ${intensity}, 0)`;
+        ctx.beginPath();
+        ctx.arc(rx, ry, size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      if (wB > threshold) {
+        const intensity = Math.floor(wB * 255);
+        ctx.fillStyle = `rgb(0, 0, ${intensity})`;
+        ctx.beginPath();
+        ctx.arc(rx + offX, ry + offY, size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  };
+
+  game.on("update", (dt) => {
+    time += dt;
+  });
+
+  gi.events.on("click", () => {
+    for (const e of emitters) {
+      e.freq = 0.02 + Math.random() * 0.05;
+      e.speed = 5 + Math.random() * 6;
+      e.phase = Math.random() * Math.PI * 2;
+      e.orbitRadius = 0.2 + Math.random() * 0.3;
+    }
+    CONFIG.globalRotationSpeed = 0.8 + Math.random() * 1.0;
+  });
+
+  game.start();
+});