1.0.11 • Published 6 years ago
particles-renderer v1.0.11
PARTICLES
A simple package to rendet text as particles in HTML canvas element.
Demo here
Usage
Import { ParticlesRenderer }
and use it as
const renderer = new ParticlesRenderer(<canvas element>);
renderer.renderTextparticles('TEXT'); // Shorter text is better
renderer.start();
Just these lines should do the task. For further customization, you can pass in properties for renderer, particles and force(the mouse pointer) as,
const renderer = new ParticlesRenderer(canvas, rendererProps, particleProps, forceProps);
// rendererProps, particlceProps, forceProps are just plain JS objects
The following are default values for renderer props:
defaultRendererProps = {
fps:80,
bgColor:'black',
width:900,
height:900,
particlesSpacing: 2,
}
The following are default values for particles props:
{
size: 2,
position: {x: 0, y: 0}, // origin is center of canvas and +y is up
velocity: {x: 0, y: 0},
acceleration: {x: 0, y: 0},
color: 'cyan',
damping: 0.1,
K: 0.01,
restless: true, // particle won't stay static, will have small random motions even if no force acting
}
The following are default values for force props:
// force is the mouse pointer exerting some force to particles rendered
defaultForceProps = {
position: {x: 1000, y: 1000},
radius: 20,
maxMagnitude: 50,
}
So, in case of any dynamic events, for example: resizing the page, the cleanUp()
method should be called.
// The following code is the initialization
const renderer = new ParticlesRenderer(canvas);
renderer.renderTextparticles('TEXT');
renderer.start();
// Now, when you need to do cleanUp, call the method(it's recommended)
renderer.cleanUp();