ParticleField

ParticleField lets you create canvas backed particle fields. It's based on pure Javascript and has no dependencies. Built to be small, weighing in under 200 lines of code, and as performant as possible while remaining readable. It's distributed under the MIT License and hosted on Github.

ParticleField can interact with your mouse or touch device. Alternatively you're free to run arbitraty functions through it.

Download Fork Me

Quickstart

You can download the minified build from Github.

Create a new ParticleField object.

var pf = new ParticleField();

Bind and draw it on an element. This will draw the grid but it won't react to mouse or animation elements.

var el = document.getElementById("myCanvasElement");
 pf.draw(el);

Start the animation!

pf.start();

Custom Animation

Sick of the infinity sign? Good news is you can draw any function.

pf.setCustomAnimation(function(mx, my, width, height, options) {
    // mx is the last x movement
    // my is the last y movement
    // width is the canvas width
    // height is the canvas height
    // options is the options object
    // return an object with new mx and my variables
    // return {mx: 1, my: 2}
});

Customization

ParticleField has a handful of settings you can tweak.

Pass in an object to with they keys you want to change on initialization:

var pf = new ParticleField(opts);

or by calling the setOptions function:

pf.setOptions(opts);

All the available options:

var opts = {
    rows: 100, // number of rows/height
    cols: 240, // number of columns/width
    num_particles: null, // calculated, don't override
    spacing: 4, // spacing between particles
    margin: 40, // area around the particle field
    radius: Math.pow(50, 2), // size of the pointer
    mouse: true, // allow mouse interaction
    color: [0, 0, 0, 255] // color of the particles in rgba
};

Sizing

Sizing is a tad complicated. ParticleField calculates your height and width by doing the following:

var height = (opts.rows * opts.spacing) + (opts.margin * 2);

Tweaking those variables as you see fit will get you the dimensions you want.

All functions

draw() // Draw a frame
 start() // Start the animation
 stop() // Stop the animation
 getMouseState() // Grab the mouse state
 setMouseState(true) // Set the mouse state (true/false)
 getOptions() // Get options
 setOptions(opts) // Set options
 setCustomAnimation(func) // Pass in the custom animation function