blobs/v2/animate/index.module.js

Random blob generation and animation

var __assign=function(){return(__assign=Object.assign||function(n){for(var e,t=1,a=arguments.length;t<a;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}).apply(this,arguments)};function __spreadArray(n,e,t){if(t||2===arguments.length)for(var a,r=0,i=e.length;r<i;r++)!a&&r in e||((a=a||Array.prototype.slice.call(e,0,r))[r]=e[r]);return n.concat(a||Array.prototype.slice.call(e))}var copyPoint=function(n){return{x:n.x,y:n.y,handleIn:__assign({},n.handleIn),handleOut:__assign({},n.handleOut)}},forPoints=function(t,a){function n(n){function e(n){return copyPoint(t[mod(n,t.length)])}a({curr:copyPoint(t[n]),index:n,sibling:e,prev:function(){return e(n-1)},next:function(){return e(n+1)}})}for(var e=0;e<t.length;e++)n(e)},mapPoints=function(n,e){var t=[];return forPoints(n,function(n){t.push(e(n))}),t},coordEqual=function(n,e){return n.x===e.x&&n.y===e.y},angleOf=function(n,e){var t=e.x-n.x,e=-e.y+n.y,n=Math.atan2(e,t);return n<0?Math.abs(n):2*Math.PI-n},expandHandle=function(n,e){return{x:n.x+e.length*Math.cos(e.angle),y:n.y+e.length*Math.sin(e.angle)}},collapseHandle=function(n,e){return{angle:angleOf(n,e),length:Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}},length=function(n,e){var t=expandHandle(n,n.handleOut),a=expandHandle(e,e.handleIn);return(distance(n,e)+distance(t,a)+n.handleOut.length+e.handleIn.length)/2},reverse=function(t){return mapPoints(t,function(n){var e=n.index,n=(0,n.sibling)(t.length-e-1);return n.handleIn.angle+=Math.PI,n.handleOut.angle+=Math.PI,n})},shift=function(t,n){return mapPoints(n,function(n){var e=n.index;return(0,n.sibling)(e+t)})},insertAt=function(n,e,t){var a=copyPoint(e),r=(a.handleOut.length*=n,copyPoint(t)),e=(r.handleIn.length*=1-n,expandHandle(e,e.handleOut)),t=expandHandle(t,t.handleIn),i=expandHandle(a,a.handleOut),o=expandHandle(r,r.handleIn),e=splitLine(n,e,t),t=splitLine(n,i,e),i=splitLine(1-n,o,e),o=splitLine(n,t,i);return[a,{x:o.x,y:o.y,handleIn:collapseHandle(o,t),handleOut:collapseHandle(o,i)},r]},insertCount=function(n,e,t){var a;return n<2?[e,t]:(t=(e=insertAt(1/n,e,t))[0],a=e[1],e=e[2],2===n?[t,a,e]:__spreadArray([t],insertCount(n-1,a,e),!0))},smooth=function(n,r){return mapPoints(n,function(n){var e=n.curr,t=n.next,n=n.prev,a=angleOf(n(),t());return{x:e.x,y:e.y,handleIn:{angle:a+Math.PI,length:r*distance(e,n())},handleOut:{angle:a,length:r*distance(e,t())}}})},mod=function(n,e){return(n%e+e)%e},distance=function(n,e){return Math.sqrt(Math.pow(n.x-e.x,2)+Math.pow(n.y-e.y,2))},split=function(n,e,t){return e+n*(t-e)},splitLine=function(n,e,t){return{x:split(n,e.x,t.x),y:split(n,e.y,t.y)}},renderPath2D=function(n){var a=new Path2D;return n.length<1||(a.moveTo(n[0].x,n[0].y),forPoints(n,function(n){var e=n.curr,n=(0,n.next)(),e=expandHandle(e,e.handleOut),t=expandHandle(n,n.handleIn);a.bezierCurveTo(e.x,e.y,t.x,t.y,n.x,n.y)})),a};const F2=.5*(Math.sqrt(3)-1),G2=(3-Math.sqrt(3))/6,fastFloor=n=>0|Math.floor(n),grad2=new Float64Array([1,1,-1,1,1,-1,-1,-1,1,0,-1,0,1,0,-1,0,0,1,0,-1,0,1,0,-1]);function createNoise2D(n=Math.random){const m=buildPermutationTable(n),v=new Float64Array(m).map(n=>grad2[n%12*2]),y=new Float64Array(m).map(n=>grad2[n%12*2+1]);return function(n,e){let t=0,a=0,r=0;var i=(n+e)*F2,o=fastFloor(n+i),i=fastFloor(e+i),l=(o+i)*G2,n=n-(o-l),e=e-(i-l);let s,u;u=e<n?(s=1,0):(s=0,1);var c,h,l=n-s+G2,d=e-u+G2,p=n-1+2*G2,f=e-1+2*G2,o=255&o,i=255&i,g=.5-n*n-e*e,g=(0<=g&&(c=o+m[i],h=v[c],c=y[c],g*=g,t=g*g*(h*n+c*e)),.5-l*l-d*d),e=(0<=g&&(h=o+s+m[i+u],n=v[h],c=y[h],g*=g,a=g*g*(n*l+c*d)),.5-p*p-f*f);return 0<=e&&(h=1+o+m[1+i],g=v[h],n=y[h],e*=e,r=e*e*(g*p+n*f)),70*(t+a+r)}}function buildPermutationTable(e){var t=new Uint8Array(512);for(let n=0;n<256;n++)t[n]=n;for(let n=0;n<255;n++){var a=n+~~(e()*(256-n)),r=t[n];t[n]=t[a],t[a]=r}for(let n=256;n<512;n++)t[n]=t[n-256];return t}var rand=function(n){var e,t,a,r,n=function(n){for(var e=2166136261,t=0;t<n.length;t++)e=Math.imul(e^n.charCodeAt(t),16777619);return function(){return(e=(e=(e=(e=(e+=e<<13)^e>>>7)+(e<<3))^e>>>17)+(e<<5))>>>0}}(n);return e=n(),t=n(),a=n(),r=n(),function(){var n=(e>>>=0)+(t>>>=0)|0;return e=t^t>>>9,t=(a>>>=0)+(a<<3)|0,a=(a=a<<21|a>>>11)+(n=n+(r=(r>>>=0)+1|0)|0)|0,(n>>>0)/4294967296}},noise=function(n){var t=createNoise2D(rand(n));return function(n,e){return t(n,e)}},smoothBlob=function(n){var e=2*Math.PI/n.length,e=4/3*Math.tan(e/4)/Math.sin(e/2)/2;return smooth(n,e)},genBlobygon=function(n,e){for(var t=2*Math.PI/n,a=[],r=0;r<n;r++){var i=e(r),o=Math.sin(r*t),l=Math.cos(r*t);a.push({x:.5+o*i,y:.5+l*i,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})}return a},genBlob=function(n,e){return smoothBlob(genBlobygon(n,e))},genFromOptions=function(n,e){var t=e||rand(String(n.seed)),a=1/(1+n.randomness/10),e=genBlob(3+n.extraPoints,function(n){return(a+t(n)*(1-a))/2}),r=n.size;return mapPoints(e,function(n){n=n.curr;return n.x*=r,n.y*=r,n.handleIn.length*=r,n.handleOut.length*=r,n})},linear=function(n){return n},easeEnd=function(n){return 1-Math.pow(n-1,2)},easeStart=function(n){return 1-easeEnd(1-n)},ease=function(n){return.5+.5*Math.sin(Math.PI*(n+1.5))},elasticEnd=function(e){return function(n){return Math.pow(2,-10*n)*Math.sin((n-e/4)*(2*Math.PI)/e)+1}},timingFunctions={linear:linear,easeEnd:easeEnd,easeStart:easeStart,ease:ease,elasticEnd0:elasticEnd(1),elasticEnd1:elasticEnd(.64),elasticEnd2:elasticEnd(.32),elasticEnd3:elasticEnd(.16)},optimizeOrder=function(r,n){function e(n){for(var e=0;e<i;e++){for(var t=0,a=0;a<i&&(t+=Math.pow(100*distance(r[a],n[mod(a+e,i)]),2),!(o<t));a++);t<=o&&(o=t,l=e,s=n)}}var i=r.length,o=1/0,l=0,s=[];return e(n),e(reverse(n)),shift(l,s)},divide=function(n,e){if(e.length<3)throw new Error("not enough points");if(n<e.length)throw new Error("cannot remove points");if(n===e.length)return e.slice();for(var t=[],a=(forPoints(e,function(n){var e=n.curr,n=n.next;t.push(length(e,n()))}),divideLengths(t,n-e.length)),r=[],i=0;i<e.length;i++){var o=r[r.length-1]||e[i],l=e[mod(i+1,e.length)];r.pop(),r.push.apply(r,insertCount(a[i],o,l))}n=r.pop();return r[0].handleIn=n.handleIn,r},fixAnglesWith=function(n,r){return mapPoints(n,function(n){var e=n.index,t=n.curr,a=n.prev,n=n.next;return 0===t.handleIn.length&&coordEqual(a(),t)&&(t.handleIn.angle=r[e].handleIn.angle),0===t.handleOut.length&&coordEqual(n(),t)&&(t.handleOut.angle=r[e].handleOut.angle),t})},fixAnglesSelf=function(n){return mapPoints(n,function(n){var e=n.curr,t=n.prev,n=n.next,t=angleOf(t(),n());return 0===e.handleIn.length&&(e.handleIn.angle=t+Math.PI),0===e.handleOut.length&&(e.handleOut.angle=t),e})},divideLengths=function(n,e){for(var t=n.map(function(){return 1}),a=n.slice(),r=0;r<e;r++){for(var i=0,o=1;o<a.length;o++)(a[o]>a[i]||a[o]===a[i]&&n[o]>n[i])&&(i=o);t[i]++,a[i]=n[i]/t[i]}return t},prepare=function(n,e,t){var a=t.divideRatio*Math.max(n.length,e.length),n=divide(a,n),a=divide(a,e),e=optimizeOrder(n,a);return[t.rawAngles?n:fixAnglesWith(fixAnglesSelf(n),e),t.rawAngles?e:fixAnglesWith(fixAnglesSelf(e),n)]},interpolateAngle=function(n,e,t){var a=2*Math.PI,e=mod(e,a),t=mod(t,a);return Math.abs(e-t)>Math.PI&&(e<t?e+=a:t+=a),split(n,e,t)},interpolateBetween=function(n,e,t){if(e.length!==t.length)throw new Error("must have equal number of points");for(var a=Math.min(1,Math.max(0,n)),r=[],i=0;i<e.length;i++)r.push(__assign(__assign({},splitLine(n,e[i],t[i])),{handleIn:{angle:interpolateAngle(n,e[i].handleIn.angle,t[i].handleIn.angle),length:split(a,e[i].handleIn.length,t[i].handleIn.length)},handleOut:{angle:interpolateAngle(n,e[i].handleOut.angle,t[i].handleOut.angle),length:split(a,e[i].handleOut.length,t[i].handleOut.length)}}));return r},genId=function(){return String(Math.random()).substr(2)},renderFramesAt=function(n){var e=n.renderCache,t=n.currentFrames;if(0===t.length)return{renderCache:e,lastFrameId:null,points:[]};if(1===t.length)return{renderCache:e,lastFrameId:(u=t[0]).id,points:u.initialPoints};for(var a=t[0],r=t[1],i=2;i<t.length&&!(r.timestamp>n.timestamp);i++)a=t[i-1],r=t[i];var o,l,s,u=r===t[t.length-1];return r.timestamp<n.timestamp&&u?{renderCache:e,lastFrameId:r.id,points:r.initialPoints}:(u=null==(u=e[a.id])?void 0:u.preparedStartPoints,o=null==(o=e[r.id])?void 0:o.preparedEndPoints,u&&o||(u=(l=prepare(a.initialPoints,r.initialPoints,{rawAngles:!1,divideRatio:1}))[0],o=l[1],e[a.id]=e[a.id]||{},e[a.id].preparedStartPoints=u,e[r.id]=e[r.id]||{},e[r.id].preparedEndPoints=o),l=(n.timestamp-a.timestamp)/(r.timestamp-a.timestamp),l=Math.max(0,Math.min(1,l)),s=r.timingFunction(l),{renderCache:e,lastFrameId:(1===l?r:a).id,points:interpolateBetween(s,u,o)})},transitionFrames=function(n){var e=[];if(0!==n.newFrames.length){var t=renderFramesAt(n);if(null===t.lastFrameId){for(var a=n.shapeGenerator(n.newFrames[0]),r={x:0,y:0,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}},i=0,o=a;i<o.length;i++){var l=o[i];r.x+=l.x/a.length,r.y+=l.y/a.length}t.points=[r,r,r]}e.push({id:genId(),initialPoints:t.points,timestamp:n.timestamp,timingFunction:timingFunctions.linear,transitionSourceFrameIndex:-1,isSynthetic:!0});for(var s=0,u=0;u<n.newFrames.length;u++){var c,h=n.newFrames[u];h.delay&&(s+=h.delay,c=e[e.length-1],e.push({id:genId(),initialPoints:c.initialPoints,timestamp:n.timestamp+s,timingFunction:timingFunctions.linear,transitionSourceFrameIndex:u-1,isSynthetic:!0})),s+=h.duration,e.push({id:genId(),initialPoints:n.shapeGenerator(h),timestamp:n.timestamp+s,timingFunction:timingFunctions[h.timingFunction||"linear"],transitionSourceFrameIndex:u,isSynthetic:!1})}}return{newFrames:e}},statefulAnimationGenerator=function(d,o,p){return function(n){var s=[],u={},c={},e=0,t=0,h=function(){return n()-t},a=function(){return 0!==e},r=function(){a()&&(t+=h()-e,e=0)},i=function(){a()||(e=h())};return{renderFrame:function(){var n=renderFramesAt({renderCache:u,timestamp:a()?e:h(),currentFrames:s});return u=n.renderCache,n.lastFrameId&&c[n.lastFrameId]&&(c[n.lastFrameId](),delete c[n.lastFrameId]),o(n.points)},transition:function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];for(var t=0;t<n.length;t++)p(n[t],t);var a=transitionFrames({renderCache:u,timestamp:h(),currentFrames:s,newFrames:n,shapeGenerator:d});s=a.newFrames,c={},u={};for(var r=0,i=s;r<i.length;r++){var o,l=i[r];l.isSynthetic||(o=n[l.transitionSourceFrameIndex].callback)&&(c[l.id]=o)}},play:r,pause:i,playPause:function(){(a()?r:i)()}}}},typeCheck=function(n,e,t){var a=typeof e;if("number"===a&&isNaN(e)&&(a="NaN"),!t.includes(a="object"===a&&null===e?"null":a))throw'"'.concat(n,'" should have type "').concat(t.join("|"),'" but was "').concat(a,'".')},checkKeyframeOptions=function(n){typeCheck("keyframe",n,["object"]);var e=n.delay,t=n.duration,a=n.timingFunction,n=n.callback;if(typeCheck("delay",e,["number","undefined"]),e&&e<0)throw'delay is invalid "'.concat(e,'".');if(typeCheck("duration",t,["number"]),t&&t<0)throw'duration is invalid "'.concat(t,'".');if(typeCheck("timingFunction",a,["string","undefined"]),a&&!timingFunctions[a])throw'".timingFunction" is not recognized "'.concat(a,'".');typeCheck("callback",n,["function","undefined"])},checkBlobOptions=function(n){typeCheck("blobOptions",n,["object"]);var e=n.seed,t=n.extraPoints,a=n.randomness,n=n.size;if(typeCheck("blobOptions.seed",e,["string","number"]),typeCheck("blobOptions.extraPoints",t,["number"]),t<0)throw'blobOptions.extraPoints is invalid "'.concat(t,'".');if(typeCheck("blobOptions.randomness",a,["number"]),a<0)throw'blobOptions.randomness is invalid "'.concat(a,'".');if(typeCheck("blobOptions.size",n,["number"]),n<0)throw'blobOptions.size is invalid "'.concat(n,'".')},checkCanvasOptions=function(n){var e;typeCheck("canvasOptions",n,["object","undefined"]),n&&(e=n.offsetX,n=n.offsetY,typeCheck("canvasOptions.offsetX",e,["number","undefined"]),typeCheck("canvasOptions.offsetY",n,["number","undefined"]))},checkPoints=function(n){if(!Array.isArray(n))throw'points should be an array but was "'.concat(typeof n,'".');if(n.length<3)throw'expected more than two points but received "'.concat(n.length,'".');for(var e=0,t=n;e<t.length;e++){var a=t[e];typeCheck("point.x",a.x,["number"]),typeCheck("point.y",a.y,["number"]),typeCheck("point.handleIn",a.handleIn,["object"]),typeCheck("point.handleIn.angle",a.handleIn.angle,["number"]),typeCheck("point.handleIn.length",a.handleIn.length,["number"]),typeCheck("point.handleOut",a.handleOut,["object"]),typeCheck("point.handleOut.angle",a.handleOut.angle,["number"]),typeCheck("point.handleOut.length",a.handleOut.length,["number"])}},canvasPointGenerator=function(t){var n="points"in t?t.points:genFromOptions(t.blobOptions);return mapPoints(n,function(n){var e,n=n.curr;return n.x+=(null==(e=null==t?void 0:t.canvasOptions)?void 0:e.offsetX)||0,n.y+=(null==(e=null==t?void 0:t.canvasOptions)?void 0:e.offsetY)||0,n})},canvasKeyframeChecker=function(n,e){try{if("points"in n)return checkPoints(n.points);checkBlobOptions(n.blobOptions),checkCanvasOptions(n.canvasOptions),checkKeyframeOptions(n)}catch(n){throw"(blobs2): keyframe ".concat(e,": ").concat(n)}},canvasPath=function(e){var t,n=Date.now;return void 0!==e&&(t=0,n=function(){var n=e();if(n<t)throw"timestamp provider generated decreasing value: ".concat(t," then ").concat(n,".");return t=n}),statefulAnimationGenerator(canvasPointGenerator,renderPath2D,canvasKeyframeChecker)(n)},wigglePreset=function(t,a,r,n){function i(n,e){s++,t.transition({duration:n?0:80,delay:e||0,timingFunction:"linear",canvasOptions:r,points:genFromOptions(a,function(n){return l(o*s,n)}),callback:i})}var o=.01*n.speed,l=noise(String(a.seed)),s=0;i(!0,n.delay)};export{canvasPath,wigglePreset};
//# sourceMappingURL=index.module.js.map