Curtain code · Nico Pr

Nico Pr

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

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

/* cloth release v0.1.7 */
(function(){var b=document.getElementById("stage"),h=b.getContext("webgl",{alpha:!1,antialias:!1,depth:!1,stencil:!1}),k=h.getExtension("ANGLE_instanced_arrays");if(!h||!k)throw document.body.innerHTML="WebGL not supported",Error("WebGL not supported");
var m={bg:[[1,1,1],[.051,.067,.09]],def:[[.14,.16,.18],[.83,.83,.83]],kwd:[[0,0,1],[.34,.61,.84]],str:[[.64,.08,.08],[.81,.57,.47]],num:[[.04,.53,.35],[.71,.81,.66]],com:[[0,.5,0],[.42,.6,.33]],fun:[[.47,.37,.15],[.86,.86,.67]],"var":[[0,.06,.5],[.61,.86,.99]]},aa=/(?<com>\/\*[\s\S]*?\*\/|\/\/.*)|(?<str>"[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*'|`[^`\\]*(?:\\.[^`\\]*)*`)|(?<kwd>\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)|(?<num>\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(?<fun>\b[a-zA-Z_]\w*(?=\s*\())|(?<var>\b[a-zA-Z_]\w*\b)/g,
n=h.createProgram(),ba=(a,c)=>{a=h.createShader(a);h.shaderSource(a,c);h.compileShader(a);h.getShaderParameter(a,h.COMPILE_STATUS)||console.error(h.getShaderInfoLog(a));h.attachShader(n,a)};ba(h.VERTEX_SHADER,"attribute vec2 aCorner;attribute float aGlyph;attribute vec4 aXform;attribute vec3 aColor;uniform vec2 uViewport,uCell;uniform float uPerRow,uSlot;varying vec2 vUV;varying vec3 vColor;void main(){vec2 q=(aCorner-.5)*uSlot;gl_Position=vec4(((vec2(aXform.z*q.x-aXform.w*q.y,aXform.w*q.x+aXform.z*q.y)+aXform.xy)/uViewport*2.-1.)*vec2(1,-1),0,1);vUV=(vec2(mod(aGlyph,uPerRow),floor(aGlyph/uPerRow))+aCorner)*uCell;vColor=aColor;}");
ba(h.FRAGMENT_SHADER,"precision mediump float;uniform sampler2D uTex;varying vec2 vUV;varying vec3 vColor;void main(){vec4 c=texture2D(uTex,vUV);gl_FragColor=vec4(c.xyz*vColor,c.w);}");h.linkProgram(n);h.useProgram(n);var ca=async()=>{},p=(a,c,d,e=null)=>{var f=h.createBuffer();h.bindBuffer(h.ARRAY_BUFFER,f);e&&h.bufferData(h.ARRAY_BUFFER,e,h.STATIC_DRAW);a=h.getAttribLocation(n,a);h.enableVertexAttribArray(a);h.vertexAttribPointer(a,c,h.FLOAT,!1,0,0);k.vertexAttribDivisorANGLE(a,d);return f};
p("aCorner",2,0,new Float32Array([0,0,1,0,0,1,1,1]));var da=p("aGlyph",1,1),ea=p("aColor",3,1),fa=p("aXform",4,1),ha=h.createTexture();h.bindTexture(h.TEXTURE_2D,ha);h.texParameteri(h.TEXTURE_2D,h.TEXTURE_WRAP_S,h.CLAMP_TO_EDGE);h.texParameteri(h.TEXTURE_2D,h.TEXTURE_WRAP_T,h.CLAMP_TO_EDGE);h.texParameteri(h.TEXTURE_2D,h.TEXTURE_MIN_FILTER,h.LINEAR);h.pixelStorei(h.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);h.enable(h.BLEND);h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA);
var q,r,t,u,v,w,x,y,z,A,B,C,D,ja=0,E=0,F=0,G=0,H=new Map,I=0,J=0,K="",L=[],M=[],ka=0,N=0,Q=0,R=0,S=document.createElement("canvas"),T=S.getContext("2d");
function la(a,c){N=Math.max(11,Math.min(14,Math.round(a/64)));Q=Math.ceil(N*1.5);R=Math.ceil(Q*c);N!==ka&&(ka=N,S.width=16*R,S.height=Math.ceil(L.length/16)*R,T.textBaseline="middle",T.textAlign="center",T.font=`${N*c}px waterfall, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`,T.fillStyle="#fff",T.clearRect(0,0,S.width,S.height),B=T.measureText("M").width/c,C=Math.ceil(N*1.15),L.forEach((d,e)=>{T.fillText(d,(e%16+.5)*R,(Math.floor(e/16)+.5)*R)}),h.bindTexture(h.TEXTURE_2D,
ha),h.texImage2D(h.TEXTURE_2D,0,h.RGBA,h.RGBA,h.UNSIGNED_BYTE,S))}
function ma(){var a=b.clientWidth,c=b.clientHeight;if(!(a<1||c<1)){var d=window.devicePixelRatio||1;b.width=a*d;b.height=c*d;h.viewport(0,0,b.width,b.height);la(a,d);y=Math.max(8,Math.floor(Math.min(a*.95, 880)/B));z=Math.max(6,Math.floor(((c-24)*.85)/C));D=Math.hypot(B,C);A=y*z;d=(f,...g)=>{f=h.getUniformLocation(n,f);g.length===1?h.uniform1f(f,g[0]):h.uniform2f(f,g[0],g[1])};d("uViewport",a,c);d("uCell",R/S.width,R/S.height);d("uPerRow",16);d("uSlot",Q);A>ja&&(ja=A,q=new Float64Array(A),r=new Float64Array(A),t=new Float64Array(A),
u=new Float64Array(A),v=new Float64Array(A));F=Math.round((a-(y-1)*B)/2);G=Math.round(C*1.5+24);x=[];a=[];c=new Map(L.map((f,g)=>[f,g]));for(d=0;d<A;d++){var e=Math.floor(d/y);q[d]=t[d]=d%y*B;r[d]=u[d]=e*C;v[d]=e===0?0:1;e=K[d%K.length];c.has(e)&&(x.push(d),a.push(c.get(e)))}E=x.length;w=new Float32Array(E*4);h.bindBuffer(h.ARRAY_BUFFER,fa);h.bufferData(h.ARRAY_BUFFER,w,h.DYNAMIC_DRAW);h.bindBuffer(h.ARRAY_BUFFER,da);h.bufferData(h.ARRAY_BUFFER,new Float32Array(a),h.STATIC_DRAW);H.clear();na();I=10;
U()}}function V(a,c,d,e){var f=v[a],g=v[c],l=f+g;if(l!==0){var O=q[c]-q[a],P=r[c]-r[a],ia=Math.sqrt(O*O+P*P)+1E-9;d=(ia-d)/ia*e;f/=l;g/=l;q[a]+=O*d*f;r[a]+=P*d*f;q[c]-=O*d*g;r[c]-=P*d*g}}var oa=a=>{var c=b.getBoundingClientRect();return{x:a.clientX-c.left-F,y:a.clientY-c.top-G}},W=a=>{var c=H.get(a.pointerId);c&&(v[c.n]=c.w,t[c.n]=q[c.n],u[c.n]=r[c.n],H.delete(a.pointerId),I=10,U())};
Object.entries({down:a=>{var c=oa(a),d=1E3,e=-1;for(let f=0;f<A;f++){let g=(c.x-q[f])**2+(c.y-r[f])**2;g<d&&(d=g,e=f)}e>-1&&(H.set(a.pointerId,{n:e,w:v[e],h:q[e]-c.x,t:r[e]-c.y,x:c.x,y:c.y}),v[e]=0,I=10,U())},move:a=>{var c=H.get(a.pointerId);c&&(a=oa(a),c.x=a.x,c.y=a.y,I=10,U())},up:W,cancel:W,leave:W}).forEach(([a,c])=>window.addEventListener("pointer"+a,c));b.addEventListener("touchstart",a=>a.preventDefault(),{passive:!1});
function na(){var a=window.matchMedia("(prefers-color-scheme: dark)").matches,c=m.bg[a?1:0];h.clearColor(c[0],c[1],c[2],1);if(E){c=new Float32Array(E*3);for(let d=0;d<E;d++){let e=m[M[x[d]%K.length]][a?1:0];c[d*3]=e[0];c[d*3+1]=e[1];c[d*3+2]=e[2]}h.bindBuffer(h.ARRAY_BUFFER,ea);h.bufferData(h.ARRAY_BUFFER,c,h.STATIC_DRAW)}}window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",na);var X=null,Y=0,Z=0,pa=1E3/60;
function U(){X||(Y=performance.now(),J=0,X=requestAnimationFrame(qa))}
function qa(a){X=null;var c=Math.max(0,Math.min(a-Y,100));Y=a;Z+=c;for(a=0;Z>=pa;){Z-=pa;for(var d of H.values())q[d.n]=d.x+d.h,r[d.n]=d.y+d.t,t[d.n]=q[d.n],u[d.n]=r[d.n];c=0;for(var e=0;e<A;e++){if(v[e]===0)continue;var f=q[e],g=r[e];q[e]=f+(f-t[e])*.981;r[e]=g+(g-u[e])*.981+1;t[e]=f;u[e]=g;f=Math.abs(q[e]-f)+Math.abs(r[e]-g);f>c&&(c=f)}c>a&&(a=c);for(c=0;c<8;c++)for(e=0;e<A;e++)f=Math.floor(e/y),g=e%y,f<z-1&&V(e,e+y,C,.45),g<y-1&&V(e,e+1,B,.45),f<z-1&&g<y-1&&(V(e,e+y+1,D,.1),V(e+1,e+y,D,.1)),f<
z-2&&V(e,e+y*2,C*2,.45*.8),g<y-2&&V(e,e+2,B*2,.45*.8);for(var l of H.values())q[l.n]=l.x+l.h,r[l.n]=l.y+l.t,t[l.n]=q[l.n],u[l.n]=r[l.n]}a<.05?J++:J=0;for(d=0;d<E;d++)l=x[d],f=l+y,a=1,c=0,f<A&&(e=q[f]-q[l],f=r[f]-r[l],f<.1&&(f=.1),g=Math.hypot(e,f),g>0&&(a=f/g,c=-e/g)),w[d*4]=q[l]+F,w[d*4+1]=r[l]+G,w[d*4+2]=a,w[d*4+3]=c;h.bindBuffer(h.ARRAY_BUFFER,fa);h.bufferSubData(h.ARRAY_BUFFER,0,w);h.clear(h.COLOR_BUFFER_BIT);k.drawArraysInstancedANGLE(h.TRIANGLE_STRIP,0,4,E);I>0&&(I--,J=0);if(J<30||H.size>0)X=
requestAnimationFrame(qa)}var ra=0;(new ResizeObserver(()=>{if(K.length>0){let a=document.body.clientWidth;a!==ra&&(ra=a,ma())}})).observe(document.body);
window.addEventListener("DOMContentLoaded",async()=>{await document.fonts.ready;await ca();K=document.querySelector('pre[data-snippet-id="cloth-js"] code').textContent;K=K.replace(/\t+/g," ");L=[...(new Set(K))].filter(a=>a.trim().length>0);M=Array(K.length).fill("def");for(let a of K.matchAll(aa)){let c="def";a.groups.com?c="com":a.groups.str?c="str":a.groups.kwd?c="kwd":a.groups.num?c="num":a.groups.fun?c="fun":a.groups["var"]&&(c="var");for(let d=0;d<a[0].length;d++)a.index+d<M.length&&(M[a.index+d]=c)}ma()});}).call(this);