🐲龙年临门,给大家画条龙

龙年即将到来,给大家画一条龙,提前祝读者祥龙翱翔,岁月腾飞

本博文绘制的龙由粒子进行重组展示。使用到的素材图(网图,侵删)如下:

实现的效果如下:

在之前文章 引力粒子特效 - 归为尘埃中,我们实现的是粒子破碎的效果,而本文实现的是粒子重组,大同小异,异曲同工。

我们讲讲关键的两个点,吃透这两个点,已经成功了一大半:

  • 图转粒子
  • 粒子加速

图转粒子

首先,我们已经得到图片素材,如上。

接下来,我们需要的到图片的数据:

javascript 复制代码
// drawImage 将图片绘制在 canvas 上
context.drawImage(imgDom, startX, startY);
// getImageData 得到整个画布的数据
let imgData = context.getImageData(0, 0, canvasDom.width, canvasDom.height).data;

得到的数据比较特殊,我们可以简单理解,一个像素里面有四个 imgData 值,四个值分别代表 rgba,即 红,绿,蓝和透明度。拿画布的原点(左上角)第一个点来举例:

bash 复制代码
let red = imgData[0];
let green = imgData[1];
let blue = imgData[2];
let alpha = imgData[3];

这些颜色值都是需要赋值在粒子的颜色上的。

那么说到粒子,粒子需要具备的属性如下:

javascript 复制代码
// 10 为自定义的数值,可根据需要调整
{
  x: canvasDom.width*Math.random() * 10, // 随机 x 值
  y: canvasDom.height*Math.random() * 10, // 随机 y 值
  originX: originX, // 图片在 canvas 上的原始 x 值
  originY: originY, // 图片在 canvas 上的原始 y 值
  color: color, // 粒子的颜色,也就是我们上面提到的 rgba 颜色
  vx: 0, // 粒子在 x 轴方向移动的速度,初始值为 0
  vy: 0, // 粒子在 y 轴方向移动的速度,初始值为 0
  size: size * Math.random(), // 粒子的随机大小
}

嗯,收集完粒子之后,我们将其绘制在 canvas 上:

javascript 复制代码
// 给定粒子的颜色为画笔的颜色
context.fillStyle = paticle.color;
// 填充粒子(矩形)
context.fillRect(paticle.originX, paticle.originX, paticle.size, paticle.size);

效果如下:

咦,不错哦😯。这感觉,加点粒子闪烁,那不岂是变成星空🌃闪耀了。这个后面可以出篇文章跟进,本文就点到为止。

粒子加速

👌,粒子我们已经有了。我们需要为粒子添加特效了。

粒子动起来的加速度呢?

我们高中物理都学过万有引力的定律:

<math xmlns="http://www.w3.org/1998/Math/MathML"> F = G m M r 2 F=G\frac{mM}{r^2} </math>F=Gr2mM

  • F 是物体上的合力
  • m / M 是物体的质量
  • G 是引力常量
  • r 是两个物体的距离

然后,我们又知道牛顿的第二定律:

<math xmlns="http://www.w3.org/1998/Math/MathML"> F = m . a F=m.a </math>F=m.a

  • F 是引力
  • m 是物体的质量
  • a 是物体的加速度

结合上面的两条定律,那么,我们知道粒子的加速度公式如下:

<math xmlns="http://www.w3.org/1998/Math/MathML"> a = G M r 2 a=G\frac{M}{r^2} </math>a=Gr2M

因为这里,我们并没有考虑到物体的质量,所以 G*M 的值,我们设定为一个常量,即为 const STRENGTH = 3 * 1000 * 1000,当然,这个值读者可根据实际情况进行调整。

所以,我们可以得到每个粒子每个时刻的加速度,或者说 x 轴和 y 轴的每个时刻移动的距离:

javascript 复制代码
let dx = paticle.originX - paticle.x;
let dy = paticle.originY - paticle.y;
// 两个粒子之间的直线距离
let distance = Math.sqrt(dx * dx + dy * dy);
// 两个粒子线段与 x 轴的夹角
let angle = Math.atan2(dy, dx);
// 粒子的加速度
let acceleration = STRENGTH / (distance * distance);
// 粒子在 x 轴方向此时的速度
paticle.vx += acceleration * Math.cos(angle); // acceleration * Math.cos(angle) 表示在 x 轴方向的加速度
// 粒子在 y 轴方向此时的速度
paticle.vy += acceleration * Math.sin(angle); // acceleration * Math.sin(angle) 表示在 y 轴方向的加速度

上面👆我们得到了粒子当前速度,那么我们就计算粒子当前的距离了:

javascript 复制代码
paticle.x += paticle.vx;
paticle.y += paticle.vy;

当粒子靠近得足够的距离,我们将粒子放置在原来的坐标位置 (originX, originY)

javascript 复制代码
if(paticle.x > (paticle.originX - paticle.vx) && 
  paticle.x < (paticle.originX + paticle.x)  && 
  paticle.y > (paticle.originY - paticle.vy) &&
  paticle.y < (paticle.originY + paticle.vy)) {
  paticle.x = paticle.originX;
  paticle.y = paticle.originY;
}

👌,大功告成🎉🎉🎉

如果本文对你有帮助,不妨一键三连 「点赞👍,收藏🌟,分享⭕️」 🌹🌹🌹

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript