Polygonal Particles Background With jQuery And Canvas - polygonizr
File Size: | 18.1 KB |
---|---|
Views Total: | 18819 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | 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. 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.