2.0.0 • Published 5 years ago
metaballs-js v2.0.0
metaballs-js
Features
- Create animated metaballs in all numbers, colors, sizes, velocities.
- Light-weight: Written in plain WebGL without any other dependencies.
- Performant: Makes use of GPU hardware acceleration. The performance solely depends on the number of metaballs.
Install
npm install --save metaballs-jsUsage
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' |
| backgroundColor | The background color of the canvas | String | '#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 uniformsThis is especially problematic on mobile phones.
Resources
- The code is largely based on Jamie Wong's excellent tutorial
- Jamie Wong explaining the math
License
MIT © MrToph