• 10k Javascript …procedurally generate everything!

    by  • August 18, 2011 • HTML5, Programming, Projects • 0 Comments

    There have always been a quest to shrink webpages and Javascript to their absolute minimum. But what can you achieve with just 10k?

    In association with MIX there is a web development contest which aims to get developers to write interesting websites and tech demos using just 10k of Javascript, Images and everything else. You can learn more about it here: http://10k.aneventapart.com/

    There has already been several competitions with the most famous being the JS1k challenge to see what you can do with small javascript, normally these are around the 1k mark but only have limited functionality past the initial ‘oooh shiny’ factor.

    One of the 1k entries that got me thinking was the 1k cave raytracing demo, which uses the same effect that Wolfenstein 3D used.


    With 10k I think I will be able to push the envelope even further. As the blog post title suggests I will Procedurally Generate as much as humanly possible.

    The best example of Procedural Generation used in games is the .kkrieger demo that began in 2004, where an entire game demo was made using …wait for it …46k. Everything in the game: maps, textures, even sounds were made procedurally.

    What I always find entertaining about .kkrieger is that taking a screenshot of it usually takes more room on disk than the entire game itself!

    Firstly I want to move beyond the simple pseudo 3D style of the Wolfenstein demo and have a 3D raytraced map, generated from Perlin noise with all textures being procedurally generated too. A great thing to point out is that the memory buffer sizes are not monitored so although we are bound by 10k of Javascript, the procedurally generated textures and maps may take several mb of data. Now I loved Wolfenstein 3D as a child, but I think with even 10k of Javascript I could do better on the graphics front.

    The raytracing won’t be like the subpixel lighting based raytracing used in 3D CAD but simply used to easily calculate what I need to render on screen. Everything will be done via HTML5 canvas element and hopefully should be very shiny.

    These are just my early morning ramblings while I am at work. Check back to see how I progress as I begin to code…


    So I have begun writing the Ray Tracer which projects onto a 3D Voxel grid which represents the landscape. This is a bit different to the usual raytracer examples that check if it interacts with a sphere, surprisingly those are easier to code!

    This may not look amazing but you can navigate around the scene in near realtime (I haven’t done any optimisations yet) and more importantly I’ve set the size of the grid rather small (64×64) and the raytracer currently renders in 4×4 pixel blocks so there is room for improvement. Anyway, its going well and so far with no compression and with comments and formatting left in its only 6k!

    If I have a few bytes free near the end I hope to incorporate HTML5 web workers to push the Ray Tracing onto separate threads for increased performance!

    If you want to try it out (Can’t aways guarantee it working or performance) then point your browser over at MrPfister.com/JS10k.html

    Next Step …Procedurally generated landscape


    Software engineer. Tea drinker


    Leave a Reply

    Your email address will not be published. Required fields are marked *