p5.js复制动态图形的方法

本文分享p5.js复制动态图形的具体代码，供大家参考。具体内容如下

首先，描述复制图像的规律

1.图像由多个闪烁的点和点之间的连接线组成。2.点的运动轨迹是随机的。3.当点彼此靠近时，会出现连接线，并且彼此靠近的点的颜色会加深

二、代码实现

点与点之间生成连线，随机生成直线和运动轨迹：

//随机生成s.n行的位置信息为(var t=[]，p=0；标准普尔；P) {var h=random() * r，//随机位置g=random() * n，q=2 * random()-1，//随机移动方向d=2 * random()-1；T. push ({x:h，y:g，xa3360q，ya3360d，max : 6000//从点到线的距离})绘制闪光点：

//context.beginPath()由三个透明度不同的圆组成；context.arc(r.x，r.y，1.7，0*Math。圆周率，2 *数学。PI)；context.fillStyle=' # FF1493context . fill()；context . BeginPath()；context.arc(r.x，r.y，6，0*Math。圆周率，2 *数学。PI)；context.fillStyle='rgba(255，20，147，0.3)'；context . fill()；context . BeginPath()；context.arc(r.x，r.y，10，0*Math。圆周率，2 *数学。PI)；context.fillStyle='rgba(255，20，147，0.1)'；context . fill()；翻译

因为复制动态图像还有很多困惑，不可能实现多个点相互靠近，颜色加深。不幸的是，最终不可能复制完全相同的图像。

第三，扩大

增加互动性，让线条可以贴在鼠标上，随鼠标移动。当鼠标靠近点时，点会移动得更快。

//存储鼠标位置。离开时，释放当前职位信息窗口. onmousemove=function(I){ I=I | | window . event，f.x=i.clientx，f.y=i.clienty}，window . onmouseout=function(){ f . x=null，for(v=0；v w .长度；V) {//从下一点x=w[v]；如果(我！==x null！==x.x null！==x.y) { B=i.x - x.x，z=i.y - x.y，y=B * B z * z//点加速(x.max/2yx.max)y x . max(x==current _ point y=x.max/2(I . x-=0.03 * b，i.y-=0.03 * z)，)}结果图

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。