cardsforscience/js/detector/bubblr.js

/*
    Bubblr v1.0 - http://mikeyhogarth.wordpress.com/2012/04/15/bubblr-jquery-bubbles-plugin/
    Copyright (c) 2012 Mikey Hogarth
	template based on original jquery lightweight plugin biolerplate: @ajpiano, @addyosmani
    This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

;(function ( $, window, document, undefined ) {

	var pluginName = "bubblr";

    var defaults = {

			numberOfBubbles: 10,
            backgroundColor: "transparent",
			bubbleColor: "White",
			bubbleOpacity: .7,
			bubbleMinSize: 1,
			bubbleMaxSize: 2,
			bubbleMaxSpeed: 2,
			bubbleMinSpeed: 1,
			animationSpeed: 10
        };

    function Bubblr( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this.init();
    }

 	Bubblr.prototype.init = function () {

		if(this.element.getContext) {
			this.ctx = this.element.getContext("2d");
		}
		else {
			return;
		}

		if (this.timerId) this.remove();

		$canvas = $(this.element);

		this.width = $canvas.width();
		this.height = $canvas.height();

		$canvas.css("background-color", this.options.backgroundColor)

		this.bubbles = new Array();

		for(i = 0; i < this.options.numberOfBubbles; i++) {
			this.bubbles[i] = this.generateBubble();
		}

		var self = this;
		this.on=false;

		for(i in this.bubbles) {
			this.drawBubble(this.bubbles[i]);
		}

		this.timerId = setInterval(function() {
			self.animationLoop();
			}, this.options.animationSpeed);

    };

	Bubblr.prototype.onResize= function(){
		this.clear();
		this.width = Math.max($canvas.width(),this.element.width);
		this.height = Math.max($canvas.height(),this.element.height);
	};

	Bubblr.prototype.start = function(timespan) {
		var self = this;
		if (!this.on){
			// this.timerId = setInterval(function() {
			// 	self.animationLoop();
			// 	}, this.options.animationSpeed);
			if (timespan) this.nextOffID = setTimeout(self.stop.bind(self),timespan);
			this.on=true;
		} else {
			clearInterval(this.nextOffID);
			this.nextOffID = setTimeout(self.stop.bind(self),timespan);
		}
	};

	Bubblr.prototype.stop = function() {
		this.on=false;
		this.nextOffID=null;
	};

	/** remove animation loop **/
	Bubblr.prototype.remove = function (arguments) {
		clearInterval(this.timerId);
		this.timerId=null;
		detector.bubblr.clear()
	}

	Bubblr.prototype.animationLoop = function() {

		this.clear();

		for(i in this.bubbles) {
			this.update(i, this.bubbles[i]);
			this.draw(i, this.bubbles[i]);
		}

	};

	Bubblr.prototype.clear = function () {
		this.ctx.globalAlpha = 1;
		this.ctx.fillStyle = this.options.backgroundColor;
		this.ctx.clearRect(0,0,this.width, this.height);
	};

	Bubblr.prototype.draw = function (index, bubble) {
			this.ctx.globalAlpha = this.options.bubbleOpacity;
			this.drawBubble(bubble);
	};

	Bubblr.prototype.update = function (index, bubble) {
			bubble.y = bubble.y - bubble.speed

			if(bubble.y < 0 && this.on)
				this.bubbles[index] = this.generateBubble(true);
	};


	Bubblr.prototype.drawBubble = function(bubble) {
		this.ctx.fillStyle = this.options.bubbleColor;
		this.ctx.beginPath();
		this.ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI*2, true);
		this.ctx.closePath();
		this.ctx.fill();
	};

	Bubblr.prototype.generateBubble = function(start_y_at_zero) {
		var bubble = new Object();
		bubble.x = this.randomize(1,this.width);

		if(start_y_at_zero) {
			bubble.y = this.height;
		}
		else {
			bubble.y = this.randomize(1,this.height);
		}


		bubble.radius = this.randomize(this.options.bubbleMinSize, this.options.bubbleMaxSize);
		bubble.speed = this.randomize(this.options.bubbleMinSpeed, this.options.bubbleMaxSpeed);
		return bubble;
	};

	Bubblr.prototype.randomize = function(min,max) {
		return Math.floor((Math.random()*max)+min);
	};


    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Bubblr( this, options ));
            }
        });
    }

})( jQuery, window, document );