Marijn Haverbeke's 2012 JS1k winning entry, "Bouncing Beholder," is a concise JavaScript demo that fits within 1 kilobyte. It features a 3D rendering of the iconic Beholder monster from Dungeons & Dragons, smoothly rotating and bouncing off the edges of the canvas. The demo utilizes clever optimizations and mathematical shortcuts to achieve the 3D effect and animation within the tight size constraint, showcasing efficient coding and creative use of limited resources.
Marijn Haverbeke's blog post details their winning entry, "Bouncing Beholder," for the 2012 JS1k competition, a JavaScript coding challenge where the entire program must fit within 1 kilobyte. The post showcases the final, minified version of the code, a mere 972 bytes, accomplishing a surprisingly complex animation of the iconic Dungeons & Dragons monster, the Beholder. Haverbeke meticulously describes the process of creating the animation, beginning with the central challenge of representing the Beholder's distinctive spherical body and numerous eye stalks within the stringent size limitations. They explain how they achieved the illusion of three-dimensionality through careful manipulation of sine and cosine functions to rotate the Beholder and its eye stalks independently. The post highlights the iterative development process, beginning with simpler geometric shapes and progressively adding details like the central eye and the individual eye stalks. The implementation of movement involved simulating bouncing off the edges of the canvas, adding to the dynamic nature of the animation. Haverbeke also discusses the optimization techniques employed to shave off precious bytes, crucial in a competition with such a restrictive size limit. The blog post effectively presents not just the final product but also the journey of its creation, offering insight into the challenges and solutions involved in producing a sophisticated animation within the extremely confined space of 1 kilobyte. The author expresses satisfaction with the balance struck between visual appeal and code compactness, signifying the successful execution of a challenging coding endeavor.
Summary of Comments ( 6 )
https://news.ycombinator.com/item?id=42932137
Commenters on Hacker News largely praised the "Bouncing Beholder" demo for its impressive technical achievement within the 1k size limit. Several noted the clever use of techniques like sine waves and bitwise operations to create the animation and sound effects. Some recalled the nostalgic appeal of demoscene culture and the technical ingenuity it fostered. A few discussed the evolution of JavaScript and browser capabilities since 2012, highlighting how challenging such a demo would have been at the time. The creator even chimed in to answer questions about the development process and optimization tricks used, sharing further insight into the intricacies of the code.
The Hacker News post discussing the winning JS1k entry "Bouncing Beholder" from 2012 has a modest number of comments, offering a mix of praise and technical analysis.
Several commenters express admiration for the demo's smooth animation and impressive visual effects achieved within the 1k size limit. They highlight the clever use of techniques like sine wave manipulation and bitwise operations to create the beholder's movement and appearance. One user specifically notes the effective use of "integer math trickery" and minimal code to achieve a complex visual effect. The author, Marijn Haverbeke (creator of CodeMirror, ProseMirror and Acorn), participates in the thread, responding to questions and sharing insights into the development process. For instance, he explains how he used a pre-golfed version during development and then applied minification and compression techniques to fit within the 1k constraint.
A few comments delve into the technical aspects of the demo. One commenter questions the scoring mechanism of JS1k, wondering if the compressed size should be the primary metric or if the readability of the uncompressed code should also be considered. This sparks a small discussion about code golfing techniques and the trade-offs between size and maintainability.
Another commenter discusses the challenges of creating such intricate demos within the tight size limit, mentioning the need for careful planning and optimization. They also appreciate the author's willingness to share the source code, allowing others to learn from his techniques. Someone points out the clever use of
withstatement (although considered bad practice in normal coding), showcasing how it can be useful in code golfing scenarios to save precious bytes.Overall, the comments on the Hacker News post demonstrate an appreciation for the technical skill and creativity involved in creating the "Bouncing Beholder" demo. They provide a glimpse into the mindset of code golfers and the challenges they face in pushing the boundaries of what can be achieved within strict size limitations. While not a lengthy discussion, the comments offer valuable insights into the development process and the technical cleverness of the demo.