Efek javaScript Kembang Api

Javascript

by Tio Crg

HTML

<canvas id="canvas"></canvas>
<!-- best viewed in chrome -->%canvas

CSS

@import "compass/css3";

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: black;
}
canvas {
  display: block;
}

JavaScript

(function () {
  'use strict';
  
  var canvas = document.querySelector('canvas'),
      ctx = canvas.getContext('2d'),
      W = canvas.width = window.innerWidth,
      H = canvas.height = window.innerHeight,
      maxP = 100,
      minP = 100,
      fireworks = [];
  
  function tick() {
    var newFireworks = [];
    ctx.clearRect(0, 0, W, H);
    
    fireworks.forEach(function (firework) {
      firework.draw();
      if (!firework.done) newFireworks.push(firework);
    });
    
    fireworks = newFireworks;
    window.requestAnimationFrame(tick);
  }
  
  function Vector(x, y) {
    this.x = x;
    this.y = y;
  }
  
  Vector.prototype = {
    constructor: Vector,
    
    add: function (vector) {
      this.x += vector.x;
      this.y += vector.y;
    },
    
    diff: function (vector) {
      var target = this.copy();
      return Math.sqrt(
        (target.x-=vector.x) * target.x + (target.y-=vector.y) * target.y
      );
    },
    
    copy: function () {
      return new Vector(this.x, this.y);
    }
  };
  
  var colors = [
    ['rgba(179,255,129,', 'rgba(0,255,0,'], //green / white
    ['rgba(0,0,255,', 'rgba(100,217,255,'], //blue / cyan
    ['rgba(255,0,0,', 'rgba(255,255,0,'], //red / yellow
    ['rgba(145,0,213,', 'rgba(251,144,204,'] //purple / pink
  ];
  
  function Firework(start, target, speed) {
    this.start = start;
    this.pos = this.start.copy();
    this.target = target;
    this.spread = Math.round(Math.random() * (maxP-minP)) + minP;
    this.distance = target.diff(start);
    this.speed = speed || Math.random() * 5 + 10;
    this.angle = Math.atan2(target.y - start.y, target.x - start.x);
    this.velocity = new Vector(
      Math.cos(this.angle) * this.speed,
      Math.sin(this.angle) * this.speed
    );
    
    this.particals = [];
    this.prevPositions = [];
    
    var colorSet = colors[Math.round(Math.random() * (colors.length -1))];
    
    for (var i=0; i<this.spread; i++) {
      this.particals.push(new...