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.


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!


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} });


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:


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 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