https://poisonal.com/_next/static/chunks/pages/panoply-watercolor-demo-62fde3ce2c8e6e72.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8915],{92105:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/panoply-watercolor-demo",function(){return a(41832)}])},20955:function(e,t,a){"use strict";a.d(t,{d:function(){return PanoplyWatercolorDefs}});var r=a(85893),l=a(67294),n=a(22087),o=a(78876),i=a.n(o);let s="panoply-wc-wobble",c=[["#e2cd8f","#d6bd79"],["#dca176","#cf8d61"],["#d08c83","#c07876"],["#a4ad8c","#8e9b85"],["#a98fa0","#94789a"],["#8b94a6","#7d86a0"],["#8a8f6e","#777f54"]],d=[[50,50,46,30],[35,30,30,22],[65,30,30,22],[35,70,30,22],[65,70,30,22],[50,14,34,15],[50,86,34,15]],mulberry32=e=>()=>{e|=0;let t=Math.imul((e=e+1831565813|0)^e>>>15,1|e);return(((t=t+Math.imul(t^t>>>7,61|t)^t)^t>>>14)>>>0)/4294967296},buildBlobs=e=>{let t=mulberry32(4e3+131*e),a=c[e%c.length];return d.map((e,r)=>{let l=e[0]+(2*t()-1)*6,n=e[1]+(2*t()-1)*5,o=e[2]*(.85+.3*t()),i=e[3]*(.85+.3*t());return{cx:+l.toFixed(1),cy:+n.toFixed(1),rx:+o.toFixed(1),ry:+i.toFixed(1),fill:a[r%a.length],opacity:+(.4+.13*t()).toFixed(2)}})},PanoplyWatercolorDefs=()=>(0,r.jsx)("svg",{width:0,height:0,className:i().defs,"aria-hidden":"true",focusable:"false",children:(0,r.jsx)("defs",{children:(0,r.jsxs)("filter",{id:s,children:[(0,r.jsx)("feTurbulence",{type:"fractalNoise",baseFrequency:"0.018 0.022",numOctaves:3,seed:11,result:"n"}),(0,r.jsx)("feDisplacementMap",{in:"SourceGraphic",in2:"n",scale:9,xChannelSelector:"R",yChannelSelector:"G"}),(0,r.jsx)("feGaussianBlur",{stdDeviation:3.2})]})})}),bakeMarkup=(e,t,a)=>{let r=e.map(e=>'<ellipse cx="'.concat(e.cx,'" cy="').concat(e.cy,'" rx="').concat(e.rx,'" ry="').concat(e.ry,'" fill="').concat(e.fill,'" opacity="').concat(e.opacity,'"/>')).join("");return'<svg xmlns="http://www.w3.org/2000/svg" width="'.concat(t,'" height="').concat(a,'" viewBox="-').concat(18," -").concat(18," ").concat(136," ").concat(136,'" preserveAspectRatio="none">')+'<defs><filter id="b"><feTurbulence type="fractalNoise" baseFrequency="0.018 0.022" numOctaves="3" seed="11" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="9" xChannelSelector="R" yChannelSelector="G"/><feGaussianBlur stdDeviation="3.2"/></filter></defs>'+'<g filter="url(#b)">'.concat(r,"</g></svg>")};t.Z=e=>{let{index:t,className:a}=e,o=(0,l.useMemo)(()=>buildBlobs(t),[t]),c=(0,l.useRef)(null),d=(0,l.useRef)(!1),[u,p]=(0,l.useState)(null);return(0,l.useEffect)(()=>{let e,a;d.current=!1,p(null);let r=!1,l=0,tryBake=()=>{if(r||d.current)return;let t=c.current;if(!t){e=setTimeout(tryBake,800);return}if(n.w.busy){e=setTimeout(tryBake,420);return}let i=t.clientWidth,s=t.clientHeight;if(!i||!s){e=setTimeout(tryBake,800);return}let u=Math.min(window.devicePixelRatio||1,2),f=Math.round(136*i/100),h=Math.round(136*s/100),b=new Image,m=!1,retryLoad=()=>{r||d.current||m||(m=!0,clearTimeout(a),++l<=6&&(e=setTimeout(tryBake,900)))};b.onerror=retryLoad,b.onload=()=>

1{if(!r&&!m){m=!0,clearTimeout(a);try{let e=document.createElement("canvas");e.width=Math.round(f*u),e.height=Math.round(h*u);let t=e.getContext("2d");if(!t)return;t.drawImage(b,0,0,e.width,e.height),e.toBlob(e=>{if(!e||r)return;let t=new FileReader;t.onload=()=>{r||(d.current=!0,p(String(t.result)))},t.readAsDataURL(e)},"image/png")}catch(e){}}},b.src="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(bakeMarkup(o,f,h)),a=setTimeout(retryLoad,1500)};return e=setTimeout(tryBake,300+120*t),()=>{r=!0,clearTimeout(e),clearTimeout(a)}},[t,o]),(0,r.jsx)("svg",{ref:c,className:"".concat(i().wash," ").concat(a||""),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true",focusable:"false",children:u?(0,r.jsx)("image",{x:-18,y:-18,width:136,height:136,preserveAspectRatio:"none",href:u,xlinkHref:u}):(0,r.jsx)("g",{filter:"url(#".concat(s,")"),children:o.map((e,t)=>(0,r.jsx)("ellipse",{cx:e.cx,cy:e.cy,rx:e.rx,ry:e.ry,fill:e.fill,opacity:e.opacity},t))})})}},22087:function(e,t,a){"use strict";a.d(t,{w:function(){return r}});let r={busy:!1}},41832:function(e,t,a){"use strict";a.r(t),a.d(t,{default:function(){return f}});var r=a(85893),l=a(67294),n=a(20955),o=a(9473),i=a(89312),s=a(50873),c=a.n(s);let buildDefaultMeta=e=>[{label:(0,i.BV)("panoplyMetabarPlanPhaseLabel",e),at:"plan"},{label:(0,i.BV)("panoplyMetabarLensCountLabel",e),at:"plan"},{label:(0,i.BV)("panoplyMetabarSourceFactsLabel",e),at:"research"},{label:(0,i.BV)("panoplyMetabarPiecesArrangedLabel",e),at:"compose"}],d={plan:0,research:1,compose:2,rest:3},substitute=(e,t)=>e.replace(/\{(\w+)\}/g,(e,a)=>a in t?String(t[a]):e);var panoply_PanoplyMetabar=e=>{let{phase:t,counts:a,labels:n}=e,i=(0,o.v9)(e=>{var t;return null===(t=e.myLearning)||void 0===t?void 0:t.phraseLabels}),s=d[t],u=(0,l.useMemo)(()=>{let e=n&&n.length?n:buildDefaultMeta(i);return e.filter(e=>d[e.at||"plan"]<=s).map(e=>substitute(e.label,a)).filter(e=>e.trim().length>0)},[n,a,s,i]);return(0,r.jsx)("div",{className:c().metabar,children:(0,r.jsx)("div",{className:c().labels,children:u.map(e=>(0,r.jsx)("span",{className:c().label,children:e},e))})})};let u=[{label:"Basically an alien",framing:"It took a different door out of the dark, half a billion years ago."},{label:"The escape artist",framing:"No bones, no fixed shape, and frankly no respect for the lid."},{label:"The last thing she does",framing:"Motherhood, for an octopus, is a death sentence she walks into."},{label:"What we called it first",framing:"We feared it into a monster long before we understood it."},{label:"Colourblind, master of colour",framing:"It cannot see the colours it perfectly imitates."}],p=["plan","research","compose","rest"],PanoplyWatercolorDemo=()=>{let[e,t]=(0,l.useState)(u.map(()=>3)),[a,o]=(0,l.useState)(0),addModule=e=>t(t=>t.map((t,a)=>a===e?t+1:t)),i=p[a],s={lenses:u.length,pieces:e.reduce((e,t)=>e+t,0),sources:7,facts:10};return(0,r.jsxs)("div",{style:{minHeight:"100vh",background:"#f4f0e3",overflowX:"auto",padding:"40px 24px"},children:[(0,r.jsx)(n.d,{}),(0,r.jsx)("h1",{style:{fontFamily:"Georgia, serif",color:"#1b1712",fontSize:32,margin:"0 0 6px"},children:"Panoply watercolor + metabar — demo"}),(0,r.jsx)("p",{style:{fontFamily:"Georgia, serif",color:"#6f685c",margin:"0 0 18px"},children:"Each lens gets its own seeded wash. Add modules to widen a lens and watch its wash stretch. Step the phase to see metadata labels accrete."}),(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:16,margin:"0 0 22px"},children:[(0,r.jsxs)("button",{type:"button",onClick:()=>o(e=>(e+1)%p.length),style:{fontFamily:"Georgia, serif",fontSize:13,letterSpacing:".1em",textTransform:"uppercase",background:"#2b1a2f",color:"#f6f2e6",border:"none",borderRadius:2,padding:"10px 18px",cursor:"pointer"},children:["phase: ",i," → next"]}),(0,r.jsx)("div",{style:{flex:1,minWidth:0},children:(0,r.jsx)(panoply_PanoplyMetabar,{phase:i,counts:s})})]}),(0,r.jsx)("div",{style:{display:"flex",alignItems:"stretch",gap:30,minHeight:480},children:u.map((t,a)=>(0,r.jsxs)("section",{style:{position:"relative",flex:"0 0 auto",width:220+64*e[a],padding:"24px 22px",borderRadius:4,transition:"width .35s cubic-bezier(.2,.8,.2,1)"},children:[(0,r.jsx)(n.Z,{index:a}),(0,r.jsxs)("div",{style:{position:"relative",zIndex:2},children:[(0,r.jsx)("div",{style:{fontFamily:"Georgia, serif",fontSize:26,lineHeight:1,color:"#1b1712"},children:t.label}),(0,r.jsx)("div",{style:{fontFamily:"Georgia, serif",fontStyle:"italic",color:"#4f483e",fontSize:14,marginTop:6,maxWidth:"31ch"},children:t.framing}),(0,r.jsxs)("div",{style:{display:"flex",flexWrap:"wrap",gap:12,marginTop:20},children:[Array.from({length:e[a]}).map((e,t)=>(0,r.jsx)("div",{style:{width:132,height:96,background:"#f8f4e8",border:"1px solid rgba(27,23,18,.14)",borderRadius:3,boxShadow:"0 14px 30px -24px rgba(27,23,18,.7)"}},t)),(0,r.jsx)("button",{type:"button",onClick:()=>addModule(a),style:{width:54,height:54,border:"1px dashed rgba(27,23,18,.14)",borderRadius:3,background:"rgba(255,255,255,.2)",color:"#6f685c",fontSize:24,cursor:"pointer"},"aria-label":"Add module to ".concat(t.label),children:"+"})]})]})]},t.label))})]})};PanoplyWatercolorDemo.hideNavbar=!0,PanoplyWatercolorDemo.hideHeader=!0;var f=PanoplyWatercolorDemo},78876:function(e){e.exports={defs:"LensWatercolor_defs__KLAYE",wash:"LensWatercolor_wash__ONOFu"}},50873:function(e){e.exports={metabar:"PanoplyMetabar_metabar__560QP",labels:"PanoplyMetabar_labels__48cI_",label:"PanoplyMetabar_label__Fgb3v",metaLabelIn:"PanoplyMetabar_metaLabelIn___l__m"}}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=92105)}),_N_E=e.O()}]);