curvejs
Version:
Curve is a dancer.
8 lines (6 loc) • 17.2 kB
JavaScript
/**
* curvejs v0.3.3 By dntzhang
* Github: https://github.com/AlloyTeam/curvejs
* MIT Licensed.
*/
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.curvejs=i()}(this,function(){"use strict";function t(t,i,e,n,o,s,a){var r={x:t-e,y:i-n},h=[[Math.cos(o),-Math.sin(o)],[Math.sin(o),Math.cos(o)]];a[s]=e+h[0][0]*r.x+h[0][1]*r.y,a[s+1]=n+h[1][0]*r.x+h[1][1]*r.y}function i(i,e){var n=(i[0]+i[6])/2,o=(i[1]+i[7])/2;t(i[0],i[1],n,o,e,0,i),t(i[2],i[3],n,o,e,2,i),t(i[4],i[5],n,o,e,4,i),t(i[6],i[7],n,o,e,6,i)}function e(t,i){var e=t*t+i*i;if(0===e)return[0,0];var n=Math.sqrt(e);return[t/n,i/n]}function n(t,i){return t*t+i*i}function o(t){var i=M.n(t[0]-t[6],t[1]-t[7]);t[0]+=i[0],t[1]+=i[1],t[6]-=i[0],t[7]-=i[1]}function s(t){var i=M.n(t[0]-t[6],t[1]-t[7]);t[0]-=i[0],t[1]-=i[1],t[6]+=i[0],t[7]+=i[1]}function a(t){}function r(t,i){var e=[t[2]-t[0],t[3]-t[1]],n=[t[4]-t[2],t[5]-t[3]],o=[t[6]-t[4],t[7]-t[5]],s=[i[2]-i[0],i[3]-i[1]],a=[i[4]-i[2],i[5]-i[3]],r=[i[6]-i[4],i[7]-i[5]],h=M.n(s[0]-e[0],s[1]-e[1]);t[0]-=h[0],t[1]-=h[1];var l=M.n(a[0]-n[0],a[1]-n[1]);t[4]+=l[0],t[5]+=l[1];var u=M.n(r[0]-o[0],r[1]-o[1]);t[6]+=u[0],t[7]+=u[1]}function h(t){t[2]+=t[2]>t[0]?-1:1,t[3]+=t[3]>t[1]?-1:1,t[4]+=t[4]>t[6]?-1:1,t[5]+=t[5]>t[7]?-1:1}function l(t,i){var e=[[Math.cos(i.angle),-Math.sin(i.angle)],[Math.sin(i.angle),Math.cos(i.angle)]];this.data.angle+=i.step,t[0]=t[0]+e[0][0],t[1]=t[1]+e[1][0],t[6]=t[6]+e[0][0],t[7]=t[7]+e[1][0]}function u(t,i,e,n,o){var s=t.x,a=t.y,r=i.x,h=i.y,l=e.x,u=e.y,c=n.x,v=n.y,d=(r-s)*o+s,p=(h-a)*o+a,f=(l-r)*o+r,g=(u-h)*o+h,y=(c-l)*o+l,m=(v-u)*o+u,w=(f-d)*o+d,b=(g-p)*o+p;return[s,a,d,p,w,b,((y-f)*o+f-w)*o+w,((m-g)*o+g-b)*o+b]}function c(t,i,e){return d(v(t),v(i),e)}function v(t){if(I[t])return I[t];var i=null;V[t]&&(i=t,t=F(V[t]));t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(t,i,e,n){return i+i+e+e+n+n});var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),n=i||t;return I[n]=e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null,I[n]}function d(t,i,e){function n(t,i){return t+Math.round(e/100*(i-t))}function o(t){t=Math.min(t,255),t=Math.max(t,0);var i=t.toString(16);return i.length<2&&(i="0"+i),i}var s={};return e<0&&(e=0),e>100&&(e=100),s.r=n(t.r,i.r),s.g=n(t.g,i.g),s.b=n(t.b,i.b),s.cssColor="#"+o(s.r)+o(s.g)+o(s.b),s.cssColor}!function(){Date.now||(Date.now=function(){return(new Date).getTime()});for(var t=["webkit","moz"],i=0;i<t.length&&!window.requestAnimationFrame;++i){var e=t[i];window.requestAnimationFrame=window[e+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e+"CancelAnimationFrame"]||window[e+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var n=0;window.requestAnimationFrame=function(t){var i=Date.now(),e=Math.max(n+16,i);return setTimeout(function(){t(n=e)},e-i)},window.cancelAnimationFrame=clearTimeout}}();var p,f=function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")},g=function(){function t(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(i,e,n){return e&&t(i.prototype,e),n&&t(i,n),i}}(),y=function(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);t.prototype=Object.create(i&&i.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(t,i):t.__proto__=i)},m=function(t,i){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!i||"object"!=typeof i&&"function"!=typeof i?t:i},w=function(){function t(i){f(this,t),this.points=i.points||[0,0,0,0,0,0,0,0],this.color=i.color||"black",this.x=i.x||0,this.y=i.y||0,this.vision=i.vision||[],this.visionMax=720,this.visionInterval=i.visionInterval||10,this._preDate=Date.now(),this._now=new Date,this.data=i.data,this._noop=function(){},this._ease=function(t){return t},this._targetPoints=null,this.copyPoints=this.points.slice(0),this.motion=i.motion||this._noop,this.visionAlpha=void 0===i.visionAlpha?.2:i.visionAlpha,(void 0===i.initVision||i.initVision)&&this._initVision(i.visionCount||80)}return g(t,[{key:"_initVision",value:function(){for(var t=0;t<80;t++)this.tick(!0)}},{key:"tick",value:function(t){this._now=Date.now(),(this._now-this._preDate>this.visionInterval||t)&&(this.vision.push.apply(this.vision,this.points),this.vision.push(this.color),this.vision.length>this.visionMax&&this.vision.splice(0,9),this._preDate=this._now),this.pauseMotion||this.motion.call(this,this.points,this.data),this._targetPoints&&this._pointsTo()}},{key:"pause",value:function(){this.pauseMotion=!0}},{key:"play",value:function(){this.pauseMotion=!1}},{key:"draw",value:function(t){this.tick(),t.save(),t.translate(this.x,this.y),t.globalAlpha=1,t.strokeStyle=this.color;var i=this.points;t.beginPath(),t.moveTo.call(t,i[0],i[1]),t.bezierCurveTo.call(t,i[2],i[3],i[4],i[5],i[6],i[7]),t.stroke();for(var e=this.vision,n=0,o=e.length;n<o;n+=9)t.globalAlpha=n/this.visionMax*this.visionAlpha,t.strokeStyle=e[n+8],t.beginPath(),t.moveTo.call(t,e[n],e[n+1]),t.bezierCurveTo.call(t,e[n+2],e[n+3],e[n+4],e[n+5],e[n+6],e[n+7]),t.stroke();t.restore()}},{key:"pointsTo",value:function(t,i,e){this.pause();var n=this.points;this._targetPoints=t,this._pto=e,this._ptStart=e.start||this._noop,this._ptProgress=e.progress||this._noop,this._ptEnd=e.end||this._noop,this._ptEase=e.ease||this._ease,this._ptTime=i,this._ptStartTime=Date.now(),this._ptCopyPoints=n.slice(0),this._ptDistance=[t[0]-n[0],t[1]-n[1],t[2]-n[2],t[3]-n[3],t[4]-n[4],t[5]-n[5],t[6]-n[6],t[7]-n[7]],this._ptStart.call(this,0)}},{key:"translatePoints",value:function(t,i,e){t=Object.assign({x:0,y:0},t);var n=this.points;this.pointsTo([n[0]+t.x,n[1]+t.y,n[2]+t.x,n[3]+t.y,n[4]+t.x,n[5]+t.y,n[6]+t.x,n[7]+t.y],i,e)}},{key:"scaleTo",value:function(t,i,e){var n=1,o=1;"number"==typeof t?n=o=t:void 0!==t.scaleX&&(n=t.scaleX)(void 0!==t.scaleY)&&(o=t.scaleX);var s=this.points,a=void 0!==e.center?e.center[0]:(s[0]+s[6])/2,r=void 0!==e.center?e.center[1]:(s[1]+s[7])/2;this.pointsTo([n*(s[0]-a)+a,o*(s[1]-r)+r,n*(s[2]-a)+a,o*(s[3]-r)+r,n*(s[4]-a)+a,o*(s[5]-r)+r,n*(s[6]-a)+a,o*(s[7]-r)+r],i,e)}},{key:"rotateTo",value:function(t,i,e){}},{key:"_pointsTo",value:function(){var t=this,i=this.points,e=Date.now()-this._ptStartTime;if(e<this._ptTime){var n=e/this._ptTime;i.forEach(function(e,o){i[o]=t._ptCopyPoints[o]+t._ptDistance[o]*t._ptEase(n)}),this._ptProgress.call(this,n)}else i=this._targetPoints.slice(0),this._targetPoints=null,this._ptEnd.call(this,1)}},{key:"colorTo",value:function(){}},{key:"clone",value:function(){}}]),t}(),b=function(){function t(){f(this,t),this.children=[]}return g(t,[{key:"add",value:function(t){this.children.push(t)}},{key:"remove",value:function(t){for(var i=0,e=this.children.length;i<e;i++)if(t===this.children[i]){this.children.splice(i,1);break}}},{key:"draw",value:function(t){this.children.forEach(function(i){i.draw(t)})}}]),t}(),k=function(t){function i(t,e,n){f(this,i);var o=m(this,(i.__proto__||Object.getPrototypeOf(i)).call(this));return 1===arguments.length?(o.canvas=t,o.ctx=o.canvas.getContext("2d"),o.width=o.canvas.width,o.height=o.canvas.height):3===arguments.length&&(o.canvas=document.createElement("canvas"),o.canvas.width=t,o.canvas.height=e,o.width=t,o.height=e,o.ctx=o.canvas.getContext("2d"),document.querySelector(n).appendChild(o.canvas)),o}return y(i,t),g(i,[{key:"update",value:function(t){var i=this;t||this.ctx.clearRect(0,0,this.width,this.height),this.children.forEach(function(t){t.draw(i.ctx)})}},{key:"addExistLine",value:function(t){}},{key:"sameAs",value:function(t){}}]),i}(b),_=function(t,i){var e=this.copyPoints,n=i.angle,o=i.r,s=[[Math.cos(n),-Math.sin(n)],[Math.sin(n),Math.cos(n)]];t[0]=e[0]+s[0][0]*o,t[1]=e[1]+s[1][0]*o,t[2]=e[2]+s[0][0]*o,t[3]=e[3]+s[1][0]*o,t[4]=e[4]+s[0][0]*o,t[5]=e[5]+s[1][0]*o,t[6]=e[6]+s[0][0]*o,t[7]=e[7]+s[1][0]*o,i.angle+=i.step},x=function(t,i){t.forEach(function(e,n){t[n]+=i[n]})},M={n:e,sl:n},P={close:s,open:o,auto:a},T=function(t,i){i.value-=i.step,i.value<0&&(i.value=0);var e=u({x:this.copyPoints[0],y:this.copyPoints[1]},{x:this.copyPoints[2],y:this.copyPoints[3]},{x:this.copyPoints[4],y:this.copyPoints[5]},{x:this.copyPoints[6],y:this.copyPoints[7]},i.value);t.forEach(function(i,n){t[n]=e[n]})},A={},D=4,C=.5,q=function(t){return.5*(1-Math.cos(t*Math.PI))};A.noise=function(t,i,e){if(i=i||0,e=e||0,null==p){p=new Array(4096);for(var n=0;n<4096;n++)p[n]=Math.random()}t<0&&(t=-t),i<0&&(i=-i),e<0&&(e=-e);for(var o,s,a,r,h,l=Math.floor(t),u=Math.floor(i),c=Math.floor(e),v=t-l,d=i-u,f=e-c,g=0,y=.5,m=0;m<D;m++){var w=l+(u<<4)+(c<<8);o=q(v),s=q(d),a=p[4095&w],a+=o*(p[w+1&4095]-a),r=p[w+16&4095],r+=o*(p[w+16+1&4095]-r),a+=s*(r-a),w+=256,r=p[4095&w],r+=o*(p[w+1&4095]-r),h=p[w+16&4095],h+=o*(p[w+16+1&4095]-h),r+=s*(h-r),a+=q(f)*(r-a),g+=a*y,y*=C,l<<=1,v*=2,u<<=1,d*=2,c<<=1,f*=2,v>=1&&(l++,v--),d>=1&&(u++,d--),f>=1&&(c++,f--)}return g},A.noiseDetail=function(t,i){t>0&&(D=t),i>0&&(C=i)},A.noiseSeed=function(t){var i=function(){var t,i,e=4294967296;return{setSeed:function(n){i=t=(null==n?Math.random()*e:n)>>>0},getSeed:function(){return t},rand:function(){return(i=(1664525*i+1013904223)%e)/e}}}();i.setSeed(t),p=new Array(4096);for(var e=0;e<4096;e++)p[e]=i.rand()};var S=function(t,i){i.value+=i.step,t[0]=i.width*A.noise(i.value+15),t[1]=i.height*A.noise(i.value+25),t[2]=i.width*A.noise(i.value+35),t[3]=i.height*A.noise(i.value+45),t[4]=i.width*A.noise(i.value+55),t[5]=i.height*A.noise(i.value+65),t[6]=i.width*A.noise(i.value+75),t[7]=i.height*A.noise(i.value+85)},E={dance:_,move:x,rotate:i,to:r,line:h,circle:l,close:P.close,open:P.open,expand:T,noise:S},j={c:[[70,70,12,76,12,123,70,128]],u:[[25,68,23,140,80,140,74,100],[73,62,72,90,75,110,93,134]],r:[[21,62,21,62,21,128,21,128],[21,128,17,96,17,68,65,60]],v:[[12,58,41,132,61,132,96,58]],e:[[44,104,112,52,-20,82,77,136]],j:[[52,48,53,48,54,49,52,48],[8,175,24,204,60,197,56,74]],s:[[81,72,17,42,105,145,41,120]],l:[[77,27,30,114,36,126,57,126]],i:[[56,71,56,72,59,70,56,73],[47,93,59,81,47,121,59,111]]},O=function(t){function i(t,e){f(this,i);var n=m(this,(i.__proto__||Object.getPrototypeOf(i)).call(this));return e=Object.assign({x:0,y:0,color:"black"},e),n.x=e.x,n.y=e.y,n.color=e.color,n.word=t,n.data=e.data,n.motion=e.motion,n.points=j[t],n._init(),n}return y(i,t),g(i,[{key:"_init",value:function(){var t=this;this.points.forEach(function(i){t.add(new w({x:t.x,y:t.y,points:i,color:t.color,data:t.data,motion:t.motion}))})}}]),i}(b),I={},V={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgrey:11119017,darkgreen:25600,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,grey:8421504,green:32768,greenyellow:11403055,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgrey:13882323,lightgreen:9498256,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662680,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14184595,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074},F="1"==="01".substr(-1)?function(t){return"#"+("00000"+t.toString(16)).substr(-6)}:function(t){var i=t.toString(16);return"#"+new Array(i.length<6?6-i.length+1:0).join("0")+i},z={lerp:c,hexToRgb:v,makeGradientColor:d},R=function(){function t(i){f(this,t),this.points=i.points||[0,0,0,0,0,0],this.color=i.color||"black",this.x=i.x||0,this.y=i.y||0,this.vision=i.vision||[],this.visionMax=void 0!==i.visionMax?i.visionMax:80,this.visionInterval=i.visionInterval||10,this.disableVision=i.disableVision,this._preDate=Date.now(),this._now=new Date,this.debug=i.debug,this.size=i.size||1,this.data=i.data;var e=function(){};this._ease=function(t){return t},this._targetPoints=null,this.copyPoints=this.points.slice(0),this.motion=i.motion||e,this.visionAlpha=void 0===i.visionAlpha?.2:i.visionAlpha,(void 0===i.initVision||i.initVision)&&this._initVision(i.visionCount||80),this.beforeDraw=i.beforeDraw||e,this.afterDraw=i.afterDraw||e}return g(t,[{key:"_initVision",value:function(){for(var t=0;t<80;t++)this.tick(!0)}},{key:"tick",value:function(t){this.disableVision||(this._now=Date.now(),(this._now-this._preDate>this.visionInterval||t)&&(this.vision.push(this.points.slice(0)),this.vision.length>this.visionMax&&this.vision.splice(0,1),this._preDate=this._now)),this.pauseMotion||this.motion.call(this,this.points,this.data),this._targetPoints&&this._pointsTo()}},{key:"pause",value:function(){this.pauseMotion=!0}},{key:"play",value:function(){this.pauseMotion=!1}},{key:"draw",value:function(t){this.tick(),this.beforeDraw.call(this,t),t.save(),t.translate(this.x,this.y),t.lineWidth=this.size,t.globalAlpha=1,t.strokeStyle=this.color;var i=this.points;t.beginPath(),t.moveTo(i[0],i[1]);for(var e=2,n=i.length;e<n;e+=2)e===i.length-4?t.quadraticCurveTo(i[e],i[e+1],i[e+2],i[e+3]):t.quadraticCurveTo(i[e],i[e+1],(i[e]+i[e+2])/2,(i[e+1]+i[e+3])/2);if(t.stroke(),this.debug){t.beginPath(),t.globalAlpha=.3,t.moveTo(i[0],i[1]);for(var o=2,s=i.length;o<s;o+=2)t.lineTo(i[o],i[o+1]);t.stroke()}for(var a=this.vision,r=0,h=a.length;r<h;r++){t.globalAlpha=r/this.visionMax*this.visionAlpha;var l=a[r];t.beginPath(),t.moveTo(l[0],l[1]);for(var u=2,c=l.length;u<c;u+=2)u===i.length-4?t.quadraticCurveTo(l[u],l[u+1],l[u+2],l[u+3]):t.quadraticCurveTo(l[u],l[u+1],(l[u]+l[u+2])/2,(l[u+1]+l[u+3])/2);t.stroke()}t.restore(),this.afterDraw.call(this,t)}}]),t}(),L=function(){function t(i){f(this,t),this.seeds=[],this.initAlpha=.2,this.startLife=250,this.noise={value:0,step:8e-4,scale:2,interval:10},this.color=i.color||"#65ffff"}return g(t,[{key:"addSeed",value:function(t,i,e,n){this.seeds.push({x:t,y:i,vx:e,vy:n,px:t,py:i,life:this.startLife})}},{key:"sprout",value:function(){for(;this.seeds.length&&0===this.seeds[0].life;)this.seeds.shift();for(var t=0,i=0,e=0,n=this.seeds.length;e<n;e++){t=i=0;var o=this.seeds[e],s=A.noise(this.noise.value+e*this.noise.interval)*Math.PI*5;this.noise.value+=this.noise.step,t+=this.noise.scale*Math.cos(s),i+=this.noise.scale*Math.sin(s),o.life--;var a=o.x+t,r=o.y+i;o.px=o.x,o.py=o.y,o.x=a,o.y=r}}},{key:"draw",value:function(t){if(this.sprout(),0!==this.seeds.length){t.globalAlpha=this.initAlpha*(this.seeds[this.seeds.length-1].life/this.startLife),this.points=[];for(var i=0,e=this.seeds.length;i<e;i++)this.points.push(this.seeds[i].x,this.seeds[i].y);var n=this.points,o=n.length;if(o>5){t.beginPath(),t.globalCompositeOperation="lighter",t.strokeStyle=this.color,t.moveTo(n[0],n[1]);for(var s=2;s<o;s+=2)s===n.length-4?t.quadraticCurveTo(n[s],n[s+1],n[s+2],n[s+3]):t.quadraticCurveTo(n[s],n[s+1],(n[s]+n[s+2])/2,(n[s+1]+n[s+3])/2);t.stroke()}}}}]),t}();return{Curve:w,Group:b,Stage:k,motion:E,Word:O,perlin:A,color:z,SmoothCurve:R,SproutCurve:L}});