Narcissistic Pickle Meister

    canvas-snowstorm

    0.2.0 • Public • Published

    canvas-snowstorm

    A dynamically generated HTML Canvas snow animation, written in TypeScript.

    View live preview

    Installation

    npm i canvas-snowstorm

    Development

    Ensure TypeScript is enabled:

    tsc -version

    To build, run:

    npm run build

    Usage

    The canvas-snowstorm module exports a single constructor snow, which takes the following arguments:

    • speed: <number> default=1 - The velocity at which the flakes fall
    • scale: <number> default=1 - The scale of the flakes in px
    • amount: <number> default=100 - The amount of flakes to be generated
    • color: <string> default="white" - The color of the flakes (a value of "random" will make every flake a different color)
    • fps: <number> default=30 - The frame rate of the animation
    • w: <number> default=window.innerWidth - The width of the canvas to be generated
    • h: <number> default=window.innerHeight - The height of the canvas to be generated
    • el: <HTMLElement> default=document.body - The parent element the canvas is to be injected into

    Note: Increasing the amount and/or fps factors can be taxing on the CPU/GPU and result in jittery animation

    Methods

    • start() : injects canvas into parent and begins animation
    • play() : un-pauses animation
    • pause() : pauses animation
    • changeScale(s) : updates scale of flakes (must be positive number)

    Example

    HTML

    <div id="myContainer"></div>

    CSS

    #myContainer {
      background-color: black;
      width: 800px;
      height: 600px;
    }

    JavaScript

    import Snow from "canvas-snowstorm";
    
    const parentDiv = document.getElementById("myContainer");
    
    const snow = new Snow(1, 1, 100, "white", 60, 800, 600, parentDiv);

    Output

    example 1

    Install

    npm i canvas-snowstorm

    DownloadsWeekly Downloads

    3

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • j-puls