网页js模拟烟花绽放效果

空中湖

已于 2022-09-23 12:24:08 修改

阅读量864

点赞数

分类专栏： js 文章标签： p5.js JavaScript 网页特效烟花模拟编程艺术

于 2022-09-23 12:23:05 首次发布

本文链接：https://blog.csdn.net/kongzhonghu/article/details/127008388

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

烟花又称花炮、烟火、焰火、炮仗，根据《中国烟花爆竹标准—安全与质量》对烟花爆竹的定义为：以烟火药为原料，用于产生声光色的娱乐用品。中国劳动人民较早发明，常用于盛大的典礼或表演中。
烟花其实和爆竹的结构类似，其结构都包含黑火药和药引。为了达到好的表演效果，焰火和礼花弹中填充了大量用于发射以及爆炸的火药，例如，一个直径为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);
}