网页js模拟烟花绽放效果

空中湖

2024-04-29 帮助1人

烟花又称花炮、烟火、焰火、炮仗，根据《中国烟花爆竹标准—安全与质量》对烟花爆竹的定义为：以烟火药为原料，用于产生声光色的娱乐用品。中国劳动人民较早发明，常用于盛大的典礼或表演中。
烟花其实和爆竹的结构类似，其结构都包含黑火药和药引。为了达到好的表演效果，焰火和礼花弹中填充了大量用于发射以及爆炸的火药，例如，一个直径为20厘米的礼花弹在发射后，要上升到大概200米的高空才会爆炸，而这些星星点点覆盖的半径大约可以有80米左右。

在网页端模拟烟花会不会更棒，已经有小朋友做出了非常好的效果，让我们来一起看一下，有图有真相：

学新通

在线demo地址

index.html

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src = "https://p5js.org/assets/js/p5.dom.min.js"></script>
<script src="./logic.js"></script>
<script src="./particle.js"></script>
<script src="./Firework.js"></script>
</head>
<body>
</body>
</html>

particle.js

function Particle(x,y,hu,firework){
this.firework = firework;
this.lifespan = 255;
this.hu = hu;
this.pos = createVector(x,y);
if (this.firework)
this.vel = createVector(0,random(-10,-18));
else{
this.vel = p5.Vector.random2D();
this.vel.mult(random(4,12));
}
this.acc = createVector(0,0);
this.applyForce = function(force){
this.acc.add(force);
}
this.done = function(){
if (this.lifespan<=0)
return true;
else return false;
}
this.update = function(){
if(!this.firework){
this.vel.mult(0.9);
this.lifespan -=4;
}
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
}
this.show = function(){
colorMode(HSB);
if(!this.firework){
strokeWeight(2);
stroke(hu,255,255,this.lifespan);
}
else {
stroke(hu,255,255);
}
point(this.pos.x,this.pos.y);
}
}

logic.js

var fireworks = [];
function setup(){
createCanvas(window.innerWidth,window.innerHeight);
colorMode(HSB);
stroke(255);
strokeWeight(4);
gravity = createVector(0,0.2);
background(0);
}
function draw(){
colorMode(RGB);
background(0,0,0,25);
if (random(1)<0.05){
fireworks.push(new Firework());
}
for (var i = fireworks.length-1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].show();
if (fireworks[i].done()){
fireworks.splice(i,1);
}
}
console.log(fireworks.length);
}

这篇好文章是转载于：学新通技术网

网页js模拟烟花绽放效果

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开