p5.js实现动态粒子连线与交互效果教程

//随机生成s.n条线位置信息
for (var t = [], p = 0; s.n > p; p++) {
  var h = random() * r, //随机位置
   g = random() * n,
   q = 2 * random() - 1, //随机运动方向
   d = 2 * random() - 1;
  t.push({
   x: h,
   y: g,
   xa: q,
   ya: d,
   max: 6000 //圆点靠近产生线条的距离
  })
 }

//由三个透明度不同的圆组成
 context.beginPath();
 context.arc(r.x,r.y,1.7,0*Math.PI,2*Math.PI);
 context.fillStyle="#FF1493";
 context.fill();
   
 context.beginPath();
 context.arc(r.x,r.y,6,0*Math.PI,2*Math.PI);
 context.fillStyle='rgba(255,20,147,0.3)';
 context.fill();
   
 context.beginPath();
 context.arc(r.x,r.y,10,0*Math.PI,2*Math.PI);
 context.fillStyle='rgba(255,20,147,0.1)';
 context.fill();

//存储鼠标位置，离开的时候，释放当前位置信息
window.onmousemove = function(i) {
  i = i || window.event, f.x = i.clientX, f.y = i.clientY
 },
window.onmouseout = function() {
  f.x = null, f.y = null
 };

for (v = 0; v < w.length; v++) {//从下一个点开始
    x = w[v];
    if (i !== x && null !== x.x && null !== x.y) {
     B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
     //与鼠标靠近到一定距离的时候圆点加速（x.max/2<y<x.max)
     y < x.max && (x == current_point && y >= x.max / 2 
      && (i.x -= 0.03 * B, i.y -= 0.03 * z), 
     ...
     )}