Cloth · Nico Pr

Nico Pr

<div id="container">
	<canvas></canvas>
</div>

#container {
	width: 100%;
	height: 100%;
	touch-action: none;
}
canvas {
	display: block;
	display: block;
	width: 100%;
	height: 100%;
}

(function(){const u=window.devicePixelRatio||1,w=1E3/60;var x=0,y=0,z=0,A=0,C=14;const E={background:["#ffffff","#1f1f1f"],"default":["#24292e","#d4d4d4"],keyword:["#0000ff","#569cd6"],string:["#a31515","#ce9178"],number:["#098658","#b5cea8"],comment:["#008000","#6a9955"],"function":["#795e26","#dcdcaa"],variable:["#001080","#9cdcfe"],operator:["#000000","#d4d4d4"]},F=a=>a.slice(1).match(/\w\w/g).map(b=>parseInt(b,16)/255);
class G{constructor(a){var b=C;a=[...(new Set(a))].filter(e=>e.trim().length>0);const c=document.createElement("canvas"),f=c.getContext("2d"),d=Math.ceil(b*1.5)*u;this.fa=b;this.ha=Math.ceil(b*1.5);this.I=Math.max(1,Math.min(a.length,Math.floor(4096/d)));this.g=new Map;c.width=this.I*d;c.height=Math.ceil(a.length/this.I)*d;this.ia=d/c.width;this.ja=d/c.height;f.font=`${b*u}px ${'"Cascadia Code Light", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'}`;f.textAlign="center";f.textBaseline=
"middle";f.fillStyle="#ffffff";"letterSpacing"in f&&(f.letterSpacing="0px");this.h=f.measureText("M").width/u;a.forEach((e,k)=>{const l=k%this.I;f.fillText(e,(l+.5)*d,((k-l)/this.I+.5)*d);this.g.set(e,k)});this.G=c}}let H={};
const I=async a=>await (new Response((new Response(Uint8Array.from(atob(a),b=>b.charCodeAt(0)))).body.pipeThrough(new DecompressionStream("gzip")))).text(),J=async()=>({ka:await I("H4sIAAAAAAAAClVQsW7DIBT8FUYgmNRJO1meMnSNUsXqVtEEp0iYFxPAplX/vXIgljveveO4O+GcVZ/eSRTkaYPEDqyRthIz3WoQDolXHa9fCzrI0zMS7y3Y7j+7nTw02MobNV2Tr2+UHK5gHfM7qfV8TO5+L+0BBubfNLgqCBuVuaSH4dgsiS0KyT2AOqNOKIPJz13Y1ziHL/gLocnqoj/2cFNOgamnxBjjSYxTcP5Nez4WGQy055EtwLhayCJ5oDGS9VyHbnhRckLvriUrSsKeWEmqcGzq9FUHZ5zWY7kmYa0GsJldP1iyyvkJTRulpnWe8/cPh6o+i6oBAAA="),ga:await I("H4sIAAAAAAAACk2MywrCMBAAf2WPrRQP1VvwZPELbK8S0m1ZyKNskzVV/HepRfE6M8zEaGim4MFhT8lNMNigo0qehsAOZu0mi1w3kK6YlWheyI8gaGqQtvsHB5BzsIGVBOrBafJF+RQ0R4iYP+YUMcfEWDfFequk7Uo12tuF9bgFa158831eHrvtWf3YvVSvN6sup4+1AAAA")});
class K{constructor(a){this.l=null;this.g=a=a.getContext("webgl",{alpha:!1,antialias:!1,depth:!1,stencil:!1});this.o=a.getExtension("ANGLE_instanced_arrays");this.v=0;const b=a.createProgram();for(const [c,f]of[[a.VERTEX_SHADER,H.ka],[a.FRAGMENT_SHADER,H.ga]]){const d=a.createShader(c);a.shaderSource(d,f);a.compileShader(d);a.attachShader(b,d)}a.linkProgram(b);a.useProgram(b);this.A=b;this.C=a.createBuffer();this.u=a.createBuffer();this.m=a.createBuffer();this.j=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,
this.C);a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,1,1]),a.STATIC_DRAW);a.bindTexture(a.TEXTURE_2D,a.createTexture());a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.LINEAR);a.pixelStorei(a.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);a.enable(a.BLEND);a.blendFunc(a.ONE,a.ONE_MINUS_SRC_ALPHA)}h=(a,b,c,f)=>
{const d=this.g;a=d.getAttribLocation(this.A,a);d.bindBuffer(d.ARRAY_BUFFER,b);d.enableVertexAttribArray(a);d.vertexAttribPointer(a,c,d.FLOAT,!1,0,0);this.o.vertexAttribDivisorANGLE(a,f)};i=(a,...b)=>{const c=this.g;a=c.getUniformLocation(this.A,a);b.length===1?c.uniform1f(a,b[0]):c.uniform2f(a,b[0],b[1])};J=(a,b,c,f,d)=>{const e=this.g;this.v=b.length;this.l=new Float32Array(this.v*4);e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,a.G);e.viewport(0,0,e.drawingBufferWidth,e.drawingBufferHeight);
this.i("uViewport",f,d);this.i("uCell",a.ia,a.ja);this.i("uPerRow",a.I);this.i("uSlot",a.ha);e.bindBuffer(e.ARRAY_BUFFER,this.u);e.bufferData(e.ARRAY_BUFFER,b,e.STATIC_DRAW);e.bindBuffer(e.ARRAY_BUFFER,this.j);e.bufferData(e.ARRAY_BUFFER,c,e.STATIC_DRAW);e.bindBuffer(e.ARRAY_BUFFER,this.m);e.bufferData(e.ARRAY_BUFFER,this.l.byteLength,e.DYNAMIC_DRAW);this.h("aCorner",this.C,2,0);this.h("aGlyph",this.u,1,1);this.h("aColor",this.j,3,1);this.h("aXform",this.m,4,1)};K=a=>{const b=this.g;b.bindBuffer(b.ARRAY_BUFFER,
this.j);b.bufferData(b.ARRAY_BUFFER,a,b.STATIC_DRAW)};F=a=>{const b=this.g;b.bindBuffer(b.ARRAY_BUFFER,this.m);b.bufferSubData(b.ARRAY_BUFFER,0,a);b.clear(b.COLOR_BUFFER_BIT);this.o.drawArraysInstancedANGLE(b.TRIANGLE_STRIP,0,4,this.v)};}
class L{constructor(a){this.g=a;this.h=new Map;Object.entries({down:this.u,move:this.m,up:this.i,cancel:this.i,leave:this.i}).forEach(([b,c])=>document.addEventListener("pointer"+b,c.bind(this),{passive:!0}));document.addEventListener("contextmenu",b=>b.preventDefault())}j=a=>{let b=this.h.get(a.pointerId);b||(b={x:0,y:0,N:!1,D:-1,Z:!1},this.h.set(a.pointerId,b));b.x=a.clientX-this.g.O;b.y=a.clientY-this.g.P;return b};u=a=>{a=this.j(a);const b=this.g;let c=-1,f=576;for(let e=0;e<b.v;e++){if(b.H[e])continue;
var d=a.x-b.px[e];const k=a.y-b.B[e];d=d*d+k*k;d<f&&(f=d,c=e)}c>=0&&(a.D=c,a.Z=b.w[c]===0,b.H[c]=1,b.w[c]=0)};m=a=>{a=this.j(a);const b=a.D;a.N=!0;b>=0&&(this.g.px[b]=a.x,this.g.B[b]=a.y,this.g.L[b]=a.x,this.g.M[b]=a.y)};i=a=>{const b=this.h.get(a.pointerId);b&&(this.l(b),this.h.delete(a.pointerId))};l=a=>{a.D<0||(this.g.w[a.D]=a.Z?0:1,this.g.H[a.D]=0,a.D=-1)};A=()=>{for(const a of this.h.values())this.l(a);this.h.clear()};o=()=>{const a=this.g,b=Math.sqrt(5E3),c=1/7E3,f=10/300;for(const k of this.h.values())if(k.N){k.N=
!1;for(let l=0;l<a.v;l++){const t=k.x-a.px[l];if(t>b||t<-b)continue;const n=k.y-a.B[l];if(n>b||n<-b)continue;var d=t*t+n*n;if(d>=5E3)continue;var e=(5E3-d)*c;d=Math.sqrt(d);e=e*e*(3-2*e)*f;d>0&&(a.ax[l]-=t/d*e,a.ay[l]-=n/d*e)}}};}
class M{constructor(a){var b=document.getElementById("container");this.J=b;this.o=a.replace(/\s+/g," ");this.G=this.J.firstElementChild;this.m=new K(this.G);this.X=this.Y=this.P=this.O=this.l=this.h=this.S=this.v=0;this.i=null;this.U=this.C=this.A=this.w=this.ay=this.ax=this.M=this.L=this.B=this.px=this.V=this.F=0;this.j=this.H=this.g=null;this.u=.9;this.T=0;b.addEventListener("touchstart",c=>c.preventDefault(),{passive:!1});window.addEventListener("resize",this.ea,{passive:!0});window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",
()=>this.W());this.ca();this.R();this.input=new L(this);this.wake()}ca=()=>{this.j=Array(this.o.length).fill("default");const a=/(?<comment>\/\*[\s\S]*?\*\/|\/\/.*)|(?<string>"[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*'|`[^`\\]*(?:\\.[^`\\]*)*`)|(?<keyword>\b(?:const|let|var|function|class|return|if|else|for|while|do|break|continue|switch|case|default|new|this|super|import|export|try|catch|finally|throw|typeof|instanceof|void|delete|await|async|yield)\b)|(?<number>\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(?<function>\b[a-zA-Z_]\w*(?=\s*\())|(?<variable>\b[a-zA-Z_]\w*\b)/g;
let b;for(;(b=a.exec(this.o))!==null;){let c="default";b.groups.comment?c="comment":b.groups.string?c="string":b.groups.keyword?c="keyword":b.groups.number?c="number":b.groups["function"]?c="function":b.groups.variable&&(c="variable");for(let f=0;f<b[0].length;f++)this.j[b.index+f]=c}};W=()=>{const a=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?1:0;document.body.style.backgroundColor=E.background[a];var b=F(E.background[a]);this.m.g.clearColor(b[0],b[1],b[2],1);if(this.g&&
this.j){b=new Float32Array(this.g.length*3);for(let c=0;c<this.g.length;c++){const f=F(E[this.j[this.g[c]%this.o.length]][a]||E.default[a]);b[c*3]=f[0];b[c*3+1]=f[1];b[c*3+2]=f[2]}this.m.K(b)}};ea=()=>{clearTimeout(this.V);this.V=setTimeout(()=>this.R(),123)};R=()=>{this.input&&this.input.A();var a=this.J.getBoundingClientRect();const b=a.width;a=a.height;this.Y=b;this.X=a;this.G.width=Math.round(b*u);this.G.height=Math.round(a*u);C=Math.max(11,Math.min(14,Math.round(b/60)));this.i&&this.i.fa===C||
(this.i=new G(this.o));z=this.i.h;A=Math.round(C*1.1);x=Math.max(8,Math.floor(Math.min(b*.94, 880)/z));y=Math.max(6,Math.floor(a*.77/A));this.O=Math.round((b-(x-1)*z)/2);this.P=Math.round(A/1.2)+32;this.aa();this.W()};aa=()=>{const a=x,b=z,c=A,f=a*y,d=this.o,e=this.i.g;this.v=f;this.U=Math.sqrt(b*b+c*c);f>this.S&&(this.S=f,this.px=new Float64Array(f),this.B=new Float64Array(f),this.L=new Float64Array(f),this.M=new Float64Array(f),this.ax=new Float64Array(f),this.ay=new Float64Array(f),this.w=new Float64Array(f),this.H=
new Uint8Array(f),this.A=new Float64Array(f),this.C=new Float64Array(f));var k=0;for(var l=0;l<f;l++)e.has(d[l%d.length])&&k++;l=new Float32Array(k);const t=new Float32Array(k*3);this.g=new Int32Array(k);k=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?1:0;for(let m=0,r=0;m<f;m++){var n=Math.floor(m/a);const p=(m-n*a)*b,g=n*c,q=m%d.length,h=e.get(d[q]);this.px[m]=p;this.L[m]=p;this.B[m]=g;this.M[m]=g;this.A[m]=p;this.C[m]=g;this.ax[m]=0;this.ay[m]=0;this.w[m]=n===0?0:
1;this.H[m]=0;h!==void 0&&(this.g[r]=m,l[r]=h,n=F(E[this.j[q]][k]||E.default[k]),t[r*3]=n[0],t[r*3+1]=n[1],t[r*3+2]=n[2],r++)}this.m.J(this.i,l,t,this.Y,this.X)};ba=()=>{const a=this.px,b=this.B,c=this.L,f=this.M,d=this.ax,e=this.ay,k=this.w,l=this.v,t=this.A,n=this.C,m=this.u,r=this.T,p=.975-r/.05*.125;for(let g=0;g<l;g++){const q=a[g],h=b[g];if(k[g]!==0){const v=(n[g]-h)*r;a[g]=q+(q-c[g])*p+d[g]+(t[g]-q)*r;b[g]=h+(h-f[g])*p+e[g]+m+v}c[g]=q;f[g]=h;d[g]=0;e[g]=0}};da=()=>{const a=this.px,b=this.B,
c=this.w,f=this.U,d=x,e=y,k=z,l=A,t=k*.5,n=d-1,m=(p,g,q,h)=>{const v=a[g]-a[p],D=b[g]-b[p];var B=Math.sqrt(v*v+D*D)+1E-9;q=(q-B)/B*h;h=c[p];B=c[g];a[p]-=v*q*h;b[p]-=D*q*h;a[g]+=v*q*B;b[g]+=D*q*B};for(let p=0;p<e;p++){const g=p<e-1;for(let q=0;q<d;q++){const h=p*d+q;g&&m(h,h+d,l,.45);if(q<n){m(h,h+1,k,.45);var r=a[h+1]-a[h];r<t&&(r=(t-r)*.5,a[h]-=r*c[h],a[h+1]+=r*c[h+1],c[h]===0&&c[h+1]!==0&&(a[h+1]=a[h]+t))}g&&q<n&&(m(h,h+d+1,f,.1),m(h+1,h+d,f,.1))}}};$=()=>{const a=this.px,b=this.B,c=this.g,f=this.v,
d=this.m.l,e=x;for(let l=0,t=c.length;l<t;l++){const n=c[l];var k=n+e;let m=1,r=0;if(k<f){const p=a[k]-a[n];k=b[k]-b[n];const g=Math.sqrt(p*p+k*k);g>0&&(m=k/g,r=-p/g)}d[l*4]=a[n]+this.O;d[l*4+1]=b[n]+this.P;d[l*4+2]=m;d[l*4+3]=r}this.m.F(d)};wake=()=>{this.F||(this.h=this.l=0,this.F=requestAnimationFrame(this.K))};K=a=>{this.F=requestAnimationFrame(this.K);this.l||(this.l=a);let b=Math.min(a-this.l,100);this.l=a;b>w-2&&b<w+2&&(b=w);for(this.h+=b;this.h>=w;)for(this.h-=w,this.u+=(.9-this.u)*.2,this.T=
0,this.input.o(),this.ba(),a=0;a<8;a++)this.da();this.$()};}const O=async()=>{const a=document.querySelector('pre[data-snippet-id="cloth-js"] code').textContent.trim();H=await J();new M(a)};document.fonts&&document.fonts.ready?document.fonts.ready.then(O):window.addEventListener("load",O);}).call(this);