C=document.body.children.c;c=C.getContext("2d");w=C.width=C.height=120;e=c.getImageData(0,0,w,w);a=e.data;M=Math;A=M.abs;C=M.cos;S=M.sin;F=M.floor;Q=M.sqrt;Mi=M.min;Ma=M.max;w2=w/2;H=0.5;t=4; setInterval(function(){t+=0.05;T=t/5;U=C(T);V=S(T);D=4+(1+S(t*0.2))*4.5;B=H+H*U;for(m=k=0;m<w;m++)for(n=0;n<w;n++){y=p=0;z=t;x=T;f=1;i=(w2-n)*0.1;j=(w2-m)*0.1;u=j*U-i*V;v=j*V+i*U;l=Q(u*u+v*v+w);u/=l;v/=l;for(o=D/l;f>0.031&&p<15;){X=x-F(x)-H;Y=y-F(y)-H;Z=z-F(z)-H;I=Ma(Ma(A(X),A(Y)),A(Z))-A(V/4);d=Y*Y;b=Q(Z*Z+d);J=Mi(b,Q(d+2*X*X)-0.01);f=I*B+J*(1-B);x+=f*u;y+=f*v;z+=f*o;p++}p*=10;a[k+0]=A(o*11+22*S(U*z)/(0.1+V*V));a[k+1]=B*(100-z)+20*f*V/U;a[k+2]=200-p;a[k+3]=255;k+=4}c.putImageData(e,0,0)},30);
C=document.body.children.c;
c=C.getContext('2d');
w=C.width=C.height=120;
e=c.getImageData(0,0,w,w);
a=e.data;
// math's 11
M=Math;
A=M.abs;
C=M.cos;
S=M.sin;
F=M.floor;
Q=M.sqrt;
Mi=M.min;
Ma=M.max;
w2=w/2;
H=.5;
t = 4;
//~ // param twiddling:
//~ onkeydown=function(e)
//~ {
//~ k=e.which;
//~ D += k==49 ? -0.1 : k==50 ? 0.1 : 0;
//~ }
setInterval(
function()
{
t+=.05;
T=t/5;
U=C(T),V=S(T);
D=4+(1+S(t*.2))*4.5;
B=H+H*U;
for(k=0,m=0;m<w;m++)
{
for(n=0;n<w;n++)
{
y=p=0;
z=t; // march along z
x=T; // and along x
f=1; // intensity or inverse fog value
// screeen trafo (poor man's perspective)
i=(w2-n)*.1;
j=(w2-m)*.1;
// rot around z
u=j*U-i*V;
v=j*V+i*U;
// normalize
l=Q( u*u + v*v + w );
u/=l;
v/=l;
o=D/l;
// raymarch
while(f>.031&&p<15)
{
// cone:
//~ d = Q( X*X +Y*Y );
//~ f2 =Ma(A(d-Z), (Ma(Z)-.1)) - A(V/14);
// periodic position raster
X=x-F(x)-H;
Y=y-F(y)-H;
Z=z-F(z)-H;
// cube
I=Ma(Ma(A(X),A(Y)),A(Z)) - A(V/4); // cube, var size
// grid:
d=Y*Y;
b=Q(Z*Z+d);
J=Mi(b,Q(d+2*X*X)-.01);
// mix:
f = I*B + J*(1-B);
// move ray
x+=f*u;
y+=f*v;
z+=f*o;
p++
}
// write pixel
a[k++]=A(o*11 + 22*S(U*z)/(.1+V*V));
a[k++]=B*(100-z)+(20*f*V)/U;
a[k++]=200-p*10;
a[k++]=255;
}
}
c.putImageData(e,0,0)
//~ c.fillText( (0|(D))+" "+(0|(t))+" "+(0|(B*100)), 20, w-30 );
}
,30)
