Though the final version of my js1k 2014 entry wasn't a potential winner with its visual glitches and poor frame rate, I had put some hard work into it, and had a lot of (mainly mathematical) fun exploring recursive data structures and optimizing graph traversal algorithms. I felt this research area was a great mathematical and artistical playground, especially in the context of constrained creative coding such as js1k, so I decided to continue on the same path to publish something really satisfactory for the 2015 edition.
My 2013 entry proved that a few thousands well used coloured rectangles can bring a satisfactory pseudo-realistic visual experience. Canvas'
fillRect is fast enough for the job, as long as it is backed by a powerful engine to keep the rendering loop is as simple as possible. The "Strange Crystals" demo used this technique in conjunction with old-school 2.5D techniques to simulate a first-person mine cart ride. The data structure was directly bound to the z-index and made the rendering loop dead simple, letting room to enhance the visual evocation with stalactites, lightbulbs and other goodies.
In 2014, I decided to go 3D by adapting the rectangle-based rendering technique to a heightmap. The idea was, given a terrain (altitude = f(x,y)), to tile the surface of the terrain, give each tile the height corresponding to the terrain's altitude at the center of the tile, and render the tiles with vertical rectangles to produce an approximate view of the terrain. When the tiles' width become smaller, the rendering gets more accurate and hopefully realistic. Pin art frames are a good real-world equivalent to this rendering technique.
The 3D rendering process must be able to perform standard tasks:
Bonus features include:
In the next post , I'll present the 2014 implementation of these principles, with its mathematical goodness and its inherent flaw.