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 v=window.devicePixelRatio||1,w=1E3/60;var x=0,z=0,A=0,B=0,C=14,D=.975;const F={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"]},G=a=>a.slice(1).match(/\w\w/g).map(b=>parseInt(b,16)/255);
class H{constructor(a){var b=C;a=[...(new Set(a))].filter(c=>c.trim().length>0);const d=document.createElement("canvas"),f=d.getContext("2d"),e=Math.ceil(b*1.5)*v;this.la=b;this.na=Math.ceil(b*1.5);this.N=Math.max(1,Math.min(a.length,Math.floor(4096/e)));this.g=new Map;d.width=this.N*e;d.height=Math.ceil(a.length/this.N)*e;this.oa=e/d.width;this.pa=e/d.height;f.font=`${b*v}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/v;a.forEach((c,g)=>{const h=g%this.N;f.fillText(c,(h+.5)*e,((g-h)/this.N+.5)*e);this.g.set(c,g)});this.L=d}}let I={};
const J=async a=>await (new Response((new Response(Uint8Array.from(atob(a),b=>b.charCodeAt(0)))).body.pipeThrough(new DecompressionStream("gzip")))).text(),K=async()=>({qa:await J("H4sIAAAAAAAAClVQsW7DIBT8FUYgmNRJO1meMnSNUsXqVtEEp0iYFxPAplX/vXIgljveveO4O+GcVZ/eSRTkaYPEDqyRthIz3WoQDolXHa9fCzrI0zMS7y3Y7j+7nTw02MobNV2Tr2+UHK5gHfM7qfV8TO5+L+0BBubfNLgqCBuVuaSH4dgsiS0KyT2AOqNOKIPJz13Y1ziHL/gLocnqoj/2cFNOgamnxBjjSYxTcP5Nez4WGQy055EtwLhayCJ5oDGS9VyHbnhRckLvriUrSsKeWEmqcGzq9FUHZ5zWY7kmYa0GsJldP1iyyvkJTRulpnWe8/cPh6o+i6oBAAA="),ma:await J("H4sIAAAAAAAACk2MywrCMBAAf2WPrRQP1VvwZPELbK8S0m1ZyKNskzVV/HepRfE6M8zEaGim4MFhT8lNMNigo0qehsAOZu0mi1w3kK6YlWheyI8gaGqQtvsHB5BzsIGVBOrBafJF+RQ0R4iYP+YUMcfEWDfFequk7Uo12tuF9bgFa158831eHrvtWf3YvVSvN6sup4+1AAAA")});
class L{constructor(a){this.o=null;this.g=a=a.getContext("webgl",{alpha:!1,antialias:!1,depth:!1,stencil:!1});this.C=a.getExtension("ANGLE_instanced_arrays");this.j=0;const b=a.createProgram();for(const [d,f]of[[a.VERTEX_SHADER,I.qa],[a.FRAGMENT_SHADER,I.ma]]){const e=a.createShader(d);a.shaderSource(e,f);a.compileShader(e);a.attachShader(b,e)}a.linkProgram(b);a.useProgram(b);this.G=b;this.I=a.createBuffer();this.B=a.createBuffer();this.A=a.createBuffer();this.m=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,
this.I);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,d,f)=>
{const e=this.g;a=e.getAttribLocation(this.G,a);e.bindBuffer(e.ARRAY_BUFFER,b);e.enableVertexAttribArray(a);e.vertexAttribPointer(a,d,e.FLOAT,!1,0,0);this.C.vertexAttribDivisorANGLE(a,f)};l=(a,...b)=>{const d=this.g;a=d.getUniformLocation(this.G,a);b.length===1?d.uniform1f(a,b[0]):d.uniform2f(a,b[0],b[1])};P=(a,b,d,f,e)=>{const c=this.g;this.j=b.length;this.o=new Float32Array(this.j*4);c.texImage2D(c.TEXTURE_2D,0,c.RGBA,c.RGBA,c.UNSIGNED_BYTE,a.L);c.viewport(0,0,c.drawingBufferWidth,c.drawingBufferHeight);
this.l("uViewport",f,e);this.l("uCell",a.oa,a.pa);this.l("uPerRow",a.N);this.l("uSlot",a.na);c.bindBuffer(c.ARRAY_BUFFER,this.B);c.bufferData(c.ARRAY_BUFFER,b,c.STATIC_DRAW);c.bindBuffer(c.ARRAY_BUFFER,this.m);c.bufferData(c.ARRAY_BUFFER,d,c.STATIC_DRAW);c.bindBuffer(c.ARRAY_BUFFER,this.A);c.bufferData(c.ARRAY_BUFFER,this.o.byteLength,c.DYNAMIC_DRAW);this.h("aCorner",this.I,2,0);this.h("aGlyph",this.B,1,1);this.h("aColor",this.m,3,1);this.h("aXform",this.A,4,1)};R=a=>{const b=this.g;b.bindBuffer(b.ARRAY_BUFFER,
this.m);b.bufferData(b.ARRAY_BUFFER,a,b.STATIC_DRAW)};O=a=>{const b=this.g;b.bindBuffer(b.ARRAY_BUFFER,this.A);b.bufferSubData(b.ARRAY_BUFFER,0,a);b.clear(b.COLOR_BUFFER_BIT);this.C.drawArraysInstancedANGLE(b.TRIANGLE_STRIP,0,4,this.j)};}
class M{constructor(a){this.g=a;this.h=new Map;Object.entries({down:this.B,move:this.A,up:this.l,cancel:this.l,leave:this.l}).forEach(([b,d])=>document.addEventListener("pointer"+b,d.bind(this),{passive:!0}));document.addEventListener("contextmenu",b=>b.preventDefault())}m=a=>{let b=this.h.get(a.pointerId);b||(b={x:0,y:0,T:!1,J:-1,da:!1},this.h.set(a.pointerId,b));b.x=a.clientX-this.g.U;b.y=a.clientY-this.g.V;return b};B=a=>{a=this.m(a);const b=this.g;let d=-1,f=576;for(let c=0;c<b.j;c++){if(b.M[c])continue;
var e=a.x-b.px[c];const g=a.y-b.i[c];e=e*e+g*g;e<f&&(f=e,d=c)}d>=0&&(a.J=d,a.da=b.w[d]===0,b.M[d]=1,b.w[d]=0)};A=a=>{a=this.m(a);const b=a.J;a.T=!0;b>=0&&(this.g.px[b]=a.x,this.g.i[b]=a.y,this.g.u[b]=a.x,this.g.v[b]=a.y)};l=a=>{const b=this.h.get(a.pointerId);b&&(this.o(b),this.h.delete(a.pointerId))};o=a=>{a.J<0||(this.g.w[a.J]=a.da?0:1,this.g.M[a.J]=0,a.J=-1)};G=()=>{for(const a of this.h.values())this.o(a);this.h.clear()};C=()=>{const a=this.g,b=Math.sqrt(5E3),d=1/7E3,f=10/300;for(const g of this.h.values())if(g.T){g.T=
!1;for(let h=0;h<a.j;h++){const k=g.x-a.px[h];if(k>b||k<-b)continue;const p=g.y-a.i[h];if(p>b||p<-b)continue;var e=k*k+p*p;if(e>=5E3)continue;var c=(5E3-e)*d;e=Math.sqrt(e);c=c*c*(3-2*c)*f;e>0&&(a.ax[h]-=k/e*c,a.ay[h]-=p/e*c)}}};}
class N{constructor(a){var b=document.getElementById("container");this.P=b;this.B=a.replace(/\s+/g," ");this.L=this.P.firstElementChild;this.C=new L(this.L);this.ba=this.ca=this.V=this.U=this.A=this.h=this.X=this.j=0;this.l=null;this.H=this.F=this.D=this.w=this.ay=this.ax=this.v=this.u=this.i=this.px=this.$=this.I=0;this.o=this.M=this.g=null;this.m=.9;this.G=0;b.addEventListener("touchstart",d=>d.preventDefault(),{passive:!1});window.addEventListener("resize",this.ka,{passive:!0});window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",
()=>this.aa());this.ia();this.W();this.input=new M(this);this.wake()}ia=()=>{this.o=Array(this.B.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.B))!==null;){let d="default";b.groups.comment?d="comment":b.groups.string?d="string":b.groups.keyword?d="keyword":b.groups.number?d="number":b.groups["function"]?d="function":b.groups.variable&&(d="variable");for(let f=0;f<b[0].length;f++)this.o[b.index+f]=d}};aa=()=>{const a=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?1:0;document.body.style.backgroundColor=F.background[a];var b=G(F.background[a]);this.C.g.clearColor(b[0],b[1],b[2],1);if(this.g&&
this.o){b=new Float32Array(this.g.length*3);for(let d=0;d<this.g.length;d++){const f=G(F[this.o[this.g[d]%this.B.length]][a]||F.default[a]);b[d*3]=f[0];b[d*3+1]=f[1];b[d*3+2]=f[2]}this.C.R(b)}};ka=()=>{clearTimeout(this.$);this.$=setTimeout(()=>this.W(),123)};W=()=>{this.input&&this.input.G();var a=this.P.getBoundingClientRect();const b=a.width;a=a.height;this.ca=b;this.ba=a;this.L.width=Math.round(b*v);this.L.height=Math.round(a*v);C=Math.max(11,Math.min(14,Math.round(b/60)));this.l&&this.l.la===
C||(this.l=new H(this.B));A=this.l.h;B=Math.round(C*1.1);x=Math.max(8,Math.floor(Math.min(b*.94, 880)/A));z=Math.max(6,Math.floor(a*.8/B));this.U=Math.round((b-(x-1)*A)/2);this.V=Math.round(B/1.2)+32;this.fa();this.aa()};fa=()=>{const a=x,b=A,d=B,f=a*z,e=this.B,c=this.l.g;this.j=f;this.H=Math.sqrt(b*b+d*d);f>this.X&&(this.X=f,this.px=new Float64Array(f),this.i=new Float64Array(f),this.u=new Float64Array(f),this.v=new Float64Array(f),this.ax=new Float64Array(f),this.ay=new Float64Array(f),this.w=new Float64Array(f),
this.M=new Uint8Array(f),this.D=new Float64Array(f),this.F=new Float64Array(f));var g=0;for(var h=0;h<f;h++)c.has(e[h%e.length])&&g++;h=new Float32Array(g);const k=new Float32Array(g*3);this.g=new Int32Array(g);g=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?1:0;for(let n=0,r=0;n<f;n++){var p=Math.floor(n/a);const q=(n-p*a)*b,l=p*d,t=n%e.length,m=c.get(e[t]);this.px[n]=q;this.u[n]=q;this.i[n]=l;this.v[n]=l;this.D[n]=q;this.F[n]=l;this.ax[n]=0;this.ay[n]=0;this.w[n]=
p===0?0:1;this.M[n]=0;m!==void 0&&(this.g[r]=n,h[r]=m,p=G(F[this.o[t]][g]||F.default[g]),k[r*3]=p[0],k[r*3+1]=p[1],k[r*3+2]=p[2],r++)}this.ja();this.C.P(this.l,h,k,this.ca,this.ba)};ha=(a,b,d,f)=>{const e=a*b;b={cols:a,rows:b,S:d,K:f,j:e,H:Math.sqrt(d*d+f*f),px:new Float64Array(e),i:new Float64Array(e),u:new Float64Array(e),v:new Float64Array(e),ax:new Float64Array(e),ay:new Float64Array(e),w:new Float64Array(e),D:new Float64Array(e),F:new Float64Array(e)};for(let c=0;c<e;c++){const g=Math.floor(c/
a),h=(c-g*a)*d,k=g*f;b.px[c]=h;b.u[c]=h;b.D[c]=h;b.i[c]=k;b.v[c]=k;b.F[c]=k;b.w[c]=g===0?0:1}return b};O=a=>{x=a.cols;z=a.rows;A=a.S;B=a.K;this.j=a.j;this.H=a.H;this.px=a.px;this.i=a.i;this.u=a.u;this.v=a.v;this.ax=a.ax;this.ay=a.ay;this.w=a.w;this.D=a.D;this.F=a.F};sample=(a,b)=>{const d=(a.cols-1)/(b.cols-1),f=(a.rows-1)/(b.rows-1);for(let k=0;k<b.rows;k++){var e=k*f;const p=Math.min(a.rows-2,Math.floor(e));e-=p;for(let n=0;n<b.cols;n++){var c=n*d,g=Math.min(a.cols-2,Math.floor(c)),h=c-g;g=p*a.cols+
g;c=g+1;const r=g+a.cols,q=r+1,l=(1-h)*(1-e),t=h*(1-e),m=(1-h)*e,u=h*e;h=k*b.cols+n;const y=k===0?n*b.S:a.px[g]*l+a.px[c]*t+a.px[r]*m+a.px[q]*u;g=k===0?0:a.i[g]*l+a.i[c]*t+a.i[r]*m+a.i[q]*u;b.px[h]=y;b.u[h]=y;b.i[h]=g;b.v[h]=g}}};ga=(a,b)=>{this.m=a;this.G=0;for(a=0;a<400;a++){this.Y();for(var d=0;d<8;d++)this.Z();if(a%4!==3)continue;d=this.px;const f=this.i,e=this.u,c=this.v,g=this.j;let h=0;for(let k=0;k<g;k++){const p=Math.abs(d[k]-e[k])+Math.abs(f[k]-c[k]);p>h&&(h=p)}if(h<.1||performance.now()>
b)break}};ja=()=>{const a={cols:x,rows:z,S:A,K:B,j:this.j,H:this.H,px:this.px,i:this.i,u:this.u,v:this.v,ax:this.ax,ay:this.ay,w:this.w,D:this.D,F:this.F},b=D;var d=(a.cols-1)*a.S;const f=(a.rows-1)*a.K,e=performance.now()+250;var c=[];for(let g=2;g<=16;g*=2){const h=Math.round((a.cols-1)/g)+1,k=Math.round((a.rows-1)/g)+1;if(h<8||k<5)break;c.unshift(this.ha(h,k,d/(h-1),f/(k-1)))}c.push(a);d=null;D=.92;for(const g of c)d&&this.sample(d,g),this.O(g),c=g.K/a.K,this.ga(.9*c*c,e),d=g;this.O(a);D=b;this.m=
.9};Y=()=>{const a=this.px,b=this.i,d=this.u,f=this.v,e=this.ax,c=this.ay,g=this.w,h=this.j,k=this.D,p=this.F,n=this.m,r=this.G,q=D-r/.05*(D-.85);for(let l=0;l<h;l++){const t=a[l],m=b[l];if(g[l]!==0){const u=(p[l]-m)*r;a[l]=t+(t-d[l])*q+e[l]+(k[l]-t)*r;b[l]=m+(m-f[l])*q+c[l]+n+u}d[l]=t;f[l]=m;e[l]=0;c[l]=0}};Z=()=>{const a=this.px,b=this.i,d=this.w,f=this.H,e=x,c=z,g=A,h=B,k=g*.5,p=e-1,n=(q,l,t,m)=>{const u=a[l]-a[q],y=b[l]-b[q];var E=Math.sqrt(u*u+y*y)+1E-9;t=(t-E)/E*m;m=d[q];E=d[l];a[q]-=u*t*m;
b[q]-=y*t*m;a[l]+=u*t*E;b[l]+=y*t*E};for(let q=0;q<c;q++){const l=q<c-1;for(let t=0;t<e;t++){const m=q*e+t;l&&n(m,m+e,h,.45);if(t<p){n(m,m+1,g,.45);var r=a[m+1]-a[m];r<k&&(r=(k-r)*.5,a[m]-=r*d[m],a[m+1]+=r*d[m+1],d[m]===0&&d[m+1]!==0&&(a[m+1]=a[m]+k))}l&&t<p&&(n(m,m+e+1,f,.1),n(m+1,m+e,f,.1))}}};ea=()=>{const a=this.px,b=this.i,d=this.g,f=this.j,e=this.C.o,c=x;for(let h=0,k=d.length;h<k;h++){const p=d[h];var g=p+c;let n=1,r=0;if(g<f){const q=a[g]-a[p];g=b[g]-b[p];const l=Math.sqrt(q*q+g*g);l>0&&(n=
g/l,r=-q/l)}e[h*4]=a[p]+this.U;e[h*4+1]=b[p]+this.V;e[h*4+2]=n;e[h*4+3]=r}this.C.O(e)};wake=()=>{this.I||(this.h=this.A=0,this.I=requestAnimationFrame(this.R))};R=a=>{this.I=requestAnimationFrame(this.R);this.A||(this.A=a);let b=Math.min(a-this.A,100);this.A=a;b>w-2&&b<w+2&&(b=w);for(this.h+=b;this.h>=w;)for(this.h-=w,this.m+=(.9-this.m)*.2,this.G=0,this.input.C(),this.Y(),a=0;a<8;a++)this.Z();this.ea()};}
const O=document.currentScript,P=async()=>{const a=document.querySelector('pre[data-snippet-id="cloth-js"] code').textContent;I=await K();new N(a)};window.addEventListener("load",P);}).call(this);