Nerfed Poet Melancholia

    metaballs-js

    2.0.0 • Public • Published

    metaballs-js

    NPM License BundlePhobia Last Commit

    Demo

    Playground / Demo

    Features

    • Create animated metaballs in all numbers, colors, sizes, velocities.
    • Light-weight: Written in plain WebGL without any other dependencies. BundlePhobia
    • Performant: Makes use of GPU hardware acceleration. The performance solely depends on the number of metaballs.

    Install

    npm install --save metaballs-js

    Usage

    import initMetaballs from "metaballs-js";
     
    const options = {
      numMetaballs: 100,
      minRadius: 3,
      maxRadius: 7.5,
      speed: 10.0,
      color: '#ff0024',
      backgroundColor: '#121212',
      useDevicePixelRatio: true
    }
     
    const cssSelector = '#canvasId'
    initMetaballs(cssSelector, options)
     
    // in your HTML
    <html>
      <body>
        <canvas id="canvasId"></canvas>
      </body>
    </html>

    Options

    Name Description Type Default Value
    numMetaballs The number of metaballs to display Number 100
    minRadius minimum radius of a metaball Number 3
    maxRadius maximum radius of a metaball Number 7.5
    speed maximum speed of a metaball Number 10.0
    color color of the metaballs String #ff0024 '#ff0024'
    backgroundColor The background color of the canvas String #121212 '#121212'
    interactive Create a metaball at cursor position listening to mouse move events. Valid values are window or canvas String or Boolean false
    useDevicePixelRatio Use more pixels matching the device pixel ratio Boolean true

    Limitations

    Metaballs-js currently uses uniforms to send the metaball positions to the GPU / shaders. There are specific device restrictions on the max number of uniforms, i.e., also on the max number of metaballs one can render at a time. If this happens you will see the following error thrown:

    Shader compile failed with: ERROR: too many uniforms
    

    This is especially problematic on mobile phones.

    Resources

    License

    MIT © MrToph

    Keywords

    none

    Install

    npm i metaballs-js

    DownloadsWeekly Downloads

    17

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    89.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • cmichelio