微件:SaltFirework - 版本历史

Salt lovely：使用TS重写，开源在 github.com/mcbbs-wiki/mcbbs-wiki-widget-repo，换了一种烟花粒子扩散的算法，现在粒子不会聚集成一个环了

2022-07-24T12:15:19Z

使用TS重写，开源在 github.com/mcbbs-wiki/mcbbs-wiki-widget-repo，换了一种烟花粒子扩散的算法，现在粒子不会聚集成一个环了

Salt lovely：添加了自定义烟花颜色色相，颜色波动范围，粒子数量三种自定义参数

2021-01-20T13:37:19Z

添加了自定义烟花颜色色相，颜色波动范围，粒子数量三种自定义参数

@@ 第9行： / 第9行： @@
 */
 (function () {
      // 参数
-     const hueRange = [0, 360] // 颜色范围
+    // 颜色范围
-     const hueDiff = 30 // 颜色变化区间
+     const hueRange = (function () {
-     const count = 110 // 粒子效果数量
+        let defaultValue = (function () {
      const baseRange = [1, 4] // 粒子大小
      const speedMutiply = 6 // 粒子速度范围
@@ 第40行： / 第69行： @@
          clearCanvas()
          tick() // 开始tick
-         document.addEventListener('mousedown', (e) => { createFireworks(e.clientX, e.clientY) }) // 监听事件
+         document.addEventListener('mousedown', function (e) { createFireworks(e.clientX, e.clientY) }) // 监听事件
+     }
      /**清理绘图区 */
@@ 第55行： / 第84行： @@
      function createFireworks(x, y) {
          /**这个烟花的颜色 */
-         let hue = Math.floor(Math.random() * (hueRange[1] - hueRange[0])) + hueRange[0]
+         let hue = randomChoice(hueRange)
          for (let i = 0; i < count; i++) {
              let spd = Math.random() * speedMutiply + baseSpeed
@@ 第128行： / 第157行： @@
          clearParticles()
          requestAnimationFrame(tick)
+     }
 })()
 </script></includeonly>

Salt lovely：快过年了

2021-01-19T14:32:01Z

快过年了

新页面

<noinclude>{{#Widget:SaltFirework}}</noinclude><includeonly><script>
/**
* 搬运须知: 您必须在**显眼处**标识来源“MCBBS Wiki”与作者“Salt_lovely”, **不**接受任何形式的简称或不署名。
* Notice: You have to mark origin "MCBBS Wiki" and author "Salt_lovely" in CONSPICUOS PLACE, abbreviation or omissions are NOT allowed.
* 许可证: CC BY-NC-SA 4.0
* License: CC BY-NC-SA 4.0
* 灵感来源: https://codepen.io/jackrugile/pen/acAgx 作者 Jack Rugile
* Inspired By: https://codepen.io/jackrugile/pen/acAgx Author Jack Rugile
*/
(function () {
// 参数
const hueRange = [0, 360] // 颜色范围
const hueDiff = 30 // 颜色变化区间
const count = 110 // 粒子效果数量
const baseRange = [1, 4] // 粒子大小
const speedMutiply = 6 // 粒子速度范围
const radius = 1.7 // 粒子扩散半径比粒子速度
const baseSpeed = 0.2 // 粒子最低速度
const fallSpeed = 1.1 // 粒子下坠速度
const tail = 15 // 尾迹
/**创建canvas */
let canvas = document.createElement('canvas')
/**获取canvas绘图区域 */
let context = canvas.getContext('2d')
/**烟花粒子数组 */
let particles = []
/**记录剩余粒子数量，在合适的时机清理画布 */
let lastLength = 0, zeroFrame = 0
init() // 初始化
function init() {
canvas.id = 'saltFireWorkCanvas'
canvas.style.left = '0'
canvas.style.top = '0'
canvas.style.position = 'fixed'
canvas.style.pointerEvents = 'none' // 不干扰鼠标
canvas.style.zIndex = '99999' // 置于顶层
document.body.appendChild(canvas)
resizeCanvas()
window.addEventListener('resize', resizeCanvas, false)
clearCanvas()
tick() // 开始tick
document.addEventListener('mousedown', (e) => { createFireworks(e.clientX, e.clientY) }) // 监听事件
}
/**清理绘图区 */
function clearCanvas() {
context.fillStyle = 'rgba(255,255,255,0)'
context.fillRect(0, 0, canvas.width, canvas.height)
}
/**重设绘图区大小*/
function resizeCanvas() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
/**创建烟花*/
function createFireworks(x, y) {
/**这个烟花的颜色 */
let hue = Math.floor(Math.random() * (hueRange[1] - hueRange[0])) + hueRange[0]
for (let i = 0; i < count; i++) {
let spd = Math.random() * speedMutiply + baseSpeed
let p = {
rad: Math.random() * 2 * Math.PI, // 弧度
x: x,
y: y,
speed: spd,
radius: spd * radius,
size: Math.floor(Math.random() * (baseRange[1] - baseRange[0])) + baseRange[0],
hue: hueRandom(),
bright: Math.floor(Math.random() * 16) + 65,
alpha: Math.floor(Math.random() * 51) + 50,
}
particles.push(p)
}
function hueRandom() {
let h = Math.floor(Math.random() * hueDiff + hue - hueDiff)
if (h > 360)
h -= 360
else if (h < 0)
h += 360
return h
}
}
/**主过程*/
function drawParticles() {
for (let i = 0; i < particles.length; i++) {
let p = particles[i]
if (!p)
continue
p.x += Math.cos(p.rad) * p.radius
p.y += Math.sin(p.rad) * p.radius + fallSpeed
p.radius *= 1 - p.speed / 100
p.alpha -= 0.75
context.beginPath()
context.arc(p.x, p.y, p.size, 0, Math.PI * 2, false)
context.closePath()
context.fillStyle = `hsla(${p.hue},100%,${p.bright}%,${p.alpha / 100})`
context.fill()
if (p.alpha < 0.75) // 标记已经透明到看不见的粒子
particles[i] = null
}
if (lastLength == 0 && particles.length == 0) {
zeroFrame += 1
if (zeroFrame == 30) // 连续30帧没有粒子
canvas.height = window.innerHeight // 利用画布重设大小清除内容的特性来清理里面的东西
}
else { zeroFrame = 0 }
lastLength = particles.length
}
/**画出尾迹 */
function drawTail() {
context.globalCompositeOperation = 'destination-out' // 保留前一刻的图案作为尾迹
context.fillStyle = `rgba(255,255,255,${1 / tail})`
context.fillRect(0, 0, canvas.width, canvas.height)
context.globalCompositeOperation = 'lighter'
}
/**清理已经消失的粒子*/
function clearParticles() {
let cp = []
for (let p of particles)
if (p)
cp.push(p)
particles = cp
}
/**高频调用*/
function tick() {
// 画尾迹 -> 画这一帧的粒子 -> 删除运算完毕的粒子
drawTail()
drawParticles()
clearParticles()
requestAnimationFrame(tick)
}
})()
</script></includeonly>

微件:SaltFirework - 版本历史

Salt lovely：​使用TS重写，开源在 github.com/mcbbs-wiki/mcbbs-wiki-widget-repo，换了一种烟花粒子扩散的算法，现在粒子不会聚集成一个环了

Salt lovely：​添加了自定义烟花颜色色相，颜色波动范围，粒子数量三种自定义参数

Salt lovely：​快过年了

Salt lovely：使用TS重写，开源在 github.com/mcbbs-wiki/mcbbs-wiki-widget-repo，换了一种烟花粒子扩散的算法，现在粒子不会聚集成一个环了

Salt lovely：添加了自定义烟花颜色色相，颜色波动范围，粒子数量三种自定义参数

Salt lovely：快过年了