https://ipd.lk/internship

20(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
21new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
22j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
23'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
24})(window,document,'script','dataLayer','

24');

26

83
84        <script async src="https://www.googletagmanager.com/gtag/js?id=

84"></script>
85        

86window.dataLayer = window.dataLayer || [];
87            function gtag() { dataLayer.push(arguments); }
88            gtag('js', new Date());
89
90            gtag('config', '

90');
91        

299<script>
300    /* -----------------------------------------------
301  /* Author : Vincent Garreau  - vincentgarreau.com
302  /* MIT license: https://opensource.org/licenses/MIT
303  /* Demo / Generator : vincentgarreau.com/particles.js
304  /* GitHub : github.com/VincentGarreau/particles.js
305  /* How to use? : Check the GitHub README
306  /* v2.0.0
307  /* ----------------------------------------------- */
308
309    var pJS = function (tag_id, params) {
310
311        var canvas_el = document.querySelector('#' + tag_id + ' > .particles-js-canvas-el');
312
313        /* particles.js variables with default values */
314        this.pJS = {
315            canvas: {
316                el: canvas_el,
317                w: canvas_el.offsetWidth,
318                h: canvas_el.offsetHeight
319            },
320            particles: {
321                number: {
322                    value: 400,
323                    density: {
324                        enable: true,
325                        value_area: 800
326                    }
327                },
328                color: {
329                    value: '#fff'
330                },
331                shape: {
332                    type: 'circle',
333                    stroke: {
334                        width: 0,
335                        color: '#ff0000'
336                    },
337                    polygon: {
338                        nb_sides: 5
339                    },
340                    image: {
341                        src: '',
342                        width: 100,
343                        height: 100
344                    }
345                },
346                opacity: {
347                    value: 1,
348                    random: false,
349                    anim: {
350                        enable: false,
351                        speed: 2,
352                        opacity_min: 0,
353                        sync: false
354                    }
355                },
356                size: {
357                    value: 20,
358                    random: false,
359                    anim: {
360                        enable: false,
361                        speed: 20,
362                        size_min: 0,
363                        sync: false
364                    }
365                },
366                line_linked: {
367                    enable: true,
368                    distance: 100,
369                    color: '#fff',
370                    opacity: 1,
371                    width: 1
372                },
373                move: {
374                    enable: true,
375                    speed: 2,
376                    direction: 'none',
377                    random: false,
378                    straight: false,
379                    out_mode: 'out',
380                    bounce: false,
381                    attract: {
382                        enable: false,
383                        rotateX: 3000,
384                        rotateY: 3000
385                    }
386                },
387                array: []
388            },
389            interactivity: {
390                detect_on: 'canvas',
391                events: {
392                    onhover: {
393                        enable: true,
394                        mode: 'grab'
395                    },
396                    onclick: {
397                        enable: true,
398                        mode: 'push'
399                    },
400                    resize: true
401                },
402                modes: {
403                    grab: {
404                        distance: 100,
405                        line_linked: {
406                            opacity: 1
407                        }
408                    },
409                    bubble: {
410                        distance: 200,
411                        size: 80,
412                        duration: 0.4
413                    },
414                    repulse: {
415                        distance: 200,
416                        duration: 0.4
417                    },
418                    push: {
419                        particles_nb: 4
420                    },
421                    remove: {
422                        particles_nb: 2
423                    }
424                },
425                mouse: {}
426            },
427            retina_detect: false,
428            fn: {
429                interact: {},
430                modes: {},
431                vendors: {}
432            },
433            tmp: {}
434        };
435
436        var pJS = this.pJS;
437
438        /* params settings */
439        if (params) {
440            Object.deepExtend(pJS, params);
441        }
442
443        pJS.tmp.obj = {
444            size_value: pJS.particles.size.value,
445            size_anim_speed: pJS.particles.size.anim.speed,
446            move_speed: pJS.particles.move.speed,
447            line_linked_distance: pJS.particles.line_linked.distance,
448            line_linked_width: pJS.particles.line_linked.width,
449            mode_grab_distance: pJS.interactivity.modes.grab.distance,
450            mode_bubble_distance: pJS.interactivity.modes.bubble.distance,
451            mode_bubble_size: pJS.interactivity.modes.bubble.size,
452            mode_repulse_distance: pJS.interactivity.modes.repulse.distance
453        };
454
455
456        pJS.fn.retinaInit = function () {
457
458            if (pJS.retina_detect && window.devicePixelRatio > 1) {
459                pJS.canvas.pxratio = window.devicePixelRatio;
460                pJS.tmp.retina = true;
461            }
462            else {
463                pJS.canvas.pxratio = 1;
464                pJS.tmp.retina = false;
465            }
466
467            pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio;
468            pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio;
469
470            pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio;
471            pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio;
472            pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio;
473            pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio;
474            pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio;
475            pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio;
476            pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio;
477            pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio;
478            pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio;
479
480        };
481
482
483
484        /* ---------- pJS functions - canvas ------------ */
485
486        pJS.fn.canvasInit = function () {
487            pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
488        };
489
490        pJS.fn.canvasSize = function () {
491
492            pJS.canvas.el.width = pJS.canvas.w;
493            pJS.canvas.el.height = pJS.canvas.h;
494
495            if (pJS && pJS.interactivity.events.resize) {
496
497                window.addEventListener('resize', function () {
498
499                    pJS.canvas.w = pJS.canvas.el.offsetWidth;
500                    pJS.canvas.h = pJS.canvas.el.offsetHeight;
501
502                    /* resize canvas */
503                    if (pJS.tmp.retina) {
504                        pJS.canvas.w *= pJS.canvas.pxratio;
505                        pJS.canvas.h *= pJS.canvas.pxratio;
506                    }
507
508                    pJS.canvas.el.width = pJS.canvas.w;
509                    pJS.canvas.el.height = pJS.canvas.h;
510
511                    /* repaint canvas on anim disabled */
512                    if (!pJS.particles.move.enable) {
513                        pJS.fn.particlesEmpty();
514                        pJS.fn.particlesCreate();
515                        pJS.fn.particlesDraw();
516                        pJS.fn.vendors.densityAutoParticles();
517                    }
518
519                    /* density particles enabled */
520                    pJS.fn.vendors.densityAutoParticles();
521
522                });
523
524            }
525
526        };
527
528
529        pJS.fn.canvasPaint = function () {
530            pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h);
531        };
532
533        pJS.fn.canvasClear = function () {
534            pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
535        };
536
537
538        /* --------- pJS functions - particles ----------- */
539
540        pJS.fn.particle = function (color, opacity, position) {
541
542            /* size */
543            this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value;
544            if (pJS.particles.size.anim.enable) {
545                this.size_status = false;
546                this.vs = pJS.particles.size.anim.speed / 100;
547                if (!pJS.particles.size.anim.sync) {
548                    this.vs = this.vs * Math.random();
549                }
550            }
551
552            /* position */
553            this.x = position ? position.x : Math.random() * pJS.canvas.w;
554            this.y = position ? position.y : Math.random() * pJS.canvas.h;
555
556            /* check position  - into the canvas */
557            if (this.x > pJS.canvas.w - this.radius * 2) this.x = this.x - this.radius;
558            else if (this.x < this.radius * 2) this.x = this.x + this.radius;
559            if (this.y > pJS.canvas.h - this.radius * 2) this.y = this.y - this.radius;
560            else if (this.y < this.radius * 2) this.y = this.y + this.radius;
561
562            /* check position - avoid overlap */
563            if (pJS.particles.move.bounce) {
564                pJS.fn.vendors.checkOverlap(this, position);
565            }
566
567            /* color */
568            this.color = {};
569            if (typeof (color.value) == 'object') {
570
571                if (color.value instanceof Array) {
572                    var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
573                    this.color.rgb = hexToRgb(color_selected);
574                } else {
575                    if (color.value.r != undefined && color.value.g != undefined && color.value.b != undefined) {
576                        this.color.rgb = {
577                            r: color.value.r,
578                            g: color.value.g,
579                            b: color.value.b
580                        }
581                    }
582                    if (color.value.h != undefined && color.value.s != undefined && color.value.l != undefined) {
583                        this.color.hsl = {
584                            h: color.value.h,
585                            s: color.value.s,
586                            l: color.value.l
587                        }
588                    }
589                }
590
591            }
592            else if (color.value == 'random') {
593                this.color.rgb = {
594                    r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
595                    g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
596                    b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
597                }
598            }
599            else if (typeof (color.value) == 'string') {
600                this.color = color;
601                this.color.rgb = hexToRgb(this.color.value);
602            }
603
604            /* opacity */
605            this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value;
606            if (pJS.particles.opacity.anim.enable) {
607                this.opacity_status = false;
608                this.vo = pJS.particles.opacity.anim.speed / 100;
609                if (!pJS.particles.opacity.anim.sync) {
610                    this.vo = this.vo * Math.random();
611                }
612            }
613
614            /* animation - velocity for speed */
615            var velbase = {}
616            switch (pJS.particles.move.direction) {
617                case 'top':
618                    velbase = { x: 0, y: -1 };
619                    break;
620                case 'top-right':
621                    velbase = { x: 0.5, y: -0.5 };
622                    break;
623                case 'right':
624                    velbase = { x: 1, y: -0 };
625                    break;
626                case 'bottom-right':
627                    velbase = { x: 0.5, y: 0.5 };
628                    break;
629                case 'bottom':
630                    velbase = { x: 0, y: 1 };
631                    break;
632                case 'bottom-left':
633                    velbase = { x: -0.5, y: 1 };
634                    break;
635                case 'left':
636                    velbase = { x: -1, y: 0 };
637                    break;
638                case 'top-left':
639                    velbase = { x: -0.5, y: -0.5 };
640                    break;
641                default:
642                    velbase = { x: 0, y: 0 };
643                    break;
644            }
645
646            if (pJS.particles.move.straight) {
647                this.vx = velbase.x;
648                this.vy = velbase.y;
649                if (pJS.particles.move.random) {
650                    this.vx = this.vx * (Math.random());
651                    this.vy = this.vy * (Math.random());
652                }
653            } else {
654                this.vx = velbase.x + Math.random() - 0.5;
655                this.vy = velbase.y + Math.random() - 0.5;
656            }
657
658            // var theta = 2.0 * Math.PI * Math.random();
659            // this.vx = Math.cos(theta);
660            // this.vy = Math.sin(theta);
661
662            this.vx_i = this.vx;
663            this.vy_i = this.vy;
664
665
666
667            /* if shape is image */
668
669            var shape_type = pJS.particles.shape.type;
670            if (typeof (shape_type) == 'object') {
671                if (shape_type instanceof Array) {
672                    var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)];
673                    this.shape = shape_selected;
674                }
675            } else {
676                this.shape = shape_type;
677            }
678
679            if (this.shape == 'image') {
680                var sh = pJS.particles.shape;
681                this.img = {
682                    src: sh.image.src,
683                    ratio: sh.image.width / sh.image.height
684                }
685                if (!this.img.ratio) this.img.ratio = 1;
686                if (pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined) {
687                    pJS.fn.vendors.createSvgImg(this);
688                    if (pJS.tmp.pushing) {
689                        this.img.loaded = false;
690                    }
691                }
692            }
693
694
695
696        };
697
698
699        pJS.fn.particle.prototype.draw = function () {
700
701            var p = this;
702
703            if (p.radius_bubble != undefined) {
704                var radius = p.radius_bubble;
705            } else {
706                var radius = p.radius;
707            }
708
709            if (p.opacity_bubble != undefined) {
710                var opacity = p.opacity_bubble;
711            } else {
712                var opacity = p.opacity;
713            }
714
715            if (p.color.rgb) {
716                var color_value = 'rgba(' + p.color.rgb.r + ',' + p.color.rgb.g + ',' + p.color.rgb.b + ',' + opacity + ')';
717            } else {
718                var color_value = 'hsla(' + p.color.hsl.h + ',' + p.color.hsl.s + '%,' + p.color.hsl.l + '%,' + opacity + ')';
719            }
720
721            pJS.canvas.ctx.fillStyle = color_value;
722            pJS.canvas.ctx.beginPath();
723
724            switch (p.shape) {
725
726                case 'circle':
727                    pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
728                    break;
729
730                case 'edge':
731                    pJS.canvas.ctx.rect(p.x - radius, p.y - radius, radius * 2, radius * 2);
732                    break;
733
734                case 'triangle':
735                    pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x - radius, p.y + radius / 1.66, radius * 2, 3, 2);
736                    break;
737
738                case 'polygon':
739                    pJS.fn.vendors.drawShape(
740                        pJS.canvas.ctx,
741                        p.x - radius / (pJS.particles.shape.polygon.nb_sides / 3.5), // startX
742                        p.y - radius / (2.66 / 3.5), // startY
743                        radius * 2.66 / (pJS.particles.shape.polygon.nb_sides / 3), // sideLength
744                        pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
745                        1 // sideCountDenominator
746                    );
747                    break;
748
749                case 'star':
750                    pJS.fn.vendors.drawShape(
751                        pJS.canvas.ctx,
752                        p.x - radius * 2 / (pJS.particles.shape.polygon.nb_sides / 4), // startX
753                        p.y - radius / (2 * 2.66 / 3.5), // startY
754                        radius * 2 * 2.66 / (pJS.particles.shape.polygon.nb_sides / 3), // sideLength
755                        pJS.particles.shape.polygon.nb_sides, // sideCountNumerator
756                        2 // sideCountDenominator
757                    );
758                    break;
759
760                case 'image':
761
762                    function draw() {
763                        pJS.canvas.ctx.drawImage(
764                            img_obj,
765                            p.x - radius,
766                            p.y - radius,
767                            radius * 2,
768                            radius * 2 / p.img.ratio
769                        );
770                    }
771
772                    if (pJS.tmp.img_type == 'svg') {
773                        var img_obj = p.img.obj;
774                    } else {
775                        var img_obj = pJS.tmp.img_obj;
776                    }
777
778                    if (img_obj) {
779                        draw();
780                    }
781
782                    break;
783
784            }
785
786            pJS.canvas.ctx.closePath();
787
788            if (pJS.particles.shape.stroke.width > 0) {
789                pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color;
790                pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;
791                pJS.canvas.ctx.stroke();
792            }
793
794            pJS.canvas.ctx.fill();
795
796        };
797
798
799        pJS.fn.particlesCreate = function () {
800            for (var i = 0; i < pJS.particles.number.value; i++) {
801                pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value));
802            }
803        };
804
805        pJS.fn.particlesUpdate = function () {
806
807            for (var i = 0; i < pJS.particles.array.length; i++) {
808
809                /* the particle */
810                var p = pJS.particles.array[i];
811
812                // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy;
813                // var f = -BANG_SIZE / d;
814                // if ( d < BANG_SIZE ) {
815                //     var t = Math.atan2( dy, dx );
816                //     p.vx = f * Math.cos(t);
817                //     p.vy = f * Math.sin(t);
818                // }
819
820                /* move the particle */
821                if (pJS.particles.move.enable) {
822                    var ms = pJS.particles.move.speed / 2;
823                    p.x += p.vx * ms;
824                    p.y += p.vy * ms;
825                }
826
827                /* change opacity status */
828                if (pJS.particles.opacity.anim.enable) {
829                    if (p.opacity_status == true) {
830                        if (p.opacity >= pJS.particles.opacity.value) p.opacity_status = false;
831                        p.opacity += p.vo;
832                    } else {
833                        if (p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true;
834                        p.opacity -= p.vo;
835                    }
836                    if (p.opacity < 0) p.opacity = 0;
837                }
838
839                /* change size */
840                if (pJS.particles.size.anim.enable) {
841                    if (p.size_status == true) {
842                        if (p.radius >= pJS.particles.size.value) p.size_status = false;
843                        p.radius += p.vs;
844                    } else {
845                        if (p.radius <= pJS.particles.size.anim.size_min) p.size_status = true;
846                        p.radius -= p.vs;
847                    }
848                    if (p.radius < 0) p.radius = 0;
849                }
850
851                /* change particle position if it is out of canvas */
852                if (pJS.particles.move.out_mode == 'bounce') {
853                    var new_pos = {
854                        x_left: p.radius,
855                        x_right: pJS.canvas.w,
856                        y_top: p.radius,
857                        y_bottom: pJS.canvas.h
858                    }
859                } else {
860                    var new_pos = {
861                        x_left: -p.radius,
862                        x_right: pJS.canvas.w + p.radius,
863                        y_top: -p.radius,
864                        y_bottom: pJS.canvas.h + p.radius
865                    }
866                }
867
868                if (p.x - p.radius > pJS.canvas.w) {
869                    p.x = new_pos.x_left;
870                    p.y = Math.random() * pJS.canvas.h;
871                }
872                else if (p.x + p.radius < 0) {
873                    p.x = new_pos.x_right;
874                    p.y = Math.random() * pJS.canvas.h;
875                }
876                if (p.y - p.radius > pJS.canvas.h) {
877                    p.y = new_pos.y_top;
878                    p.x = Math.random() * pJS.canvas.w;
879                }
880                else if (p.y + p.radius < 0) {
881                    p.y = new_pos.y_bottom;
882                    p.x = Math.random() * pJS.canvas.w;
883                }
884
885                /* out of canvas modes */
886                switch (pJS.particles.move.out_mode) {
887                    case 'bounce':
888                        if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
889                        else if (p.x - p.radius < 0) p.vx = -p.vx;
890                        if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
891                        else if (p.y - p.radius < 0) p.vy = -p.vy;
892                        break;
893                }
894
895                /* events */
896                if (isInArray('grab', pJS.interactivity.events.onhover.mode)) {
897                    pJS.fn.modes.grabParticle(p);
898                }
899
900                if (isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)) {
901                    pJS.fn.modes.bubbleParticle(p);
902                }
903
904                if (isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
905                    pJS.fn.modes.repulseParticle(p);
906                }
907
908                /* interaction auto between particles */
909                if (pJS.particles.line_linked.enable || pJS.particles.move.attract.enable) {
910                    for (var j = i + 1; j < pJS.particles.array.length; j++) {
911                        var p2 = pJS.particles.array[j];
912
913                        /* link particles */
914                        if (pJS.particles.line_linked.enable) {
915                            pJS.fn.interact.linkParticles(p, p2);
916                        }
917
918                        /* attract particles */
919                        if (pJS.particles.move.attract.enable) {
920                            pJS.fn.interact.attractParticles(p, p2);
921                        }
922
923                        /* bounce particles */
924                        if (pJS.particles.move.bounce) {
925                            pJS.fn.interact.bounceParticles(p, p2);
926                        }
927
928                    }
929                }
930
931
932            }
933
934        };
935
936        pJS.fn.particlesDraw = function () {
937
938            /* clear canvas */
939            pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
940
941            /* update each particles param */
942            pJS.fn.particlesUpdate();
943
944            /* draw each particle */
945            for (var i = 0; i < pJS.particles.array.length; i++) {
946                var p = pJS.particles.array[i];
947                p.draw();
948            }
949
950        };
951
952        pJS.fn.particlesEmpty = function () {
953            pJS.particles.array = [];
954        };
955
956        pJS.fn.particlesRefresh = function () {
957
958            /* init all */
959            cancelRequestAnimFrame(pJS.fn.checkAnimFrame);
960            cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
961            pJS.tmp.source_svg = undefined;
962            pJS.tmp.img_obj = undefined;
963            pJS.tmp.count_svg = 0;
964            pJS.fn.particlesEmpty();
965            pJS.fn.canvasClear();
966
967            /* restart */
968            pJS.fn.vendors.start();
969
970        };
971
972
973        /* ---------- pJS functions - particles interaction ------------ */
974
975        pJS.fn.interact.linkParticles = function (p1, p2) {
976
977            var dx = p1.x - p2.x,
978                dy = p1.y - p2.y,
979                dist = Math.sqrt(dx * dx + dy * dy);
980
981            /* draw a line between p1 and p2 if the distance between them is under the config distance */
982            if (dist <= pJS.particles.line_linked.distance) {
983
984                var opacity_line = pJS.particles.line_linked.opacity - (dist / (1 / pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;
985
986                if (opacity_line > 0) {
987
988                    /* style */
989                    var color_line = pJS.particles.line_linked.color_rgb_line;
990                    pJS.canvas.ctx.strokeStyle = 'rgba(' + color_line.r + ',' + color_line.g + ',' + color_line.b + ',' + opacity_line + ')';
991                    pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
992                    //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
993
994                    /* path */
995                    pJS.canvas.ctx.beginPath();
996                    pJS.canvas.ctx.moveTo(p1.x, p1.y);
997                    pJS.canvas.ctx.lineTo(p2.x, p2.y);
998                    pJS.canvas.ctx.stroke();
999                    pJS.canvas.ctx.closePath();
1000
1001                }
1002
1003            }
1004
1005        };
1006
1007
1008        pJS.fn.interact.attractParticles = function (p1, p2) {
1009
1010            /* condensed particles */
1011            var dx = p1.x - p2.x,
1012                dy = p1.y - p2.y,
1013                dist = Math.sqrt(dx * dx + dy * dy);
1014
1015            if (dist <= pJS.particles.line_linked.distance) {
1016
1017                var ax = dx / (pJS.particles.move.attract.rotateX * 1000),
1018                    ay = dy / (pJS.particles.move.attract.rotateY * 1000);
1019
1020                p1.vx -= ax;
1021                p1.vy -= ay;
1022
1023                p2.vx += ax;
1024                p2.vy += ay;
1025
1026            }
1027
1028
1029        }
1030
1031
1032        pJS.fn.interact.bounceParticles = function (p1, p2) {
1033
1034            var dx = p1.x - p2.x,
1035                dy = p1.y - p2.y,
1036                dist = Math.sqrt(dx * dx + dy * dy),
1037                dist_p = p1.radius + p2.radius;
1038
1039            if (dist <= dist_p) {
1040                p1.vx = -p1.vx;
1041                p1.vy = -p1.vy;
1042
1043                p2.vx = -p2.vx;
1044                p2.vy = -p2.vy;
1045            }
1046
1047        }
1048
1049
1050        /* ---------- pJS functions - modes events ------------ */
1051
1052        pJS.fn.modes.pushParticles = function (nb, pos) {
1053
1054            pJS.tmp.pushing = true;
1055
1056            for (var i = 0; i < nb; i++) {
1057                pJS.particles.array.push(
1058                    new pJS.fn.particle(
1059                        pJS.particles.color,
1060                        pJS.particles.opacity.value,
1061                        {
1062                            'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
1063                            'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
1064                        }
1065                    )
1066                )
1067                if (i == nb - 1) {
1068                    if (!pJS.particles.move.enable) {
1069                        pJS.fn.particlesDraw();
1070                    }
1071                    pJS.tmp.pushing = false;
1072                }
1073            }
1074
1075        };
1076
1077
1078        pJS.fn.modes.removeParticles = function (nb) {
1079
1080            pJS.particles.array.splice(0, nb);
1081            if (!pJS.particles.move.enable) {
1082                pJS.fn.particlesDraw();
1083            }
1084
1085        };
1086
1087
1088        pJS.fn.modes.bubbleParticle = function (p) {
1089
1090            /* on hover event */
1091            if (pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)) {
1092
1093                var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
1094                    dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
1095                    dist_mouse = Math.sqrt(dx_mouse * dx_mouse + dy_mouse * dy_mouse),
1096                    ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance;
1097
1098                function init() {
1099                    p.opacity_bubble = p.opacity;
1100                    p.radius_bubble = p.radius;
1101                }
1102
1103                /* mousemove - check ratio */
1104                if (dist_mouse <= pJS.interactivity.modes.bubble.distance) {
1105
1106                    if (ratio >= 0 && pJS.interactivity.status == 'mousemove') {
1107
1108                        /* size */
1109                        if (pJS.interactivity.modes.bubble.size != pJS.particles.size.value) {
1110
1111                            if (pJS.interactivity.modes.bubble.size > pJS.particles.size.value) {
1112                                var size = p.radius + (pJS.interactivity.modes.bubble.size * ratio);
1113                                if (size >= 0) {
1114                                    p.radius_bubble = size;
1115                                }
1116                            } else {
1117                                var dif = p.radius - pJS.interactivity.modes.bubble.size,
1118                                    size = p.radius - (dif * ratio);
1119                                if (size > 0) {
1120                                    p.radius_bubble = size;
1121                                } else {
1122                                    p.radius_bubble = 0;
1123                                }
1124                            }
1125
1126                        }
1127
1128                        /* opacity */
1129                        if (pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value) {
1130
1131                            if (pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value) {
1132                                var opacity = pJS.interactivity.modes.bubble.opacity * ratio;
1133                                if (opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity) {
1134                                    p.opacity_bubble = opacity;
1135                                }
1136                            } else {
1137                                var opacity = p.opacity - (pJS.particles.opacity.value - pJS.interactivity.modes.bubble.opacity) * ratio;
1138                                if (opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity) {
1139                                    p.opacity_bubble = opacity;
1140                                }
1141                            }
1142
1143                        }
1144
1145                    }
1146
1147                } else {
1148                    init();
1149                }
1150
1151
1152                /* mouseleave */
1153                if (pJS.interactivity.status == 'mouseleave') {
1154                    init();
1155                }
1156
1157            }
1158
1159            /* on click event */
1160            else if (pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)) {
1161
1162
1163                if (pJS.tmp.bubble_clicking) {
1164                    var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x,
1165                        dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y,
1166                        dist_mouse = Math.sqrt(dx_mouse * dx_mouse + dy_mouse * dy_mouse),
1167                        time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time) / 1000;
1168
1169                    if (time_spent > pJS.interactivity.modes.bubble.duration) {
1170                        pJS.tmp.bubble_duration_end = true;
1171                    }
1172
1173                    if (time_spent > pJS.interactivity.modes.bubble.duration * 2) {
1174                        pJS.tmp.bubble_clicking = false;
1175                        pJS.tmp.bubble_duration_end = false;
1176                    }
1177                }
1178
1179
1180                function process(bubble_param, particles_param, p_obj_bubble, p_obj, id) {
1181
1182                    if (bubble_param != particles_param) {
1183
1184                        if (!pJS.tmp.bubble_duration_end) {
1185                            if (dist_mouse <= pJS.interactivity.modes.bubble.distance) {
1186                                if (p_obj_bubble != undefined) var obj = p_obj_bubble;
1187                                else var obj = p_obj;
1188                                if (obj != bubble_param) {
1189                                    var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration);
1190                                    if (id == 'size') p.radius_bubble = value;
1191                                    if (id == 'opacity') p.opacity_bubble = value;
1192                                }
1193                            } else {
1194                                if (id == 'size') p.radius_bubble = undefined;
1195                                if (id == 'opacity') p.opacity_bubble = undefined;
1196                            }
1197                        } else {
1198                            if (p_obj_bubble != undefined) {
1199                                var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration),
1200                                    dif = bubble_param - value_tmp;
1201                                value = bubble_param + dif;
1202                                if (id == 'size') p.radius_bubble = value;
1203                                if (id == 'opacity') p.opacity_bubble = value;
1204                            }
1205                        }
1206
1207                    }
1208
1209                }
1210
1211                if (pJS.tmp.bubble_clicking) {
1212                    /* size */
1213                    process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size');
1214                    /* opacity */
1215                    process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity');
1216                }
1217
1218            }
1219
1220        };
1221
1222
1223        pJS.fn.modes.repulseParticle = function (p) {
1224
1225            if (pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') {
1226
1227                var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
1228                    dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
1229                    dist_mouse = Math.sqrt(dx_mouse * dx_mouse + dy_mouse * dy_mouse);
1230
1231                var normVec = { x: dx_mouse / dist_mouse, y: dy_mouse / dist_mouse },
1232                    repulseRadius = pJS.interactivity.modes.repulse.distance,
1233                    velocity = 100,
1234                    repulseFactor = clamp((1 / repulseRadius) * (-1 * Math.pow(dist_mouse / repulseRadius, 2) + 1) * repulseRadius * velocity, 0, 50);
1235
1236                var pos = {
1237                    x: p.x + normVec.x * repulseFactor,
1238                    y: p.y + normVec.y * repulseFactor
1239                }
1240
1241                if (pJS.particles.move.out_mode == 'bounce') {
1242                    if (pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x;
1243                    if (pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y;
1244                } else {
1245                    p.x = pos.x;
1246                    p.y = pos.y;
1247                }
1248
1249            }
1250
1251
1252            else if (pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) {
1253
1254                if (!pJS.tmp.repulse_finish) {
1255                    pJS.tmp.repulse_count++;
1256                    if (pJS.tmp.repulse_count == pJS.particles.array.length) {
1257                        pJS.tmp.repulse_finish = true;
1258                    }
1259                }
1260
1261                if (pJS.tmp.repulse_clicking) {
1262
1263                    var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance / 6, 3);
1264
1265                    var dx = pJS.interactivity.mouse.click_pos_x - p.x,
1266                        dy = pJS.interactivity.mouse.click_pos_y - p.y,
1267                        d = dx * dx + dy * dy;
1268
1269                    var force = -repulseRadius / d * 1;
1270
1271                    function process() {
1272
1273                        var f = Math.atan2(dy, dx);
1274                        p.vx = force * Math.cos(f);
1275                        p.vy = force * Math.sin(f);
1276
1277                        if (pJS.particles.move.out_mode == 'bounce') {
1278                            var pos = {
1279                                x: p.x + p.vx,
1280                                y: p.y + p.vy
1281                            }
1282                            if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx;
1283                            else if (pos.x - p.radius < 0) p.vx = -p.vx;
1284                            if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy;
1285                            else if (pos.y - p.radius < 0) p.vy = -p.vy;
1286                        }
1287
1288                    }
1289
1290                    // default
1291                    if (d <= repulseRadius) {
1292                        process();
1293                    }
1294
1295                    // bang - slow motion mode
1296                    // if(!pJS.tmp.repulse_finish){
1297                    //   if(d <= repulseRadius){
1298                    //     process();
1299                    //   }
1300                    // }else{
1301                    //   process();
1302                    // }
1303
1304
1305                } else {
1306
1307                    if (pJS.tmp.repulse_clicking == false) {
1308
1309                        p.vx = p.vx_i;
1310                        p.vy = p.vy_i;
1311
1312                    }
1313
1314                }
1315
1316            }
1317
1318        }
1319
1320
1321        pJS.fn.modes.grabParticle = function (p) {
1322
1323            if (pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove') {
1324
1325                var dx_mouse = p.x - pJS.interactivity.mouse.pos_x,
1326                    dy_mouse = p.y - pJS.interactivity.mouse.pos_y,
1327                    dist_mouse = Math.sqrt(dx_mouse * dx_mouse + dy_mouse * dy_mouse);
1328
1329                /* draw a line between the cursor and the particle if the distance between them is under the config distance */
1330                if (dist_mouse <= pJS.interactivity.modes.grab.distance) {
1331
1332                    var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1 / pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance;
1333
1334                    if (opacity_line > 0) {
1335
1336                        /* style */
1337                        var color_line = pJS.particles.line_linked.color_rgb_line;
1338                        pJS.canvas.ctx.strokeStyle = 'rgba(' + 251 + ',' + 195 + ',' + 94 + ',' + opacity_line + ')';
1339                        pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
1340                        //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
1341
1342                        /* path */
1343                        pJS.canvas.ctx.beginPath();
1344                        pJS.canvas.ctx.moveTo(p.x, p.y);
1345                        pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
1346                        pJS.canvas.ctx.stroke();
1347                        pJS.canvas.ctx.closePath();
1348
1349                    }
1350
1351                }
1352
1353            }
1354
1355        };
1356
1357
1358
1359        /* ---------- pJS functions - vendors ------------ */
1360
1361        pJS.fn.vendors.eventsListeners = function () {
1362
1363            /* events target element */
1364            if (pJS.interactivity.detect_on == 'window') {
1365                pJS.interactivity.el = window;
1366            } else {
1367                pJS.interactivity.el = pJS.canvas.el;
1368            }
1369
1370
1371            /* detect mouse pos - on hover / click event */
1372            if (pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable) {
1373
1374                /* el on mousemove */
1375                pJS.interactivity.el.addEventListener('mousemove', function (e) {
1376
1377                    if (pJS.interactivity.el == window) {
1378                        var pos_x = e.clientX,
1379                            pos_y = e.clientY;
1380                    }
1381                    else {
1382                        var pos_x = e.offsetX || e.clientX,
1383                            pos_y = e.offsetY || e.clientY;
1384                    }
1385
1386                    pJS.interactivity.mouse.pos_x = pos_x;
1387                    pJS.interactivity.mouse.pos_y = pos_y;
1388
1389                    if (pJS.tmp.retina) {
1390                        pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio;
1391                        pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio;
1392                    }
1393
1394                    pJS.interactivity.status = 'mousemove';
1395
1396                });
1397
1398                /* el on onmouseleave */
1399                pJS.interactivity.el.addEventListener('mouseleave', function (e) {
1400
1401                    pJS.interactivity.mouse.pos_x = null;
1402                    pJS.interactivity.mouse.pos_y = null;
1403                    pJS.interactivity.status = 'mouseleave';
1404
1405                });
1406
1407            }
1408
1409            /* on click event */
1410            if (pJS.interactivity.events.onclick.enable) {
1411
1412                pJS.interactivity.el.addEventListener('click', function () {
1413
1414                    pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x;
1415                    pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y;
1416                    pJS.interactivity.mouse.click_time = new Date().getTime();
1417
1418                    if (pJS.interactivity.events.onclick.enable) {
1419
1420                        switch (pJS.interactivity.events.onclick.mode) {
1421
1422                            case 'push':
1423                                if (pJS.particles.move.enable) {
1424                                    pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
1425                                } else {
1426                                    if (pJS.interactivity.modes.push.particles_nb == 1) {
1427                                        pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse);
1428                                    }
1429                                    else if (pJS.interactivity.modes.push.particles_nb > 1) {
1430                                        pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb);
1431                                    }
1432                                }
1433                                break;
1434
1435                            case 'remove':
1436                                pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb);
1437                                break;
1438
1439                            case 'bubble':
1440                                pJS.tmp.bubble_clicking = true;
1441                                break;
1442
1443                            case 'repulse':
1444                                pJS.tmp.repulse_clicking = true;
1445                                pJS.tmp.repulse_count = 0;
1446                                pJS.tmp.repulse_finish = false;
1447                                setTimeout(function () {
1448                                    pJS.tmp.repulse_clicking = false;
1449                                }, pJS.interactivity.modes.repulse.duration * 1000)
1450                                break;
1451
1452                        }
1453
1454                    }
1455
1456                });
1457
1458            }
1459
1460
1461        };
1462
1463        pJS.fn.vendors.densityAutoParticles = function () {
1464
1465            if (pJS.particles.number.density.enable) {
1466
1467                /* calc area */
1468                var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000;
1469                if (pJS.tmp.retina) {
1470                    area = area / (pJS.canvas.pxratio * 2);
1471                }
1472
1473                /* calc number of particles based on density area */
1474                var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area;
1475
1476                /* add or remove X particles */
1477                var missing_particles = pJS.particles.array.length - nb_particles;
1478                if (missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles));
1479                else pJS.fn.modes.removeParticles(missing_particles);
1480
1481            }
1482
1483        };
1484
1485
1486        pJS.fn.vendors.checkOverlap = function (p1, position) {
1487            for (var i = 0; i < pJS.particles.array.length; i++) {
1488                var p2 = pJS.particles.array[i];
1489
1490                var dx = p1.x - p2.x,
1491                    dy = p1.y - p2.y,
1492                    dist = Math.sqrt(dx * dx + dy * dy);
1493
1494                if (dist <= p1.radius + p2.radius) {
1495                    p1.x = position ? position.x : Math.random() * pJS.canvas.w;
1496                    p1.y = position ? position.y : Math.random() * pJS.canvas.h;
1497                    pJS.fn.vendors.checkOverlap(p1);
1498                }
1499            }
1500        };
1501
1502
1503        pJS.fn.vendors.createSvgImg = function (p) {
1504
1505            /* set color to svg element */
1506            var svgXml = pJS.tmp.source_svg,
1507                rgbHex = /#([0-9A-F]{3,6})/gi,
1508                coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {
1509                    if (p.color.rgb) {
1510                        var color_value = 'rgba(' + p.color.rgb.r + ',' + p.color.rgb.g + ',' + p.color.rgb.b + ',' + p.opacity + ')';
1511                    } else {
1512                        var color_value = 'hsla(' + p.color.hsl.h + ',' + p.color.hsl.s + '%,' + p.color.hsl.l + '%,' + p.opacity + ')';
1513                    }
1514                    return color_value;
1515                });
1516
1517            /* prepare to create img with colored svg */
1518            var svg = new Blob([coloredSvgXml], { type: 'image/svg+xml;charset=utf-8' }),
1519                DOMURL = window.URL || window.webkitURL || window,
1520                url = DOMURL.createObjectURL(svg);
1521
1522            /* create particle img obj */
1523            var img = new Image();
1524            img.addEventListener('load', function () {
1525                p.img.obj = img;
1526                p.img.loaded = true;
1527                DOMURL.revokeObjectURL(url);
1528                pJS.tmp.count_svg++;
1529            });
1530            img.src = url;
1531
1532        };
1533
1534
1535        pJS.fn.vendors.destroypJS = function () {
1536            cancelAnimationFrame(pJS.fn.drawAnimFrame);
1537            canvas_el.remove();
1538            pJSDom = null;
1539        };
1540
1541
1542        pJS.fn.vendors.drawShape = function (c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator) {
1543
1544            // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/
1545            var sideCount = sideCountNumerator * sideCountDenominator;
1546            var decimalSides = sideCountNumerator / sideCountDenominator;
1547            var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides;
1548            var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians
1549            c.save();
1550            c.beginPath();
1551            c.translate(startX, startY);
1552            c.moveTo(0, 0);
1553            for (var i = 0; i < sideCount; i++) {
1554                c.lineTo(sideLength, 0);
1555                c.translate(sideLength, 0);
1556                c.rotate(interiorAngle);
1557            }
1558            //c.stroke();
1559            c.fill();
1560            c.restore();
1561
1562        };
1563
1564        pJS.fn.vendors.exportImg = function () {
1565            window.open(pJS.canvas.el.toDataURL('image/png'), '_blank');
1566        };
1567
1568
1569        pJS.fn.vendors.loadImg = function (type) {
1570
1571            pJS.tmp.img_error = undefined;
1572
1573            if (pJS.particles.shape.image.src != '') {
1574
1575                if (type == 'svg') {
1576
1577                    var xhr = new XMLHttpRequest();
1578                    xhr.open('GET', pJS.particles.shape.image.src);
1579                    xhr.onreadystatechange = function (data) {
1580                        if (xhr.readyState == 4) {
1581                            if (xhr.status == 200) {
1582                                pJS.tmp.source_svg = data.currentTarget.response;
1583                                pJS.fn.vendors.checkBeforeDraw();
1584                            } else {
1585                                console.log('Error pJS - Image not found');
1586                                pJS.tmp.img_error = true;
1587                            }
1588                        }
1589                    }
1590                    xhr.send();
1591
1592                } else {
1593
1594                    var img = new Image();
1595                    img.addEventListener('load', function () {
1596                        pJS.tmp.img_obj = img;
1597                        pJS.fn.vendors.checkBeforeDraw();
1598                    });
1599                    img.src = pJS.particles.shape.image.src;
1600
1601                }
1602
1603            } else {
1604                console.log('Error pJS - No image.src');
1605                pJS.tmp.img_error = true;
1606            }
1607
1608        };
1609
1610
1611        pJS.fn.vendors.draw = function () {
1612
1613            if (pJS.particles.shape.type == 'image') {
1614
1615                if (pJS.tmp.img_type == 'svg') {
1616
1617                    if (pJS.tmp.count_svg >= pJS.particles.number.value) {
1618                        pJS.fn.particlesDraw();
1619                        if (!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
1620                        else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
1621                    } else {
1622                        //console.log('still loading...');
1623                        if (!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
1624                    }
1625
1626                } else {
1627
1628                    if (pJS.tmp.img_obj != undefined) {
1629                        pJS.fn.particlesDraw();
1630                        if (!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
1631                        else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
1632                    } else {
1633                        if (!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
1634                    }
1635
1636                }
1637
1638            } else {
1639                pJS.fn.particlesDraw();
1640                if (!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame);
1641                else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw);
1642            }
1643
1644        };
1645
1646
1647        pJS.fn.vendors.checkBeforeDraw = function () {
1648
1649            // if shape is image
1650            if (pJS.particles.shape.type == 'image') {
1651
1652                if (pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined) {
1653                    pJS.tmp.checkAnimFrame = requestAnimFrame(check);
1654                } else {
1655                    //console.log('images loaded! cancel check');
1656                    cancelRequestAnimFrame(pJS.tmp.checkAnimFrame);
1657                    if (!pJS.tmp.img_error) {
1658                        pJS.fn.vendors.init();
1659                        pJS.fn.vendors.draw();
1660                    }
1661
1662                }
1663
1664            } else {
1665                pJS.fn.vendors.init();
1666                pJS.fn.vendors.draw();
1667            }
1668
1669        };
1670
1671
1672        pJS.fn.vendors.init = function () {
1673
1674            /* init canvas + particles */
1675            pJS.fn.retinaInit();
1676            pJS.fn.canvasInit();
1677            pJS.fn.canvasSize();
1678            pJS.fn.canvasPaint();
1679            pJS.fn.particlesCreate();
1680            pJS.fn.vendors.densityAutoParticles();
1681
1682            /* particles.line_linked - convert hex colors to rgb */
1683            pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
1684
1685        };
1686
1687
1688        pJS.fn.vendors.start = function () {
1689
1690            if (isInArray('image', pJS.particles.shape.type)) {
1691                pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3);
1692                pJS.fn.vendors.loadImg(pJS.tmp.img_type);
1693            } else {
1694                pJS.fn.vendors.checkBeforeDraw();
1695            }
1696
1697        };
1698
1699
1700
1701
1702        /* ---------- pJS - start ------------ */
1703
1704
1705        pJS.fn.vendors.eventsListeners();
1706
1707        pJS.fn.vendors.start();
1708
1709
1710
1711    };
1712
1713    /* ---------- global functions - vendors ------------ */
1714
1715    Object.deepExtend = function (destination, source) {
1716        for (var property in source) {
1717            if (source[property] && source[property].constructor &&
1718                source[property].constructor === Object) {
1719                destination[property] = destination[property] || {};
1720                arguments.callee(destination[property], source[property]);
1721            } else {
1722                destination[property] = source[property];
1723            }
1724        }
1725        return destination;
1726    };
1727
1728    window.requestAnimFrame = (function () {
1729        return window.requestAnimationFrame ||
1730            window.webkitRequestAnimationFrame ||
1731            window.mozRequestAnimationFrame ||
1732            window.oRequestAnimationFrame ||
1733            window.msRequestAnimationFrame ||
1734            function (callback) {
1735                window.setTimeout(callback, 1000 / 60);
1736            };
1737    })();
1738
1739    window.cancelRequestAnimFrame = (function () {
1740        return window.cancelAnimationFrame ||
1741            window.webkitCancelRequestAnimationFrame ||
1742            window.mozCancelRequestAnimationFrame ||
1743            window.oCancelRequestAnimationFrame ||
1744            window.msCancelRequestAnimationFrame ||
1745            clearTimeout
1746    })();
1747
1748    function hexToRgb(hex) {
1749        // By Tim Down - http://stackoverflow.com/a/5624139/3493650
1750        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
1751        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
1752        hex = hex.replace(shorthandRegex, function (m, r, g, b) {
1753            return r + r + g + g + b + b;
1754        });
1755        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
1756        return result ? {
1757            r: parseInt(result[1], 16),
1758            g: parseInt(result[2], 16),
1759            b: parseInt(result[3], 16)
1760        } : null;
1761    };
1762
1763    function clamp(number, min, max) {
1764        return Math.min(Math.max(number, min), max);
1765    };
1766
1767    function isInArray(value, array) {
1768        return array.indexOf(value) > -1;
1769    }
1770
1771
1772    /* ---------- particles.js functions - start ------------ */
1773
1774    window.pJSDom = [];
1775
1776    window.particlesJS = function (tag_id, params) {
1777
1778        //console.log(params);
1779
1780        /* no string id? so it's object params, and set the id with default id */
1781        if (typeof (tag_id) != 'string') {
1782            params = tag_id;
1783            tag_id = 'particles-js';
1784        }
1785
1786        /* no id? set the id to default id */
1787        if (!tag_id) {
1788            tag_id = 'particles-js';
1789        }
1790
1791        /* pJS elements */
1792        var pJS_tag = document.getElementById(tag_id),
1793            pJS_canvas_class = 'particles-js-canvas-el',
1794            exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class);
1795
1796        /* remove canvas if exists into the pJS target tag */
1797        if (exist_canvas.length) {
1798            while (exist_canvas.length > 0) {
1799                pJS_tag.removeChild(exist_canvas[0]);
1800            }
1801        }
1802
1803        /* create canvas element */
1804        var canvas_el = document.createElement('canvas');
1805        canvas_el.className = pJS_canvas_class;
1806
1807        /* set size canvas */
1808        canvas_el.style.width = "100%";
1809        canvas_el.style.height = "100%";
1810
1811        /* append canvas */
1812        var canvas = document.getElementById(tag_id).appendChild(canvas_el);
1813
1814        /* launch particle.js */
1815        if (canvas != null) {
1816            pJSDom.push(new pJS(tag_id, params));
1817        }
1818
1819    };
1820
1821    window.particlesJS.load = function (tag_id, path_config_json, callback) {
1822
1823        /* load json config */
1824        var xhr = new XMLHttpRequest();
1825        xhr.open('GET', path_config_json);
1826        xhr.onreadystatechange = function (data) {
1827            if (xhr.readyState == 4) {
1828                if (xhr.status == 200) {
1829                    var params = JSON.parse(data.currentTarget.response);
1830                    window.particlesJS(tag_id, params);
1831                    if (callback) callback();
1832                } else {

1882