particles.js

/* ============================================================
   Antigravity-style starfield with cursor-orbit pull
   - Many round glowing dots scattered across the canvas
   - Varied sizes / brightness so the field doesn't look gridded
   - When the cursor enters, nearby particles gain a radial pull +
     tangential force, producing an electron-cloud orbit feel
   - With no cursor, particles drift slowly
   ============================================================ */

(function () {
  const canvas = document.getElementById('particles');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');

  let W = 0, H = 0;
  const DPR = Math.max(1, window.devicePixelRatio || 1);

  const MOUSE = { x: 0, y: 0, active: false };

  const PARTICLE_COUNT = 700;
  const particles = [];

  // Physics tuning — soft pull + chaotic motion, no stable orbits
  const ATTRACTION = 0.00008;
  const TANGENT    = 0.024;
  const DRIFT      = 0.7;
  const FRICTION   = 0.965;
  const INFLUENCE  = 420;
  const NOISE      = 0.12;

  // Pairwise repulsion (spatial-grid accelerated)
  const REPEL_DIST  = 22;
  const REPEL_FORCE = 0.22;

  let prevActive = false;

  function resize() {
    const rect = canvas.getBoundingClientRect();
    W = rect.width;
    H = rect.height;
    canvas.width = W * DPR;
    canvas.height = H * DPR;
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  }

  function spawnParticle() {
    // Drift mostly upward with some lateral variation
    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.8;

    // Non-uniform size distribution: most particles tiny, a few bright bigger ones
    const r = Math.random();
    let radius;
    if (r < 0.7)      radius = 0.6 + Math.random() * 0.9;   // small majority
    else if (r < 0.95) radius = 1.4 + Math.random() * 1.2;  // medium
    else               radius = 2.2 + Math.random() * 1.6;  // a few bright stars

    return {
      x: Math.random() * W,
      y: Math.random() * H,
      vx: Math.cos(angle) * DRIFT * (0.3 + Math.random() * 0.9),
      vy: Math.sin(angle) * DRIFT * (0.3 + Math.random() * 0.9),
      radius,
      // Antigravity blue range with occasional cyan/white
      hue: 200 + Math.random() * 40,
      sat: 80 + Math.random() * 20,
      light: 60 + Math.random() * 25,
      alpha: 0.45 + Math.random() * 0.5,
      // Twinkle phase / speed so brightness varies over time
      twinkle: Math.random() * Math.PI * 2,
      twinkleSpeed: 0.01 + Math.random() * 0.03,
      spin: Math.random() < 0.5 ? 1 : -1,
    };
  }

  function initParticles() {
    particles.length = 0;
    for (let i = 0; i < PARTICLE_COUNT; i++) particles.push(spawnParticle());
  }

  function step() {
    // Solid black wipe — sharp, no trails
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, W, H);

    const mx = MOUSE.x, my = MOUSE.y, active = MOUSE.active;

    // Cursor just left -> kick clustered particles outward so they disperse
    if (prevActive && !active) {
      for (let i = 0; i < particles.length; i++) {
        const p = particles[i];
        const dx = p.x - mx;
        const dy = p.y - my;
        const dist = Math.hypot(dx, dy) || 1;
        if (dist < INFLUENCE * 1.2) {
          const fade = 1 - dist / (INFLUENCE * 1.2);
          const nx = dx / dist, ny = dy / dist;
          const mag = (1.6 + Math.random() * 1.6) * fade;
          p.vx += nx * mag + (Math.random() - 0.5) * 1.2;
          p.vy += ny * mag + (Math.random() - 0.5) * 1.2;
        }
      }
    }
    prevActive = active;

    // Build spatial grid for O(n) pairwise repulsion
    const cellSize = REPEL_DIST;
    const cols = Math.max(1, Math.ceil(W / cellSize) + 1);
    const rows = Math.max(1, Math.ceil(H / cellSize) + 1);
    const grid = new Array(cols * rows);
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      const cx = Math.floor(p.x / cellSize);
      const cy = Math.floor(p.y / cellSize);
      if (cx < 0 || cx >= cols || cy < 0 || cy >= rows) continue;
      const idx = cy * cols + cx;
      if (!grid[idx]) grid[idx] = [];
      grid[idx].push(i);
    }

    // Pair repulsion — only check 3x3 cell neighborhood; pair-once via j > i
    const repelD2 = REPEL_DIST * REPEL_DIST;
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      const cx = Math.floor(p.x / cellSize);
      const cy = Math.floor(p.y / cellSize);
      for (let ox = -1; ox <= 1; ox++) {
        for (let oy = -1; oy <= 1; oy++) {
          const gx = cx + ox, gy = cy + oy;
          if (gx < 0 || gx >= cols || gy < 0 || gy >= rows) continue;
          const cell = grid[gy * cols + gx];
          if (!cell) continue;
          for (let k = 0; k < cell.length; k++) {
            const j = cell[k];
            if (j <= i) continue;
            const q = particles[j];
            const ddx = p.x - q.x;
            const ddy = p.y - q.y;
            const d2 = ddx * ddx + ddy * ddy;
            if (d2 < repelD2 && d2 > 0.01) {
              const d = Math.sqrt(d2);
              const f = REPEL_FORCE * (1 - d / REPEL_DIST) / d;
              const fx = ddx * f, fy = ddy * f;
              p.vx += fx; p.vy += fy;
              q.vx -= fx; q.vy -= fy;
            }
          }
        }
      }
    }

    // Additive blending so overlapping glows brighten naturally
    ctx.globalCompositeOperation = 'lighter';

    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];

      if (active) {
        const dx = mx - p.x;
        const dy = my - p.y;
        const dist = Math.hypot(dx, dy) || 1;

        if (dist < INFLUENCE) {
          const falloff = 1 - dist / INFLUENCE;
          const nx = dx / dist;
          const ny = dy / dist;

          // Radial attractive force — softer, fades near center so no ring traps
          const nearFade = Math.min(1, dist / 80);
          p.vx += nx * ATTRACTION * dist * 6 * falloff * nearFade;
          p.vy += ny * ATTRACTION * dist * 6 * falloff * nearFade;

          // Light tangential nudge for swirl (small, doesn't lock into orbit)
          p.vx += -ny * TANGENT * p.spin * falloff;
          p.vy +=  nx * TANGENT * p.spin * falloff;

          // Per-particle noise — breaks symmetry, prevents ring formation
          p.vx += (Math.random() - 0.5) * NOISE * falloff;
          p.vy += (Math.random() - 0.5) * NOISE * falloff;
        }
      }

      // Damping
      p.vx *= FRICTION;
      p.vy *= FRICTION;

      // Keep field alive — nudge slow particles back to drift speed
      const speed = Math.hypot(p.vx, p.vy);
      if (speed < DRIFT * 0.3) {
        const a = -Math.PI / 2 + (Math.random() - 0.5) * 1.4;
        p.vx += Math.cos(a) * 0.06;
        p.vy += Math.sin(a) * 0.06;
      }

      p.x += p.vx;
      p.y += p.vy;

      // Wrap edges so the field stays evenly populated
      if (p.x < -10) p.x = W + 10;
      if (p.x > W + 10) p.x = -10;
      if (p.y < -10) p.y = H + 10;
      if (p.y > H + 10) p.y = -10;

      // Twinkle brightness variation
      p.twinkle += p.twinkleSpeed;
      const tw = 0.7 + 0.3 * Math.sin(p.twinkle);
      const a = p.alpha * tw;

      // Outer glow halo — soft radial gradient
      const haloR = p.radius * 6;
      const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, haloR);
      grad.addColorStop(0,   `hsla(${p.hue}, ${p.sat}%, ${p.light}%, ${a * 0.55})`);
      grad.addColorStop(0.4, `hsla(${p.hue}, ${p.sat}%, ${p.light}%, ${a * 0.18})`);
      grad.addColorStop(1,   `hsla(${p.hue}, ${p.sat}%, ${p.light}%, 0)`);
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(p.x, p.y, haloR, 0, Math.PI * 2);
      ctx.fill();

      // Bright solid core dot
      ctx.fillStyle = `hsla(${p.hue}, ${p.sat}%, ${Math.min(95, p.light + 20)}%, ${Math.min(1, a + 0.2)})`;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
      ctx.fill();
    }

    ctx.globalCompositeOperation = 'source-over';

    requestAnimationFrame(step);
  }

  // ---- pointer tracking on the download card ----
  const card = canvas.parentElement;
  const overlay = document.getElementById('cursorOverlay');

  function onMove(e) {
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    MOUSE.x = clientX - rect.left;
    MOUSE.y = clientY - rect.top;
    MOUSE.active = true;
    if (overlay) {
      overlay.style.opacity = '1';
      overlay.style.left = MOUSE.x + 'px';
      overlay.style.top = MOUSE.y + 'px';
    }
  }
  function onLeave() {
    MOUSE.active = false;
    if (overlay) overlay.style.opacity = '0';
  }
  card.addEventListener('mousemove', onMove);
  card.addEventListener('mouseleave', onLeave);
  card.addEventListener('touchmove', onMove, { passive: true });
  card.addEventListener('touchend', onLeave);

  window.addEventListener('resize', resize);

  resize();
  initParticles();
  step();

  /* ============================================================
     Typed heading effect
     ============================================================ */
  const heading = document.getElementById('typedHeading');
  const HEADING_TEXT = '开源硬件协会';

  function buildHeading() {
    heading.innerHTML = '';
    for (const ch of HEADING_TEXT) {
      const span = document.createElement('span');
      span.className = 'char';
      span.innerHTML = ch === ' ' ? '&nbsp;' : ch;
      heading.appendChild(span);
    }
    const caret = document.createElement('span');
    caret.className = 'caret';
    heading.appendChild(caret);
  }

  function playType() {
    const chars = heading.querySelectorAll('.char');
    chars.forEach((c, i) => {
      setTimeout(() => c.classList.add('visible'), 60 * i);
    });
  }

  buildHeading();

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        playType();
        io.disconnect();
      }
    });
  }, { threshold: 0.3 });
  io.observe(heading);
})();