Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 

polygonizr

A jQuery plugin for creating a polygon mesh network background

License

GIF showing polygonize animation

Samples

Initialization

Initialize the plugin on any jQuery DOM-element, in the sample a DIV-node with id "site-landing". The plugin creates a canvas which is by default absolute positioned and inherits the size of the parent.

    $('#site-landing').polygonizr();

You can easily override default behavior on initialization by passing options to the plugin method. See below for a list of possible settings.

    $('#site-landing').polygonizr({
        numberOfNodes: 30,
        nodeEase: 'linear'
    });

These options can be updated at any point. However, some updates might require calling refresh afterwards to take effect (see functions below).

    // Example of how to make polygonizr responsive to window resizing.
    $(window).resize(function () {
        let $sitelading = $('#site-landing');
        $sitelading.polygonizr("stop");

        // Update polygonizr with the new window size.
        $sitelading.polygonizr({
            canvasHeight: $(this).height(),
            canvasWidth: $(this).width()
        });

        $sitelading.polygonizr("refresh");
    });

Custom node positioning

Among the possible overrides, you can for example also alter how the initial x and y coordinates are positioned for each node. The "specifyPolygonMeshNetworkFormation" setting acts as a loop for each "numberOfNodes" to be painted. To alter their positioning, simply return an x and y coordinate to create a desired pattern, as illustrated in the samples below.

Keep in mind, however, that you need to notify the plugin not to randomize the formation. This is done by passing "false" to the "randomizePolygonMeshNetworkFormation" setting.

The following two samples draws a circle and an archimedean spiral.

    // Positions the initialized mesh nodes as a circle.
    $('#site-landing-circle').polygonizr({
        randomizePolygonMeshNetworkFormation: false,
        specifyPolygonMeshNetworkFormation: function (i) {
            var smallestCanvasDimention = Math.min(this.canvasWidth, this.canvasHeight) / 2;
            var forEachNode = {
                // Full circle in the center of the canvas.
                x: (this.canvasWidth / 2) + Math.cos(2 * Math.PI * i / this.numberOfNodes) * smallestCanvasDimention,
                y: (this.canvasHeight / 2) + Math.sin(2 * Math.PI * i / this.numberOfNodes) * smallestCanvasDimention
            };
            return forEachNode;
        }
    });

    // Positions the initialized mesh nodes as a spiral.
    $('#site-landing-spiral').polygonizr({
        randomizePolygonMeshNetworkFormation: false,
        specifyPolygonMeshNetworkFormation: function (i) {
            var turningDistance = Math.min((this.canvasWidth, this.canvasHeight) / 2) / this.numberOfNodes;
            var forEachNode = {
                // Archimedean spiral.
                x: (this.canvasWidth / 2) + (i * turningDistance * Math.PI / 180) * Math.cos((i * turningDistance) * Math.PI / 180) * turningDistance ,
                y: (this.canvasHeight / 2) + (i * turningDistance * Math.PI / 180) * Math.sin((i * turningDistance) * Math.PI / 180) * turningDistance
            };
            return forEachNode;
        }
    });

Functions

Polygonizr has five functions: start, stop, clear, refresh, and destroy. Each function is described in the following subsections.

Start and Stop

Use start and stop to pause and continue an animation.

    $('#site-landing').polygonizr("start");
    $('#site-landing').polygonizr("stop");

Clear

Clear will stop any ongoing animation, and then remove its drawing from the canvas.

    $('#site-landing').polygonizr("clear");

Refresh

Refresh will first clear an animation, then read all settings and setup the animation again from scratch.

    $('#site-landing').polygonizr("refresh");

Destroy

Destroy is used to clear the animation, and remove the instance of the plugin from the current DOM-element.

    $('#site-landing').polygonizr("destroy");

Settings and Defaults

        // Indicates the time (in seconds) to pause after a node has reached its destination. Default: 1
        restNodeMovements: 0,
        // Indicates how long (in seconds) it will take for a node to move from start to finish. Default: 3
        duration: 3,
        // Indicates the maximum (will be randomized) distance a node can move (in pixles) from its starting position. Default: 100
        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). Default: 20
        numberOfNodes: 20,
        // Indicates how many nodes to paint that does not create relations that can be filled. Default: 35
        numberOfUnconnectedNode: 35,
        // Indicates if a line should be drawn between the drawn between unconnected nodes. Default: true
        ConnectUnconnectedNodes: true,
        // Indicates the maximum distance between unconnected nodes to draw the line. Default: 250
        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). Default: easeOut
        nodeEase: "easeOut",
        // If true, the nodes starting position will descend into place on load. Default: false
        nodeFancyEntrance: false,
        // If true, each nodes starting position will be randomized within the canvas size. If false, each nodes position must be specified manually. Default: true
        randomizePolygonMeshNetworkFormation: true,
        // Indicates the positioning of each nodes starting position (note: randomizePolygonMeshNetworkFormation must be set to false). Default: null
        specifyPolygonMeshNetworkFormation: null,
        // Indicates how many nodes of the "numberOfNodes" that will be connected. Default: 3
        nodeRelations: 3,
        // Indicates the frame rate at which to update each node movement. Default: 30
        animationFps: 30,
        // Indicates the color (RGB), or an array of colors, of each node's "dot". Default: "200, 200, 200"
        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), or an array of colors, of the line drawn between connected nodes. Default: "150, 150, 150"
        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), or an array of colors, between each connected node. Default: "100, 100, 100"
        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), or an array of colors, between each connected node. Default: null
        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). Default: 0.5
        nodeFillAlpha: 0.5,
        // Indicates the alpha level (1-0) of the line drawn between connected nodes. Default: 0.5
        nodeLineAlpha: 0.5,
        // Indicates the alpha level (1-0) of each node's "dot". Default: 1.0
        nodeDotAlpha: 1.0,
        // Indicates the probability (1-0) of showing the coordinates for each nodes final position. Default: 0
        nodeDotPrediction: 0,
        // If true, the relation between connected nodes will be filled. Default: true
        nodeFillSapce: true,
        // If true, each node's final position can be outside the canvas boundary. Default: true
        nodeOverflow: true,
        // If true, a glowing effect is added to each node, its relations and fill respectively. Default: false
        nodeGlowing: false,
        // Indicates the width of the canvas on which to paint each node. Default: $(this).width()
        canvasWidth: $(this).width(),
        // Indicates the height of the canvas on which to paint each node. Default: $(this).height();
        canvasHeight: $(this).height(),
        // Indicate the CSS position property by which to position the canvas. Default: "absolute"
        canvasPosition: "absolute",
        // Indicate the CSS top property by which to vertically position the canvas. Default: "auto"
        canvasTop: "auto",
        // Indicate the CSS bottom property by which to vertically position the canvas. Default: "auto"
        canvasBottom: "auto",
        // Indicate the CSS right property by which to horizontally position the canvas. Default: "auto"
        canvasRight: "auto",
        // Indicate the CSS left property by which to horizontally position the canvas. Default: "auto"
        canvasLeft: "auto",
        // Indicate the CSS z-index property by which to specify the stack order of the canvas. Default: "auto"
        canvasZ: "auto"

About

A jQuery plugin for creating a polygon mesh network bacgrkound

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published