JavaScript to write web fireworks
First web frame
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<script language="javascript" type="text/javascript" src="particle.js"></script>
<script language="javascript" type="text/javascript" src="firework.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
</body>
</html>
JavaScript function code
The code block values in this article are all coded. Hee hee hee
The first part of the main function firework
function Firework() {
this.hu = random(*);
this.firework = new Particle(random(width), height, this.hu, true);
this.exploded = false;
this.particles = [];
this.done = function() {
if (this.exploded && this.particles.length === *) {
return true;
} else {
return false;
}
}
this.update = function() {
if (!this.exploded) {
this.firework.applyForce(gravity);
this.firework.update();
if (this.firework.vel.y >= *) {
this.exploded = true;
this.explode();
}
}
for (var i = this.particles.length - *; i >= *; i--) {
this.particles[i].applyForce(gravity);
this.particles[i].update();
if (this.particles[i].done()) {
this.particles.splice(i, *);
}
}
}
this.explode = function() {
for (var i = *; i < *; i++) {
var p = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false);
this.particles.push(p);
}
}
this.show = function() {
if (!this.exploded) {
this.firework.show();
}
for (var i = *; i < this.particles.length; i++) {
this.particles[i].show();
}
}
}
The second part is about the animation effects and paintings of firework particles
Preliminary particle drawing
var fireworks = [];
var gravity;
function setup() {
createCanvas(*, *);
colorMode(HSB);
gravity = createVector(*, *);
stroke(255);
strokeWeight(4);
background(0);
}
function draw() {
colorMode(RGB);
background(*, *, *, *);
if (random(*) < *) {
fireworks.push(new Firework());
}
for (var i = fireworks.length -*; i >= *; i--) {
fireworks[i].update();
fireworks[i].show();
if (fireworks[i].done()) {
fireworks.splice(i, *);
}
}
}
The last is the description of the animation effect
function Particle(x, y, hu, firework) {
this.pos = createVector(x, y);
this.firework = firework;
this.lifespan = *;
this.hu = hu;
this.acc = createVector(*, *);
if (this.firework) {
this.vel = createVector(0, random(*, *));
} else {
this.vel = p5.Vector.random2D();
this.vel.mult(random(*, *));
}
this.applyForce = function(force) {
this.acc.add(force);
}
this.update = function() {
if (!this.firework) {
this.vel.mult(*);
this.lifespan -= *;
}
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(*);
}
this.done = function() {
if (this.lifespan < *) {
return true;
} else {
return false;
}
}
this.show = function() {
colorMode(HSB);
if (!this.firework) {
strokeWeight(*);
stroke(hu, *, *, this.lifespan);
} else {
strokeWeight(*);
stroke(hu, *, *);
}
point(this.pos.x, this.pos.y);
}
}
Finally show the effect
It feels okay
Hee hee