Particler plugin v1.1

See it in action

Select a demo to see code example and the result.


Particler is a pure javascript plugin which creates a canvas-particles based on your image. You can set up behavior of particles by changing of some parameters described in the table below.


* Only one dependency is jQuery when option mousemoveBehavior: true.


<script src="/path/to/particler.js"></script>
<canvas width="500" height="500" id="el"></canvas> 
var el = document.getElementById('el');
var particler = new Particler(el, {
	img: '/path/to/img.png'


Option Datatype Default Description
img string Path to the source image. Required param.
Please note: your image and your website must be located on the same address by security reasons. For example: and
mousemoveBehavior boolean false Enables reaction to user's cursor.
Requires jQuery.
New in 1.1 version
mouseoverRadius number 200 Maximum distance from cursor to point. Only points inside the circle with center at cursor coordinates and radius mouseoverRadius will be affected.
New in 1.1 version
mouseoverPointRandomDistance number 120 Maximum possible displacement of points on mouseover.
New in 1.1 version
mouseoverRadiusMaxDelta number 10 Maximum delta of point rotation circle radius on mouseover.
New in 1.1 version
sizeMin number 4 Minimum particle size. Must be greather than 0.
sizeMax number 7 Maximum particle size. Must be greather or equal to minSize. Particles will have size between the sizeMin and sizeMax values.
sizeChangeStep number 0.1 Step of changing the size of each particle between sizeMin and sizeMax values.
shape string circle Particle shape. Available values: circle, square, star.
gridSize number 7 Distance between particles. Highly reccomended to be greater or equal to sizeMax option.
gridStartZoom number 8 Initial particle and grid size will be multiplied by this parameter. Then size will be gradually decreased to this original value. Set value 1 to disable this effect.
gridStartZoomSpeed number 0.1 Speed of decreasing of the size of each particle when gridStartZoom is greater than 1. Example: 0.1 (slow), 0.5 (faster), 1 (very fast).
circleMotionSpeedMin number 0.1 Minimum speed of particle circular movement.
circleMotionSpeedMax number 0.5 Maximum speed of particle circular movement. Final circular movement speed value will be between circleMotionSpeedMin and circleMotionSpeedMax.
circleMotionRadiusMin number 1 Particle moves in a circle. This is minimum circle radius.
circleMotionRadiusMax number 1.5 This is maximum circle radius. Fimal circle radius will be between circleMotionRadiusMin and circleMotionRadiusMax.
offset:number object { left: 10, top: 10 } Left top corner offset of the image. Use it when canvas size is much greater than image.
ignoreWhite:boolean number true Ignore white pixels of image. Disable it when you have white image on transparent background.
fps number 30 Scene drawing frequency, frames per second


Method Description
run() Runs the animation.
restart() Restarts the animation.
destroy() Cancels animation loop, clears canvas.
After destroy Particler object must be recreated.

Contact author