Now with Partition Management

    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

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      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