2d-canvas-image-particles
v1.4.2
Published
A simple lightweight 2D particle system using Canvas.
Downloads
19
Readme
2D Particle System using Canvas
A simple lightweight 2D particle system using Canvas.
- Multiple particle systems can be bound to the same canvas
- Particles speed remain the same regardless of the refreshing rate
- Less than 10 KB
- Refresh rate independant : particles have the same behaviour between 60hz / 144hz monitors
Usage
- Create a canvas
- Import dist/2d-canvas-image-particles.min.js
- Create a new ParticleSystem :
new ParticleSystem(canvas_id, image_path, options);
Example
<canvas id="js-canvas"></canvas>
<script src="dist/2d-canvas-image-particles.min.js"></script>
<script>
new ParticleSystem('js-canvas', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
</script>
You can check the demo page's sources for more examples. You can also use an HTMLCanvasElement instead of an id.
Usage with npm / Yarn
npm install 2d-canvas-image-particles
or yarn add 2d-canvas-image-particles
.
Then you can import it and use it
import '2d-canvas-image-particles';
// ...
new ParticleSystem('id', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
You will need to specify your own images.
Options
{
maxParticles: number,
velocityAngle: [min, max],
speed: [min, max],
rotationStartAngle: [min, max],
cursorMode: CursorMode, // (CursorMode.Bounce, CursorMode.Zoom, CursorMode.Light, CursorMode.Follow),
rotationMode: RotationMode, // (RotationMode.None, RotationMode.Random, RotationMode.FollowVelocity)
rotationSpeed: [min, max],
rotationSpeedSizeScale: number
minimumRotationSpeed: number // if min is negative and max is positive
tints: [new Tint('#hexColor', opacity)],
width: [min, max],
height: [min, max],
addOnClickNb: number,
density: number,
cursorRadius: number
}
Cursor Modes
- CursorMode.Bounce: particles will bounce off the cursor.
- CursorMode.Zoom: the closer the cursor is, the bigger the particles are.
- CursorMode.Light: works with Tint. Particles will enlight when cursor is close.
- CursorMode.Follow: generates particles that are following the cursor.
Rotation Modes
- RotationMode.None
- RotationMode.Random
- RotationMode.FollowVelocity: Will follow the specified velocity (use it with CursorMode.Bounce so the particles go back to their base velocity, this is used for the rain example)
Build from sources
npm install
npm run build
IE Support
- IE9+