Polygonal Particles Background With jQuery And Canvas - polygonizr

Polygonal Particles Background With jQuery And Canvas - polygonizr
File Size: 10.4 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,

  // 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"
  
});

Change log:

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.