← NEON NAVE v1
index.html
<meta name=viewport content=width=device-width><body style=margin:0;background:#000;overflow:hidden><canvas id=c style=width:100vw;height:100vh;display:block></canvas><button id=b style="position:fixed;inset:0;margin:auto;width:15em;height:4em;background:0 0;color:#fb8;border:1px solid;font:20px monospace;letter-spacing:.3em;cursor:pointer">NEON NAVE<br>▶ START</button><script>g=c.getContext("webgl");P=g.createProgram();[`attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}`,`precision highp float;uniform vec4 r;float T,K,m;vec3 O,C,g;
mat2 R(float a){return mat2(cos(a),sin(a),-sin(a),cos(a));}
float M(vec3 p){
vec3 q=p;
float d=p.y+1.,e;
m=0.;
q.z=mod(q.z,4.)-2.;
q.x=mod(q.x+3.3,6.6)-3.3;
e=max(max(abs(length(q.xy-vec2(0,2))-3.3)-.25,abs(q.z)-.35),2.-q.y);
q.x=abs(q.x)-3.3;
q.xz*=R(p.y*.2);
q=abs(q)-vec3(.4,9,.4);
e=min(e,length(max(q,0.))+min(max(q.x,q.z),0.)-.08);
if(e<d)d=e,m=1.;
q=p-O;
q.xy*=R(T*.5);
q.yz*=R(T*.3);
e=(length(q)-.6-.1*sin(q.x*4.+T*1.57)*sin(q.y*4.)*sin(q.z*4.)*(.3+K))*.6;
if(e<d)d=e,m=2.;
q=p;
q.z=mod(q.z-T*4.+4.,8.)-4.;
e=length(vec2(length(q.xy-vec2(0,.7))-1.6,q.z))-.03;
g+=(mod((p.z-q.z)/8.,2.)<1.?C:C.yzx)*.003/(.002+e*e);
return min(d,abs(e)+.04);
}
void main(){
T=r.z;
K=exp(-4.*fract(T))*step(4.,mod(T/4.,16.));
vec2 u=(gl_FragCoord.xy*2.-r.xy)/r.y,e=vec2(.002,0),w;
float s=floor(T/16.),x,y=(mod(s,4.)==2.?3.14:sin(s*2.4)*.6)+sin(T*.1)*.2,t,d,D,f,k;
vec3 o=vec3(sin(T*.13+s)*1.1,.3+.6*sin(s*1.7+T*.05),T*2.),v=normalize(vec3(u,1.6-.15*K)),c=vec3(0),a=vec3(1),G,L,p,n,l;
C=.5+.5*cos(mod(s,4.)*.5+vec3(0,2,4));
v.xy*=R(sin(T*.07+s)*.2);
v.xz*=R(y);
O=vec3(0,0,5);
O.xz*=R(y);
O+=o;
O.x*=.3;
O.y=.5+.2*sin(T*.4);
for(int j=0;j<2;j++){
t=0.;g=vec3(0);
for(int i=0;i<90;i++){
d=M(o+v*t);
if(d<.002||t>60.)break;
t+=d*.8;
}
G=g;k=m;
p=o+v*t;
n=normalize(vec3(M(p+e.xyy),M(p+e.yxy),M(p+e.yyx))-M(p));
x=p.z-mod(p.z-T*4.+4.,8.)+4.;
L=vec3(0);
for(int i=0;i<2;i++){
l=vec3(0,.7,x)-p;
D=dot(l,l);
l/=sqrt(D);
L+=(mod(x/8.,2.)<1.?C:C.yzx)*(max(dot(n,l),0.)+pow(max(dot(reflect(v,n),l),0.),20.))/(1.+D*.2);
x+=p.z>x?8.:-8.;
}
f=exp(-t*.05);
w=abs(fract(p.xz*.5)-.5);
d=k==0.?smoothstep(.49,.47,max(w.x,w.y)):1.;
c+=a*((L*5.*(.5+K)+vec3(.01,.02,.04)*(n.y+1.2))*(k==1.?.6:k==0.?.15:.02)*clamp(M(p+n*.3)/.3,0.,1.)*d*f+G*.2*(.6+K));
a*=f*d*(k==1.?.05:k==0.?.15+.7*pow(1.+dot(v,n),3.):.9);
o=p+n*.02;
v=reflect(v,n);
}
c+=exp(-mod(T+48.,64.));
c=c/(1.+c)/(1.+.2*dot(u,u))*min(T/8.,1.);
gl_FragColor=vec4(pow(c,vec3(.45)),1);
}`].map((x,i)=>{g.shaderSource(s=g.createShader(35633-i),x);g.compileShader(s);g.attachShader(P,s)});g.linkProgram(P);g.useProgram(P);g.bindBuffer(34962,g.createBuffer());g.bufferData(34962,new Float32Array([-1,-1,3,-1,-1,3]),35044);g.enableVertexAttribArray(0);g.vertexAttribPointer(0,2,5126,0,0,0);
Z=1;n=o=l=0;
F=_=>{requestAnimationFrame(F);
t=performance.now()/1e3;
if(++n>30){if(t-l>.57&&t-l<3&&Z>.3)Z*=.8;n=0;l=t}
if(Math.abs(t-o-A.currentTime)>.05)o=t-A.currentTime;
w=innerWidth*Z|0;h=innerHeight*Z|0;
if(c.width!=w||c.height!=h)g.viewport(0,0,c.width=w,c.height=h);
g.uniform4f(g.getUniformLocation(P,"r"),w,h,(t-o-z)/.48,0);g.drawArrays(4,0,3)};
b.onclick=_=>{b.onclick=0;b.innerHTML='NEON NAVE';b.style.cssText+=';border:0;transition:9s ease-in;opacity:0;pointer-events:none';n=-99;l=1e9;
A=new AudioContext;S=A.sampleRate;N=S*61.44|0;
B=A.createBuffer(2,N,S);W=[new Float32Array(N),new Float32Array(N)];
X=[B.getChannelData(0),B.getChannelData(1)];D=S*.36|0;Q=-1;bl=pl=0;H=n=>55*2**(n/12);E=Math.exp;I=Math.sin;
for(i=0;i<N;i++){
t=i/S;e=t/.48;a=e/4|0;q=e*4|0;f=e*4%1;k=e%1;v=a%16>3;
if(q!=Q){Q=q;j=(a>>1)%4;r=[0,-4,3,-5][j];m=[3,4,4,3][j];
fb=H(r+(q%8==3||q%8==6?12:0));
fp=[0,m,7].map(x=>H(r+x+24));
fa=H(r+[0,m,7,12,m+12,7,12,m][q%8]+(q%16>7?48:36));
fl=H([12,12,15,12,19,19,17,15,12,12,10,12,7,7,10,12][q>>1&15]+36)}
u=k*.48;
d=v?Math.min(1,k*2.5):1;
x=v?I(6.283*(48*u-7*E(-28*u)))*E(-7*u)*.8:0;
bl+=(t*fb%1*2-1-bl)*(.03+.2*E(-f*4)*(.6+.4*I(e/8)));
if(v)x+=bl*d*.5;
y=Math.random()*2-1;
if(v)x+=y*E(-f*(q%4==2?7:25))*(q%2?.05:.12);
if(a%16>7&&q%8==4||a%16>14&&q%16>7)x+=y*E(-f*5)*.3;
if(a%16==3)x+=y*(e%4)**3/500;
p=0;for(j=0;j<3;j++)p+=t*fp[j]%1+t*fp[j]*1.007%1-1;
pl+=(p-pl)*.1;
p=pl*.07*d*Math.min(1,4-Math.abs(e%8-4));
y=(t*fa%1<.3+.2*I(t)?1:-1)*E(-f*3)*Math.min(f*30,1)*.07*Math.min(1,e/16+.2);
u=e*2%1;
if(a>15)p+=I(6.283*t*fl+I(6.283*t*fl*2)*E(-u*3))*Math.min(u*20,1)*E(-u*2)*.1;
for(j=0;j<2;j++)X[j][i]=Math.tanh(x+(W[j][i]=p+y*(q%2==j?1:.3)+(i>D?W[1-j][i-D]*.45:0)))
}
s=A.createBufferSource();s.buffer=B;s.loop=1;G=A.createGain();G.gain.value=/mute/.test(location)?0:.8;s.connect(G);G.connect(A.destination);s.start();z=A.currentTime;F()};
onkeydown=e=>e.key=="f"&&ondblclick();ondblclick=_=>document.fullscreenEnabled&&document.documentElement.requestFullscreen()</script>