# Polygonal Particles Background With jQuery And Canvas - polygonizr

File Size: 18.1 KB 18819 07/16/2021 01:48:00 UTC 04/30/2018 02:24:12 UTC Go to website MIT

polygonizr is a jQuery plugin which uses JavaScript and HTML5 canvas to draw an animated, customizable, polygonal particles system on the webpage.

## How to use it:

1. Insert the minified version of the jQuery polygonizr plugin after loading jQuery library.

```<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/polygonizr.min.js"></script>
```

2. Call the function on a container where you want to draw the particales system.

```<div id="example"></div>
```
```\$('#example').polygonizr();
```

3. Config the particales system with the following options.

```\$('#example').polygonizr({

// Indicates the time (in seconds) to pause after a node has reached its destination.
restNodeMovements: 1,

// Indicates how long (in seconds) it will take for a node to move from start to finish.
duration: 3,

// Indicates the maximum (will be randomized) distance a node can move (in pixles) from its starting position.
nodeMovementDistance: 100,

// Indicates the maximum (will be randomized) distance a node can have in depth (for a better 3D effect). Default: 300
node3dDepthDistance: 300,

// If set to true, the animation will rotate. Default: false
node3dRotate: false,

// If node3dRotate is set to true, the following option indicate if rotation should pause between n restNodeMovements. Default: 1
node3dRotateOnNthNodeMovement: 1,

// If node3dRotate is set to true, the following option indicate the alpha of the nodes at the far end of the rotation, creating depth. Default: 0.1
node3dRotateDepthAlpha: 0.1,

// If node3dRotate is set to true, the following option indicates the ease mode of each node movement (linear, easeIn, easeOut, easeInOut, accelerateDecelerate). Default: linear
node3dRotatEase: "linear",

// If node3dRotate is set to true, the following option indicate the axis on the canvas around which the animation will rotate (median, center, left, right). Default: center
node3dRotateAxis: "center",

// Indicates how many nodes to paint which relation can be filled (note: nodeFillSapce must be set to true).
numberOfNodes: 15,

// Indicates how many nodes to paint that does not create relations that can be filled.
numberOfUnconnectedNode: 25,

// Indicates if a line should be drawn between the drawn between unconnected nodes.
ConnectUnconnectedNodes: true,

// Indicates the maximum distance between unconnected nodes to draw the line.
ConnectUnconnectedNodesDistance: 250,

// Indicates the maximum painted size of each node's "dot".
nodeDotSize: 2.5,

// Indicates the ease mode of each node movement (linear, easeIn, easeOut, easeInOut, accelerateDecelerate).
nodeEase: "easeOut",

// If true, the nodes starting position will descend into place on load.
nodeFancyEntrance: false,

// If true, each nodes starting position will be randomized within the canvas size. If false, each nodes position must be specified manually.
randomizePolygonMeshNetworkFormation: true,

// Indicates the positioning of each nodes starting position (note: randomizePolygonMeshNetworkFormation must be set to false).
specifyPolygonMeshNetworkFormation: null,

// Indicates how many nodes of the "numberOfNodes" that will be connected.
nodeRelations: 3,

// Indicates the frame rate at which to update each node movement.
animationFps: 30,

// Indicates the color (RGB) of each node's "dot".
nodeDotColor: "200, 200, 200",

// If nodeDotColor is set to an array of colors, this option indicates in what order to pick the colors (linear or random). Default: linear
nodeDotColoringSchema: "linear",

// Indicates the color (RGB) of the line drawn between connected nodes.
nodeLineColor: "150, 150, 150",

// If nodeLineColor is set to an array of colors, this option indicates in what order to pick the colors (linear or random). Default: linear
nodeLineColoringSchema: "linear",

// Indicates the fill color (RGB) between each connected node.
nodeFillColor: "100, 100, 100",

// If nodeFillColor is set to an array of colors, this option indicates in what order to pick the colors (linear or random). Default: linear
nodeFillColoringSchema: "linear",

// Indicates the linear gradient to the fill color (RGB) between each connected node.

// If nodeFillGradientColor is set to an array of colors, this option indicates in what order to pick the colors (linear or random). Default: linear

// Indicates the fill color's alpha level (1-0).
nodeFillAlpha: 0.5,

// Indicates the alpha level (1-0) of the line drawn between connected nodes.
nodeLineAlpha: 0.5,

// Indicates the alpha level (1-0) of each node's "dot".
nodeDotAlpha: 1.0,

// Indicates the probability (1-0) of showing the coordinates for each nodes final position.
nodeDotPrediction: 0,

// If true, the relation between connected nodes will be filled.
nodeFillSapce: true,

// If true, each node's final position can be outside the canvas boundary.
nodeOverflow: true,

// If true, a glowing effect is added to each node, its relations and fill respectively.
nodeGlowing: false,

// Indicates the width of the canvas on which to paint each node.
canvasWidth: \$(this).width(),

// Indicates the height of the canvas on which to paint each node.
canvasHeight: \$(this).height(),

// Indicate the CSS position property by which to position the canvas.
canvasPosition: "absolute",

// Indicate the CSS top property by which to vertically position the canvas.
canvasTop: "auto",

// Indicate the CSS bottom property by which to vertically position the canvas.
canvasBottom: "auto",

// Indicate the CSS right property by which to horizontally position the canvas.
canvasRight: "auto",

// Indicate the CSS left property by which to horizontally position the canvas.
canvasLeft: "auto",

// Indicate the CSS z-index property by which to specify the stack order of the canvas.
canvasZ: "auto"

});```

4. API methods.

```\$('#example').polygonizr("start");
\$('#example').polygonizr("stop");
\$('#example').polygonizr("clear");
\$('#example').polygonizr("refresh");
\$('#example').polygonizr("destroy");
```

## Changelog:

2021-07-16

• Made changes to how closest nodes are found to give more control over specific network formations and fill color

2021-07-04

• Minor bug fixes and added two new features: rotation and array colors.

2020-07-06

• Updated the codes structure
• Added few new methods (start, stop, clear, refresh, and destroy)

2019-08-08

• Added a new feature, nodeDotPrediction, which will illustrate tthe cooridnates where the a new node will be moved to.

2019-07-20

2018-09-30

• Fixed bug with inifinite parameter values in createLinearGradient, got trgged when nodeFancyEntrance was set to true.
• Fixed bug with local variables in IE

2018-09-29

• Updated and restructured the code a bit, exposed two new functions for stopping and starting the animation, and added option for gradient color effect as fillStyle.

2018-05-01

• added Opera specific function oRequestAnimationFrame

This awesome jQuery plugin is developed by revoltera. For more Advanced Usages, please check the demo page or visit the official website.