粒子烟花动画

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

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 = 505;
  
  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, true);
  let exploded = false;
  const particles = [];
  
  const explode = () => {
    for (let i = 0; i < 100; i++) {
      let p = createParticle(firework.pos.x, firework.pos.y, hu, false);
       particles.push(p);
    }
  };
  
  const done = () => {
    return exploded && particles.length <= 0; 
  }; 
  
  const update = () => {
    if (!exploded) {
      firework.applyForce(gravity);
      firework.update();
      if (firework.vel.y >= 0) {
          exploded = true;
          explode();
      }
    } else {
       particles.forEach((particle, i) => {
         particle.applyForce(gravity); 
         particle.update();
         if(particle.done()) {
           particles.splice(i, 1);
         }
      });
    }
  };
  
  const show = () => {
    if (!exploded) {
      firework.show();
    }
   particles.forEach(particle => {
      particle.show();
    });
  };
  
  return {
    update,
    show,
    done
  };
};

let fireworks = [];
let gravity;

function setup() {
  createCanvas(600, 500);
  colorMode(HSB, 255, 255, 255, 255);
  gravity = createVector(0, 0.2);
  background(0, 0, 0);
}

function draw() {
  background(0, 0, 0, 25);
  if (random(1) < 0.03) {
     fireworks.push(createFirework());  
  }
  fireworks.forEach((firework, i) => {
    firework.update();
    firework.show();
    if (firework.done()) {
      fireworks.splice(i, 1)
    }
  });
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>粒子烟花动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号