Third prize for “Fun with [0,1]^2” at Revision 2012!

At the Revision 2012 demoparty in Saarbrücken, my entry “Fun with [0,1]^2” was awarded a third prize in the category "Web Browser Intro"! The demo with a total file size of 4088 Bytes shows a number of classical surfaces – namely, the cylinder, the sphere, the torus, and the Klein bottle – parameterized over the unit square [0,1]². The demo is available from the scene.org FTP server and can also be watched here.

PLEASE NOTE: In recent versions of Chrome and Firefox, the demo does not run any more. I will try to provide a version that works around that.

A “demo” in the demoscene sense is a small program that is run on a computer (of whatever kind) and displays “beautiful graphics” (of whatever kind) and usually also features some music. This type of computer art requires not only artistical, but also technical skills. On so-called demoparties, people from the demoscene gather and mess with each other in competitions (“compos”) that lay down the rules (e.g., platform, technology, type).

At this year's Revision party, a new compo called “Web Browser Intro” took place for the first time. The rules are basically: 1. The demo has to run in a web browser, and 2. The total size of all files must be no larger than 4 KB (4096 Bytes). With the advent of WebGL, a subset of OpenGL, it has become possible to create well-performing 3D graphics in the web browser by means of JavaScript and the usual commands used for OpenGL programming. However, there is also the HTML5 <canvas> element that allows to draw 2D graphics with a PostScript-like command set.

Due to technical reasons (my netbook doesn't support WebGL) I used the <canvas> element and wrote appropriate projection matrices (such as those generated from gluLookAt() and gluPerspective()) myself. I selected the cylinder, the sphere, the torus and the Klein bottle as geometries, using the “standard parameterizations” for the first three, and the JavaView parameterization for the latter. Hidden line (semi-)removal takes place by sorting the quadrilateral faces by their distance from the viewpoint and drawing them using a semi-transparent fill color. Some shading is simulated by drawing edges darker the farther they are away from the viewpoint. The resulting JavaScript (which has 7568 Bytes in the minified version, i.e., without spacing and with variables renamed to a, b, c, etc.) was compressed using CrunchMe using the same method that is used in the PNG image format.

The demo is available as a ZIP archive on the FTP server of scene.org, but it can also be watched from this link (tested to run on recent version of Chrome and Firefox). Being the first demo I ever submitted at a demoparty, “Fun with [0,1]^2” received the third prize in the Web Browser Intro competetition. See pouet.net for a list of all entries and winners.