p5实现烟花绽放动画效果-html代码-BFW代码库

p5实现烟花绽放动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0, .9)
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script>
const createParticle = (x, y, hu, firework) => {
  const pos = createVector(x, y);
  let vel
  if (firework) {
    vel = createVector(0, random(-12, -8)); 
  } else {
    vel = p5.Vector.random2D();
    vel.mult(random(2, 10));
  }
  const acc = createVector(0, 0);
  let lifespan = 255;
  
  const applyForce = (force) => {
    acc.add(force);
  };
  
  const show = () => {
    if (!firework) {
      strokeWeight(2); 
      stroke(hu, 255, 255, lifespan);
    } else {
      strokeWeight(4);
      stroke(hu, 255, 255); 
    }
    point(pos.x, pos.y);
  };
  
  const update = () => {
    if (!firework) {
      vel.mult(0.9);
      lifespan -= 4;
    }
    vel.add(acc);
    pos.add(vel);
    acc.mult(0);
  };
  
  const done = () => {
    return lifespan < 0;
  }; 
  
  return {
    update,
    show,
    applyForce,
    vel,
    pos,
    done
  }
};

const createFirework = () => {
  const hu = random(255);
  const firework = createParticle(random(width), height, hu,.........完整代码请登录后点击上方下载按钮下载查看