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

作者：窗边听雨

时间：2026-10-23

本文介绍使用p5.js临摹动态图形的实现方法。通过随机生成圆点运动轨迹，当圆点间距离小于设定阈值时绘制连线并加深颜色。代码展示了闪光圆点的绘制逻辑及鼠标交互功能，包括线条附着鼠标及靠近时圆点加速运动的效果。

文章目录

本文分享使用p5.js实现动态图形临摹的具体代码方案，供读者参考。

图像规律分析

首先分析待临摹图像的构成规律。

图像规律分析

1、图像由多个闪光圆点和圆点之间的连线组成 2、圆点的运动轨迹是随机的 3、圆点之间靠近时会产生连线，并且相互靠近的圆点会颜色加深

核心代码实现

接下来通过代码实现上述视觉效果。

核心逻辑在于生成随机线条及其运动轨迹，并处理圆点间的连线判定。


//随机生成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), 
     ...
     )}

交互模式下的运行结果如图所示。

图像规律分析