Firework JS With wind!

// NEW FIREWORK WITH WIND
// This needs p5.js
// Link to p5.js: http://p5js.org/download/


//HTML CODE:


<DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <!-- uncomment lines below to include extra p5 libraries -->
  <!--<script language="javascript" src="libraries/p5.dom.js"></script>-->
  <!--<script language="javascript" src="libraries/p5.sound.js"></script>-->
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <!-- this line removes any default padding and style. you might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>


//JS CODE!
var fireworks = [];
var gravity;
var wind;

function setup() {
  createCanvas(1600, 800);
  colorMode(HSB);
  wind = createVector(random(-0.05, 0.05));
  gravity = createVector(0, 0.2);
  stroke(255);
  strokeWeight(4);
  background(0);
}

function draw() {
  colorMode(RGB);
    background(0, 0, 0, 55);
    if (random(1) < 0.08) {
        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)
}
function Particle(x, y, hu, firework) {
    this.pos = createVector(x, y);
    this.firework = firework;
    this.lifespan = 255;
    this.hu = hu;
    this.wind = wind;

    if (this.firework) {
        this.vel = createVector(0, random(-12, -18));
        } else {
        this.vel = p5.Vector.random2D();
        this.vel.mult(random(2, 6));
    }
    this.acc = createVector(0, 0);

    this.applyForce = function(force) {
        this.acc.add(force);
    }

    this.update = function() {
        if (!this.firework) {
            this.vel.mult(0.85);
            this.lifespan -= 4;
        }
        this.vel.add(this.acc);
        this.pos.add(this.vel);
        this.acc.mult(0);
    }


    this.done = function() {
        if (this.lifespan < 0) {
            return true;
        } else {
            return false;
        }
    }

    this.show = function() {
        colorMode(HSB);
        if (!this.firework) {
            strokeWeight(2);
            stroke(hu, 255, 255, this.lifespan);
        } else {
            strokeWeight(4);
            stroke(hu, 255, 255);
        }
        point(this.pos.x, this.pos.y);
    }

}
function Firework() {

    this.hu = random(255);
    this.firework = new Particle(random(width), height, this.hu, true);
    this.exploded = false;
    this.particles = [];

    this.done = function() {
        if (this.exploded && this.particles.length === 0) {
            return true;
        } else {
            return false;
        }
    }

    this.update = function() {

        if (!this.exploded) {
            this.firework.applyForce(gravity);
            this.firework.applyForce(wind);
            this.firework.update();
            if (this.firework.vel.y >= 0) {
                this.exploded = true;
                this.explode();
            }
        }
        if (random(0, 0,8) < 0.08) {
            wind = createVector(random(-0.15, 0.15));
        }


        for (var i=this.particles.length-1; i >= 0; i--) {
            this.particles[i].applyForce(gravity);
            this.particles[i].applyForce(wind)
            this.particles[i].update();
            if (this.particles[i].done()) {
                this.particles.splice(i, 1);
            }
        }
    }


        this.explode = function() {
            for (var i=0; i < 100; i++) {
            var p = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu);
            this.particles.push(p);
        }
    }

    this.show = function() {
        if (!this.exploded) {
            this.firework.show();
        }
        for (var i=0; i < this.particles.length; i++) {
            this.particles[i].show();
        }
    }
}