Hungryinc.com Particle Background

gistfile1.txt

'use strict'

module.exports = function($window) {
    return {
        restrict: 'E',
        template: "<canvas id='space' width='{{ width }}' height='{{ height }}'></canvas>",
        replace: true,
        link: function($scope, element, attr) {
            var ctx = element[0].getContext('2d'),
                dist,
                particleCount       = 20,
                particles           = [],
                particleRadius      = 5,
                minDist             = 100,
                velocity            = 3,
                colors = [{
                r: 228,
                g: 69,
                b: 30
            }, {
                r: 89,
                g: 179,
                b: 157                
            }, {
                r: 115,
                g: 187,
                b: 91                
            }, {
                r: 248,
                g: 172,
                b: 19                
            }, {
                r: 61,
                g: 67,
                b: 97                
            }];

            $scope.width = $window.innerWidth;
            $scope.height = $window.innerHeight;

            angular.element(window).bind('resize', function() {
                $scope.width = $window.innerWidth;
                $scope.height = $window.innerHeight;

                $scope.$phase || $scope.$apply();
            })

            // RequestAnimFrame: a browser API for getting smooth animations
            window.requestAnimFrame = (function() {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();

            if ($window.innerWidth <= 320 ) {
                particleCount = 5;
            }

            // Function to paint the canvas black
            function paintCanvas() {
                // Set the fill color to black
                ctx.fillStyle = "rgb(0,0,0)";

                ctx.fillRect(0, 0, $window.innerWidth, $window.innerHeight);
            }

            function Particle() {
                this.x = Math.random() * $window.innerWidth;
                this.y = Math.random() * $window.innerHeight;
                this.vx = -1 + Math.random() * 2;
                this.vy = -1 + Math.random() * 2;
                this.radius = particleRadius;

                var color = colors[Math.floor(Math.random()*colors.length)];
                this.color = {
                    r: color.r,
                    g: color.g,
                    b: color.b
                }

                this.blur = Math.floor(Math.random() * (1 - 9 + 1) + 9) / 10;

                this.draw = function() {
                    ctx.fillStyle = "white";
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * this.radius, false);
                    ctx.fillStyle = 'rgb(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ')';
                    ctx.fill();
                }
            }

            // Time to push the particles into an array
            for (var i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }

            function draw() {
                paintCanvas();

                // Call the function that will draw the balls using a loop
                for (var i = 0; i < particles.length; i++) {
                    var p = particles[i];
                    p.draw();
                }

                //Finally call the update function
                update();
            }

            // Give every particle some life
            function update() {
                for (var i = 0; i < particles.length; i++) {
                    var p = particles[i];

                    // Change the velocities
                    p.x += p.vx;
                    p.y += p.vy

                    if (p.x > $window.innerWidth + p.radius)
                        p.x = p.radius;

                    else if (p.x < 0 - p.radius) {
                        p.x = $window.innerWidth - p.radius;
                    }

                    if (p.y > $window.innerHeight + p.radius)
                        p.y = p.radius;

                    else if (p.y < 0 - p.radius) {
                        p.y = $window.innerHeight - p.radius;
                    }

                    for (var j = i + 1; j < particles.length; j++) {
                        var p2 = particles[j];
                        distance(p, p2);
                    }

                }
            }

            // Distance calculator between two particles
            function distance(p1, p2) {
                var dist,
                    dx = p1.x - p2.x;
                var dy = p1.y - p2.y;

                var dist = Math.sqrt(dx * dx + dy * dy);

                if (dist <= minDist) {
                    
                    if (JSON.stringify(p1.color) != JSON.stringify(p2.color)) {
                        // Draw the line
                        ctx.beginPath();

                        var gradient = ctx.createLinearGradient(p1.x,p1.y,p2.x,p2.y);
                        gradient.addColorStop('0', 'rgb(' + p1.color.r + ', ' + p1.color.g + ', ' + p1.color.b + ')');
                        gradient.addColorStop('1.0', 'rgb(' + p2.color.r + ', ' + p2.color.g + ', ' + p2.color.b + ')');
                        ctx.strokeStyle = gradient;
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();
                    }

                    // Some acceleration for the partcles 
                    // depending upon their distance
                    var ax = dx / (velocity * 1000),
                        ay = dy / (velocity * 1000);

                    // Apply the acceleration on the particles
                    p1.vx -= ax;
                    p1.vy -= ay;

                    p2.vx += ax;
                    p2.vy += ay;
                }
            }

            // Start the main animation loop using requestAnimFrame
            function animloop() {
                draw();
                requestAnimFrame(animloop);
            }

            animloop();

        }
    }
}