JS1k 2015

February 2015

This month was very busy! I spent almost all my free time working golfing for JS1k.

➾ I contributed to the great invitro made by @subzey, by finding a brand new compression technique, allowing to hash the canvas properties as well as the canvas functions.
You can read more about it in his post mortem and the discussion in this RegPack ticket.
It was very exciting to discover this new technique and save about 50 bytes on a demo we thought we couldn't compress anymore!

---

➾ I gathered the best code-golfed games and apps made during the past months by "the codegolf team" into three compilations:

- Mini Apps Collection
Featuring 7 apps! Mini Code Editor, HTML & CSS minifier, hex viewer, dataURI converter, spritesheet and JSPerf.
(1477b minified, 1024b regpacked)

- Mini Games Collection #1
Mine Sweeper, Pop Tiles, and Game of Life.
(1221b minified, 1023b regpacked)

- Mini Games Collection #2
Simon with sound and 2048.
(1220b minified, 1022b regpacked)

It took a lot of time to fit each of these compilations in 1k, which involved removing some features not compatible with js1k's rules (like accessing "top" and localStorage"), managing to inject big chunks of HTML and JS into the shim with many "document.write", "innerHTML" and "outerHTML"-based hacks, and optimizing the whole code for a better RegPack compression (by repeating code as much as possible, sometimes in very silly ways)...

Thanks to @p01, @subzey, @aemkei, @LauckAndLoad, @bburky, @mathias and @veubeke for their contribution in each of these projects!
You can read more about these apps and games (and their original projects) by clicking the "demo details" button on each demo.

---

➾The theme was "Hype Train", so I couldn't resist making this little hommage to asdfmovie's sequence I like trains. The code has nothing special, just a lot of points coordinates and a loop displaying them with moveTo and lineTo's. This kind of "monotonous" source code packs very well (1472b minified - 902b regpacked)

---

➾ The biggest challenge was of course my "serious" entry, hypeRcube!

With all the success of the 3D demos during the past years, my idea was to produce the first 4D demo of JS1k, featuring an "hypercube" (the 4D equivalent of a 3D cube). I had no precise idea of what I would (or could) do in 1k, but I aimed for some kind of animated / rotating hypercube, like the ones we can see on wikipedia's gifs.

It took more than 10 iterations (10 more or less big rewrites) to become what it is today, and each of these rewrites was marked by a new exciting feature, a compression breakthrough, or a funny bug that made me understand that I was not on the good path. You can tke a look at these beta versions here:

• Proof of concept, very laggy but featuring an intro, perspective, camera rotation and the 6 4D rotations (3.1kb minified, and only 1.3kb regpacked, due to heavy code reuse). This PoC convinced me that doing a 4D demo for js1k was possible! (tweet)

• Beta #1, with more reactive buttons, and intensive golfing (2.0kb minified, 1.1kb regpacked)

• Beta #2, almost fitting in 1k (1.9kb minified, 1037b regpacked)

• Beta #3, golfed intensively (1.6kb minified, 963b regpacked). From this point I knew that I would be able to add many more features and graphical enhancements in my 1kb demo!
Actually, I added features and golfed them at the same time to stay as close as possible to 1kb.

• Beta #4, adding colors, and allowing to play/pause animations... but it's so slow ! (1.5B minified, 1022b regpacked) - funny... bugs.

• Beta #5, enhancing speed and adding a perspective slider going from an isometric view (2.5D) to an exaggerated 3D view... (1.5kb minified, 1030b regpacked)

• Beta #6, adding two color pickers and optimizing the workflow for RegPack (reusing the vars produced by RegPack and putting all the code in a string that will execute itself repeatedly using a timeout (1.58kb minified, 1042b regpacked) - the main achievement here was to achieve drawing the hypercube in a single pass, using only connected edges and not passing more than one time by the same edge, thanks to this wonderful crazy path I've drawn on paint (other funny bug)

• Beta #7, YAY EPILEPTIC PARTY! very buggy but I find it artistic. (see gif)

• Beta #8, stabilized and golfed a bit more (1.56kb minified, 974b regpacked)

• Beta #9, I tried to fill the hypercube in red but it was a bad idea. (related tweet)

• Beta #10 finished, with an extra feature to slow down or speed up the animation (1.57kb minified, 1021b regpacked)

Making this demo helped me understand better the 4th dimension, and even if I only scratched the surface, I find it amazing. I was surprised to see so many features and graphic effects fit in 1kb, thanks to many epic golfing tricks, but also hand-made line-drawing (see demo #6), as well as dirty hacks to optimize the code for RegPack (repeating big chunks as much as possible to reduce entropy), and faking the perspective effect by just drawing lines on a canvas and making the points closer to each other to give the impression that they are further from the camera...

To achieve so many things, the secret holds in two words: passion and organization. If you want to see how organized it is, you can read the source code below. I detailed it as much as I could to make it useful for anyone wanting to discover the tricks used inside.

Thanks for your attention and see you next year!

---

Source code

Commented (5735b)
Show

// Golf & build process
// ====================

// The content of the following loop function above is:
// * golfed
// * minified with Closure Compiler
// * cleaned (bacause CC leaves unnecessary spaces)
// * RegPacked (NB: in RegPack settings, add "a b c _ X Y Z" to the list of unrenamable vars)
// and the result is submitted to js1k


// What happens in this demo
// =========================
// - When the demo loads, Regpack generates and evals a string: _.
// - It also leaves the variable g to null
// - When _ is eval'ed, it draws the current frame and sets a timeout to re-eval itself, and so on
      

// Variables
// =========

// a: canvas
// b: body
// c: canvas context2d
// d: which animation (0: none, 1: X, 2: Y, 3: Z)
// e: animation direction (1 = forward, 3 = backward)
// f: array containing the coordinates of all the points of the tesseract (to read 3 by 3). They are arranged to form a hamiltonian path where all edges are used only once (see http://img.ctrlv.in/img/15/02/14/54dfca5f4c396.png)
// g: null at the beginning, then truthy while the demo plays
// h: rotation state (0: pause, 1: play)
// i: iterator
// j: lines color's input
// k: perspective (-10 to 10: 2.5d do exaggerated 3D)
// l: mouse X
// m: mouse Y
// n: demo state (0: pause, 1: play)
// o: demo frame counter
// p: rotation frame counter
// q: number of frames in an animation loop
// r: unused
// s: unused
// t: temp var
// u: X coordinate of each point projected on a cube (0 => 1, 1 => 1, 2 => 2, 3 => 2)
// v: Y coordinate of each point projected on a cube
// w: Z coordinate of each point projected on a cube
// x: X coordinate of each point in the tesseract
// y: Y coordinate of each point in the tesseract
// z: Z coordinate of each point in the tesseract


// This simulates the state of _ and g after unpacking.
_ = "";
g = null;

loop = function(){

// ==============
// RegPacked code
// ==============

// Initializations (only at the first frame, when g is null)
// ---------------

if(!g){

  // Variables
  d =
  e =
  h = 
  k = 
  o = 
  n =
  p = 
  l =
  m = 0;
  
  // Body background
  b.style.background = "#112233";

  // Points coordinates (full version: [[0,0,0],[3,0,0],[3,3,0],[2,2,1],[2,1,1],[3,0,0],[3,0,3],[2,1,2],[2,2,2],[1,2,2],[1,2,1],[1,1,1],[2,1,1],[2,1,2],[1,1,2],[1,1,1],[0,0,0],[0,0,3],[1,1,2],[1,2,2],[0,3,3],[3,3,3],[3,0,3],[0,0,3],[0,3,3],[0,3,0],[3,3,0],[3,3,3],[2,2,2],[2,2,1],[1,2,1],[0,3,0],[0,0,0]] )
  g = f = "030000300330221211300303212222122121111211212112111000003112122033333303003033030330333222221121030000".split("");
  
  // Inputs & buttons
  document.write("<center><input type=range style=width:6em oninput=k=value/5-9><input type=color value=#112233 oninput=b.style.background=value><input type=color value=#ffffff id=j><p><button onclick=p=1==d?q-p:q;h=1;d=1;e=1>X<button onclick=p=1==d?q-p:q;h=1;d=1;e=3>-X<button onclick=p=2==d?q-p:q;h=1;d=2;e=1>Y<button onclick=p=2==d?q-p:q;h=1;d=2;e=3>-Y<button onclick=p=3==d?q-p:q;h=1;d=3;e=1>Z<button onclick=p=3==d?q-p:q;h=1;d=3;e=3>-Z</button><p><button onclick=h=1-h>pause<button onclick=if(q<2048)p*=2,q*=2>slow<button onclick=if(4<q)p/=2,q/=2>fast");
  
  q = 256;
  
  // When mouse moves
  onmousemove = function(e){
    
    // Get X
    l = (a.width - e.pageX * 2) / 50;
    
    // Get Y
    m = (350 - e.pageY * 2) / 30;
    
    // Start animation
    n = 1;
  };
}

// Main loop
// =========

// If demo has started, increment frame counter
if(n){
  o++;
}

// If current animation is not in pause, play it. Reset it when it's finished (to loop)
if(h){
  p = (p + q - 1) % q;
}

// Flush canvas (doesn't work on IE T_T )
a.width += 0;


// Loop on all the points
for(i = f.length; i-=3;){

  // Get its "real" position (in the tesseract)
  x = +f[i];
  y = +f[i+1];
  z = +f[i+2];
  
  // Get its projected position on a cube
  u = x < 2 ? 1 : 2;
  v = y < 2 ? 1 : 2;
  w = z < 2 ? 1 : 2;
  
  
  // During the first 170 frames, animate from 0d (point) to 1d (line) to 2D (square) to 3D (cube) to 4d (tesseract)
  if(o < 170){
  
    x = (
      o < 30                                // if o < 30
      ? 1.5 + (i < 30 ? .01 : 0)            // x = 1.5 + a little X delta to show the initial dot on non-Firefox browsers (T_T)
      : o < 50                              // else if o < 50
        ? 1.5 + (u - 1.5) * (o - 30) / 20   // x = a value between 1.5 and the closest position from the center
        : o < 150                           // else if o < 170
          ? u                               // x = the closest position
          : u + (x - u) * (o - 150) / 20    // x = a value between the closest position and the final position
    );
    
    y = (
      o < 70                                // if o < 70
      ? 1.5                                 // y = 1.5
      : o < 90                              // else if o < 90
        ? 1.5 + (v - 1.5) * (o - 70) / 20   // y = a value between 1.5 and the closest position from the center
        : o < 150                           // else if o < 170
          ? v                               // y = the closest position
          : v + (y - v) * (o - 150) / 20    // y = a value between the closest position and the final position
    );
    
    z = (
      o < 110                               // if o < 110
      ? 1.5                                 // z = 1.5
      : o < 130                             // else if o < 130
        ? 1.5 + (w - 1.5) * (o - 110) / 20  // z = a value between 1.5 and the closest position from the center
        : o < 150                           // else if o < 170
          ? w                               // z = the closest position
          : w + (z - w) * (o - 150) / 20    // z = a value between the closest position and the final position
    );
  }
  
  // After the introduction, when the buttons are clicked, 4D animations are performed
  else {
    
    // X / Y / Z animations
    t = ([x,x,y,z][d] + e) % 4;
    u = x < 2 ? [0,1,1,0][t] : 3 - [0,1,1,0][t];
    v = y < 2 ? [0,1,1,0][t] : 3 - [0,1,1,0][t];
    w = z < 2 ? [0,1,1,0][t] : 3 - [0,1,1,0][t];
    
    if(d == 1){
      u = t;
    }
    
    if(d == 2){
      v = t;
    }
    
    if(d == 3){
      w = t;
    }
    
    // x,y,z in-between
    x = x + (u - x) * p / q;
    y = y + (v - y) * p / q;
    z = z + (w - z) * p / q;
  }
  
  c.lineTo(
    a.width / 2 - 100 + x * 60 - (x - 1.5) * (z - 1.5) * (k + 9) + l * (z - 1.5),
    80 + y * 60 - (y - 1.5) * (z - 1.5) * (k + 9) + m * (z - 1.5)
  );
}

// Decrease line width progressively from 35 to 2.
c.lineWidth = o < 99 ? 35 - o / 3 : 2;

// Set lines style
c.lineCap = c.lineJoin = "round";
c.strokeStyle = j.value;

// Draw the lines
c.stroke();

// Draw the next frame in 30ms.
setTimeout(_,30);

// =====================
// End of RegPacked code
// =====================

};

// This simulates the timeout inside the packed code
loop();
setInterval(loop, 30);

Minified (1550b)
Show

g||(d=e=h=k=o=n=p=l=m=0,b.style.background="#112233",g=f="030000300330221211300303212222122121111211212112111000003112122033333303003033030330333222221121030000".split(""),document.write("<center><input type=range style=width:6em oninput=k=value/5-9><input type=color value=#112233 oninput=b.style.background=value><input type=color value=#ffffff id=C><p><button onclick=p=1==d?J-p:J;h=1;d=1;e=1>X<button onclick=p=1==d?J-p:J;h=1;d=1;e=3>-X<button onclick=p=2==d?J-p:J;h=1;d=2;e=1>Y<button onclick=p=2==d?J-p:J;h=1;d=2;e=3>-Y<button onclick=p=3==d?J-p:J;h=1;d=3;e=1>Z<button onclick=p=3==d?J-p:J;h=1;d=3;e=3>-Z</button><p><button onclick=h=1-h>pause<button onclick=if(J<2048)p*=2,J*=2>slow<button onclick=if(4<J)p/=2,J/=2>fast"),J=256,onmousemove=function(r){l=(a.width-2*r.pageX)/50;m=(350-2*r.pageY)/30;n=1});n&&o++;h&&(p=(p+J-1)%J);a.width+=0;for(i=f.length;i-=3;)S=+f[i],y=+f[i+1],T=+f[i+2],u=2>S?1:2,v=2>y?1:2,w=2>T?1:2,170>o?(S=30>o?1.5+(30>i?.01:0):50>o?1.5+(u-1.5)*(o-30)/20:150>o?u:u+(S-u)*(o-150)/20,y=70>o?1.5:90>o?1.5+(v-1.5)*(o-70)/20:150>o?v:v+(y-v)*(o-150)/20,T=110>o?1.5:130>o?1.5+(w-1.5)*(o-110)/20:150>o?w:w+(T-w)*(o-150)/20):(t=([S,S,y,T][d]+e)%4,u=2>S?[0,1,1,0][t]:3-[0,1,1,0][t],v=2>y?[0,1,1,0][t]:3-[0,1,1,0][t],w=2>T?[0,1,1,0][t]:3-[0,1,1,0][t],1==d&&(u=t),2==d&&(v=t),3==d&&(w=t),S+=(u-S)*p/J,y+=(v-y)*p/J,T+=(w-T)*p/J),c.lineTo(a.width/2-100+60*S-(S-1.5)*(T-1.5)*(k+9)+l*(T-1.5),80+60*y-(y-1.5)*(T-1.5)*(k+9)+m*(T-1.5));c.lineWidth=99>o?35-o/3:2;c.lineCap=c.lineJoin="round";c.strokeStyle=C.value;c.stroke();setTimeout(_,30)

Packed (1024b)
Show

for(_='on~e=R-1.5)QQ*(PPo-O30N0N000M0+60*L0)/20KinputIroundHbutt~G11F=(E0>o?DD1.5BB+(A212@=t),idthtylePTPk+9)+)*p/J?1:2,=+f[i;R1>;c.stroke-2*r.page ~I=<G ~click=p===d&&(;R3>-33[0,1,1,0][t]F2valuea.w><I typR	=2>c.lineb.s.backgH=)*(o-15KK:15D	color =#?:3-,==d?J-p:J;h=1;d=
g||(d=Rh=k=o=n=p=l=m=0,"#2",g=f="MN002@FN0N3@22@@F12F100000312200N0N0N03222221M".split(""),document.write("<center	range s=w:6emk=/5-92ffffff id=C><p>1
1X1
1X2
2Y2
2Y3
3Z3
3Z</G><p>h=1-h>pauseif(J<2048)p*=2,J*slowif(4<J)p/=2,J/fast"),J=256,~mousemovRfuncti~(r){lEX)/50;mE350Y)/N;n=1});n&&o++;h&&(pEp+J-1)%J);+=0;for(i=f.length;i-=3;)S],y+1],T+2],uSvywT17D(S=3AN>i?.01:0):5AuO3u:u+(S-u,y=7B:9AvO7v:v+(y-v,T=FB:13AwOFw:w+(T-w):(tE[S,S,y,T][d]+e)%4,uSvywT1u2v3wS+Eu-S,y+Ev-y,T+Ew-T),To(/2-10LS-(Sl*(TQ,8Ly-(ym*(TQ);W=99>o?35-o/3:2;Cap=Join="H"S=C.();setTimeout(_,N)';g=/[^ -?CJS-}]/.exec(_);)with(_.split(g))_=join(shift());eval(_) <3

---

In case you were wondering, yeah, I used almost all the alphabet as variable names. This demo contains a big state machine needing all those variables. And yes, it's a heart at the end of the RegPacked code, because I had 3 bytes left and "eval(_) <3" is totally valid. It's useless but it's my way to say that the demo was made with love! :D

Cheers,
Xem

PS: please retweet if you liked it!