前言
大家好,这里是 CSS 兼 WebGL 魔法使——alphardex。
最近开始玩起了 p5.js,发现这是一个很有意思的库,用它能创作出各种新奇有趣的特效,本文我们将一起来实现下图的鼠标移动特效。
让我们开始吧!
准备工作
笔者的 p5.js 模板,点击右下角可以 fork 一份
创作开始
创建点类
在开始前,让我们创建一个最简单的点类,只有 2 个参数:x 坐标和 y 坐标
ts
1 | class Point { |
由微粒组成的线
我们都知道:两点确定一条直线。
但是,如果点不止 2 个呢,能确定一条直线吗?答案当然是能,只要将这些点均匀排在一条线上,不久看起来是一条直线了吗,其实这种分割思想也是实现许多微粒特效的基本思想。
创建一个 PointLine 类,表示由微粒组成的线
- 用
dist
函数求出 2 点的距离,用ceil
取整,即是两点间的点数 - 用
map
函数将点数映射到点 AB 的 xy 坐标,就获得了两点间的点的坐标 - 用
ellipse
函数将两点间的点全部描绘处来
ts
1 | class PointLine { |
ts
1 | const sketch = (s: p5) => { |
由线组成的任意多边形
创建一个 PointShape 类,表示由线组成的任意多边形
- 创建一个圆,接受 xy 坐标和半径 r
- 尝试将这个圆分割为多边形
- 圆的参数方程为
x=a+rcosθ;y=b+rsinθ;
,利用这个可算出线段所有点的坐标
ts
1 | class PointShape extends PointLine { |
ts
1 | const sketch = (s: p5) => { |
高斯随机函数
由于线和图形都是由微粒组成的,我们可以尝试让微粒动起来,在 p5.js 中,常用的随机函数有高斯随机函数randomGaussian
,可以对微粒的 x,y 加上用这个函数生成的偏移量,来产生微粒随机运动的效果
- 创建一个修改 xy 坐标的函数
- 创建模糊函数
blur
,将点数和粗细加上对应的模糊值,并对 x,y 坐标加上高斯随机函数生成的偏移量
ts
1 | class PointLine { |
ts
1 | const sketch = (s: p5) => { |
跟随鼠标移动
- 创建一个数组,用来保存鼠标的坐标,设置一个保存的上限(这里是 12 个)
- 每画一次,就添加一个当前的鼠标坐标,如果超限,则将之前添加的坐标删除
- 根据当前的鼠标坐标勾画出图形
ts
1 | const sketch = (s: p5) => { |
炫起来!
- 应用
HSB
色彩模式,并为每个图形填充不同的颜色 - 应用
ADD
混合模式,产生炫光的效果
ts
1 | const sketch = (s: p5) => { |