使用p5.js临摹动态图形的完整指南

创作时间:

作者:

@小白创作中心

使用p5.js临摹动态图形的完整指南

引用

来源

http://www.cdweb.net/article/jcgije.html

本文将介绍如何使用p5.js库来临摹动态图形。通过随机生成圆点和连线、绘制闪光圆点以及增加交互性，你可以创建出具有动态效果的艺术作品。

一、描述所临摹图像的规律

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

二、代码实现

1. 随机生成线条位置信息

// 随机生成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 // 圆点靠近产生线条的距离
  })
}

2. 绘制闪光圆点

// 由三个透明度不同的圆组成
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();

3. 效果图

4. 拓展功能：增加交互性

使线条能够附着到鼠标上，跟随鼠标移动。鼠标靠近圆点时，圆点会加速运动。

// 存储鼠标位置，离开的时候，释放当前位置信息
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\= x.max / 2 
      && (i.x -= 0.03 * B, i.y -= 0.03 * z), 
     ...
     }
}