Fireworks - visual graphic effect using particles (Typescript)

Download Typescript (Visual Studio 2015 project) source code (46kb)

This page shows the graphic effect simulation of fireworks using a particle system, implemented with Typescript using the Canvas element.

Above my implementation of a firework graphic effect is shown. It is implemented in Typescript using HTML5 canvas.
Feel free to download the source code at the top of the page to check out how it works.

Implementation notes:

The base is a simple 2D particle system. A particle system consists of a set of particle, where a single particle can be thought of an element having a position, speed and acceleration value in the two-dimension plane.
It might be drawn on the screen in a custom way, e.g. as single pixel, as circle, as rectangle or as image.
Further, a particle could have additional properties like a color (including alpha value) or a lifespan (and thus an "active" and "inactive" state) after which it is not updated and visible anymore.
Also a force may be applied to a particle changing the acceleration and thus speed and position.

Particle are used in following ways here:

Finally a small summary of the used classes and files:


2020/02/01: Initial release.