@guinetik/gcanvas 1.0.4 → 2.0.0

package/dist/js/study003.js

@@ -0,0 +1,331 @@
+/**
+ * Study 003 - Circuit
+ *
+ * Generative circuit patterns with traversing dots.
+ *
+ * Features:
+ * - Random maze-like circuit connections
+ * - Ring nodes at grid intersections
+ * - White dots that traverse the circuit paths
+ * - Click to regenerate
+ */
+
+import { gcanvas, Easing } from "/gcanvas.es.min.js";
+
+// Configuration
+const CONFIG = {
+  // Grid settings
+  gridSpacing: 40,
+  nodeRadius: 8,
+  nodeLineWidth: 2.5,
+  nodeColor: "rgba(255, 255, 255, 0.5)",
+  nodeFill: "#000",
+
+  // Path settings
+  pathWidth: 1.5,
+  pathColor: "rgba(255, 255, 255, 0.4)",
+  connectionProbability: 0.5,
+
+  // Traveler settings
+  travelerRadius: 4,
+  travelerColor: "#fff",
+  travelerCount: 0.25, // Percentage of connected nodes with travelers
+  travelerSpeedMin: 30, // Pixels per second
+  travelerSpeedMax: 120,
+
+  // Background
+  bgColor: "#000",
+};
+
+/**
+ * Traveler - moves along circuit paths
+ */
+class Traveler {
+  constructor(startNode, graph, spacing) {
+    this.graph = graph;
+    this.spacing = spacing;
+    this.currentNode = startNode;
+    this.targetNode = null;
+    this.x = startNode.x;
+    this.y = startNode.y;
+    this.progress = 0;
+    this.isMoving = false;
+    this.startX = this.x;
+    this.startY = this.y;
+    this.endX = this.x;
+    this.endY = this.y;
+    this.waitTime = Math.random() * 0.5;
+    // Random speed for this traveler
+    this.speed = CONFIG.travelerSpeedMin +
+      Math.random() * (CONFIG.travelerSpeedMax - CONFIG.travelerSpeedMin);
+  }
+
+  pickNextTarget() {
+    const neighbors = this.graph.getConnections(this.currentNode.col, this.currentNode.row);
+    if (neighbors.length === 0) return false;
+
+    // Pick random connected neighbor
+    const next = neighbors[Math.floor(Math.random() * neighbors.length)];
+    this.targetNode = this.graph.getNode(next.col, next.row);
+
+    if (!this.targetNode) return false;
+
+    this.startX = this.x;
+    this.startY = this.y;
+    this.endX = this.targetNode.x;
+    this.endY = this.targetNode.y;
+    this.progress = 0;
+    this.isMoving = true;
+    return true;
+  }
+
+  update(dt) {
+    if (this.isMoving) {
+      const distance = Math.sqrt(
+        Math.pow(this.endX - this.startX, 2) + Math.pow(this.endY - this.startY, 2)
+      );
+      const duration = distance / this.speed;
+      this.progress += dt / duration;
+
+      if (this.progress >= 1) {
+        this.progress = 1;
+        this.isMoving = false;
+        this.x = this.endX;
+        this.y = this.endY;
+        this.currentNode = this.targetNode;
+        this.waitTime = 0.1 + Math.random() * 0.3;
+      } else {
+        const t = Easing.easeInOutQuad(this.progress);
+        this.x = this.startX + (this.endX - this.startX) * t;
+        this.y = this.startY + (this.endY - this.startY) * t;
+      }
+    } else {
+      this.waitTime -= dt;
+      if (this.waitTime <= 0) {
+        this.pickNextTarget();
+      }
+    }
+  }
+}
+
+/**
+ * Circuit Graph - manages nodes and connections
+ */
+class CircuitGraph {
+  constructor() {
+    this.nodes = new Map();
+    this.connections = new Map();
+  }
+
+  clear() {
+    this.nodes.clear();
+    this.connections.clear();
+  }
+
+  addNode(col, row, x, y) {
+    const key = `${col},${row}`;
+    this.nodes.set(key, { col, row, x, y });
+  }
+
+  getNode(col, row) {
+    return this.nodes.get(`${col},${row}`);
+  }
+
+  addConnection(col1, row1, col2, row2) {
+    const key1 = `${col1},${row1}`;
+    const key2 = `${col2},${row2}`;
+
+    if (!this.connections.has(key1)) {
+      this.connections.set(key1, []);
+    }
+    if (!this.connections.has(key2)) {
+      this.connections.set(key2, []);
+    }
+
+    // Add bidirectional connection
+    this.connections.get(key1).push({ col: col2, row: row2 });
+    this.connections.get(key2).push({ col: col1, row: row1 });
+  }
+
+  getConnections(col, row) {
+    return this.connections.get(`${col},${row}`) || [];
+  }
+
+  hasConnection(col1, row1, col2, row2) {
+    const conns = this.getConnections(col1, row1);
+    return conns.some(c => c.col === col2 && c.row === row2);
+  }
+}
+
+// Initialize
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: CONFIG.bgColor, fluid: true });
+  const scene = game.scene("main");
+  const gameInstance = game.game;
+
+  // State
+  let gridCols = 0;
+  let gridRows = 0;
+  let offsetX = 0;
+  let offsetY = 0;
+  let graph = new CircuitGraph();
+  let travelers = [];
+
+  // Debounced resize
+  let resizeTimeout = null;
+  let needsRebuild = false;
+
+  const handleResize = () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      gameInstance.ctx.fillStyle = CONFIG.bgColor;
+      gameInstance.ctx.fillRect(0, 0, gameInstance.width, gameInstance.height);
+      needsRebuild = true;
+    }, 100);
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  /**
+   * Generate random circuit
+   */
+  function generateCircuit() {
+    const spacing = CONFIG.gridSpacing;
+    const padding = spacing * 1.5;
+    const w = gameInstance.width;
+    const h = gameInstance.height;
+
+    gridCols = Math.floor((w - padding * 2) / spacing);
+    gridRows = Math.floor((h - padding * 2) / spacing);
+    offsetX = (w - gridCols * spacing) / 2;
+    offsetY = (h - gridRows * spacing) / 2;
+
+    // Clear previous
+    graph.clear();
+    travelers = [];
+
+    // Create nodes
+    for (let row = 0; row <= gridRows; row++) {
+      for (let col = 0; col <= gridCols; col++) {
+        const x = col * spacing + offsetX;
+        const y = row * spacing + offsetY;
+        graph.addNode(col, row, x, y);
+      }
+    }
+
+    // Create random connections (only right and down to avoid duplicates)
+    for (let row = 0; row <= gridRows; row++) {
+      for (let col = 0; col <= gridCols; col++) {
+        // Connect right
+        if (col < gridCols && Math.random() < CONFIG.connectionProbability) {
+          graph.addConnection(col, row, col + 1, row);
+        }
+        // Connect down
+        if (row < gridRows && Math.random() < CONFIG.connectionProbability) {
+          graph.addConnection(col, row, col, row + 1);
+        }
+      }
+    }
+
+    // Create travelers on random connected nodes
+    const nodeList = Array.from(graph.nodes.values());
+    const connectedNodes = nodeList.filter(n => graph.getConnections(n.col, n.row).length > 0);
+    const numTravelers = Math.floor(connectedNodes.length * CONFIG.travelerCount);
+
+    for (let i = 0; i < numTravelers && connectedNodes.length > 0; i++) {
+      const idx = Math.floor(Math.random() * connectedNodes.length);
+      const node = connectedNodes.splice(idx, 1)[0];
+      travelers.push(new Traveler(node, graph, spacing));
+    }
+  }
+
+  /**
+   * Draw the circuit (nodes and paths)
+   */
+  function drawCircuit(ctx) {
+    const spacing = CONFIG.gridSpacing;
+
+    // Draw connections first (under nodes)
+    ctx.strokeStyle = CONFIG.pathColor;
+    ctx.lineWidth = CONFIG.pathWidth;
+    ctx.lineCap = "round";
+
+    const drawnConnections = new Set();
+
+    for (const [key, node] of graph.nodes) {
+      const connections = graph.getConnections(node.col, node.row);
+
+      for (const conn of connections) {
+        // Avoid drawing same connection twice
+        const connKey = [key, `${conn.col},${conn.row}`].sort().join("-");
+        if (drawnConnections.has(connKey)) continue;
+        drawnConnections.add(connKey);
+
+        const targetNode = graph.getNode(conn.col, conn.row);
+        if (!targetNode) continue;
+
+        ctx.beginPath();
+        ctx.moveTo(node.x, node.y);
+        ctx.lineTo(targetNode.x, targetNode.y);
+        ctx.stroke();
+      }
+    }
+
+    // Draw nodes (only where connections exist)
+    ctx.fillStyle = CONFIG.nodeFill;
+    ctx.strokeStyle = CONFIG.nodeColor;
+    ctx.lineWidth = CONFIG.nodeLineWidth;
+
+    for (const [key, node] of graph.nodes) {
+      // Only draw nodes that have at least one connection
+      const connections = graph.getConnections(node.col, node.row);
+      if (connections.length === 0) continue;
+
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, CONFIG.nodeRadius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    // Draw travelers (on top of everything)
+    ctx.fillStyle = CONFIG.travelerColor;
+    for (const traveler of travelers) {
+      ctx.beginPath();
+      ctx.arc(traveler.x, traveler.y, CONFIG.travelerRadius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+
+  // Generate initial circuit
+  generateCircuit();
+
+  // Custom render - no trail effect, just redraw
+  gameInstance.clear = function () {
+    this.ctx.fillStyle = CONFIG.bgColor;
+    this.ctx.fillRect(0, 0, this.width, this.height);
+    drawCircuit(this.ctx);
+  };
+
+  // Update loop
+  game.on("update", (dt, ctx) => {
+    if (needsRebuild) {
+      needsRebuild = false;
+      generateCircuit();
+    }
+
+    // Update travelers
+    for (const traveler of travelers) {
+      traveler.update(dt);
+    }
+  });
+
+  // Click to regenerate
+  game.on("click", () => {
+    generateCircuit();
+  });
+
+  game.start();
+});

package/dist/js/study004.js

@@ -0,0 +1,389 @@
+/**
+ * Study 004 - Hex Bloom
+ *
+ * Radial hexagon explosion with Tweenetik animations.
+ * Inspired by @okazz_
+ *
+ * Features:
+ * - Hexagons bloom radially from center
+ * - Color transition: black → colorful → white
+ * - Tweenetik-powered staggered animations
+ * - Click to trigger new bloom
+ */
+
+import { gcanvas, Tweenetik, Easing } from "/gcanvas.es.min.js";
+
+// Configuration
+const CONFIG = {
+  // Grid settings
+  hexRadius: 25,
+  hexSpacing: 2,
+
+  // Animation settings
+  bloomDuration: 0.8,
+  staggerDelay: 0.03, // Delay per ring
+  scaleFrom: 0,
+  scaleTo: 1,
+
+  // Colors
+  colors: [
+    "#FF3B30", "#FF9500", "#FFCC00", "#34C759", "#00C7BE",
+    "#007AFF", "#5856D6", "#AF52DE", "#FF2D55", "#FF6B6B",
+    "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7", "#DDA0DD",
+  ],
+
+  // Background
+  bgColor: "#000",
+  bloomColor: "#fff",
+};
+
+// Hexagon math
+const HEX_ANGLE = Math.PI / 3;
+const HEX_HEIGHT_RATIO = Math.sqrt(3);
+
+/**
+ * Calculate hexagon grid position (axial coordinates to pixel)
+ */
+function hexToPixel(q, r, size, centerX, centerY) {
+  const x = size * (3 / 2 * q);
+  const y = size * (HEX_HEIGHT_RATIO / 2 * q + HEX_HEIGHT_RATIO * r);
+  return { x: centerX + x, y: centerY + y };
+}
+
+/**
+ * Draw a hexagon
+ */
+function drawHexagon(ctx, x, y, radius, fillColor, strokeColor, lineWidth) {
+  ctx.beginPath();
+  for (let i = 0; i < 6; i++) {
+    const angle = HEX_ANGLE * i - Math.PI / 6;
+    const hx = x + radius * Math.cos(angle);
+    const hy = y + radius * Math.sin(angle);
+    if (i === 0) {
+      ctx.moveTo(hx, hy);
+    } else {
+      ctx.lineTo(hx, hy);
+    }
+  }
+  ctx.closePath();
+
+  if (fillColor) {
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+  }
+  if (strokeColor && lineWidth > 0) {
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+  }
+}
+
+/**
+ * Draw a star/asterisk shape
+ */
+function drawStar(ctx, x, y, radius, points, color, lineWidth) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.lineCap = "round";
+
+  for (let i = 0; i < points; i++) {
+    const angle = (Math.PI * 2 / points) * i - Math.PI / 2;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
+    ctx.stroke();
+  }
+}
+
+/**
+ * Hex cell state for animation
+ */
+class HexCell {
+  constructor(q, r, x, y, distFromCenter) {
+    this.q = q;
+    this.r = r;
+    this.x = x;
+    this.y = y;
+    this.distFromCenter = distFromCenter;
+
+    // Animation state
+    this.scale = 0;
+    this.opacity = 0;
+    this.colorPhase = 0; // 0 = colored, 1 = white
+    this.rotation = 0;
+
+    // Visual properties
+    this.color = CONFIG.colors[Math.floor(Math.random() * CONFIG.colors.length)];
+    this.isStar = Math.random() < 0.15; // 15% chance to be a star
+    this.starPoints = 4 + Math.floor(Math.random() * 4); // 4-7 points
+  }
+
+  draw(ctx, baseRadius) {
+    if (this.opacity <= 0 || this.scale <= 0) return;
+
+    const radius = baseRadius * this.scale;
+
+    ctx.save();
+    ctx.globalAlpha = this.opacity;
+    ctx.translate(this.x, this.y);
+    ctx.rotate(this.rotation);
+
+    // Interpolate color from colorful to white based on colorPhase
+    const r = Math.floor(this.hexToRgb(this.color).r + (255 - this.hexToRgb(this.color).r) * this.colorPhase);
+    const g = Math.floor(this.hexToRgb(this.color).g + (255 - this.hexToRgb(this.color).g) * this.colorPhase);
+    const b = Math.floor(this.hexToRgb(this.color).b + (255 - this.hexToRgb(this.color).b) * this.colorPhase);
+    const currentColor = `rgb(${r},${g},${b})`;
+
+    if (this.isStar) {
+      drawStar(ctx, 0, 0, radius, this.starPoints, currentColor, 2);
+    } else {
+      // Draw hexagon with stroke and optional fill
+      const fillAlpha = this.colorPhase;
+      const fillColor = fillAlpha > 0.1 ? `rgba(${r},${g},${b},${fillAlpha})` : null;
+      const strokeColor = currentColor;
+      drawHexagon(ctx, 0, 0, radius, fillColor, strokeColor, 2);
+    }
+
+    ctx.restore();
+  }
+
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : { r: 255, g: 255, b: 255 };
+  }
+}
+
+// Initialize
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  if (!canvas) return;
+
+  const game = gcanvas({ canvas, bg: CONFIG.bgColor, fluid: true });
+  const scene = game.scene("main");
+  const gameInstance = game.game;
+
+  // State
+  let hexCells = [];
+  let bgWhiteness = 0; // 0 = black, 1 = white
+  let isAnimating = false;
+  let phase = "bloom"; // "bloom" or "collapse"
+
+  // Debounced resize
+  let resizeTimeout = null;
+  let needsRebuild = false;
+
+  const handleResize = () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      needsRebuild = true;
+    }, 100);
+  };
+
+  window.addEventListener("resize", handleResize);
+
+  /**
+   * Generate hexagon grid
+   */
+  function generateGrid() {
+    const w = gameInstance.width;
+    const h = gameInstance.height;
+    const centerX = w / 2;
+    const centerY = h / 2;
+    const size = CONFIG.hexRadius + CONFIG.hexSpacing;
+
+    hexCells = [];
+
+    // Calculate how many rings we need to cover the screen
+    const maxDist = Math.sqrt(w * w + h * h) / 2;
+    const rings = Math.ceil(maxDist / (size * HEX_HEIGHT_RATIO)) + 2;
+
+    // Generate hexagonal grid using axial coordinates
+    for (let q = -rings; q <= rings; q++) {
+      for (let r = -rings; r <= rings; r++) {
+        const pos = hexToPixel(q, r, size, centerX, centerY);
+
+        // Skip if too far from visible area
+        if (pos.x < -size * 2 || pos.x > w + size * 2 ||
+            pos.y < -size * 2 || pos.y > h + size * 2) {
+          continue;
+        }
+
+        const distFromCenter = Math.sqrt(
+          Math.pow(pos.x - centerX, 2) + Math.pow(pos.y - centerY, 2)
+        );
+
+        hexCells.push(new HexCell(q, r, pos.x, pos.y, distFromCenter));
+      }
+    }
+
+    // Sort by distance from center for staggered animation
+    hexCells.sort((a, b) => a.distFromCenter - b.distFromCenter);
+  }
+
+  /**
+   * Trigger bloom animation (center → edges, black → white)
+   */
+  function triggerBloom() {
+    if (isAnimating) return;
+    isAnimating = true;
+    phase = "bloom";
+
+    // Reset all cells for bloom
+    for (const cell of hexCells) {
+      cell.scale = 0;
+      cell.opacity = 0;
+      cell.colorPhase = 0;
+      cell.rotation = (Math.random() - 0.5) * 0.5;
+      cell.color = CONFIG.colors[Math.floor(Math.random() * CONFIG.colors.length)];
+    }
+
+    bgWhiteness = 0;
+
+    // Find max distance for normalization
+    const maxDist = hexCells.length > 0 ?
+      hexCells[hexCells.length - 1].distFromCenter : 1;
+
+    // Animate each cell with Tweenetik (inner to outer)
+    let lastDelay = 0;
+    for (const cell of hexCells) {
+      const normalizedDist = cell.distFromCenter / maxDist;
+      const delay = normalizedDist * CONFIG.staggerDelay * hexCells.length * 0.3;
+      lastDelay = Math.max(lastDelay, delay);
+
+      // Scale up
+      Tweenetik.to(cell, { scale: 1, opacity: 1 }, CONFIG.bloomDuration * 0.6, Easing.easeOutBack, {
+        delay: delay,
+      });
+
+      // Color transition (colorful → white)
+      Tweenetik.to(cell, { colorPhase: 1 }, CONFIG.bloomDuration * 0.8, Easing.easeInOutQuad, {
+        delay: delay + CONFIG.bloomDuration * 0.3,
+      });
+
+      // Slight rotation
+      Tweenetik.to(cell, { rotation: 0 }, CONFIG.bloomDuration, Easing.easeOutQuad, {
+        delay: delay,
+      });
+    }
+
+    // Wait for all hexagons to finish, then trigger collapse
+    const totalBloomTime = lastDelay + CONFIG.bloomDuration * 1.1;
+    const randomPause = 100 + Math.random() * 100;
+    setTimeout(() => {
+      isAnimating = false;
+      setTimeout(() => triggerCollapse(), randomPause);
+    }, totalBloomTime * 1000);
+  }
+
+  /**
+   * Trigger collapse animation (edges → center, white → black)
+   */
+  function triggerCollapse() {
+    if (isAnimating) return;
+    isAnimating = true;
+    phase = "collapse";
+
+    // Find max distance for normalization
+    const maxDist = hexCells.length > 0 ?
+      hexCells[hexCells.length - 1].distFromCenter : 1;
+
+    // Animate each cell (outer to inner - reverse order)
+    let lastDelay = 0;
+    for (const cell of hexCells) {
+      const normalizedDist = cell.distFromCenter / maxDist;
+      // Reverse: outer cells animate first
+      const delay = (1 - normalizedDist) * CONFIG.staggerDelay * hexCells.length * 0.3;
+      lastDelay = Math.max(lastDelay, delay);
+
+      // Color transition back (white → colorful)
+      Tweenetik.to(cell, { colorPhase: 0 }, CONFIG.bloomDuration * 0.5, Easing.easeOutQuad, {
+        delay: delay,
+      });
+
+      // Scale down and fade out
+      Tweenetik.to(cell, { scale: 0, opacity: 0 }, CONFIG.bloomDuration * 0.6, Easing.easeInBack, {
+        delay: delay + CONFIG.bloomDuration * 0.3,
+      });
+
+      // Rotation
+      Tweenetik.to(cell, { rotation: (Math.random() - 0.5) * 0.5 }, CONFIG.bloomDuration, Easing.easeInQuad, {
+        delay: delay,
+      });
+    }
+
+    // Wait for all hexagons to finish collapsing, then trigger bloom
+    const totalCollapseTime = lastDelay + CONFIG.bloomDuration * 1.1;
+    const randomPause = 100 + Math.random() * 400;
+    setTimeout(() => {
+      isAnimating = false;
+      setTimeout(() => triggerBloom(), randomPause);
+    }, totalCollapseTime * 1000);
+  }
+
+  /**
+   * Reset to black (for resize)
+   */
+  function resetToBlack() {
+    Tweenetik.killAll();
+
+    for (const cell of hexCells) {
+      cell.scale = 0;
+      cell.opacity = 0;
+      cell.colorPhase = 0;
+    }
+
+    bgWhiteness = 0;
+    isAnimating = false;
+    phase = "bloom";
+  }
+
+  // Generate initial grid
+  generateGrid();
+
+  // Custom render
+  gameInstance.clear = function () {
+    // Background color interpolated between black and white
+    const bg = Math.floor(bgWhiteness * 255);
+    this.ctx.fillStyle = `rgb(${bg},${bg},${bg})`;
+    this.ctx.fillRect(0, 0, this.width, this.height);
+
+    // Draw all hex cells
+    for (const cell of hexCells) {
+      cell.draw(this.ctx, CONFIG.hexRadius);
+    }
+  };
+
+  // Update loop
+  game.on("update", (dt) => {
+    if (needsRebuild) {
+      needsRebuild = false;
+      resetToBlack();
+      generateGrid();
+      // Auto-trigger bloom after rebuild
+      setTimeout(() => triggerBloom(), 100);
+    }
+
+    // Update Tweenetik
+    Tweenetik.updateAll(dt);
+  });
+
+  // Click to bloom
+  game.on("click", () => {
+    if (bgWhiteness > 0.9) {
+      // If already white, reset and bloom again
+      resetToBlack();
+      setTimeout(() => triggerBloom(), 50);
+    } else {
+      triggerBloom();
+    }
+  });
+
+  // Auto-start bloom
+  setTimeout(() => triggerBloom(), 500);
+
+  game.start();
+});