crazy.circles/crazy.circles.min.js

Make your loading... window entertaining with Crazy Circles illusion effect

/**
 *
 * @source: http://www.kopf.com.br/crazy.circles.js
 *
 * @licstart  The following is the entire license notice for the
 *  JavaScript code in this page.
 *
 * Copyright (C) 2015  Bruno Marotta
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend  The above is the entire license notice
 * for the JavaScript code in this page.
 *
 */
Date.now||(Date.now=function(){return(new Date).getTime()});var requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){setTimeout(t,16)},CrazyCircles=function(t,i){this.holderId=t,this.options=i,this.paper=null,this.defaultOptions={color:"multi",backgroundColor:"white",shadow:!0,size:60,totalCircles:8,cycleDuration:2e3,circleSize:0,goCrazyCycle:0,fadeIn:!1,image:"",imageWidth:0,imageHeight:0,path:"",goCrazyOnClick:!1},this.initialize()};CrazyCircles.prototype.resetOptions=function(t){this.options=t,this.initialize()},CrazyCircles.prototype.initialize=function(){function t(i){null==i&&(i=Date.now()),e.start||(e.start=i,e.lastFrame=i),this.actualProgress=i-e.start;var s=i-e.lastFrame;e.lastFrame=i;for(var o=0;o<e.options.totalCircles;o++)e.animateCircle(e.circleInfos[o],this.actualProgress,s);var r=this.actualProgress/e.options.cycleDuration;if(e.options.restartAfterCycle>0&&r>=e.options.restartAfterCycle)return void e.initialize();if(!e.circleInfos[0].free&&e.options.goCrazyCycle>0&&r>=e.options.goCrazyCycle&&e.setFree(e.circleInfos[0],this.actualProgress),e.iAmCrazy)for(var o=0;o<e.options.totalCircles;o++)for(var a=o+1;a<e.options.totalCircles;a++)e.calculateCollisions(e.circleInfos[o],e.circleInfos[a],this.actualProgress,s);requestAnimFrame(t)}this.cleanOptions(),this.clear(),this.paper=Raphael(this.holderId,this.options.size,this.options.size);try{this.paper.canvas.style.backgroundColor=this.options.backgroundColor}catch(i){}Raphael.getColor.reset(),this.radius=this.options.size/2-this.options.circleSize-1,this.circleInfos=new Object,this.start=null;for(var s=0;s<this.options.totalCircles;s++)this.circleInfos[s]=this.initializeCircle(s);this.iAmCrazy=!1;var e=this;this.lastFrame=0,this.actualProgress=0,requestAnimFrame(t)},CrazyCircles.prototype.clear=function(){if(null!=this.paper){var t=this.paper.canvas;t.parentNode.removeChild(t)}},CrazyCircles.prototype.cleanOptions=function(){if(null==this.options&&(this.options=this.defaultOptions),(null==this.options.size||0==this.options.size)&&(this.options.size=Math.min(document.getElementById(this.holderId).clientWidth,document.getElementById(this.holderId).clientHeight)),(this.options.size<20||isNaN(this.options.size))&&(this.options.size=20),(null==this.options.totalCircles||this.options.totalCircles<1)&&(this.options.totalCircles=this.defaultOptions.totalCircles),null==this.options.cycleDuration&&(this.options.cycleDuration=this.defaultOptions.cycleDuration),this.options.cycleDuration<500&&(this.options.cycleDuration=500),this.hasImage=!1,this.isPath=!1,this.offSetX=0,this.offSetY=0,""!=this.options.image&&void 0!=this.options.image&&this.options.imageWidth>0&&this.options.imageHeight>0)this.hasImage=!0,this.offSetX=-(this.options.imageWidth/2),this.offSetY=-(this.options.imageHeight/2),this.options.circleSize=Math.max(this.options.imageWidth,this.options.imageHeight)/2+1;else if(""!=this.options.path&&void 0!=this.options.path){this.isPath=!0;var t=Raphael.pathBBox(this.options.path);this.offSetX=-(t.width/2)-t.x,this.offSetY=-(t.height/2)-t.y,this.options.circleSize=Math.max(t.width,t.height)/2+1}(null==this.options.circleSize||0==this.options.circleSize||"auto"==this.options.circleSize)&&(this.options.circleSize=this.options.size/20),this.options.circleSize<1&&(this.options.circleSize=1),null!=this.options.goCrazyCycle&&this.options.goCrazyCycle>0&&this.options.fadeIn&&this.options.goCrazyCycle<=this.options.totalCircles&&(this.options.goCrazyCycle=Number(this.options.totalCircles)+Number(this.options.goCrazyCycle)),null!=this.options.restartAfterCycle&&this.options.restartAfterCycle>0&&this.options.fadeIn&&this.options.restartAfterCycle<=this.options.totalCircles&&(this.options.restartAfterCycle=Number(this.options.totalCircles)+Number(this.options.restartAfterCycle))},CrazyCircles.prototype.initializeCircle=function(t){var i="multi"==this.options.color?Raphael.getColor():this.options.color;void 0==i&&(i="#a0a0a0");var s={num:t,angle:180/this.options.totalCircles*t/180*Math.PI,pathOffSet:50/this.options.totalCircles*t,free:!1};this.options.shadow&&!this.hasImage&&(s.circleShadow=this.paper.circle(0,0,this.options.circleSize).attr("fill",i).attr("stroke",i).attr("opacity",.3)),s.circle=this.isPath?this.paper.path(this.options.path).attr("fill",i).attr("stroke",i):this.hasImage?this.paper.image(this.options.image,0,0,this.options.imageWidth,this.options.imageHeight):this.paper.circle(0,0,this.options.circleSize).attr("fill",i).attr("stroke",i);var e=this;return this.options.goCrazyOnClick&&s.circle.mousedown(function(){e.setFree(s,this.actualProgress)}),this.setCirclePosition(s,0),s},CrazyCircles.prototype.xattr=function(){return this.hasImage?"x":"cx"},CrazyCircles.prototype.yattr=function(){return this.hasImage?"y":"cy"},CrazyCircles.prototype.animateCircle=function(t,i,s){if(t.free){null!=t.circleShadow&&this.setXY(t.circleShadow,t.circle.realX,t.circle.realY);var e={cx:Math.round(t.circle.realX+t.vx*s,4),cy:Math.round(t.circle.realY+t.vy*s,4)};this.checkBoundaries(e,t),this.setXY(t.circle,Math.round(e.cx,4),Math.round(e.cy,4))}else this.setCirclePosition(t,i,s)},CrazyCircles.prototype.setXY=function(t,i,s){t.realX=i,t.realY=s;var i=Math.round(i),s=Math.round(s);this.isPath?t.transform("T"+i+","+s):(t.attr(this.xattr(),i),t.attr(this.yattr(),s))},CrazyCircles.prototype.setCirclePosition=function(t,i,s){var e=i/this.options.cycleDuration;if(null!=t.circleShadow){var o=this.adjustPathPos(i-40,t.pathOffSet);this.setXY(t.circleShadow,this.options.size/2+this.radius*o*Math.cos(t.angle),this.options.size/2+this.radius*o*Math.sin(t.angle)),this.options.fadeIn&&(e<t.num?t.circleShadow.attr("opacity",0):e<t.num+1?t.circleShadow.attr("opacity",.3*(i%this.options.cycleDuration)/this.options.cycleDuration):t.circleShadow.attr("opacity",.3))}var r=this.adjustPathPos(i,t.pathOffSet),a={x:t.circle.realX,y:t.circle.realY};this.setXY(t.circle,this.options.size/2+this.radius*r*Math.cos(t.angle)+this.offSetX,this.options.size/2+this.radius*r*Math.sin(t.angle)+this.offSetY),this.options.fadeIn&&(e<t.num?t.circle.attr("opacity",0):e<t.num+1?t.circle.attr("opacity",i%this.options.cycleDuration/this.options.cycleDuration):t.circle.attr("opacity",1)),t.num>0&&(t.vx=(t.circle.realX-a.x)/s,t.vy=(t.circle.realY-a.y)/s)},CrazyCircles.prototype.adjustPathPos=function(t,i){var s=t/this.options.cycleDuration*100+i;s=s%100/50,s>1&&(s=2-s),s=2*s-1;var e=0>s;return s=Math.sin(Math.abs(s)*(Math.PI/2)),e&&(s=-s),s},CrazyCircles.prototype.setFree=function(t,i){if(this.iAmCrazy=!0,t.free=!0,null==t.vx||isNaN(t.vx)||isNaN(t.vy)||Math.abs(t.vx)<.03||Math.abs(t.vy)<.03){t.vx=Math.cos(t.angle)*(4*this.radius/this.options.cycleDuration),t.vy=Math.sin(t.angle)*(4*this.radius/this.options.cycleDuration);var s=i/this.options.cycleDuration*100+t.pathOffSet;s=s%100/50,s>1&&(t.vx=-1*t.vx,t.vy=-1*t.vy)}},CrazyCircles.prototype.checkBoundaries=function(t,i){t.cx<this.options.circleSize+this.offSetX||isNaN(t.cx)?(t.cx=this.options.circleSize+this.offSetX,i.vx=-1*i.vx):t.cx>this.options.size-this.options.circleSize+this.offSetX&&(t.cx=this.options.size-this.options.circleSize+this.offSetX,i.vx=-1*i.vx),t.cy<this.options.circleSize+this.offSetY||isNaN(t.cy)?(t.cy=this.options.circleSize+this.offSetY,i.vy=-1*i.vy):t.cy>this.options.size-this.options.circleSize+this.offSetY&&(t.cy=this.options.size-this.options.circleSize+this.offSetY,i.vy=-1*i.vy)},CrazyCircles.prototype.calculateCollisions=function(t,i,s,e){var o={x:t.circle.realX,y:t.circle.realY},r={x:i.circle.realX,y:i.circle.realY},a=Math.sqrt((o.x-r.x)*(o.x-r.x)+(o.y-r.y)*(o.y-r.y));if(a<2*this.options.circleSize){t.free||this.setFree(t,s),i.free||this.setFree(i,s);var c=i.vx,n=i.vy;i.vx=t.vx,i.vy=t.vy,t.vx=c,t.vy=n,this.animateCircle(t,0,e);for(var h=0;a<2*this.options.circleSize&&h++<3;)this.animateCircle(i,0,e),o={x:t.circle.realX,y:t.circle.realY},r={x:i.circle.realX,y:i.circle.realY},a=Math.sqrt((o.x-r.x)*(o.x-r.x)+(o.y-r.y)*(o.y-r.y))}};