互动媒体技术——p5.js临摹动态图形

最新推荐文章于 2019-11-04 20:15:54 发布

原创

最新推荐文章于 2019-11-04 20:15:54 发布 · 635 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了使用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.beg