Particle-ins

https://www.npmjs.com/package/particle-ins
Particle-ins is a library to quickly and efficiently create particle effects.
Written in Typescript, uses WebGL for rendering.
          
    let canvas = document.getElementById("example1") as HTMLCanvasElement;

    let options = new IpsOptions();
    let particleSystem = new ParticleSystem(options, canvas, 1000, 600);

    let emitterOptions = new IpsEmitterOptions(
        new IpsCoordinates(0, 0, 0, 0),
        new IpsCoordinates(-1, 1, -1, 1),
        1000
    );

    emitterOptions.positionType = IpsPositiontype.Relative;
    particleSystem.addEmitter(emitterOptions);
    
      
Particle system with 1 emitter emitting from relative position (0, 0) in all directions. 1000 particles per second.
                        
    let canvas = document.getElementById("example2") as HTMLCanvasElement;

    let options = new IpsOptions();
    let particleSystem = new ParticleSystem(options, canvas, 1000, 600);

    let emitterOptions = new IpsEmitterOptions(
        new IpsCoordinates(0, 333, 0, 600),
        new IpsCoordinates(-1, 1, -1, 1),
        1000,
        1000,
        { min: 20, max: 40 },
        -100,
        "ffaa87"
    );

    let emitterOptions2 = new IpsEmitterOptions(
        new IpsCoordinates(333, 666, 0, 600),
        new IpsCoordinates(-0.1, 0.1, -0.1, 0.1),
        1000,
        1000,
        { min: 1, max: 3 },
        10,
        "3345ff"
    );

    let emitterOptions3 = new IpsEmitterOptions(
        new IpsCoordinates(666, 1000, 0, 600),
        new IpsCoordinates(-1, 1, -1, 1),
        1000,
        500,
        { min: 3, max: 10 },
        -10,
        "aa4587"
    );

    particleSystem.addEmitter(emitterOptions);
    particleSystem.addEmitter(emitterOptions2);
    particleSystem.addEmitter(emitterOptions3);
    
                    
3 emitters using 1/3 of the screen each. Generating 1000 particles each. Startposition randomly selected from max and min paramaters.
                            
    let canvas = document.getElementById("example3") as HTMLCanvasElement;

    let snowTexture: ImageItem = {
        image: "../assets/images/snowflake.png",
        key: "snow"
    };

    let options = new IpsOptions();
    options.textures = [snowTexture];
    options.color = "cccccc"

    let particleSystem = new ParticleSystem(options, canvas, 1000, 600);

    let emitterOptions = new IpsEmitterOptions(
        new IpsCoordinates(-1, 1, 1, 1),
        new IpsCoordinates(-0.5, 0.5, -0.8, -0.8),
        1000,
        2500
    );

    emitterOptions.size = { min: 3, max: 8 }
    emitterOptions.textureKey = "snow";
    emitterOptions.positionType = IpsPositiontype.Relative;

    particleSystem.addEmitter(emitterOptions);
    
                        
1 emitter with a custom particle texture, startposition top of the screen. Falls down and sideways.
                        
        let canvas = document.getElementById("example4") as HTMLCanvasElement;

        let options = new IpsOptions();
        let particleSystem = new ParticleSystem(options, canvas, 1000, 600);

        let emitterOptions = new IpsEmitterOptions(
            new IpsCoordinates(495, 505, 200, 200),
            new IpsCoordinates(-0.1, 0.1, 1, 1),
            100
        );

        emitterOptions.growth = 50;
        emitterOptions.color = "f27d0c";

        let emitterOptions2 = new IpsEmitterOptions(
            new IpsCoordinates(495, 505, 200, 200),
            new IpsCoordinates(-0.2, 0.2, 1.5, 1.5),
            100,
            700
        );

        emitterOptions2.size = { min: 1, max: 5 };
        emitterOptions2.growth = -3;
        emitterOptions2.color = "fdcf58";

        particleSystem.addEmitter(emitterOptions);
        particleSystem.addEmitter(emitterOptions2);
    
                    
2 emitters with an upwards direction, First one with a large growth value. Second one with a small size and a negative growth.
Play around with Particle-ins(click on the plus sign)!
add