<canvas id="canvas"></canvas>
<!-- VertexShader code here -->
<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
precision highp float;
  in vec4 position;

  void main() {
    gl_Position = vec4( position );
  }
</script>

<!-- FragmentShader code here -->
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
precision highp float;
  
out vec4 fragColor;
  
uniform vec4 u_mouse;
uniform vec2 u_resolution;
uniform float u_time;

#define R           u_resolution
#define T           u_time
#define M           u_mouse

#define PI          	3.14159265358
#define PI2         	6.28318530718

#define S smoothstep
#define L length

#define Q(a) mat2(cos(a + vec4(3,14,36,3)))
#define H21(a) fract(sin(dot(a,vec2(21.23,41.32)))*43758.5453)

#define N(p,e) vec3(map(p-e.xyy).x,map(p-e.yxy).x,map(p-e.yyx).x)
#define H(hs) .5+.4*cos(PI2*hs+2.*vec3(.95,.97,.90)*vec3(.95,.55,.15))

//scale
const float sz=3.,hf=sz/2.,hz=hf*.25;
const vec2 vc = vec2(0,.5);

vec2 sid,idi;
float mt=.0,ms=.0,fs=.0,slow=.0,glow=.0;

vec2 map(in vec3 p) {
    vec2 r = vec2(1e5,0);
    vec3 q = p;
    vec2 id=floor((q.xz+hf)/sz);
    vec2 dd=id;
    if(mt<2.){
        q.x += (mod(id.y,2.)>.5) ? fs : -fs;
    } else {
        q.z += (mod(id.x,2.)>.5) ? fs : -fs;
    }
    
    id=floor((q.xz+hf)/sz);
    if(mt<2.) id.x+=1.;
    idi=id;
    
    q.xz=mod(q.xz+hf,sz)-hf;
    p.xz=mod(p.xz+hf,sz)-hf;

    float d = L(q-vec3(0,.75,0))-(hz*.5);
    vec3 dp = p;
    dp.y+=.15*sin(dp.x*2.1);
    vec3 dq = p;
    dq.y+=.15*cos(dq.z*2.1);
    float e = min(L(dq.xy)-.05,L(dp.zy)-.05);
    float f = L(p.y-1.)-.1;
    
    float hs=H21(dd);

    if(hs>.5) {
    vec3 pp = p;
         pp.xz=abs(pp.xz)-(hf*.5);pp.y-=.75;
         f = min(L(max(abs(pp)-vec3(.005,hs,.005),0.))-.025,f);
         float lm =L(pp+vec3(0,hs,0))-.095;
         f = min(lm,f);
         slow += .0001/(.0005+lm*lm);
    }

    p.xz=abs(p.xz)-hf;p.y-=.5;
    float g = L(max(abs(p)-vec3(hz,hf,hz),0.))-.025;
    
    if(f<r.x) r=vec2(f,2);
    if(d<r.x) r=vec2(d,1);
    if(e<r.x) r=vec2(e,3);
    if(g<r.x) r=vec2(g,4);

    return r;
}

void main() { 
    vec2 F = gl_FragCoord.xy;

    float tt = T;
    mt=mod(tt,4.);
    fs=fract(tt*.5)*sz;
    
    vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y),
         id= vec2(0);

    vec3 C = vec3(.0),
         p = vec3(0),
        ro = vec3(0,0,5),
        rd = normalize(vec3(uv, -1.0));

    mat2 rx = Q(.78+(M.y/R.y)*.25),
         ry = Q(-1.+(M.x/R.x)*.65);

    ro.yz*=rx; ro.xz*=ry; 
    rd.yz*=rx; rd.xz*=ry;

    float d=0.,m=0.;
    for(int i=0; i++<128 && d<100.; ){
        p = ro + rd * d;
        p.xz+=vec2(.75,.25)*T;
        vec2 t = map(p);
        d+=i<32?t.x*.65:t.x;
        m=t.y;
    }
    sid=idi;
    glow=slow;
    float t = map(p).x,
         sd = 1.,
         z=.01,
         hs = H21(sid);

    vec2 e = vec2(d*.001,0);
    vec3 l = normalize(vec3(-5,-15,-5)),
         n = t - N(p,e);
         n = normalize(n);

    for(float z=.01;z<18.;) {
        float h = map(p+l*z).x;
        if(h<.001) {sd=0.;break;}
        sd = min(sd, 18.*h/z);
        z+=h;
        if(sd<.001) break;
    }

    float ch = mod(sid.x+sid.y,2.)*2.-1.,
          diff = clamp(dot(n,l),.1,.9);
          diff = mix(diff,diff*sd,.75);

    vec3 h = ch>.5?vec3(.2,0,0):vec3(.7);
    
    if(m==2.) {
        h=vec3(.15);
        float sc = 1./sz,
              px=4./R.x;
              
        p.xz-=hf;
        vec2 f = fract(p.xz*sc)-.5;
        float e = min(L(f.x)-.2,L(f.y)-.2),
              d=S(px,-px,abs(abs(e)-.01)-.005);

        e=S(px,-px,e);
        h=mix(h,vec3(.01),e);
        h=mix(h,vec3(.7),d);

    }
    if(m==3.) h=vec3(.5);
    if(m==4.) {
        vec3 f = floor(p*16.);
        float hs = min(H21(f.xy),H21(f.zy));
        h=p.y>-.925?vec3(.05):vec3(.2);
        if(hs>.5 &&p.y>-.925) h=hs>.75?vec3(.9,.9,.2):vec3(.4);
        if(hs<.15&&p.y>-.925) h=vec3(.025);
    }
    C = diff*h;
    glow=S(.01,.65,clamp(glow,0.,.95));
    C = mix(C,vec3(.9,.9,.2),glow);
    C = mix(C,vec3(.1),1.-exp(-.0001*d*d*d));

    fragColor = vec4(pow(C,vec3(.4545)),1);
}

</script>