夏夜看烟火是很多人的童年记忆，如今用代码复刻这种浪漫效果其实并不难。今天咱们就用最直白的方式，聊聊怎么在项目中实现让人眼前一亮的烟火特效，顺便分享个超好用的火药猴代码模板。
准备工作：厨房里的烟火材料
就像做菜需要备齐食材，写代码也得准备好这些工具：
- 编程环境：Visual Studio Code或Processing都行（新手推荐后者）
- 图形库：p5.js或者Processing自带的绘图模块
- 调试神器：Chrome浏览器的开发者工具
- 灵感来源：多看看NASA的火星探测器拍摄的星空照片
基础原料准备清单
| 工具类型 | 推荐选择 | 替代方案 |
| 编程语言 | JavaScript | Python(pygame) |
| 渲染方式 | Canvas绘图 | SVG动画 |
| 物理引擎 | 自定义算法 | Matter.js |
基础烟火：从火星到绽放
先来看看最简单的上升-爆炸效果实现。想象你手里拿着根仙女棒，火星向上蹿到顶点突然炸开的过程。
function firework {let particles = [];// 发射阶段for(let i=0; i<100; i++) {let angle = random(TWO_PI);let speed = random(2,5);particles.push({x: width/2,y: height,vx: speedcos(angle),vy: -speedsin(angle)});// 爆炸阶段if(frameCount % 60 == 0) {particles.forEach(p => {p.vx += random(-0.5,0.5);p.vy += random(-0.5,0.5);});参数调试小技巧
- 速度值控制在3-5之间最像真实火花
- 添加0.01的重力系数让轨迹更自然
- 颜色过渡用HSL模式比RGB更顺滑
进阶玩法：让烟火会讲故事
这时候你可能会问：怎么做出像迪士尼乐园那种有叙事感的烟火秀？其实关键在于时间轴控制和粒子组合。
时间轴编排示例
| 时间(秒) | 效果类型 | 对应代码模块 |
| 0-2 | 上升轨迹 | 抛物线运动方程 |
| 2-3 | 主爆点 | 粒子扩散算法 |
| 3-5 | 二次绽放 | 递归粒子生成 |
火药猴代码实战
这个经典算法就像会变魔术的猴子，能自动生成各种意想不到的烟花形态。核心在于给每个粒子加上"遗传基因"：
class Particle {constructor(dna) {this.dna = dna || {color: [random(255),random(255),random(255)],lifespan: random(50,150),spread: random(2,8)};update {// 每帧根据DNA更新状态this.lifespan -= this.dna.spread;效果对比实验
| 参数组合 | 视觉效果 | 性能消耗 |
| spread=2 | 牡丹花型 | CPU占用15% |
| spread=5 | 蒲公英型 | CPU占用35% |
| spread=8 | 流星雨型 | GPU占用60% |
安全须知：代码烟火的注意事项
- 粒子数量控制在500个以内防止卡顿
- 移动端记得做触屏事件适配
- 参考《WebGL编程指南》优化渲染性能
窗外的蝉鸣渐渐轻了，屏幕上的代码烟火还在继续绽放。试着调整粒子参数里的红色分量，你会发现晚霞般的渐变色正在程序世界里流转。下次朋友聚会时，说不定就能用这段代码给他们个惊喜呢。
