互动媒体技术——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="#FF149