disintegrate.js

// UMD format: https://github.com/umdjs/umd/blob/master/templates/returnExports.js#L17
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module
    define(['html2canvas'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require('html2canvas'));
  } else {
    // Browser globals
    root.disintegrate = factory(root.html2canvas);
  }
}(typeof self !== 'undefined' ? self : this, function (html2canvas) {

"use strict"

/********************/
/* Helper functions */
/********************/

// Looks for any ancestor with a data attribute of the one given
// If none is found with the given attribute, the parentNode is used
function findParentWithAttr(el, attr) {
  let original = el;
  while ((el = el.parentElement) && !el.hasAttribute(attr));
  if(original === el) el = el.parentNode;
  return el;
} 

// From http://javascript.info/coordinates
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

// Returns a JS array of arrays of numbers from a string
// Example input:   "[255, 255, 255], [35, 35, 35]"
// Example output:  [[255, 255, 255], [35, 35, 35]]
function getNumberArraysFromString(string) {
  let array = [];
  let re = /\[(.*?)(?=\])/g;
  let matches;
  do {
    matches = re.exec(string);
    if(matches)
      array.push(matches[1].split(',').map(Number));
  } while (matches);

  return array;
}

/**************************/
/* Disintegrate functions */
/**************************/

var disElems = [],
    dises = [],
    disParticleTypes = [];

// Create a disObj for each Disintegrate element detected
function processDisElement(el) {
  if(!disElems.includes(el)) {
    disElems.push(el);

    let ignoreColors = [];
    if(el.dataset.disIgnoreColors) {
      ignoreColors = getNumberArraysFromString(el.dataset.disIgnoreColors);
    }

    let particleType = "Particle";
    if(el.dataset.disParticleType) {
      particleType = el.dataset.disParticleType;
    }

    let particleColor = [];
    if(el.dataset.disColor) {
      particleColor = getNumberArraysFromString(el.dataset.disColor)[0];
    }

    let particleReductionFactor = 35;
    if(el.dataset.disReductionFactor) {
      particleReductionFactor = parseInt(el.dataset.disReductionFactor);
    }

    let disObj = {
      elem: el,
      type: el.dataset.disType,
      container: undefined,
      actualWidth: el.offsetWidth,
      actualHeight: el.offsetHeight,
      lastWidth: el.offsetWidth,
      lastHeight: el.offsetHeight,
      count: 0,
      particleArr: [],
      animationDuration: 100,  // in ms 
      canvas: undefined,
      ctx: undefined,
      scrnCanvas: undefined,
      scrnCtx: undefined,
      ignoreColors: ignoreColors,
      isOutOfBounds: false,
      isAnimating: false,
      particleReductionFactor: particleReductionFactor,
      particleType: particleType,
      particleColor: particleColor,
      kill: function() {
        disElems = disElems.filter(item => JSON.stringify(item) !== JSON.stringify(this.elem));
        this.elem.removeAttribute("data-dis-type");

        document.body.removeChild(this.canvas);
        
        dises = dises.filter(item => JSON.stringify(item) !== JSON.stringify(this));
        numCanvasesLoaded--;
      }
    };

    let container;
    if(disObj.type === "self-contained") {
      let parent = el.parentNode;
      let wrapper = document.createElement('div');
      wrapper.dataset.disContainer = "";
      wrapper.style.width = disObj.lastWidth;
      wrapper.style.height = disObj.lastHeight;
      wrapper.style.overflow = "hidden";
      let elemStyles = window.getComputedStyle(el);
      wrapper.style.position = elemStyles.getPropertyValue("position");
      wrapper.style.margin = elemStyles.getPropertyValue("margin");
      wrapper.style.top = elemStyles.getPropertyValue("top");
      wrapper.style.left = elemStyles.getPropertyValue("left");
      wrapper.style.display = elemStyles.getPropertyValue("display");
      el.style.margin = 0;
      el.style.top = 0;
      el.style.left = 0;

      disObj.container = wrapper;

      parent.replaceChild(wrapper, el);
      wrapper.appendChild(el);

      disObj.container = wrapper;
    } else if(disObj.type === "contained") {
      // Try to use the given container if a container Id is provided
      if(el.dataset.disContainerId && document.querySelector("[data-dis-id = '" + el.dataset.disContainerId + "']")) {
        disObj.container = document.querySelector("data-dis-container-id = " + el.dataset.disContainerId);
      } else {
        // Default to using the nearest Disintegrate container or the parent node
        disObj.container = findParentWithAttr(el, "data-dis-container");
      }
    }
    
    // Add this Disintegrate element to our list
    dises.push(disObj);
    // Create the canvases for this Disintegrate element
    getScreenshot(disObj);
    // See if all Dises have been loaded
    checkAllLoaded();
  }
}

function getVisibleDimensions(node, referenceNode) {
  referenceNode = referenceNode || node.parentNode;
  
  let pos = getCoords(node);
  let referencePos = getCoords(referenceNode);

  let overflowingTop = false,
      overflowingRight = false,
      overflowingBottom = false,
      overflowingLeft = false;

  let topCalc = node.offsetHeight - (referencePos.top - pos.top);
  if(topCalc < node.offsetHeight) {
    overflowingTop = true;
  }
  let rightCalc = referencePos.left + referenceNode.offsetWidth - pos.left;
  if(rightCalc < node.offsetWidth) {
    overflowingRight = true;
  }
  let bottomCalc = referencePos.top + referenceNode.offsetHeight - pos.top;
  if(bottomCalc < node.offsetHeight) {
    overflowingBottom = true;
  }
  let leftCalc = node.offsetWidth - (referencePos.left - pos.left);
  if(leftCalc < node.offsetWidth) {
    overflowingLeft = true;
  }
  
  return {
    "boundingRect": pos,
    "referenceBoundingRect": referencePos,
    "width": Math.min(
      node.offsetWidth,
      rightCalc, 
      leftCalc
    ),
    "height": Math.min(
      node.offsetHeight, 
      bottomCalc,
      topCalc
    ),
    "overflowingTop": overflowingTop,
    "overflowingRight": overflowingRight,
    "overflowingBottom": overflowingBottom,
    "overflowingLeft": overflowingLeft
  }
}

// See if the given Dis object is outside of its Dis container.
// If part of it is (compared to the last check), create particles at the
// newly overflowed location.
function checkOutOfBounds(disObj) {
  let dimensions = getVisibleDimensions(disObj.elem, disObj.container);
  
  let visibleWidth = dimensions.width;
  let visibleHeight = dimensions.height;
  let pos = dimensions.boundingRect;
  let referencePos = dimensions.referenceBoundingRect;

  if(!disObj.isOutOfBounds && (visibleWidth <= 0 || visibleHeight <= 0)) {
    disObj.isOutOfBounds = true;
    disObj.elem.dispatchEvent(new Event('disOutOfBounds'));
  } else if(disObj.isOutOfBounds && (visibleWidth > 0 && visibleHeight > 0)) {
    disObj.isOutOfBounds = false;
    disObj.elem.dispatchEvent(new Event('disInBounds'));
  }

  disObj.actualWidth = disObj.elem.offsetWidth;
  disObj.actualHeight = disObj.elem.offsetHeight;

  let lastWidth = disObj.lastWidth;
  let lastHeight = disObj.lastHeight;

  let widthDiff = lastWidth - visibleWidth;
  let heightDiff = lastHeight - visibleHeight;

  let choppedLeft = disObj.actualWidth - visibleWidth;
  let choppedTop = disObj.actualHeight - visibleHeight;

  let containerIndex;
  if(visibleWidth !== lastWidth 
  || visibleHeight !== lastHeight) {
    containerIndex = disObj.particleArr.length;
    disObj.particleArr.push({
      "startTime": Date.now(),
      "myParticles": []
    });
  }

  let screenshotData; // Uint8ClampedArray

  // Right and left sides
  if(visibleWidth !== lastWidth) {

    if(Math.floor(widthDiff) > 0
    && Math.floor(visibleWidth) > 0
    && Math.floor(visibleHeight) > 0) {
  
      let worldX;

      // Right side
      if(dimensions.overflowingRight) {
        worldX = pos.left + visibleWidth;
      }

      if(dimensions.overflowingTop
      && dimensions.overflowingRight) { // Top right
        screenshotData = disObj.scrnCtx.getImageData(visibleWidth, choppedTop, widthDiff, visibleHeight).data;
      } else if(dimensions.overflowingRight) { // Right and bottom right
        screenshotData = disObj.scrnCtx.getImageData(visibleWidth, 0, widthDiff, visibleHeight).data;
      }

      // Process the pixels overflowed
      if(screenshotData) {
        for(let i = 0; i < screenshotData.length; i += 4) {
          // Do it every once in a while
          if(disObj.count % disObj.particleReductionFactor === 0) {
            let worldY = pos.top + Math.floor((i / 4) / widthDiff);

            if(dimensions.overflowingTop) {
              worldY += choppedTop;
            }
            let colorData;
            if(disObj.particleColor.length > 0) {
              colorData = disObj.particleColor;
            } else {
              colorData = screenshotData.slice(i, i + 4);
            }

            // Create a particle of the given pixel color at the given location
            createParticle(disObj, worldX - pos.left, worldY - pos.top, worldX, worldY, colorData, containerIndex);
          }
          disObj.count++;
        }
      } 

      // Left side
      if(dimensions.overflowingLeft) {
        worldX = referencePos.left; // or pos.left + choppedLeft
      }

      if(dimensions.overflowingTop
      && dimensions.overflowingLeft) { // Top left
        screenshotData = disObj.scrnCtx.getImageData(disObj.actualWidth - lastWidth, choppedTop, widthDiff, visibleHeight).data;
      } else if(dimensions.overflowingLeft) { // Left and bottom left
        screenshotData = disObj.scrnCtx.getImageData(disObj.actualWidth - lastWidth, 0, widthDiff, visibleHeight).data;
      }

      // Process the pixels overflowed
      if(screenshotData) {
        for(let i = 0; i < screenshotData.length; i += 4) {
          // Do it every once in a while
          if(disObj.count % disObj.particleReductionFactor === 0) {
            let worldY = pos.top + Math.floor((i / 4) / widthDiff);

            if(dimensions.overflowingTop) {
              worldY += choppedTop;
            }
            let colorData;
            if(disObj.particleColor.length > 0) {
              colorData = disObj.particleColor;
            } else {
              colorData = screenshotData.slice(i, i + 4);
            }

            // Create a particle of the given pixel color at the given location
            createParticle(disObj, worldX - pos.left, worldY - pos.top, worldX, worldY, colorData, containerIndex);
          }
          disObj.count++;
        }
      } 

    }

    disObj.lastWidth = visibleWidth;
  }

  // Top and bottom sides
  if(visibleHeight !== lastHeight) {
    if(Math.floor(heightDiff) > 0
    && Math.floor(visibleWidth) > 0
    && Math.floor(visibleHeight) > 0) {
      
      let worldY;

      // Top side
      if(dimensions.overflowingTop) {
        worldY = referencePos.top; // or pos.top + choppedTop
      }

      if(dimensions.overflowingTop
      && dimensions.overflowingLeft) { // Top left
        screenshotData = disObj.scrnCtx.getImageData(choppedLeft, disObj.actualHeight - lastHeight, visibleWidth, heightDiff).data;
      } else if(dimensions.overflowingTop) { // Top and top right
        screenshotData = disObj.scrnCtx.getImageData(0, disObj.actualHeight - lastHeight, visibleWidth, heightDiff).data;
      }

      // Process the pixels overflowed
      if(screenshotData) {
        for(let i = 0; i < screenshotData.length; i += 4) {
          // Do it every once in a while
          if(disObj.count % disObj.particleReductionFactor === 0) {
            let worldX = pos.left + (i / 4) % visibleWidth;

            if(dimensions.overflowingLeft) {
              worldX += choppedLeft;
            }
            let colorData;
            if(disObj.particleColor.length > 0) {
              colorData = disObj.particleColor;
            } else {
              colorData = screenshotData.slice(i, i + 4);
            }

            // Create a particle of the given pixel color at the given location
            createParticle(disObj, worldX - pos.left, worldY - pos.top, worldX, worldY, colorData, containerIndex);
          }
          disObj.count++;
        }
      } 

      // Bottom side
      if(dimensions.overflowingBottom) {
        worldY = pos.top + visibleHeight;
      }

      if(dimensions.overflowingBottom
      && dimensions.overflowingLeft) { // Bottom left
        screenshotData = disObj.scrnCtx.getImageData(choppedLeft, visibleHeight, visibleWidth, heightDiff).data;
      } else if(dimensions.overflowingBottom) { // Bottom and bottom right
        screenshotData = disObj.scrnCtx.getImageData(0, visibleHeight, visibleWidth, heightDiff).data;
      }

      // Process the pixels overflowed
      if(screenshotData) {
        for(let i = 0; i < screenshotData.length; i += 4) {
          // Do it every once in a while
          if(disObj.count % disObj.particleReductionFactor === 0) {
            let worldX = pos.left + (i / 4) % visibleWidth;

            if(dimensions.overflowingLeft) {
              worldX += choppedLeft;
            }
            let colorData;
            if(disObj.particleColor.length > 0) {
              colorData = disObj.particleColor;
            } else {
              colorData = screenshotData.slice(i, i + 4);
            }

            // Create a particle of the given pixel color at the given location
            createParticle(disObj, worldX - pos.left, worldY - pos.top, worldX, worldY, colorData, containerIndex);
          }
          disObj.count++;
        }
      } 
    }

    disObj.lastHeight = visibleHeight;
  }

  if(screenshotData) {
    disObj.isAnimating = true;
  } 
}

// Creates particles for the entire given Disintegrate object at once, to be 
// customized by the particle type used
function createSimultaneousParticles(disObj) {
  let dimensions = getVisibleDimensions(disObj.elem, disObj.container);
  let pos = dimensions.boundingRect;

  let screenshotData = getAllImageData(disObj);

  disObj.particleArr[0] = {
    "startTime": Date.now(),
    "myParticles": []
  };

  // Process the pixels
  if(screenshotData) {
    for(let i = 0; i < screenshotData.length; i += 4) {
      // Do it every once in a while
      if(disObj.count % disObj.particleReductionFactor === 0) {
        let worldX = pos.left + (i / 4) % dimensions.width;
        let worldY = pos.top + Math.floor((i / 4) / dimensions.width);

        let colorData;
        if(disObj.particleColor.length > 0) {
          colorData = disObj.particleColor;
        } else {
          colorData = screenshotData.slice(i, i + 4);
        }

        // Create a particle of the given pixel color at the given location
        createParticle(disObj, worldX - pos.left, worldY - pos.top, worldX, worldY, colorData, 0);
      }
      disObj.count++;
    }
  } 
}

// Take a "screenshot" of the given Dis object's element using html2canvas
var numCanvasesLoaded = 0;
function getScreenshot(disObj) {
  html2canvas(disObj.elem, { scale: 1, useCORS: true }).then( canvas => {
    numCanvasesLoaded++;
    if(typeof disObj.scrnCanvas === "undefined") {
      disObj.scrnCanvas = canvas;
      disObj.scrnCtx = canvas.getContext('2d');
    }
      
    // Create a canvas to draw particles on the size of the
    // given container element
    if(typeof disObj.canvas === "undefined") {
      disObj.canvas = document.createElement("canvas");
      disObj.canvas.width = document.documentElement.scrollWidth; 
      disObj.canvas.height = document.documentElement.scrollHeight;
      disObj.canvas.style.position = "absolute"; 
      disObj.canvas.style.top = 0;
      disObj.canvas.style.left = 0;
      disObj.canvas.style.userSelect = "none";
      disObj.canvas.style.pointerEvents = "none";
      disObj.canvas.style.zIndex = "1001";
      disObj.canvas.class = "disParticleCanvas";
      disObj.ctx = disObj.canvas.getContext('2d');
      document.body.appendChild(disObj.canvas);
    }

    if(numCanvasesLoaded === dises.length) {
      window.dispatchEvent(new Event('particlesReady'));
    }
  });
}

// Create a particle of the declared type at the given position using the given color
function createParticle(disObj, localX, localY, worldX, worldY, rgbArr, arrayIndex) {
  let dontCreate = false;

  // Don't render the particle if the color is in the ignored list
  if(disObj.ignoreColors.length > 0) {
    disObj.ignoreColors.some( colorArr => {
      if(colorArr.join(',') === rgbArr.slice(0, 3).join(',')) {
        dontCreate = true;
        return;
      }
    });
  }

  // Don't create particles within area not shown due to border radius
  // Currently only supports `border-radius: npx;` format
  let borderRadius = Math.min(
                      parseInt(window.getComputedStyle(disObj.elem).borderRadius), 
                      disObj.actualWidth / 2, 
                      disObj.actualHeight / 2
                     );
  if(borderRadius > 0
  && ( (localX < borderRadius && localY < borderRadius && borderRadius < Math.sqrt(Math.pow(borderRadius - localX, 2) + Math.pow(borderRadius - localY, 2)) ) // Top left
    || (localX > disObj.actualWidth - borderRadius && localY < borderRadius && borderRadius < Math.sqrt(Math.pow(localX - (disObj.actualWidth - borderRadius), 2) + Math.pow(borderRadius - localY, 2)) ) // Top right
    || (localX > disObj.actualWidth - borderRadius && localY > disObj.actualHeight - borderRadius && borderRadius < Math.sqrt(Math.pow(localX - (disObj.actualWidth - borderRadius), 2) + Math.pow(localY - (disObj.actualHeight - borderRadius), 2)) ) // Bottom right
    || (localX < borderRadius && localY > disObj.actualHeight - borderRadius && borderRadius < Math.sqrt(Math.pow(borderRadius - localX, 2) + Math.pow(localY - (disObj.actualHeight - borderRadius), 2)) ) // Bottom left
  )) {
    dontCreate = true;
  }

  if(!dontCreate) {
    let myType = disParticleTypes[0];
    // Make sure the particle type is in Disintegrate's particle type list
    disParticleTypes.forEach( type => {
      if(type.name === disObj.particleType) {
        myType = type;
      }
    });

    // Actually create the particle
    let particle = new myType;
    particle.rgbArray = rgbArr;
    particle.startX = worldX;
    particle.startY = worldY;
    particle.arrayIndex = arrayIndex;
    particle.index = disObj.particleArr[arrayIndex].myParticles.length;

    disObj.animationDuration = particle.animationDuration;
    disObj.particleArr[arrayIndex].myParticles.push(particle);
  }
}

// Animate all existing particles of the given Disintegrate element
// using their built in draw function
function animateParticles(disObj) {
  if(typeof disObj.ctx !== "undefined") {
    disObj.ctx.clearRect(0, 0, document.documentElement.scrollWidth, document.documentElement.scrollHeight);
  }

  for(let i = 0; (disObj.particleArr.length > 0 && i < disObj.particleArr.length); i++) {
    let percent = (Date.now() - disObj.particleArr[i].startTime) / disObj.animationDuration;

    for(let j = 0; j < disObj.particleArr[i].myParticles.length; j++) {
      disObj.particleArr[i].myParticles[j].draw(disObj.ctx, percent);
    }

    if(i === disObj.particleArr.length - 1 && percent > 1) { 
      // Garbage collect
      disObj.particleArr = [];
      // Mark complete
      disObj.elem.dispatchEvent(new Event('disComplete'));
      disObj.isAnimating = false;
    }
  }
}

// Check to see if all the Disintegrate elements detected have been successfully loaded
var raf;
function checkAllLoaded() {
  if(disElems.length === dises.length) {
    window.dispatchEvent(new Event('disesLoaded'));

    if(typeof raf === "undefined")
      raf = window.requestAnimationFrame(disUpdate);
  }
}

// Return the disObj of a given element if it has one
function getDisObj(el) {
  let matchedDisObj = undefined;
  dises.forEach( disObj => {
    if(disObj.elem === el) {
      matchedDisObj = disObj;
    }
  });
  return matchedDisObj;
}

// Add a particle type for Disintegrate to recognize and look for
function addParticleType(func) {
  disParticleTypes.push(func);
}

// Returns a Uint8ClampedArray of image color data in r, g, b, a format per pixel
// for the whole given Disintegrate object
function getAllImageData(disObj) {
  return disObj.scrnCtx.getImageData(0, 0, disObj.actualWidth, disObj.actualHeight).data; 
}

// What actually checks the bounds and animates the existing particles
function disUpdate() {
  dises.forEach( disObj => {
    if(disObj.type !== "simultaneous") {
      checkOutOfBounds(disObj);
    }

    animateParticles(disObj);
  });

  window.requestAnimationFrame(disUpdate);
}

/*********************/
/* Runtime processes */
/*********************/

// Assure the initial capture is done
let firstTime = true;
function init(arr) {
  // Convert given array to data attribute format
  if(arr) {
    arr.forEach(entry => {
      for (const property in entry.data) {
        entry.elem.dataset[property] = entry.data[property];
      }
    });
  }

  const disNodes = document.querySelectorAll("[data-dis-type]");

  numCanvasesLoaded = 0;
  
  if(firstTime) {
    firstTime = false;

    window.addEventListener("load", () => {
      // Setup
      disNodes.forEach( el => {
        if(el.tagName !== "IMG" || el.complete) {
          processDisElement(el);
        } else {
          el.addEventListener("load", e => {
            processDisElement(el);
          });
        }
      });
    });

    // Update the screenshot and canvas sizes when the window changes size
    var resizeTimer;
    window.addEventListener("resize", e => {

      // Wait for resize to "finish"
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout( () => {

        dises.forEach( disObj => {
          getScreenshot(disObj);

          disObj.canvas.width = document.documentElement.scrollWidth; 
          disObj.canvas.height = document.documentElement.scrollHeight;
        });

      }, 250);
    });
  } else {
    disNodes.forEach( el => {
      if(el.tagName !== "IMG" || el.complete) {
        processDisElement(el);
      } else {
        el.addEventListener("load", e => {
          processDisElement(el);
        });
      }
    });
  }
}



/*****************************/
/* Specific particle effects */
/*****************************/

/* An example of how particles could be created */

// Returns a number between -1 and 1 in a normalized (Gaussian) way using the central limit theorum
function genNormalizedVal() {
  return ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random() - 3)) / 3;
}

const EaseIn    = power => t => Math.pow(t, power),
      EaseOut   = power => t => 1 - Math.abs(Math.pow(t-1, power)),
      EaseInOut = power => t => t<.5 ? EaseIn(power)(t*2)/2 : EaseOut(power)(t*2 - 1)/2+0.5;
var Particle = function() {
  this.name = "Particle";
  this.animationDuration = 1000; // in ms

  this.widthScaler = Math.round(50 * genNormalizedVal()); // Normalized val between -50 and 50
  this.numWaves = (genNormalizedVal() + 1 / 2) * 2 + 1;
  this.xPosFunc = t => { return Math.sin(this.numWaves * Math.PI * t); }; 

  this.heightScaler = Math.round(65 * (genNormalizedVal() + 1) / 2) + 10; // Normalized val between 10 and 75
  this.yPosFunc = t => { return t; }; 
  
  this.startSize = 10;
  this.sizeFunc = t => { return 1 - t; };

  this.opacityFactor = Math.round(((genNormalizedVal() + 1) / 2) * 3 + 1);
  this.opacityFunc = t => { return 1 - EaseInOut(this.opacityFactor)(t); };
  
  this.draw = (ctx, percent) => {
    percent = percent >= 1 ? 1 : percent;

    let currX = this.startX + this.xPosFunc(percent) * this.widthScaler;
    let currY = this.startY - this.yPosFunc(percent) * this.heightScaler;
    let currSize = this.startSize * this.sizeFunc(percent);
    let currOpacity = this.opacityFunc(percent);

    ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ',' + currOpacity + ")";
    ctx.fillRect(currX - currSize / 2, currY  - currSize / 2, currSize, currSize);
  };
};
addParticleType(Particle);


/* An "exploding" particle effect that uses circles */
var ExplodingParticle = function() {
  this.name = "ExplodingParticle";
  this.animationDuration = 1000; // in ms

  this.speed = {
    x: -5 + Math.random() * 10,
    y: -5 + Math.random() * 10
  };
  this.radius = 5 + Math.random() * 5;
  this.life = 30 + Math.random() * 10;
  this.remainingLife = this.life;
  this.draw = ctx => {
    if(this.remainingLife > 0
    && this.radius > 0) {
      ctx.beginPath();
      ctx.arc(this.startX, this.startY, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";
      ctx.fill();
      this.remainingLife--;
      this.radius -= 0.25;
      this.startX += this.speed.x;
      this.startY += this.speed.y;
    }
  }
}
addParticleType(ExplodingParticle);


return {
  init,
  dises,
  createSimultaneousParticles,
  getDisObj,
  addParticleType
};
}));