Polygonal Particles Background With jQuery And Canvas - polygonizr

Polygonal Particles Background With jQuery And Canvas - polygonizr
File Size: 10.7 KB
Views Total:
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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script 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({

  // How long to pause in between new node-movements.
  restNodeMovements: 1,

  // When the cluster updates, this sets speed of nodes.
  duration: 3,

  // Define the maximum distance to move nodes.
  nodeMovementDistance: 100,

  // The number of node nodes to print out.
  numberOfNodes: 25,

  // The number of dots, unconnected to any other nodes, floating arround.
  numberOfUnconnectedNode: 25,

  // Connects passing free nodes if within the distance as specified in ConnectUnconnectedNodesDistance.
  ConnectUnconnectedNodes: true,

  // The distance between unconnected nodes to connect to each other.
  ConnectUnconnectedNodesDistance: 150,

  // Define the maximume size of each node dot.
  nodeDotSize: 2.5,

  // Sets the ease mode of the movement: linear, easeIn, easeOut, easeInOut, accelerateDecelerate.
  nodeEase: "easeOut",

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

  // Makes the cluster forms an ellipse inspired formation, random if true.
  randomizePolygonMeshNetworkFormation: true,

  // Define a formula for how to initialize each node dot's position.
  specifyPolygonMeshNetworkFormation: null,

  // Number of relations between nodes.
  nodeRelations: 3,

  // The FPS for the whole canvas.
  animationFps: 30,

  // Sets the color of the node dots in the network (RGB).
  nodeDotColor: "240, 255, 250",

  // Sets the color of the node lines in the network (RGB).
  nodeLineColor: "240, 255, 250",

  // Sets the color of the filled triangles in the network (RGB).
  nodeFillColor: "240, 255, 250",

  // Sets the alpha level for the colors (1-0).
  nodeFillAlpha: 0.5,

  // Sets the alpha level for the lines (1-0).
  nodeLineAlpha: 0.5,

  // Sets the alpha level for the dots (1-0).
  nodeDotAlpha: 1.0,

  // Defines if the triangles in the network should be shown.
  nodeFillSapce: true,

  // A numberic value (0-1) defining the ods of showing the cooridnates for where a new node destination will end.
  nodeDotPrediction: 0,

  // If true, the animation is allowed to go outside the definde canvas space.
  nodeOverflow: true,

  // Define if the active animation should glow or not (not CPU friendly).
  nodeGlowing: false,
  
  // Define the canvas size and css position.
  canvasWidth: $(this).width(),
  canvasHeight: $(this).height(),
  canvasPosition: "absolute",
  canvasTop: "auto",
  canvasBottom: "auto",
  canvasRight: "auto",
  canvasLeft: "auto"
  
});

Changelog:

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.