Particle Field

DEMO

CODE

<div class="demo-stage" style="padding:0"><canvas class="pf-canvas" id="pfCanvas"></canvas></div>

.pf-canvas { width:100%; height:280px; display:block; background:#0E0E12; }

const pfCanvas = document.getElementById('pfCanvas');
const pfCtx = pfCanvas.getContext('2d');
function pfSize(){ pfCanvas.width = pfCanvas.offsetWidth; pfCanvas.height = pfCanvas.offsetHeight; }
pfSize();
window.addEventListener('resize', pfSize);
const pfNum = 64;
const pfParts = [];
for (let i = 0; i < pfNum; i++){
  pfParts.push({
    x: Math.random() * pfCanvas.width, y: Math.random() * pfCanvas.height,
    vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
    r: Math.random() * 2 + 1
  });
}
function pfLoop(){
  pfCtx.clearRect(0, 0, pfCanvas.width, pfCanvas.height);
  for (let i = 0; i < pfNum; i++){
    const p = pfParts[i];
    p.x += p.vx; p.y += p.vy;
    if (p.x < 0 || p.x > pfCanvas.width) p.vx *= -1;
    if (p.y < 0 || p.y > pfCanvas.height) p.vy *= -1;
    pfCtx.beginPath();
    pfCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    pfCtx.fillStyle = '#E91B89';
    pfCtx.fill();
  }
  for (let i = 0; i < pfNum; i++){
    for (let j = i + 1; j < pfNum; j++){
      const dx = pfParts[i].x - pfParts[j].x;
      const dy = pfParts[i].y - pfParts[j].y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 92){
        pfCtx.beginPath();
        pfCtx.moveTo(pfParts[i].x, pfParts[i].y);
        pfCtx.lineTo(pfParts[j].x, pfParts[j].y);
        pfCtx.strokeStyle = 'rgba(233,27,137,' + (1 - dist / 92) * 0.4 + ')';
        pfCtx.stroke();
      }
    }
  }
  requestAnimationFrame(pfLoop);
}
pfLoop();

AI PROMPT

canvasでパーティクル背景を作って。粒子を約64個、ランダムな位置・速度・半径で生成。毎フレームclearRectして粒子を移動（端で速度反転）、arcで円を描画。2粒子間の距離が92px未満なら線で結び、近いほど濃いrgba透明度にする。requestAnimationFrameでループ、resizeでサイズ追従。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。