Polygonal Particles Background With jQuery And Canvas - polygonizr

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. 
  nodeFillGradientColor: null,

  // If nodeFillGradientColor is set to an array of colors, this option indicates in what order to pick the colors (linear or random). Default: linear
  nodeFillGradientColoringSchema: "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

• Added new options.

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.