UNPKG

poline

Version:

color palette generator mico-lib

2 lines (1 loc) 9.06 kB
var F=(i,t)=>{let[o,n,r]=i,c=.5,h=.5,e=Math.atan2(n-h,o-c)*(180/Math.PI);e=(360+e)%360;let a=r,l=Math.sqrt(Math.pow(n-h,2)+Math.pow(o-c,2))/c;return[e,a,t?1-l:l]},m=(i,t)=>{let[o,n,r]=i,c=.5,h=.5,s=o/(180/Math.PI),e=(t?1-r:r)*c,a=c+e*Math.cos(s),p=h+e*Math.sin(s);return[a,p,n]},g=(i=Math.random()*360,t=[Math.random(),Math.random()],o=[.75+Math.random()*.2,.3+Math.random()*.2])=>[[i,t[0],o[0]],[(i+60+Math.random()*180)%360,t[1],o[1]]],I=(i=Math.random()*360,t=[Math.random(),Math.random(),Math.random()],o=[.75+Math.random()*.2,Math.random()*.2,.75+Math.random()*.2])=>[[i,t[0],o[0]],[(i+60+Math.random()*180)%360,t[1],o[1]],[(i+60+Math.random()*180)%360,t[2],o[2]]],v=(i,t,o,n=!1,r=(s,e)=>e?1-s:s,c=(s,e)=>e?1-s:s,h=(s,e)=>e?1-s:s)=>{let s=r(i,n),e=c(i,n),a=h(i,n),p=(1-s)*t[0]+s*o[0],l=(1-e)*t[1]+e*o[1],b=(1-a)*t[2]+a*o[2];return[p,l,b]},M=(i,t,o=4,n=!1,r=(s,e)=>e?1-s:s,c=(s,e)=>e?1-s:s,h=(s,e)=>e?1-s:s)=>{let s=[];for(let e=0;e<o;e++){let[a,p,l]=v(e/(o-1),i,t,n,r,c,h);s.push([a,p,l])}return s},x=i=>i,A=(i,t=!1)=>t?1-(1-i)**2:i**2,V=(i,t=!1)=>t?1-(1-i)**3:i**3,w=(i,t=!1)=>t?1-(1-i)**4:i**4,L=(i,t=!1)=>t?1-(1-i)**5:i**5,u=(i,t=!1)=>t?1-Math.sin((1-i)*Math.PI/2):Math.sin(i*Math.PI/2),S=(i,t=!1)=>t?1-Math.asin(1-i)/(Math.PI/2):Math.asin(i)/(Math.PI/2),y=(i,t=!1)=>t?1-Math.sqrt(1-i**2):1-Math.sqrt(1-i),E=i=>i**2*(3-2*i),X={linearPosition:x,exponentialPosition:A,quadraticPosition:V,cubicPosition:w,quarticPosition:L,sinusoidalPosition:u,asinusoidalPosition:S,arcPosition:y,smoothStepPosition:E},_=(i,t,o=!1)=>{let n=i[0],r=t[0],c=0;o&&n!==null&&r!==null?(c=Math.min(Math.abs(n-r),360-Math.abs(n-r)),c=c/360):c=n===null||r===null?0:n-r;let h=c,s=i[1]===null||t[1]===null?0:t[1]-i[1],e=i[2]===null||t[2]===null?0:t[2]-i[2];return Math.sqrt(h*h+s*s+e*e)},d=class{constructor({xyz:t,color:o,invertedLightness:n=!1}={}){this.x=0;this.y=0;this.z=0;this.color=[0,0,0];this._invertedLightness=!1;this._invertedLightness=n,this.positionOrColor({xyz:t,color:o,invertedLightness:n})}positionOrColor({xyz:t,color:o,invertedLightness:n=!1}){if(t&&o||!t&&!o)throw new Error("Point must be initialized with either x,y,z or hsl");t?(this.x=t[0],this.y=t[1],this.z=t[2],this.color=F([this.x,this.y,this.z],n)):o&&(this.color=o,[this.x,this.y,this.z]=m(o,n))}set position([t,o,n]){this.x=t,this.y=o,this.z=n,this.color=F([this.x,this.y,this.z],this._invertedLightness)}get position(){return[this.x,this.y,this.z]}set hsl([t,o,n]){this.color=[t,o,n],[this.x,this.y,this.z]=m(this.color,this._invertedLightness)}get hsl(){return this.color}get hslCSS(){let[t,o,n]=this.color;return`hsl(${t.toFixed(2)}, ${(o*100).toFixed(2)}%, ${(n*100).toFixed(2)}%)`}get oklchCSS(){let[t,o,n]=this.color;return`oklch(${(n*100).toFixed(2)}% ${(o*.4).toFixed(3)} ${t.toFixed(2)})`}get lchCSS(){let[t,o,n]=this.color;return`lch(${(n*100).toFixed(2)}% ${(o*150).toFixed(2)} ${t.toFixed(2)})`}shiftHue(t){this.color[0]=(360+(this.color[0]+t))%360,[this.x,this.y,this.z]=m(this.color,this._invertedLightness)}},f=class{constructor({anchorColors:t=g(),numPoints:o=4,positionFunction:n=u,positionFunctionX:r,positionFunctionY:c,positionFunctionZ:h,closedLoop:s,invertedLightness:e}={anchorColors:g(),numPoints:4,positionFunction:u,closedLoop:!1}){this._needsUpdate=!0;this._positionFunctionX=u;this._positionFunctionY=u;this._positionFunctionZ=u;this.connectLastAndFirstAnchor=!1;this._animationFrame=null;this._invertedLightness=!1;if(!t||t.length<2)throw new Error("Must have at least two anchor colors");this._anchorPoints=t.map(a=>new d({color:a,invertedLightness:e})),this._numPoints=o+2,this._positionFunctionX=r||n||u,this._positionFunctionY=c||n||u,this._positionFunctionZ=h||n||u,this.connectLastAndFirstAnchor=s||!1,this._invertedLightness=e||!1,this.updateAnchorPairs()}get numPoints(){return this._numPoints-2}set numPoints(t){if(t<1)throw new Error("Must have at least one point");this._numPoints=t+2,this.updateAnchorPairs()}set positionFunction(t){if(Array.isArray(t)){if(t.length!==3)throw new Error("Position function array must have 3 elements");if(typeof t[0]!="function"||typeof t[1]!="function"||typeof t[2]!="function")throw new Error("Position function array must have 3 functions");this._positionFunctionX=t[0],this._positionFunctionY=t[1],this._positionFunctionZ=t[2]}else this._positionFunctionX=t,this._positionFunctionY=t,this._positionFunctionZ=t;this.updateAnchorPairs()}get positionFunction(){return this._positionFunctionX===this._positionFunctionY&&this._positionFunctionX===this._positionFunctionZ?this._positionFunctionX:[this._positionFunctionX,this._positionFunctionY,this._positionFunctionZ]}set positionFunctionX(t){this._positionFunctionX=t,this.updateAnchorPairs()}get positionFunctionX(){return this._positionFunctionX}set positionFunctionY(t){this._positionFunctionY=t,this.updateAnchorPairs()}get positionFunctionY(){return this._positionFunctionY}set positionFunctionZ(t){this._positionFunctionZ=t,this.updateAnchorPairs()}get positionFunctionZ(){return this._positionFunctionZ}get anchorPoints(){return this._anchorPoints}set anchorPoints(t){this._anchorPoints=t,this.updateAnchorPairs()}updateAnchorPairs(){this._anchorPairs=[];let t=this.connectLastAndFirstAnchor?this.anchorPoints.length:this.anchorPoints.length-1;for(let o=0;o<t;o++){let n=[this.anchorPoints[o],this.anchorPoints[(o+1)%this.anchorPoints.length]];this._anchorPairs.push(n)}this.points=this._anchorPairs.map((o,n)=>{let r=o[0]?o[0].position:[0,0,0],c=o[1]?o[1].position:[0,0,0],h=this.shouldInvertEaseForSegment(n);return M(r,c,this._numPoints,!!h,this.positionFunctionX,this.positionFunctionY,this.positionFunctionZ).map(s=>new d({xyz:s,invertedLightness:this._invertedLightness}))})}addAnchorPoint({xyz:t,color:o,insertAtIndex:n}){let r=new d({xyz:t,color:o,invertedLightness:this._invertedLightness});return n!==void 0?this.anchorPoints.splice(n,0,r):this.anchorPoints.push(r),this.updateAnchorPairs(),r}removeAnchorPoint({point:t,index:o}){if(!t&&o===void 0)throw new Error("Must provide a point or index");if(this.anchorPoints.length<3)throw new Error("Must have at least two anchor points");let n;if(o!==void 0?n=o:t&&(n=this.anchorPoints.indexOf(t)),n>-1&&n<this.anchorPoints.length)this.anchorPoints.splice(n,1),this.updateAnchorPairs();else throw new Error("Point not found")}updateAnchorPoint({point:t,pointIndex:o,xyz:n,color:r}){if(o!==void 0&&(t=this.anchorPoints[o]),!t)throw new Error("Must provide a point or pointIndex");if(!n&&!r)throw new Error("Must provide a new xyz position or color");return n&&(t.position=n),r&&(t.hsl=r),this.updateAnchorPairs(),t}getClosestAnchorPoint({xyz:t,hsl:o,maxDistance:n=1}){if(!t&&!o)throw new Error("Must provide a xyz or hsl");let r;t?r=this.anchorPoints.map(s=>_(s.position,t)):o&&(r=this.anchorPoints.map(s=>_(s.hsl,o,!0)));let c=Math.min(...r);if(c>n)return null;let h=r.indexOf(c);return this.anchorPoints[h]||null}set closedLoop(t){this.connectLastAndFirstAnchor=t,this.updateAnchorPairs()}get closedLoop(){return this.connectLastAndFirstAnchor}set invertedLightness(t){this._invertedLightness=t,this.updateAnchorPairs()}get invertedLightness(){return this._invertedLightness}get flattenedPoints(){return this.points.flat().filter((t,o)=>o!=0?o%this._numPoints:!0)}get colors(){let t=this.flattenedPoints.map(o=>o.color);return this.connectLastAndFirstAnchor&&this._anchorPoints.length!==2&&t.pop(),t}cssColors(t="hsl"){let o={hsl:r=>r.hslCSS,oklch:r=>r.oklchCSS,lch:r=>r.lchCSS},n=this.flattenedPoints.map(o[t]);return this.connectLastAndFirstAnchor&&n.pop(),n}get colorsCSS(){return this.cssColors("hsl")}get colorsCSSlch(){return this.cssColors("lch")}get colorsCSSoklch(){return this.cssColors("oklch")}shiftHue(t=20){this.anchorPoints.forEach(o=>o.shiftHue(t)),this.updateAnchorPairs()}getColorAt(t){if(t<0||t>1)throw new Error("Position must be between 0 and 1");if(this.anchorPoints.length===0)throw new Error("No anchor points available");let o=this.connectLastAndFirstAnchor?this.anchorPoints.length:this.anchorPoints.length-1,n=this.connectLastAndFirstAnchor&&this.anchorPoints.length===2?2:o,r=t*n,c=Math.floor(r),h=r-c,s=c>=n?n-1:c,e=c>=n?1:h,a=this._anchorPairs[s];if(!a||a.length<2||!a[0]||!a[1])return new d({color:this.anchorPoints[0]?.color||[0,0,0],invertedLightness:this._invertedLightness});let p=a[0].position,l=a[1].position,b=this.shouldInvertEaseForSegment(s),C=v(e,p,l,b,this._positionFunctionX,this._positionFunctionY,this._positionFunctionZ);return new d({xyz:C,invertedLightness:this._invertedLightness})}shouldInvertEaseForSegment(t){return!!(t%2||this.connectLastAndFirstAnchor&&this.anchorPoints.length===2&&t===0)}},{p5:P}=globalThis;if(P&&P.VERSION&&P.VERSION.startsWith("1.")){console.info("p5 < 1.x detected, adding poline to p5 prototype");let i=new f;P.prototype.poline=i;let t=()=>i.colors.map(o=>`hsl(${Math.round(o[0])},${o[1]*100}%,${o[2]*100}%)`);P.prototype.registerMethod("polineColors",t),globalThis.poline=i,globalThis.polineColors=t}export{d as ColorPoint,f as Poline,m as hslToPoint,F as pointToHSL,X as positionFunctions,g as randomHSLPair,I as randomHSLTriple};