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";

	/** default options **/
    var defaults = {
			numberOfBubbles: 10,
            backgroundColor: "transparent",
			bubbleColor: "White",
			bubbleOpacity: 0.7,
			bubbleMinSize: 1,
			bubbleMaxSize: 2,
			bubbleMaxSpeed: 2,
			bubbleMinSpeed: 1,
			animationSpeed: 10
        };

	/**
	 * Create the bubblr
	 * @param {dom element} element - dom canvas element
	 * @param {object} options - options see Bubblr._defaults for options
	 */
    function Bubblr( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
		this.state = {
			bubbles: [],
			started: false,
			globalTick: 0,
			genBubbles: false,
		}
        this.init();
		this.start();
    }

 	Bubblr.prototype.init = function () {

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

		$canvas = $(this.element);

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

		// this.state.globalTick=0;
		// this.state.continuous=false; // new bubbles
		// this.state.started = false // if there is an animation loop

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

		// this.state.bubbles = new Array();

		// initial bubbles
		for(i = 0; i < this.options.numberOfBubbles; i++) {
			this.state.bubbles[i] = this.generateBubble();
		}
		for(i in this.state.bubbles) {
			this.drawBubble(this.state.bubbles[i]);
		}

    };

	/**
	 * Recenter on resize,
	 * bind this to $(window).on('resize',bubblr.onResize.bind(bubblr);) if needed
	 **/
	Bubblr.prototype.onResize= function(){
		this.clear();
		this.width = $(this.element).outerWidth();
		this.height = $(this.element).outerWidth();
	};

	/** Start animation loop if not started **/
	Bubblr.prototype.start = function() {
		if (!this.state.started){
			this.state.started=true;
			this.animationLoop();
		}
	};

	/** Stop animation loop **/
	Bubblr.prototype.stop = function() {
		this.state.started=false;
		this.clear();
	};

	/** Animation loop run Bubblr.stop and start control this **/
	Bubblr.prototype.animationLoop = function() {
		window.requestAnimFrame(this.animationLoop.bind(this));
		this.state.globalTick++;
		if (this.state.started) this.animate();
	};

	Bubblr.prototype.animate = function (arguments) {
		this.clear();
		for(i in this.state.bubbles) {
			this.update(i, this.state.bubbles[i]);
			this.draw(i, this.state.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);
	};

	/** Update bubble position **/
	Bubblr.prototype.update = function (index, bubble) {
			bubble.y = bubble.y - bubble.speed

			if(bubble.y < 0 && this.state.continuous)
				// reset to bottom if continuous running is on
				this.state.bubbles[index] = this.generateBubble(true);
	};

	/**
	 * Generate a single bubble
	 * @param {object} options    - options for the bubble
	 * @param {Number} options.x  - Starting x position. Defaults to a random
	 *                              location.
	 * @param  {Number} options.y - starting y level. Default to the bottom or
	 *                            	null for random position, a number sets a
	 *                            	specific level. Note the top is 0, while the
	 *                            	bottom is `-$(element).height()`
	 */
	Bubblr.prototype.bubble = function (options){
		this.state.bubbles.push(this.generateBubble(options));
	}

	/**
	 * 	Helper to generate multiple bubble
	 * @param  {[type]} amount  - amount of bubbles to create
	 * @param  {[type]} options - see Bubblr.bubble for description
	 */
	Bubblr.prototype.genBubbles = function (amount,options) {
		for (var i = 0; i < amount; i++) {
			this.state.bubbles.push(this.generateBubble(options));
		}
	}

	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(options) {
		options = options || {};
		var bubble = new Object();


		if(options.x===undefined || options.x===null)
			bubble.x = this.randomize(1,this.width);
		else
			bubble.x = options.x

		if(options.y===undefined)
			bubble.y = this.height;
		else if (options.y===null)
			bubble.y = this.randomize(1,this.height);
		else
			bubble.y = options.y

		if (options.radius)
			bubble.radius = options.radius
		else
			bubble.radius = this.randomize(this.options.bubbleMinSize, this.options.bubbleMaxSize);

		if (options.speed)
			bubble.speed = options.speed;
		else
			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);
	};

	// $.flame will create or return the bubblr element
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Bubblr( this, options ));
            }
        });
    }

})( jQuery, window, document );

// shim for requestAnimFrame
window.requestAnimFrame = (function(){
    return window.requestAnimationFrame       ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame    ||
           window.oRequestAnimationFrame      ||
           window.msRequestAnimationFrame     ||
           function(/* function */ callback, /* DOMElement */ element){
               window.setTimeout(callback, 1000 / 60);
           };
})();