-
Notifications
You must be signed in to change notification settings - Fork 7
/
squiggle.min.js
1 lines (1 loc) · 3.77 KB
/
squiggle.min.js
1
!function(a){a.fn.squiggle=function(c){var d=a(this);return new b(d,c),this.el};var b=function(b,c){this.config={intensity:30,thickness:!1,color:!1,hover:!1},a.extend(this.config,c),this.el=b,this.points=[],this.init(),this.config.hover&&($this=this,this.el.on("mouseover",function(){$this.hideSquiggle()}),this.el.on("mouseout",function(){$this.showSquiggle()}))};b.prototype.init=function(){this.cWidth=2.27*parseInt(this.el.css("width")),this.cHeight=parseInt(this.el.css("font-size")),this.colour=this.config.color?this.config.color:this.el.css("color"),this.el.css({"text-shadow":"none"}),this.step=this.cWidth/this.config.intensity,this.padding=.2*this.cHeight,this.thickness=this.config.thickness?this.config.thickness:~~(.8*this.padding),this.canvas=this.buildCanvas(),this.buildSpline(),this.spline.draw(this.ctx,this.colour,this.thickness),this.addSquiggle()},b.prototype.buildCanvas=function(){var a=document.createElement("canvas");return a.width=this.cWidth,a.height=this.cHeight,this.ctx=a.getContext("2d"),a},b.prototype.Vector=function(b){var c={x:0,y:0},d=a.extend(c,b);return d},b.prototype.buildSpline=function(){for(var a,b=0;b<=this.config.intensity;b++){var d=this.padding+Math.random()*(this.cHeight-1.5*this.padding);0==b&&(a=d),b==this.config.intensity&&(d=a);var e=this.Vector({x:this.step*b,y:d});this.points[b]=e}this.spline=new c({points:this.points})},b.prototype.addSquiggle=function(){this.bg=this.convertCanvasToImage(this.canvas),this.el.css({display:"inline",background:"url("+this.bg+") repeat-x"})},b.prototype.showSquiggle=function(){this.el.css({display:"inline",background:"url("+this.bg+") repeat-x"})},b.prototype.hideSquiggle=function(){this.el.css({background:"transparent"})},b.prototype.convertCanvasToImage=function(a){var b=new Image;return b.src=a.toDataURL("image/png"),b.src};var c=function(a){this.points=a.points||[],this.resolution=a.resolution||1e3,this.tension=a.tension||.85,this.centers=[],this.controls=[],this.length=this.points.length,this.delay=0;for(var b=0;b<this.length;b++)this.points[b].z=this.points[b].z||0;for(var b=0;b<this.length-1;b++){var c=this.points[b],d=this.points[b+1];this.centers.push({x:(c.x+d.x)/2,y:(c.y+d.y)/2,z:(c.z+d.z)/2})}this.controls.push([this.points[0],this.points[0]]);for(var b=0;b<this.centers.length-1;b++){var c=this.centers[b],d=this.centers[b+1],e=this.points[b+1].x-(this.centers[b].x+this.centers[b+1].x)/2,f=this.points[b+1].y-(this.centers[b].y+this.centers[b+1].y)/2,g=this.points[b+1].z-(this.centers[b].y+this.centers[b+1].z)/2;this.controls.push([{x:(1-this.tension)*this.points[b+1].x+this.tension*(this.centers[b].x+e),y:(1-this.tension)*this.points[b+1].y+this.tension*(this.centers[b].y+f),z:(1-this.tension)*this.points[b+1].z+this.tension*(this.centers[b].z+g)},{x:(1-this.tension)*this.points[b+1].x+this.tension*(this.centers[b+1].x+e),y:(1-this.tension)*this.points[b+1].y+this.tension*(this.centers[b+1].y+f),z:(1-this.tension)*this.points[b+1].z+this.tension*(this.centers[b+1].z+g)}])}return this.controls.push([this.points[this.length-1],this.points[this.length-1]]),this};c.prototype.pos=function(a){function b(a,b,c,d,e){var f=function(a){var b=a*a,c=b*a;return[c,3*b*(1-a),3*a*(1-a)*(1-a),(1-a)*(1-a)*(1-a)]},g=f(a),h={x:e.x*g[0]+d.x*g[1]+c.x*g[2]+b.x*g[3],y:e.y*g[0]+d.y*g[1]+c.y*g[2]+b.y*g[3],z:e.z*g[0]+d.z*g[1]+c.z*g[2]+b.z*g[3]};return h}var a=a;0>a&&(a=0),a>this.resolution&&(a=this.resolution-1);var c=a/this.resolution;if(c>=1)return this.points[this.length-1];var d=Math.floor((this.points.length-1)*c),e=(this.length-1)*c-d;return b(e,this.points[d],this.controls[d][1],this.controls[d+1][0],this.points[d+1])},c.prototype.draw=function(a,b,c){a.strokeStyle=b||"#7e5e38",a.lineWidth=c||8,a.beginPath();for(var d,e=0;e<this.resolution;e++)d=this.pos(e),0!=e?a.lineTo(d.x,d.y):a.moveTo(d.x,d.y);return a.stroke(),this}}(jQuery);