HOME

Mini Shell 1.0
DIR:/home/austenwhite.co.uk/www/js/plugins/
Current File : /home/austenwhite.co.uk/www/js/plugins/waterpipe.js
/*
 *  waterpipe.js - v1.0
 *  jQuery plugin. Smoky backgrounds generator
 *  http://www.dragdropsite.com
 *
 *  Made by dragdropsite.com
 *
 *  Under MIT License
 *
 *  Credits: rectangleworld.com
 */

;(function ( $, window, document, undefined ) {
    var pluginName = "waterpipe",
        defaults = {
            //Smoke
            gradientStart: '#000000',
            gradientEnd: '#222222',
            smokeOpacity: 0.1,
            numCircles: 1,
            maxMaxRad: 'auto',
            minMaxRad: 'auto',
            minRadFactor: 0,
            iterations: 8,
            drawsPerFrame: 10,
            lineWidth: 2,
            speed: 1,
            //Background
            bgColorInner: "#ffffff",
            bgColorOuter: "#666666",
        };

    var TWO_PI = 2*Math.PI;
    var timer;
    var inst;
    function Smoke ( element, options ) {
        this.element = element;
        this.$element = $(element);
        inst = this;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Smoke.prototype = {
        init: function () {
            this.initSettings();
            this.initCanvas();
            this.generate();
        },
        initSettings: function () {
            var radius = this.$element.height()*0.8/2;
            if(this.settings.maxMaxRad==='auto') this.settings.maxMaxRad = radius;
            if(this.settings.minMaxRad==='auto') this.settings.minMaxRad = radius;
        },
        initCanvas: function () {
            this.displayCanvas = this.$element.find('canvas');
            this.displayWidth = this.$element[0].clientWidth;
            this.displayHeight = this.$element[0].clientHeight;
            this.displayCanvas[0].width = this.displayWidth;
            this.displayCanvas[0].height = this.displayHeight;
            this.context = this.displayCanvas[0].getContext("2d");

            //off screen canvas used only when exporting image
            this.exportCanvas = document.createElement('canvas');
            this.exportCanvas.width = this.displayWidth;
            this.exportCanvas.height = this.displayHeight;
            this.exportContext = this.exportCanvas.getContext("2d");
        },
        generate: function () {
            this.drawCount = 0;
            this.context.setTransform(1,0,0,1,0,0);
            this.context.clearRect(0,0,this.displayWidth,this.displayHeight);
            this.fillBackground();
            
            this.setCircles();
            
            if(timer) {clearInterval(timer);}
            timer = setInterval(function(){inst.onTimer()},inst.settings.speed);
            
        },
        fillBackground: function () {
            var outerRad = Math.sqrt(this.displayWidth*this.displayWidth + this.displayHeight*this.displayHeight)/2;
            this.niceGradient = new SmokeNiceBG(this.displayWidth*0.75,this.displayHeight/2*0.75,0,this.displayWidth/2,this.displayHeight/4,outerRad);

            var hex = this.settings.bgColorInner.replace('#','');

            var r0 = parseInt(hex.substring(0,2), 16), 
                g0 = parseInt(hex.substring(2,4), 16), 
                b0 = parseInt(hex.substring(4,6), 16);

            hex = this.settings.bgColorOuter.replace('#','');
            var r1 = parseInt(hex.substring(0,2), 16), 
                g1 = parseInt(hex.substring(2,4), 16), 
                b1 = parseInt(hex.substring(4,6), 16);

            this.niceGradient.addColorStop(0,r0,g0,b0);
            this.niceGradient.addColorStop(1,r1,g1,b1);     
            this.niceGradient.fillRect(this.context,0,0,this.displayWidth,this.displayHeight);
        },
        setCircles: function () {
            var i;
            var r,g,b,a;
            var maxR, minR;
            var grad;
            
            this.circles = [];
            
            for (i = 0; i < this.settings.numCircles; i++) {
                maxR = this.settings.minMaxRad+Math.random()*(this.settings.maxMaxRad-this.settings.minMaxRad);
                minR = this.settings.minRadFactor*maxR;
                
                //define gradient
                grad = this.context.createRadialGradient(0,0,minR,0,0,maxR);
                var gradientStart = this.hexToRGBA(this.settings.gradientStart, this.settings.smokeOpacity),
                    gradientEnd = this.hexToRGBA(this.settings.gradientEnd, this.settings.smokeOpacity);

                grad.addColorStop(1,gradientStart);
                grad.addColorStop(0,gradientEnd);
                
                var newCircle = {
                    centerX: -maxR,
                    centerY: this.displayHeight/2-50,
                    maxRad : maxR,
                    minRad : minR,
                    color: grad, //can set a gradient or solid color here.
                    //fillColor: "rgba(0,0,0,1)",
                    param : 0,
                    changeSpeed : 1/250,
                    phase : Math.random()*TWO_PI, //the phase to use for a single fractal curve.
                    globalPhase: Math.random()*TWO_PI //the curve as a whole will rise and fall by a sinusoid.
                    };
                this.circles.push(newCircle);
                newCircle.pointList1 = this.setLinePoints(this.settings.iterations);
                newCircle.pointList2 = this.setLinePoints(this.settings.iterations);
            }
        },
        onTimer: function () {
            var i,j;
            var c;
            var rad;
            var point1,point2;
            var x0,y0;
            var cosParam;
            
            var xSqueeze = 0.75; //cheap 3D effect by shortening in x direction.
            
            var yOffset;
            
            //draw circles
            for (j = 0; j < this.settings.drawsPerFrame; j++) {
                
                this.drawCount++;
                
                for (i = 0; i < this.settings.numCircles; i++) {
                    c = this.circles[i];
                    c.param += c.changeSpeed;
                    if (c.param >= 1) {
                        c.param = 0;
                        
                        c.pointList1 = c.pointList2;
                        c.pointList2 = this.setLinePoints(this.settings.iterations);
                    }
                    cosParam = 0.5-0.5*Math.cos(Math.PI*c.param);
                    
                    this.context.strokeStyle = c.color;
                    this.context.lineWidth = this.settings.lineWidth;
                    //context.fillStyle = c.fillColor;
                    this.context.beginPath();
                    point1 = c.pointList1.first;
                    point2 = c.pointList2.first;
                    
                    //slowly rotate
                    c.phase += 0.0002;
                    
                    theta = c.phase;
                    rad = c.minRad + (point1.y + cosParam*(point2.y-point1.y))*(c.maxRad - c.minRad);
                    
                    //move center
                    c.centerX += 0.5;
                    c.centerY += 0.04;
                    yOffset = 40*Math.sin(c.globalPhase + this.drawCount/1000*TWO_PI);
                    //stop when off screen
                    if (c.centerX > this.displayWidth + this.settings.maxMaxRad) {
                        clearInterval(timer);
                        timer = null;
                    }           
                    
                    //we are drawing in new position by applying a transform. We are doing this so the gradient will move with the drawing.
                    this.context.setTransform(xSqueeze,0,0,1,c.centerX,c.centerY+yOffset)
                    
                    //Drawing the curve involves stepping through a linked list of points defined by a fractal subdivision process.
                    //It is like drawing a circle, except with varying radius.
                    x0 = xSqueeze*rad*Math.cos(theta);
                    y0 = rad*Math.sin(theta);
                    this.context.lineTo(x0, y0);
                    while (point1.next != null) {
                        point1 = point1.next;
                        point2 = point2.next;
                        theta = TWO_PI*(point1.x + cosParam*(point2.x-point1.x)) + c.phase;
                        rad = c.minRad + (point1.y + cosParam*(point2.y-point1.y))*(c.maxRad - c.minRad);
                        x0 = xSqueeze*rad*Math.cos(theta);
                        y0 = rad*Math.sin(theta);
                        this.context.lineTo(x0, y0);
                    }
                    this.context.closePath();
                    this.context.stroke();
                    //context.fill();       
                        
                }
            }
        },
        setLinePoints: function (iterations) {
            var pointList = {};
            pointList.first = {x:0, y:1};
            var lastPoint = {x:1, y:1}
            var minY = 1;
            var maxY = 1;
            var point;
            var nextPoint;
            var dx, newX, newY;
            var ratio;
            
            var minRatio = 0.5;
                    
            pointList.first.next = lastPoint;
            for (var i = 0; i < iterations; i++) {
                point = pointList.first;
                while (point.next != null) {
                    nextPoint = point.next;
                    
                    dx = nextPoint.x - point.x;
                    newX = 0.5*(point.x + nextPoint.x);
                    newY = 0.5*(point.y + nextPoint.y);
                    newY += dx*(Math.random()*2 - 1);
                    
                    var newPoint = {x:newX, y:newY};
                    
                    //min, max
                    if (newY < minY) {
                        minY = newY;
                    }
                    else if (newY > maxY) {
                        maxY = newY;
                    }
                    
                    //put between points
                    newPoint.next = nextPoint;
                    point.next = newPoint;
                    
                    point = nextPoint;
                }
            }
            
            //normalize to values between 0 and 1
            if (maxY != minY) {
                var normalizeRate = 1/(maxY - minY);
                point = pointList.first;
                while (point != null) {
                    point.y = normalizeRate*(point.y - minY);
                    point = point.next;
                }
            }
            //unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
            else {
                point = pointList.first;
                while (point != null) {
                    point.y = 1;
                    point = point.next;
                }
            }
            
            return pointList;       
        },
        setOption: function (optionName, optionValue) {
            this.settings[optionName] = optionValue;
        },
        hexToRGBA: function (hex, opacity) {
            hex = hex.replace('#','');
            r = parseInt(hex.substring(0,2), 16);
            g = parseInt(hex.substring(2,4), 16);
            b = parseInt(hex.substring(4,6), 16);

            result = 'rgba('+r+','+g+','+b+','+opacity+')';
            return result;
        },
        download: function(width, height){
            this.exportContext.drawImage(this.displayCanvas[0], 0, 0, width, height, 0, 0, width, height);
            //we will open a new window with the image contained within:        
            //retrieve canvas image as data URL:
            var dataURL = this.exportCanvas.toDataURL("image/png");
            //open a new window of appropriate size to hold the image:
            var imageWindow = window.open("", "fractalLineImage", "left=0,top=0,width="+width+",height="+height+",toolbar=0,resizable=0");
            //write some html into the new window, creating an empty image:
            imageWindow.document.write("<title>Export Image</title>")
            imageWindow.document.write("<img id='exportImage'"
                                        + " alt=''"
                                        + " height='" + height + "'"
                                        + " width='"  + width  + "'"
                                        + " style='position:absolute;left:0;top:0'/>");
            imageWindow.document.close();
            //copy the image into the empty img in the newly opened window:
            var exportImage = imageWindow.document.getElementById("exportImage");
            exportImage.src = dataURL;
        }
    };

    function SmokeNiceBG(_x0,_y0,_rad0,_x1,_y1,_rad1) {
        this.x0 = _x0;
        this.y0 = _y0;
        this.x1 = _x1;
        this.y1 = _y1;
        this.rad0 = _rad0;
        this.rad1 = _rad1;
        this.colorStops = [];
    }

    SmokeNiceBG.prototype.addColorStop = function(ratio,r,g,b) {
        if ((ratio < 0) || (ratio > 1)) {
            return;
        }
        var n;
        var newStop = {ratio:ratio, r:r, g:g, b:b};
        if ((ratio >= 0) && (ratio <= 1)) {
            if (this.colorStops.length == 0) {
                this.colorStops.push(newStop);
            }
            else {
                var i = 0;
                var found = false;
                var len = this.colorStops.length;
                //search for proper place to put stop in order.
                while ((!found) && (i<len)) {
                    found = (ratio <= this.colorStops[i].ratio);
                    if (!found) {
                        i++;
                    }
                }
                //add stop - remove next one if duplicate ratio
                if (!found) {
                    //place at end
                    this.colorStops.push(newStop);
                }
                else {
                    if (ratio == this.colorStops[i].ratio) {
                        //replace
                        this.colorStops.splice(i, 1, newStop);
                    }
                    else {
                        this.colorStops.splice(i, 0, newStop);
                    }
                }
            }
        }
    }

        
    SmokeNiceBG.prototype.fillRect = function(ctx, rectX0, rectY0, rectW, rectH) {
        
        if (this.colorStops.length == 0) {
            return;
        }
        
        var image = ctx.getImageData(rectX0, rectY0, rectW, rectH);
        var pixelData = image.data;
        var len = pixelData.length;
        var oldpixel, newpixel, nearestValue;
        var quantError;
        var x;
        var y;
        
        var vx = this.x1 - this.x0;
        var vy = this.y1 - this.y0;
        var vMagSquareRecip = 1/(vx*vx+vy*vy);
        var ratio;
        
        var r,g,b;
        var r0,g0,b0,r1,g1,b1;
        var ratio0,ratio1;
        var f;
        var stopNumber;
        var found;
        var q;
        
        var rBuffer = [];
        var gBuffer = [];
        var bBuffer = [];
        var aBuffer = [];
        
        var a,b,c,discrim;
        var dx,dy;
        
        var xDiff = this.x1 - this.x0;
        var yDiff = this.y1 - this.y0;
        var rDiff = this.rad1 - this.rad0;
        a = rDiff*rDiff - xDiff*xDiff - yDiff*yDiff;
        var rConst1 = 2*this.rad0*(this.rad1-this.rad0);
        var r0Square = this.rad0*this.rad0;

        //first complete color stops with 0 and 1 ratios if not already present
        if (this.colorStops[0].ratio != 0) {
            var newStop = { ratio:0,
                            r: this.colorStops[0].r,
                            g: this.colorStops[0].g,
                            b: this.colorStops[0].b}
            this.colorStops.splice(0,0,newStop);
        }
        if (this.colorStops[this.colorStops.length-1].ratio != 1) {
            var newStop = { ratio:1,
                            r: this.colorStops[this.colorStops.length-1].r,
                            g: this.colorStops[this.colorStops.length-1].g,
                            b: this.colorStops[this.colorStops.length-1].b}
            this.colorStops.push(newStop);
        }

        //create float valued gradient
        for (i = 0; i<len/4; i++) {
            
            x = rectX0 + (i % rectW);
            y = rectY0 + Math.floor(i/rectW);
            
            dx = x - this.x0;
            dy = y - this.y0;
            b = rConst1 + 2*(dx*xDiff + dy*yDiff);
            c = r0Square - dx*dx - dy*dy;
            discrim = b*b-4*a*c;
            
            if (discrim >= 0) {
                ratio = (-b + Math.sqrt(discrim))/(2*a);
            
                if (ratio < 0) {
                    ratio = 0;
                }
                else if (ratio > 1) {
                    ratio = 1;
                }
                
                //find out what two stops this is between
                if (ratio == 1) {
                    stopNumber = this.colorStops.length-1;
                }
                else {
                    stopNumber = 0;
                    found = false;
                    while (!found) {
                        found = (ratio < this.colorStops[stopNumber].ratio);
                        if (!found) {
                            stopNumber++;
                        }
                    }
                }
                
                //calculate color.
                r0 = this.colorStops[stopNumber-1].r;
                g0 = this.colorStops[stopNumber-1].g;
                b0 = this.colorStops[stopNumber-1].b;
                r1 = this.colorStops[stopNumber].r;
                g1 = this.colorStops[stopNumber].g;
                b1 = this.colorStops[stopNumber].b;
                ratio0 = this.colorStops[stopNumber-1].ratio;
                ratio1 = this.colorStops[stopNumber].ratio;
                    
                f = (ratio-ratio0)/(ratio1-ratio0);
                r = r0 + (r1 - r0)*f;
                g = g0 + (g1 - g0)*f;
                b = b0 + (b1 - b0)*f;
            }
            
            else {
                r = r0;
                g = g0;
                b = b0;
            }
            
            //set color as float values in buffer arrays
            rBuffer.push(r);
            gBuffer.push(g);
            bBuffer.push(b);
        }
        
        //While converting floats to integer valued color values, apply Floyd-Steinberg dither.
        for (i = 0; i<len/4; i++) {
            nearestValue = ~~(rBuffer[i]);
            quantError =rBuffer[i] - nearestValue;
            rBuffer[i+1] += 7/16*quantError;
            rBuffer[i-1+rectW] += 3/16*quantError;
            rBuffer[i + rectW] += 5/16*quantError;
            rBuffer[i+1 + rectW] += 1/16*quantError;
            
            nearestValue = ~~(gBuffer[i]);
            quantError =gBuffer[i] - nearestValue;
            gBuffer[i+1] += 7/16*quantError;
            gBuffer[i-1+rectW] += 3/16*quantError;
            gBuffer[i + rectW] += 5/16*quantError;
            gBuffer[i+1 + rectW] += 1/16*quantError;
            
            nearestValue = ~~(bBuffer[i]);
            quantError =bBuffer[i] - nearestValue;
            bBuffer[i+1] += 7/16*quantError;
            bBuffer[i-1+rectW] += 3/16*quantError;
            bBuffer[i + rectW] += 5/16*quantError;
            bBuffer[i+1 + rectW] += 1/16*quantError;
        }
            
        //copy to pixel data
        for (i=0; i<len; i += 4) {
            q = i/4;
            pixelData[i] = ~~rBuffer[q];
            pixelData[i+1] = ~~gBuffer[q];
            pixelData[i+2] = ~~bBuffer[q];
            pixelData[i+3] = 255;       
        }
        
        ctx.putImageData(image,rectX0,rectY0);
        
    }

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[ pluginName ] = function ( options ) {
        this.each(function() {
            if ( !$.data( this, pluginName ) ) {
                $.data( this, pluginName, new Smoke( this, options ) );
            }
        });

        // chain jQuery functions
        return this;
    };

})( jQuery, window, document );