用p5.js制作烟花特效的示例代码

p5.js 是一个开源的JavaScript库，它使得编程更容易接近创意人士，非程序员和初学者，用于创建图像、动画和互动式艺术作品。p5.js 在设计上与Processing相似，但它是专门为Web设计的，让开发者能在网页浏览器中实现相同的视觉效果。 烟花特效是一种常见的视觉效果，常用于游戏、电影和网页设计中，以吸引用户注意力和增强视觉体验。利用 p5.js，可以非常方便地创建出复杂且美观的烟花动画。下面，我们将详细介绍 p5.js 创建烟花特效的关键知识点。 1. canvas 设置 在 p5.js 中，创建一个 canvas 元素是进行绘图的基础。可以通过 `createCanvas()` 函数来创建一个画布。该函数接收两个参数：宽度和高度，这两个参数可以根据需要自定义，也可以使用 `window.innerWidth` 和 `window.innerHeight` 来自适应屏幕大小。例如： ```javascript createCanvas(window.innerWidth, window.innerHeight); ``` 此外，设置画布的帧率可以使用 `frameRate()` 函数，控制动画的流畅程度： ```javascript frameRate(50); ``` 2.烟花特效的基本构成 烟花效果由一系列小的光点组成，这些光点根据物理规则运动并逐渐消失。我们需要定义一个数组 `fireworks` 来存储所有烟花的实例。每个烟花实例又包含几个关键属性：光点的位置、速度、加速度、颜色等。 在 `setup()` 函数中初始化画布和设置变量之后，`draw()` 函数会不断循环执行，以实现连续的画面渲染。在 `draw()` 函数中，我们使用 `background()` 函数来设置背景颜色，这里设置了一个深蓝色背景，给烟花效果营造出夜空的感觉。 3. 烟花的属性和方法 在 p5.js 中创建一个烟花类 `Fireworks`，它有以下几个关键方法： - `display()` 方法：负责在画布上绘制烟花的每一个小点。使用了 `push()` 和 `pop()` 函数来保存和恢复变换状态，`translate()` 函数移动光点的位置，`image()` 函数绘制烟花的图像，`blendMode(ADD)` 用于创建光点的叠加效果，增强视觉亮度。 - `update()` 方法：模拟烟花小点在重力加速度作用下的运动，使用 `velocity` 向量和 `accel` 向量更新每个点的位置。 - 构造函数 `Fireworks(radius)`：初始化烟花的中心位置、速度、加速度和颜色。通过数学计算产生烟花的爆炸效果，根据 `num` 控制烟花爆炸后分散的小点数量。 4. 颜色和效果的调整 在创建烟花颜色时，使用 `createLight()` 函数生成光点的颜色。根据 `colorChange` 变量的不同取值，随机生成不同的颜色。p5.js 提供了 `random()` 函数来生成随机数，使得每次烟花的样式都不尽相同，更加自然和有生机。 5. 清除已完成的烟花 在 `draw()` 函数中，如果检测到烟花实例完成了它的生命周期，比如小点已经完全消失，就可以从数组中移除这个实例，防止数组无限增大，影响性能。 以上就是用 p5.js 制作烟花特效的基础知识点。这些技术点相互配合，可以实现诸如烟花爆炸、升空、消散等一系列动态视觉效果。通过学习这些基础知识，可以进一步探索更复杂的效果，比如不同种类的烟花、多级别的烟花效果，以及与其他视觉元素的交互效果等。