blobs
Version:
Random blob generation and animation
3 lines (2 loc) • 6.04 kB
JavaScript
var rand=function(t){var e,n,r,i,t=function(t){for(var e=2166136261,n=0;n<t.length;n++)e=Math.imul(e^t.charCodeAt(n),16777619);return function(){return(e=(e=(e=(e=(e+=e<<13)^e>>>7)+(e<<3))^e>>>17)+(e<<5))>>>0}}(t);return e=t(),n=t(),r=t(),i=t(),function(){var t=(e>>>=0)+(n>>>=0)|0;return e=n^n>>>9,n=(r>>>=0)+(r<<3)|0,r=(r=r<<21|r>>>11)+(t=t+(i=(i>>>=0)+1|0)|0)|0,(t>>>0)/4294967296}},__assign=function(){return(__assign=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},copyPoint=function(t){return{x:t.x,y:t.y,handleIn:__assign({},t.handleIn),handleOut:__assign({},t.handleOut)}},forPoints=function(n,r){function t(t){function e(t){return copyPoint(n[mod(t,n.length)])}r({curr:copyPoint(n[t]),index:t,sibling:e,prev:function(){return e(t-1)},next:function(){return e(t+1)}})}for(var e=0;e<n.length;e++)t(e)},mapPoints=function(t,e){var n=[];return forPoints(t,function(t){n.push(e(t))}),n},angleOf=function(t,e){var n=e.x-t.x,e=-e.y+t.y,t=Math.atan2(e,n);return t<0?Math.abs(t):2*Math.PI-t},expandHandle=function(t,e){return{x:t.x+e.length*Math.cos(e.angle),y:t.y+e.length*Math.sin(e.angle)}},smooth=function(t,i){return mapPoints(t,function(t){var e=t.curr,n=t.next,t=t.prev,r=angleOf(t(),n());return{x:e.x,y:e.y,handleIn:{angle:r+Math.PI,length:i*distance(e,t())},handleOut:{angle:r,length:i*distance(e,n())}}})},mod=function(t,e){return(t%e+e)%e},distance=function(t,e){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))},renderPath=function(t){var r="M".concat(t[0].x,",").concat(t[0].y);return forPoints(t,function(t){var e=t.curr,t=(0,t.next)(),e=expandHandle(e,e.handleOut),n=expandHandle(t,t.handleIn);r+="C".concat(e.x,",").concat(e.y,",").concat(n.x,",").concat(n.y,",").concat(t.x,",").concat(t.y)}),r},renderEditable=function(t,e){var a,s,n=e.stroke||(e.guides?"black":"none"),r=e.strokeWidth||(e.guides?1:0),i=new XmlElement("svg"),u=(i.attributes.width=e.width,i.attributes.height=e.height,i.attributes.viewBox="0 0 ".concat(e.width," ").concat(e.height),i.attributes.xmlns="http://www.w3.org/2000/svg",new XmlElement("g")),o=(u.attributes.transform=e.transform||"",new XmlElement("path"));return o.attributes.stroke=n,o.attributes["stroke-width"]=r,o.attributes.fill=e.fill||"none",o.attributes.d=renderPath(t),u.children.push(o),i.children.push(u),e.guides&&(a=e.stroke||"black",s=e.strokeWidth||1,e.boundingBox&&((n=new XmlElement("rect")).attributes.x=0,n.attributes.y=0,n.attributes.width=e.width,n.attributes.height=e.height,n.attributes.fill="none",n.attributes.stroke=a,n.attributes["stroke-width"]=2*s,n.attributes["stroke-dasharray"]=2*s,u.children.push(n)),forPoints(t,function(t){var e=t.curr,t=(0,t.next)(),n=expandHandle(e,e.handleOut),r=expandHandle(t,t.handleIn),i=new XmlElement("line"),o=(i.attributes.x1=e.x,i.attributes.y1=e.y,i.attributes.x2=n.x,i.attributes.y2=n.y,i.attributes["stroke-width"]=s,i.attributes.stroke=a,new XmlElement("line")),t=(o.attributes.x1=t.x,o.attributes.y1=t.y,o.attributes.x2=r.x,o.attributes.y2=r.y,o.attributes["stroke-width"]=s,o.attributes.stroke=a,o.attributes["stroke-dasharray"]=2*s,new XmlElement("circle")),n=(t.attributes.cx=n.x,t.attributes.cy=n.y,t.attributes.r=s,t.attributes.fill=a,new XmlElement("circle")),r=(n.attributes.cx=r.x,n.attributes.cy=r.y,n.attributes.r=s,n.attributes.fill=a,new XmlElement("circle"));r.attributes.cx=e.x,r.attributes.cy=e.y,r.attributes.r=2*s,r.attributes.fill=a,u.children.push(i),u.children.push(o),u.children.push(t),u.children.push(n),u.children.push(r)})),i},XmlElement=function(){function t(t){this.tag=t,this.attributes={},this.children=[]}return t.prototype.render=function(){var t=this.renderAttributes(),e=this.renderChildren();return""===e?"<".concat(this.tag).concat(t,"/>"):"<".concat(this.tag).concat(t,">").concat(e,"</").concat(this.tag,">")},t.prototype.renderAttributes=function(){var t=Object.keys(this.attributes);if(0===t.length)return"";for(var e="",n=0,r=t;n<r.length;n++){var i=r[n];e+=" ".concat(i,'="').concat(this.attributes[i],'"')}return e},t.prototype.renderChildren=function(){for(var t="",e=0,n=this.children;e<n.length;e++)t+=n[e].render();return t},t}(),smoothBlob=function(t){var e=2*Math.PI/t.length,e=4/3*Math.tan(e/4)/Math.sin(e/2)/2;return smooth(t,e)},genBlobygon=function(t,e){for(var n=2*Math.PI/t,r=[],i=0;i<t;i++){var o=e(i),a=Math.sin(i*n),s=Math.cos(i*n);r.push({x:.5+a*o,y:.5+s*o,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})}return r},genBlob=function(t,e){return smoothBlob(genBlobygon(t,e))},isBrowser=new Function("try {return this===window;}catch(e){ return false;}"),isLocalhost=function(){return"localhost"===location.hostname||"127.0.0.1"===location.hostname},isFile=function(){return"file:"===location.protocol},blobs=(isBrowser()&&!isLocalhost()&&!isFile()||console.warn("You are using the legacy blobs API!\nPlease use 'blobs/v2' instead."),function(t){return blobs.editable(t).render()});blobs.editable=function(e){if(!e)throw new Error("no options specified");var t=rand(e.seed||String(Math.random()));if(!e.size)throw new Error("no size specified");if(!e.stroke&&!e.color)throw new Error("no color or stroke specified");if(e.complexity<=0||1<e.complexity)throw new Error("complexity out of range ]0,1]");if(e.contrast<0||1<e.contrast)throw new Error("contrast out of range [0,1]");var n=3+Math.floor(14*e.complexity),r=mapPoints(genBlob(n,function(){return(1-.8*e.contrast*t())/Math.E}),function(t){t=t.curr;return t.x*=e.size,t.y*=e.size,t.handleIn.length*=e.size,t.handleOut.length*=e.size,t.y=e.size-t.y,t.handleIn.angle*=-1,t.handleOut.angle*=-1,t});return renderEditable(r,{closed:!0,width:e.size,height:e.size,fill:e.color,transform:"rotate(".concat(t()*(360/n),",").concat(e.size/2,",").concat(e.size/2,")"),stroke:e.stroke&&e.stroke.color,strokeWidth:e.stroke&&e.stroke.width,guides:e.guides})},blobs.xml=function(t){return new XmlElement(t)};export{blobs as default};
//# sourceMappingURL=index.module.js.map