Polygonal Particles Background With jQuery And Canvas - polygonizr

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.

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,
  // 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: function (i) {
    var forEachNode = {
        // Half a circle and randomized
        x: this.canvasWidth - ((this.canvasWidth / 2) + (this.canvasHeight / 2) * Math.cos(i * (2 * Math.PI / this.numberOfNodes))) * Math.random(),
        y: this.canvasHeight - (this.canvasHeight * (i / this.numberOfNodes))
    };
    return forEachNode;
  },
  // 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,
  // 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"
  
});

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

  • Publication date: 30.04.2018
  • Source