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

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

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

实现的效果如下:

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

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

  • 图转粒子
  • 粒子加速

图转粒子

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

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

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;
}

👌,大功告成🎉🎉🎉

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

相关推荐
neter.asia3 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫4 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年23 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_24 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891126 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾27 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking28 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu30 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym34 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫35 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js