JS1k 2014 - 1910 - Details - A fiery JavaScript golfing competition

Author:

Andrea Venuta

Twitter:

GitHub:

veeenu

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

veeenu.github.io

Compo:

webgl

Demo link:

https://js1k.com/2014-dragons/demo/1910

Shortlink:

https://js1k.com/1910

Blog post:

veeenu.github.io/2014/04/07/js1k-2014-post-mortem.html

Bytes:

893

Chars:

893

Submission

_='(i  g)g[i.mch(/^..|[A-Z]|\\d\\w$/g).jo("")]=g[i:_s;$cos;OPI/8; R(a>[2*_N2*$N)]} ca,b>h=	bshh,acoh h}var p=	?unim m4 m,v;tribute 3 p;4 P=gl_Posit!=m*v*41.z=1.-clamp(P.z-.5,.0.3)gl_FragCo@r=4(3(.0,z*.5,z.82)li?pus?pmG0,[-0.1H0H110.1]clC(0en(2929s=[:i=[:W=32;J=68/W;(I=0;I<=W;I++)(w=R(Ij=0;j<W;j++)s$0],_1]I/4K=W*I,i(j+1)%W,W+jm=	B(&2,m72#F@32s&3,	B()73#Ut16i(X=(a>d=a/128%16;requestAnim!Frame(Xclear(16640E=R(dv=[1HHE[0]E[1],d/4:veA?P=geAL"pG3Q6,vG0,v)enVAA(PdrE(1,4096Q3)})(varyg @wp f@ z;void ma(>funct!unM(geUL"(3496at);	crScG),vec=Mh.(J*j)+w[}",3563,0,-(p,foring.return.push(K+j,K+Array(35044S(,1.2!ion#,new &biB7buD:];>){?P(@loG"HN(O*aQ,512';for(Y in $='QNHG@?>:7&#!	')with(_.split($[Y]))_=join(pop());eval(_)

Description

First piece of demo-ish code I've ever released ever: an endless wireframe tunnel run. The idea came out of a simple game I've been working on which had somewhat convoluted data structures so I decided to try and fit most of it in under 1k for the compo. It is basically the path defined by the 3d function (sin(z), cos(z), z) extruded to a tube geometry, and the camera is moved along the path, and then rendered with barebone shading (model, view and projection matrices, color fades linearly with the z value of each vertex). Producing dirty but extra compact code has for once overpowered my need for cleanliness and order, it was so much fun. I manually cut out all the cruft I could, employing some of the clever techniques I found on other JS1k demos, and then processed the source with Closure Compiler and JSCrush to trim it down.

Base64 encoded

Xz0nFShpIBYgZylnW2kubQdjaCgvXi4ufFtBLVpdfFxcZFxcdyQvZykuam8WKCIiKV09Z1tpOl8PcxY7JA9jb3M7Tw9QSS84OwQgUihhPhhbMipfTgwyKiROKV19BCBjHWEsYj5oPQkdYgFzaB1oLGEBY28daAgYIGh9dmFyIHA9CT8LdW5pFW0gbQc0IG0sdjsHdHJpYnV0ZSAOMyBwOwIONCBQPWdsX1Bvc2l0IT1tKnYqDjQUMS4Iej0xLi1jbGFtcChQLnotLjUsLjAeLhEzKQsCZ2xfRnJhZ0NvQHI9DjQoDjMoLjAseiouNSx6DC44ETIpAWxpP3ABdXM/cAEFbUcwLFstMC4xSBMwH0gTMRMxAxMwLjESXQFjbEMoMB8SHxIfHgFlbigyOTI5CHM9WzppPVs6Vz0zMjtKPTYfOC9XOxUoST0wO0k8PVc7SSsrKRUodz1SKEkMaj0wO2o8VztqKyspcxkkEDBdLF8QMV0TSS80DEs9VypJLGkZGihqKzEpJVcsGlcraghtPQlCKCYyLG03MiNGQAczMhtzHCYzLAlCKCk3MyNVFnQxNhtpHAgoWD0EKGE+ZD1hLzEyOCUxNjtyZXF1ZXN0QW5pbQchRnJhbWUoWAFjbGVhcigxNjY0MAhFPVIoZAh2PVsxSB5IHhITRVswXRNFWzFdLGQvNB46F3ZlQT9QPRdnZUFMFCJwRzNRNiwXBXZHMCx2KQMBZW5WQUEoUAFkckUoMSw0MDk2UTMSKX0pKAgBCBcCdmFyeRZnIEB3cCBmQAcgejt2b2lkIG1hFig+AxISBGZ1bmN0IQV1bk0oF2dlVUwUIgYoMzQ5NgdhdAgpOwkXY3ILAQdTFGMdRyksDnZlYw89TQdoLhAoSipqKSt3WxEIfSIsMzU2MxIsMBMsLRQocCwVZm9yFmluF2cuGHJldHVybhkucHVzaCgaSytqLEsrG0FycmF5KBwMMzUwNDQdUygeLDEfLjIhaW9uIyxuZXcgJgFiaUIGNwFidUQGOl07Pil7P1AoQGxvRyIMSAMDTihPKmFRLDUxMic7Zm9yKFkgaW4gJD0nUU5IR0A/Pjo3JiMhHx4dHBsaGRgXFhUUExIREA8ODAsJCAcGBQQDAgEnKXdpdGgoXy5zcGxpdCgkW1ldKSlfPWpvaW4ocG9wKCkpO2V2YWwoXyk=

Original source

// Shorten GL context function names. Avoided bind()ing since it didn't produce significant compression.
for(i in g) g[i.match(/^..|[A-Z]|\d\w$/g).join("")]=g[i]
// Alias sin, cos and pi/8 to single char variables since those come up in a couple of places
_=Math.sin;$=Math.cos;O=Math.PI/8;

// x = 2 * sin(z), y = 2 * cos(z)
function R(z) {
  return [2*_(O*z),2*$(O*z)]
}

// Compile the shader of source s and type t
function cS(s, t) {
  h = g.crS(t)
  g.shS(h, s)
  g.coS(h)
  return h;
}

var p = g.crP();
// Projection matrix * View matrix * point (model matrix is always identity); send the light intensity z to the fragment shader
g.atS(p,cS("uniform mat4 m,v;attribute vec3 p;varying lowp float z;void main(){vec4 P=gl_Position=m*v*vec4(p,1.);z=1.-clamp(P.z-.5,.0,1.);}",35633))
// Color is rgb(0.0, 0.5, 1.0) * z
g.atS(p,cS("varying lowp float z;void main(){gl_FragColor=vec4(vec3(.0,z*.5,z),.8);}",35632))
g.liP(p)
g.usP(p)

// Ugly hard coded and heavily rounded perspective matrix, good for 16:9
g.unM(g.geUL(p,'m'),0,[-.1, 0, 0, 0, 0, -.2, 0, 0, 0, 0, -1, -1, 0, 0, -.1, 0]);
g.clC(.2,.2,.2,1);
g.en(2929);

// Build the tube geometry
s = [], i = [], W = 32, J=6.28/W;
for(I = 0; I <= W; I++) { // 32 skewed cylinders
  w = R(I); // get point
  for(j = 0; j < W; j++) { // each circle is built with 32 lines
    s.push($(J * j) + w[0], _(J * j) + w[1], - I/4) // a vertex on the circle
    K=W*I;
    i.push(
      K + j,
      K + (j + 1) % W, // current vertex to next vertex on the circle
      K + j,
      K + W + j // current vertex to vertex with the same position on the next circle
    )
  } 
}

// build vertex and index buffers
m = g.crB()
g.biB(34962, m)
g.buD(34962, new Float32Array(s), 35044)
g.biB(34963, g.crB())
g.buD(34963, new Uint16Array(i), 35044);

(X = function(D) {

  // Calculate the point on the curve: divide time by 128 and reduce modulo 16 to loop
  d=(D/128)%16;
  requestAnimationFrame(X)
  g.clear(16640);
  E = R(d);
  // Calculate view matrix
  v = [
   1, 0, 0, 0,
   0, 1, 0, 0,
   0, 0, 1, 0,
   -E[0], -E[1], d/4, 1
  ];
  // vertexAttribPointer(getAttribLocation(), 3, FLOAT, uniformMatrix4fv(getUniformLocation(), 0, v), 0, 0)
  g.veAP(P=g.geAL(p,'p'), 3, 5126, g.unM(g.geUL(p,'v'),0,v), 0, 0);
  g.enVAA(P);
  g.drE(1, 4096, 5123, 0);

})()

JS1k: The JavaScript code golfing competition

2014 - Here be dragons!

Einstein-Rosen