Canvas animation representing movement of colliding orbs.
npm run build
Copy /dist/plugin.js to js-directory on your site, insert
<script src="plugin.js"></script>
<link href="plugin.css" rel="stylesheet" type="text/css" />
in your html. It will add a new option FloatingOrbsPlugin to your window object.
Create a div element in your markup. Define an id attribure for it. Then create a bubbles field using constructor:
const orbsField = new FloatingOrbsPlugin('div-id', options);
And initialize the field:
orbsField.init();
As second argument should be passed an object consisting of next properties. Every field is optional.
| Name | Value | Default |
|---|---|---|
| width | number | 400 |
| height | number | 1000 |
| className | string | 'bubbles-field-plugin' |
| mode | 'gas'|'slowing'|'default' | 'default' |
| particles | *{ radius: number, color: string|[number, number, number], count: number }|Array[*] | 20 particles with radius 10px and random color |
| particleStyle | 'default'|'filled'|'stroked'|'vibrating'|'satellite' | 'default' |
| drawSparkles | true|false | false |
| overlay | true|false | false |
| drawBorder | true|false | false |
- width - sets the width of canvas. Should be a number.
- height - height of canvas. Should be a number.
- className - class name that will be assigned to container, specified in first parameter of connstructor. If you want to add own class to predefined, push string concatenated of your class name and 'bubbles-field-plugin'
- mode - movement mode of particles.
- 'default': velocities of particles are constant.
- 'gas': velocities change after collisions due to physical rules of ellastic collision.
- 'slowing': velocities constantly slow down until collision, after that velocities of collided particles return back to normal. If everyone stops, particles get small impulse.
- particles - defines parameters of particles. One or more sets can be pulled. If here's only one set, object can be passed. Every set consists of
- count: number of particles
- radius: radius of particles in pixels
- color: optional. Can be a string of 'red', 'blue', 'green' or array of 3 numbers, representing color in rgb notation [255, 255, 255] for white, for example. Makes sense for 'filled' and 'stroked' particleStyle options. Examples:
{ count: 10, radius: 15, color: 'red' }
[{ count: 5, radius: 20, color: 'blue' }, { count: 4, radius: 30, color: [0, 0, 255] }]
- particleStyle
- 'default': draws simple line as in examples above.
- 'filled': particles are filled. If color is not passed in parameters, the random color gets created for each particle.
- 'stroked': outer part filled more opaque than inner.
- 'vibrating': distortions appear after collisions and fall off
- 'satellite':
- drawSparkles - true/false. If true, sparkles will be created after collisions
- overlay - true/false. If true, will be added translucent white canvas above to make it milder. So you can place it under some content(additional css styles can be required).
- drawBorder - true/false. If true, draws ordinary black border around canvas.
