Canvas Boilerplate

canvas.js

/**
 * Canvas Boilerplate
 * @version 1.0
 * @author Rhythm Shahriar
 * @link http://rhythmshahriar.com
 */


/**
 * Select canvas node
 * @type {Element}
 */
var canvas = document.querySelector('canvas');

/**
 * Initial Setup the Canvas
 * Set the size of the canvas
 * @type {Number}
 */
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');


/**
 * Mouse position setup
 * @type {{x: undefined, y: undefined}}
 */
var mouse = {
    x: undefined,
    y: undefined
};

/**
 * Sizing/Speed of the elements
 * @type {number}
 */
var maxRadius = 30;
var minRadius = 5;
var mouseArea = 50;

/**
 * Set the color pattern of the elements
 * @type {[string,string,string,string]}
 */
var colors = [
    '#535353',
    '#1DCA7F',
    '#047870',
    '#6898AE'
];

/**
 * Mouse move listener
 */
window.addEventListener('mousemove',
    function (event) {
        mouse.x = event.x;
        mouse.y = event.y;
});


/**
 * Window resize listener
 */
window.addEventListener('resize', function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
});


/**
 * Circle drawing class
 * @param x
 * @param y
 * @param dx
 * @param dy
 * @param radius
 * @constructor
 */
function Circle(x, y, dx, dy, radius) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.minRadius = radius;
    this.color = colors[Math.floor(Math.random() * colors.length)];

    this.draw = function () {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
    };

    this.update = function () {
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }

        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }
        this.x += this.dx;
        this.y += this.dy;

        //inner activity
        if (mouse.x - this.x < mouseArea && mouse.x - this.x > -mouseArea
            && mouse.y - this.y < mouseArea && mouse.y - this.y > -mouseArea) {
            if (this.radius < maxRadius) {
                this.radius += 1;
            }
        } else if (this.radius > minRadius) {
            this.radius -= 1;
        }
        this.draw();
    }
}

var circles = [];

function init() {
    circles = [];

    for (var i = 0; i < 800; i++) {

        var radius = Math.random() * 3 + 1;
        var x = Math.random() * (innerWidth - radius * 2) + radius;
        var y = Math.random() * (innerHeight - radius * 2) + radius;
        var dx = (Math.random() - 0.5) * 5;
        var dy = (Math.random() - 0.5) * 5;

        circles.push(new Circle(x, y, dx, dy, radius));
    }

}

/**
 * Animation loop of the canvas
 */
function animate() {
    requestAnimationFrame(animate);

    c.clearRect(0, 0, innerWidth, innerHeight);

    for (var i = 0; i < circles.length; i++) {
        circles[i].update();
    }
}

/**
 * Initialize and animate the canvas
 */
init();
animate();