JS1k 2017 - 2851 - Details - A magical JavaScript golfing competition

Author:

Jonas Höglund

Twitter:

GitHub:

FireyFly

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

firefly.nu

Compo:

webgl

Demo link:

https://js1k.com/2017-magic/demo/2851

Shortlink:

https://js1k.com/2851

Blog post:

please update here!

Bytes:

1021

Chars:

865

Submission

for(e="",b="for(i in g)g[i[0]+i[6]]=Ň];r=.1;a.style.width=Šheight='300px';onkeyup=t=>{r+Ï[6,,-6][t?t.which-37:0]|0;with(g)p=cP(),sS(s=cS(FN),'precision hޛp float;vec3 dÒS(Ñs){s=mat3(cos('+r+'),0.,sinţ1.¼-ǲО)*s;߭ X=m̓abs(s).x,ûz),aȹmʗy)͗c͕length(s-s*൸(ં0.)),ɬ೜)ɻѭɐ;return max(૟૕<(c<.34?.86:ċ4?1.2-cĠ9&&a<.65&&!(cø||.2<aǽ3)?ຸc+.15,ƃ2Յ1.):Ň0ś78:ѕȣ:Єå॔.x)+úy)>1.9?0.ɄzɃyɆ1.)?ᐳvec2(X+.1,΋+.05))<.1||ʹ-ʽƫ<ƫ&&X+ᘀȣ9?ᨸ.7,.8):.4>cǘ):ᓝ?ዲѳű.6):ҽ⋷);}⳶H㎱䈠ǖt=-.002;t<Ò+=ã01)if⫝̸S(s+t*d))>؟☗t;û0.;}void main(){ߚ,Z=normalize(ǀ(-.4,1.));dʏZ+cross(Z,ゃ*(gl_FragCoord.x*.001-.3)ЛҜ-ҧ,ZӬyӥ);Ƚlor=ӟ4ᚱᕤ4.;t<7.ᓻ2ᓮ=ࣝ2ࣝ7,-5.)ᙒ{ނa䭘dot(ᕓH(s+1e-3䖰-ȷ-1ɇ,жǻ1лɀк1лȽѓ-൯≖-.9ʜ*S(s)*.3ψ;break;}}'),ceȣ,aS(p,s朜+1),'attribute ڗ4 p;⮼gl_Position=p;قlo(p),ug¼bf(0x8892,cB(eV(0คt&&dr(6,vA(bDˈInt8Array.of(-峆1,-1),̔e4),2,5120,᠉,4)}稼()",i=0;C=b[i++];e+=v<62?C:e.substr(-v/20,v%20))v=C.charCodeAt()-64;eval(e)

Description

(GPU-intensive) WebGL (GLSL) raymarcher. Use <Left>/<Right> to rotate the cube and re-render it. This is a simple (and very dumb, fixed-step-size) raymarcher written as a GLSL shader, depicting a companion cube from Portal. The scene and colours are hardcoded into the shader. To make it ever so slightly more interactive, one can rotate the cube step-by-step, with the cube being re-rendered each time. Unfortunately the raymarcher is far too resource-intensive to work in realtime. The demo is compressed with a custom LZ-like compressor (quite similar to that used in the Code Compression demo, actually, although I didn't know about this demo at the time). Backreferences are encoded as a single codepoint `dist*21 + count`, where 21 acts as an upper limit on the count (number of bytes a backref copies). Here's a breakdown of what the bytes are used for, since I thought that would be interesting to include: 1021 Entire demo 85 ├── Decompressor 936 └── Compressed payload (inflates to 1641 bytes) 355 ├── JS (WebGL setup/onkeyup event handler) 1286 └── GLSL shader 657 ├── Scene description (shape and colours) 629 └── Raymarcher implementation

Base64 encoded

Zm9yKGU9IiIsYj0iZm9yKGkgaW4gZylnW2lbMF0raVs2XV09xYddO3I9LjE7YS5zdHlsZS53aWR0aD3FoGhlaWdodD0nMzAwcHgnO29ua2V5dXA9dD0+e3Irw49bNiwsLTZdW3Q/dC53aGljaC0zNzowXXwwO3dpdGgoZylwPWNQKCksc1Mocz1jUyhGTiksJ3ByZWNpc2lvbiBo3ptwIGZsb2F0O3ZlYzMgZMOSUyjDkXMpe3M9bWF0Myhjb3MoJytyKycpLDAuLHNpbsWjMS7CvC3HstCeKSpzO9+tIFg9bcyTYWJzKHMpLngsw7t6KSxhyLltypd5Kc2XY82VbGVuZ3RoKHMtcyrgtbgo4KqCMC4pKSzJrOCznCnJu9GtyZA7cmV0dXJuIG1heCjClOCrn+CrlTwoYzwuMzQ/Ljg2OsSLND8xLjItY8SgOSYmYTwuNjUmJiEoY8O4fHwuMjxhx70zKT/gurhjKy4xNSzGgzLVhTEuKTrFhzDFmzc4OtGVyKM60ITDpeCllC54KSvDunkpPjEuOT8wLsmEesmDecmGMS4pP+GQs3ZlYzIoWCsuMSzOiysuMDUpKTwuMXx8yrktyr3GqzzGqyYmWCvhmIDIozk/4ai4LjcsLjgpOi40PmPHmCk64ZOdP+GLstGzxbEuNik60r3ii7cpO33is7ZI446x5Iigx5Z0PS0uMDAyO3Q8w5IrPcOjMDEpaWbiq5xTKHMrdCpkKSk+2J/imJd0O8O7MC47fXZvaWQgbWFpbigpe9+aLFo9bm9ybWFsaXplKMeAKC0uNCx/MS4pKTtkyo9aK2Nyb3NzKFos44KDKihnbF9GcmFnQ29vcmQueCouMDAxLS4zKdCb0pwt0qcsWtOsedOlKTvIvWxvcj3TnzThmrHhlaQ0Ljt0PDcu4ZO7MuGTrj3go50y4KOdNywtNS4p4ZmSe96CYeStmGRvdCjhlZNIKHMrMWUtM+SWsC3Ity0xyYcs0LbHuzHQu8mA0Lp/MdC7yL3Rky3gta/iiZYtLjnKnCpTKHMpKi4zz4g7YnJlYWs7fX0nKSxjZcijLGFTKHAsc+acnCsxKSwnYXR0cmlidXRlINqXNCBwO+KuvGdsX1Bvc2l0aW9uPXA72YJsbyhwKSx1Z8K8YmYoMHg4ODkyLGNCKGVWKDDguIR0JiZkcig2LHZBKGJEy4hJbnQ4QXJyYXkub2YoLeWzhjEsLTF/KSzMlGU0KSwyLDUxMjAs4aCJLDQpfeeovCgpIixpPTA7Qz1iW2krK107ZSs9djw2Mj9DOmUuc3Vic3RyKC12LzIwLHYlMjApKXY9Qy5jaGFyQ29kZUF0KCktNjQ7ZXZhbChlKQ==

Original source

// Not commented (alas), but uncompressed and somewhat readable (arguably). Sowwy, golfed by hand.

for(i in g)g[i[0]+i[6]]=g[i];
r=.1;
a.style.width=a.style.height='300px';
onkeyup=t=>{
r+=t=[6,,-6][t?t.which-37:0]|0;
with(g)
p=cP(),
sS(s=cS(FN), `

  precision highp float;

  vec3 d;
  vec3 S(vec3 s){
  s=mat3(cos(`+r+`),0.,sin(`+r+`),0.,1.,0.,-sin(`+r+`),0.,cos(`+r+`))*s;
  float X=min(abs(s).x,abs(s).z),
  a=min(min(abs(s).x,abs(s).y),abs(s).z),
  c=min(min(length(s-s*vec3(1.,0.,0.)),length(s-s*vec3(0.,1.,0.))),length(s*vec3(1.,1.,0.)));
  return max(max(abs(s).x,abs(s).y),abs(s).z)<
  (c<.34?.86
  :c<.4?1.2-c
  :c<.9&&a<.65&&!(c<.65||.2<a&&a<.3)?min(c+.15,a<.2?.86:1.)
  :a<.02?.78
  :c<.65?.8
  :a<.3?.8
  :abs(s.x)+abs(s.y)>1.9?0.
  :abs(s.x)+abs(s.z)>1.9?0.
  :abs(s.y)+abs(s.z)>1.9?0.
  :1.)
  ?length(vec2(X+.1,s.y+.05))<.1||length(vec2(X-.1,s.y+.05))<.1||-.1<s.y&&X+abs(s).y<.19
  ?vec3(1.,.7,.8):
  .4>c?vec3(1.):
  c<.65||.2<a&&a<.3?
  a<.02?vec3(1.,.7,.8):vec3(.6):vec3(1.):vec3(0.);
  }

  float H(vec3 s){
  for(float t=-.002;t<.002;t+=.0001)
  if(length(S(s+t*d))>0.)return t;
  return 0.;
  }

  void main(){
  vec3 s,Z=normalize(vec3(-.4,.4,1.));
  d=normalize(Z+cross(Z,vec3(0.,1.,0.))*(gl_FragCoord.x*.001-.3)+
  cross(cross(Z,vec3(0.,-1.,0.)),Z)*(gl_FragCoord.y*.001-.3));
  gl_FragColor=vec4(0.);
  for(float t=4.;t<7.;t+=.002)
  if(length(S(s=vec3(2.,-1.7,-5.)+t*d))>0.){
  gl_FragColor=vec4(acos(dot(
  normalize(vec3(
  H(s+1e-3*vec3(1.,0.,0.))-H(s-1e-3*vec3(1.,0.,0.)),
  H(s+1e-3*vec3(0.,1.,0.))-H(s-1e-3*vec3(0.,1.,0.)),
  H(s+1e-3*vec3(0.,0.,1.))-H(s-1e-3*vec3(0.,0.,1.)))),
  -normalize(vec3(.4,.4,-.9))))*S(s)*.3,1.);
  break;
  }
  }

`),
ce(s),aS(p,s),
sS(s=cS(FN+1),'attribute vec4 p;void main(){gl_Position=p;}'),
ce(s),aS(p,s),
lo(p),
ug(p),
bf(0x8892,cB(eV(0))),
t&&dr(6,vA(bD(0x8892,Int8Array.of(-1.,1.,1,-1,-1),0x88e4),2,5120,0.,1.,0.),4)
};
onkeyup()

JS1k: The JavaScript code golfing competition

2017 - It's like magic

Friendly cube raymarcher