蝙蝠岛资源网 Design By www.hbtsch.com
前言
之前看过一篇文章,使用processing制作烟花特效。效果如下
fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来。而且动画效果是跑在processing专门的模拟器上。 不过好在也有对应的web扩展语言,有processing.js和p5.js。 processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了。为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效。
代码讲解
processing风格
function setup() { //processing初始化设置
createCanvas(window.innerWidth, window.innerHeight);
frameRate(50);
imageMode(CENTER);
}
function draw() { //循环执行,达成画面渲染效果
background(0, 0, 40);
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].display();
fireworks[i].update();
if (fireworks[i].needRemove()) {
fireworks.splice(i, 1);
}
}
}
烟花效果
function Fireworks(radius) {
var num = 512; //一发烟花里,有多少个点 (比较吃机器)
var centerPosition = new p5.Vector(random(width / 8, width * 7 / 8), random(height / 2, height * 4 / 5), random(-100, 100)); //烟花的中心位置
var velocity = new p5.Vector(0, -22, 0);
var accel = new p5.Vector(0, 0.4, 0);
var img;
var firePosition = [];
var cosTheta;
var sinTheta;
var phi;
var colorChange = random(0, 5);
for (var i = 0; i < num; i++) {
cosTheta = random(0, 1) * 2 - 1;
sinTheta = sqrt(1 - cosTheta * cosTheta);
phi = random(0, 1) * 2 * PI;
firePosition[i] = new p5.Vector(radius * sinTheta * cos(phi), radius * sinTheta * sin(phi), radius * cosTheta); //1发烟花里各个点的位置计算
firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
}
//调整烟花随机颜色,使其更亮丽
if(colorChange>=3.8){
img=createLight(0.9,random(0.2,0.5),random(0.2,0.5));
}else if(colorChange>3.2){
img=createLight(random(0.2,0.5),0.9,random(0.2,0.5));
}else if(colorChange>2){
img=createLight(random(0.2,0.5),random(0.2,0.5),0.9);
} else {
img=createLight(random(0.5,0.8),random(0.5,0.8),random(0.5,0.8));
}
this.display = function () {
for (var i = 0; i < num; i++) {
push();
translate(centerPosition.x, centerPosition.y, centerPosition.z);
translate(firePosition[i].x, firePosition[i].y, firePosition[i].z);
blendMode(ADD); //各个小点(发光源遮罩效果)
image(img, 0, 0);
pop();
firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小点(发光源)扩散位置
}
}
this.update = function () { //模拟重力加速度
radius = dist(0, 0, 0, firePosition[0].x, firePosition[0].y, firePosition[0].z);
centerPosition.add(velocity);
velocity.add(accel);
}
this.needRemove = function () {
if (centerPosition.y - radius > height) {
return true;
} else {
return false;
}
}
}
随机发光源图片生成
function createLight(rPower, gPower, bPower) {
var side = 64;
var center = side / 2.0;
var img = createImage(side, side);
img.loadPixels();
for (var y = 0; y < side; y++) {
for (var x = 0; x < side; x++) {
var distance = (sq(center - x) + sq(center - y)) / 10.0;
var r = int((255 * rPower) / distance);
var g = int((255 * gPower) / distance);
var b = int((255 * bPower) / distance);
// img.pixels[x + y * side] = color(r, g, b);
img.set(y, x, color(r, g, b));
}
}
img.updatePixels();
return img;
}
接收键盘和屏幕触碰事件
function keyPressed() { //每事件添加一发烟花
fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
fireworks.push(new Fireworks(80));
return false;
}
Github
https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
p5.js,烟花特效
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无用p5.js制作烟花特效的示例代码的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2025年10月25日
2025年10月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
