JS1k 2015 - 2192 - Details - A hyped JavaScript golfing competition

Author:

Peter van der Zee

Twitter:

GitHub:

qfox

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

qfox.nl

Compo:

webgl

Demo link:

https://js1k.com/2015-hypetrain/demo/2192

Shortlink:

https://js1k.com/2192

Blog post:

qfox.nl/weblog/344

Bytes:

1022

Chars:

1022

Submission

for(_='),~)~R&&aQ0Q<Og[Nf~NMatKloKJ<1.ItionHfuncHGLocaH%(p$$,#z:.y-1ra);er="](f=NA.x.5ttribtexAmod(x-m,,1}"~NBb.clientinAryuffgl_FgCo	&&e?m.niformcreKe;void ma(){Progm(Shad"](vec){u3f(NLwith(g)NCshadSource"F=35633~"aute 2 pgl_PosiH=4#0compileMDKtachp=~MC](F~"precision mediump fJ;u 3 y,mfJ z=35.,v=+m,4e2)/2e2,x,c,r;2 d=2("+[a.width,a.height]+"~l=yy/d,s=	ordy/d*2..,p=d*$ow(length(s~v>1?3.-v:v)*2(cos(r=Kan(s,sRs(r))*+~o=p,zx=degrees(rt i=t(360.Ra=t(c=distance(*d,p)80.~g=i-90<0Q>O70?20.)I?:1:0;bool e=a>1O20||a>5O60;	lor=g<0xxxg>0?i==89zzxi<2zxx4(l,c>z?2.-c/c/z,.2):e?mxxz*:x0.)>2.Q>-9Q<80?4(.4,.2,.1):oI||oI?m.zzz4$/d,l](MD]#f~lkp~usep~bdB(U=34962,B(RbDKa(U,new FJ32([f=,f,h=1,f,f]~U+82~enableV$l=getA%#"p"RvPot$l,2,5126,!1,0,0~G c(getU%"]#"m"~0,++fdws(5,0,4requestAnimaHFme(c)}(a.onmousemove=G(b]#"y"~X,Y)})';z=/[^ -"&-FLPS-}]/.exec(_);)with(_.split(z))_=join(shift());eval(_)

Description

go round and round. And round. And round. Move mouse for psychedelic effects. (This entry will not compete for prizes) * Entry updated to fix a bug in IE and various mobiles. Firefox/win won't work because they use old version to compile to DX. Time will heal that wound ;) * My first webgl demo. Probably spent about a day and a half on this, part of it being sick. It was very interesting to create a webgl demo. Doing the hard work in the fragment shader really changes how you think about painting something on screen. After golfing but before crunching the fragment shader stands at 558 bytes. The vertex shader is 54 bytes. The JS itself is 581. The total is 1193 and the rest is kicked down with RegPack (thanks @Siorki, @xem!). The JS runs in a with block of the gl context. It consists of a shader loader (about 169 bytes), a tiny buffer to draw a rectangle (185 bytes, buffers are expensive), passing on the frame counter (49 bytes), passing on mouse coords (69 bytes), and requestAnimationFrame which draws a triangle strip. The vertex shader is pretty much an identity function. It'll get four coordinates for me, drawing two triangles forming the full rectangle of the screen. You can reduce that shader by using quads instead of tuples but it ends up being more expensive, in my case at least. The fragment shader is some primitive pixel checking combined with a barrel distortion effect I created recently. Then golfed down hard. I used two different shader minifiers (which are still pretty basic, mostly var renaming and whitespace removal), both threw up on certain syntax but one seems to accept what another won't so that worked out. These shader minifiers mainly helped out with quickly checking size since nearly all the shader golfing was done manually. http://ctrl-alt-test.fr/minifier/index http://glslunit.appspot.com/compiler.html It should be noted that I'm pretty much a WebGL noob. Golfing shaders is definitely a whole new ballgame compared to JS. And not knowing every itty bitty language spec detail makes it an interesting challenge. Learned a lot of WebGL and probably still made many rookie mistakes (please do tell me if you spot one). All in all, it was a bumpy fun ride. Can I get out now please, I'm getting dizzy...

Base64 encoded

Zm9yKF89Jyksfil+UiYmYVEwUTxPZ1tOZn5OTWF0S2xvS0o8MS5JdGlvbkhmdW5jSEdMb2NhSCUocCQkLCN6Oh8ueR4tMR1yYRwpOxtlcho9IhldKGY9TkEYLngXLjUWdHRyaWIVGnRleEEVFG1vZCgTE3gtbR4sEiwxEREbfSJ+TkIQYi5jbGllbnQPaW4OQXIceQx1ZmYaC2dsX0YcZ0NvCSYmZT9tLghuaWZvcm0HY3JlS2UGO3ZvaWQgbWEOKCl7BVByb2ccbSgEU2hhZBoiXSgDdmVjAil7dQczZihOTAF3aXRoKGcpTkMZc2hhZBpTb3VyY2UiGBkGA0Y9MzU2MzN+ImEVdXRlIAIyIHAFZ2xfUG9zaUg9AjQjMBAZY29tcGlsZQNNRBlLdGFjaANwPQYEfk1DGF0oRh1+InByZWNpc2lvbiBtZWRpdW1wIGZKO3UHIAIzIHksbQVmSiB6PTM1Lix2PRYrE20eLDRlMikvMmUyLHgsYyxyOwIyIGQ9AjIoIitbYS53aWR0aCxhLmhlaWdodF0rIn5sPXkXeS9kLHM9CW9yZBd5L2QqMi4dLixwPWQqJG93KGxlbmd0aChzfnY+MRY/My4tdjp2KSoCMihjb3Mocj1LYW4ocx4scxdScw4ocikpKhYrFn5vPRNwLHobeD1kZWdyZWVzKHIbDnQgaT0OdCgSMzYwLlJhPQ50KGM9ZGlzdGFuY2UoFipkLHApHTgwLn5nPWktOTA8MFE+TzcwPxIyMC4pST8dOjE6MDtib29sIGU9YT4xTzIwfHxhPjVPNjA7CWxvcj1nPDAIeHh4H2c+MD9pPT04OQh6engfaTwyCHp4eB8CNChsFyxjPno/Mi4tYy8fYy96LC4yESk6ZT9tF3h4eioWOhN4ETAuKT4yLlE+LTlRPDgwPwI0KC40LC4yLC4xESk6bxdJfHxvHkk/bS56enofAjQkL2QsbB4QXShNRF0jZn5sDmsEcH51c2UEcH5iDmRCCyhVPTM0OTYyLAZCCyhSYgtES2EoVSxuZXcgRkozMgwoW2Y9HSxmLGg9MSxmLGYRERFdflUrODJ+ZW5hYmxlVhQMJGw9Z2V0QRUlIyJwIlJ2FFBvDnQaJGwsMiw1MTI2LCExLDAsMH5HIGMoARlnZXRVByUiXSMibSJ+MCwrK2YRG2QcdwxzKDUsMCw0G3JlcXVlc3RBbmltYUhGHG1lKGMpfShhLm9ubW91c2Vtb3ZlPUcoYgFdIyJ5In4PWCwPWREpfSknO3o9L1teIC0iJi1GTFBTLX1dLy5leGVjKF8pOyl3aXRoKF8uc3BsaXQoeikpXz1qb2luKHNoaWZ0KCkpO2V2YWwoXyk=

Original source

// this was my version before actual golfing started
// https://gist.github.com/qfox/1f6b1f1b42a0f15bc635

<script type="f">
  precision highp float;
 
  uniform vec2 m;
  uniform float t;
 
  vec2 distort(vec2 p, float w) {
    float u_barrel_power = 1.0 + 2.0 * ((m.x / w) - 0.5);
 
    float h = mod(t, 200.0) / 200.0;
    if (mod(t, 400.0) >= 200.0) h = 1.0 - h;
    u_barrel_power = 0.5 + h;
 
    float theta  = atan(p.y, p.x);
    float radius = length(p);
    radius = pow(radius, u_barrel_power);
    p.x = radius * cos(theta);
    p.y = radius * sin(theta);
    return 0.5 * (p + 1.0);
    return p / 4.0;
  }
 
  void main() {
    float w = '+a.width+'.0;
    float h = '+a.height+'.0;
    vec2 wh = vec2(w, h);
 
    float pi = 3.14;
    float pi2 = 2.0 * pi;
    vec2 xy = gl_FragCoord.xy;
 
    vec2 d = distort((xy/vec2(w,h)) * 2.0 - 1.0, w);
 
    float r = distance(0.5 * wh, d * wh);
    float a = degrees(atan((0.5 - d.x) * wh.x, (0.5 - d.y) * wh.y) + pi);
 
    float train_pos = mod(t, 360.0);
 
    float g = mod(a - train_pos + 180.0, 360.0) - 180.0;
    bool is_train = g > 0.0 && g < 90.0 && r > 190.0 && r < 260.0;
    bool is_gap = floor(g) == 60.0 || floor(g) == 61.0 || floor(g) == 20.0 || floor(g) == 21.0 || floor(g) == 40.0 || floor(g) == 41.0;
    bool is_chain = r > 215.0 && r < 235.0;
 
    if (is_train && (!is_gap || r > 215.0 && r < 235.0)) {
        if (is_gap && is_chain) gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        else if (floor(g) == 89.0 && (r > 200.0 && r < 210.0 || r > 220.0 && r < 230.0 || r > 240.0 && r < 250.0)) gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
        else if (floor(g) == 0.0 && (r > 200.0 && r < 210.0 || r > 240.0 && r < 250.0)) gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        else gl_FragColor = vec4(0.0, (clamp(r-190.0, 0.0, 35.0) - clamp(r-225.0, 0.0, 35.0)) / 35.0, 0.2, 1.0);
    }
    else if (r > 200.0 && r < 210.0 || r > 240.0 && r < 250.0) gl_FragColor = vec4(0.541, 0.541, 0.541, 1.0);
    else if (mod(floor(a+2.0), 10.0) > 2.0 && r > 180.0 && r < 270.0) gl_FragColor = vec4(0.411, 0.298, 0.149, 1.0);
    else if (mod(floor(d.x * w), 30.0) == 0.0 || mod(floor(d.y * h), 30.0) == 0.0) gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    else gl_FragColor = vec4(xy/vec2(w,h), m.y/h, 1.0);
  }
</script>
<script type="demo">
  //var FRAGMENT_SHADER = 35632; // fragment shader
  //var VERTEX_SHADER = 35633; // vertex shader
  //var COMPILE_STATUS = 35713;
  //var ARRAY_BUFFER = 34962;
  //var STATIC_DRAW = 35044
  //var FLOAT = 5126;
  //var TEXTURE_2D = 3553;
  //var POINTS = 0;
  //var TRIANGLES = 4;
 
  (function() {
    var p
    var v,f
    var S = 'Shader'
    var A
    var B
    var C
    var D
    var P = 'Program'
    var U;
    var m;
 
    try {
      g[C='shaderSource'](v=g[A='create'+S](35633),'attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);}');g[B='compile'+S](v);g[D='attach'+S](p=g['create'+P](),v);g[C](f=g[A](35632),'F');g[B](f);g[D](p,f);g['link'+P](p);g['use'+P](p);
 
      if (!g.getShaderParameter(v, g.COMPILE_STATUS)) throw new Error("Could not compile shader: " + g.getShaderInfoLog(v));
      if (!g.getShaderParameter(f, g.COMPILE_STATUS)) throw new Error("Could not compile shader: " + g.getShaderInfoLog(f));
    } catch (e) {
      console.error(e && e.stack || e);
    }
 
    g.bindBuffer(U=34962,g.createBuffer());g.bufferData(U,new Float32Array([m=-1,m,1,m,m,1,m,1,1,m,1,1]),35044);g.enableVertexAttribArray(pl=g.getAttribLocation(p,'p'));g.vertexAttribPointer(pl, 2, 5126, false, 0, 0);
    var ml = g.getUniformLocation(p,'m');a.onmousemove=function(e){g.uniform2f(ml, e.clientX, e.clientY);};
    var frame = 0, tl = g.getUniformLocation(p,'t');
    (function r(){
    g.uniform1f(tl, ++frame);
    g.drawArrays(4, 0, 6);requestAnimationFrame(r);
    })();
  })();
</script>
<script>
  document.querySelector('[type="demo"]').textContent = document.querySelector('[type="demo"]').textContent.replace("'F'", "'"+document.querySelector('[type="f"]').textContent.replace(/\n/g, ' ')+"'");
</script>



// this is the state of the shader somewhere during golfing
// https://gist.github.com/qfox/801c8d87d903f8f3bf12

  precision lowp float;
  uniform vec2 m;
  uniform float t;
 
  void main(){
    float
        HALF_TRAIN_WIDTH=35.,
        TRAIN_ANGLE=.5+mod(t,4e2)/2e2,
        HOEK_VERTEX,
        FRADIUS,
        JATAN;
 
    vec2
        WH=vec2('+[a.width,a.height]+'),
        PIXPOS=gl_FragCoord.xy/WH*2.-1.,
        TRANSPOS_ABS=WH*(pow(length(PIXPOS),TRAIN_ANGLE>1.5?3.-TRAIN_ANGLE:TRAIN_ANGLE)*vec2(cos(JATAN=atan(PIXPOS.y,PIXPOS.x)),sin(JATAN))*.5+.5);
 
    HOEK_VERTEX=degrees(JATAN);
 
    int
        ANGLE_DIFF=int(mod(HOEK_VERTEX-t,360.)),
        RADIUS=int(FRADIUS=distance(.5*WH,TRANSPOS_ABS)-180.);
 
    bool
        BETWEEN=mod(HOEK_VERTEX-t,20.)<1.,
        IN_TRAIN=ANGLE_DIFF-90<0&&RADIUS>0&&RADIUS<70,
        TRAIN_RANGE=RADIUS>10&&RADIUS<20||RADIUS>50&&RADIUS<60;
 
    vec4 O=vec4(0,1,TRANSPOS_ABS);
    gl_FragColor=IN_TRAIN&&BETWEEN&&RADIUS>25&&RADIUS<45?O.xxxy:IN_TRAIN&&!BETWEEN?ANGLE_DIFF==89&&(TRAIN_RANGE||RADIUS>30&&RADIUS<40)?O.yyxy:
    ANGLE_DIFF==0&&TRAIN_RANGE?O.yxxy:vec4(m.x/WH.x,FRADIUS>HALF_TRAIN_WIDTH?2.-FRADIUS/HALF_TRAIN_WIDTH:
    FRADIUS/HALF_TRAIN_WIDTH,.2,1):TRAIN_RANGE?O.xxxy*.5:mod(HOEK_VERTEX,10.)>2.&&RADIUS>-9&&RADIUS<80?vec4(.4,.2,.1,1):
    mod(floor(TRANSPOS_ABS).x,HALF_TRAIN_WIDTH)==0.||mod(floor(TRANSPOS_ABS).y,HALF_TRAIN_WIDTH)==0.?O.yyyy:vec4(PIXPOS,m.y/WH.y,1);
  }

JS1k: The JavaScript code golfing competition

2015 - The JS1k hype train is real!

Wheels of the train