JavaScript para escribir fuegos artificiales web
Primer marco web
<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>
Código de función de JavaScript
Los valores del bloque de código de este artículo están todos codificados. Ji ji ji
La primera parte de la función principal de fuegos artificiales.
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();
}
}
}
La segunda parte trata sobre los efectos de animación y las pinturas de partículas de fuegos artificiales.
Dibujo preliminar de partículas
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, *);
}
}
}
La última es la descripción del efecto de animación.
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);
}
}
Finalmente muestra el efecto
Se siente bien
Ji ji