JS1k 2013
Part 1 : introduction
2013-04-13
2016-07-06

Last year I stumbled upon the js1k contest and it clicked at once. The combination of constraints and freedom, added to the fun and possibilities brought by javascript/canvas was a magic cocktail I couldn't resist. But since the competition had already started, I only had a few weeks to complete my entry, and though my Mine[love]craft entry was pretty satisfactory and ranked fourth, I was frustrated that many good ideas to improve it came to my mind too late. So this time I decided to start early, so that I could refactor my ideas/algorithms/functions as many times as necessary, while also having enough time to polish the details. Thus the first jsfiddle I wrote dates back to august 2012. However this did not protect me from the last minute syndrome, and my second version was submitted only a few minutes before the deadline.

This time, my goal was to implement a watch-only demo, because handling user input is costly, and since the instructions are not visible by default on the demo page, one is never sure that the visitors (including the judges) are aware of the controls. Both the subject of the demo and the graphical rendering technique came progressively to my mind, after I started optimizing the rendering of randomly generated 3D voxel octrees. The idea of a mine cart simulation has nothing to do with last year's mini minecraft, even if Minecraft fans have designed some incredible mine cart rides. What they have in common though is that they both try to fit seemingly complex but consistent universes in a small space, with much importance given to details. This is almost obsessive, and I surely would have been a watch maker in other times.

The mine cart idea came with some heavy cinematographic references, which increased the need to produce something as realistic as possible (update: there's also a vintage game I didn't know which uses the same rendering technique). I browsed many of the genre's clichés, keeping some of them (rails, sleepers, stull pieces, turns, slopes, lightbulbs, wooden bridges, stala[ct|gm]ites "what's the difference, Hagrid ?"), while eliminating others (bats, lava, underground lakes, etc.). I had at some point a small particle engine that allowed me to show burning torches and water streams, but its cost was a bit high. To add some story telling to the demo while making use of the last available bytes, I added the eponymous crystals and a few teasing words in the description and the tweets. I like the idea that some aspects of the demo are only discovered if you wait long enough and Math.random() is kind to you, but it was a risky bet, and I'm convinced that many viewers did not wait to see the crystals fly. We'll see that a challenge from the excellent Román Cortés (and some improvements in the compression tools) brought me to improve this in my second and final version.

In the next part, I get technical and describe the tunnel generation algorithm.

Note: the annotated code is available here.