Anders Tornblad

All about the code

Phenomenal & Enigmatic, part 3

When I made Phenomenal & Enigmatic, I didn't want to reuse any of the graphics art from the original demo. I had decided to take the music and some sense of the overall demo design, but didn't want to infringe on the original graphics artist's creativity, so for the Enigmatic logo, I turned to rendering the logo using code.

Enigmatic logoOne popular technique of creating good-looking logos back in the Amiga days was to first draw the logo flat, then duplicating it in a new layer a few pixels off, making that new layer translucent. Then one would paint in side surfaces and edge lines with varying levels of opacity. After adding some final touches, like surface textures or lens flares, the end result would be a glossy, glassy look, much like the original Enigma logo by Uno of Scoopex.

Enigmatic logoThe logo scene uses the same technique, painting the front, back and sides of the word ENIGMATIC as filled polygons with slightly different colors and opacity levels. During the scene, I animate some of the transformation vectors for effect. Of course, the original artwork by Uno is much better in exactly every way, but it was a fun exercise.

Pseudocode

function transformLogoCoord(chapterId, time, x, y) {     // Left out: Perform a simple coordinate transformation     return { x : transformedX, y : transformedY }; }   function logoMoveTo(chapterId, time, x, y, xOffset, yOffset) {     var coords = transformLogoCoords(chapterId, time, x, y);     context.moveTo(coords.x, coords.y); }   function logoLineTo(chapterId, time, x, y, xOffset, yOffset) {     var coords = transformLogoCoords(chapterId, time, x, y);     context.lineTo(coords.x, coords.y); }   function renderLogo(chapterId, time) { var xOffset, yOffset;     // Left out: Calculate xOffset and yOffset from the chapterId and time values         // Draw bottom surfaces     context.beginPath();     for (var block, i = 0; block = logoPolygons[i++];) {         logoMoveTo(chapterId, time, block[0].x, block[0].y, 0, 0);         for (var coord, j = 1; j = block[j++];) {             logoLineTo(chapterId, time, coord.x, coord.y, 0, 0); }         logoLineTo(chapterId, time, block[0].x, block[0].y, 0, 0);     }     context.closePath();     context.fill();         // Left out: draw side surfaces         // Left out: draw top surfaces }

Phenomenal & Enigmatic, part 1
Phenomenal & Enigmatic, part 2
Phenomenal & Enigmatic, part 3 (this part)
Phenomenal & Enigmatic, part 4

The entire demo, including non-minified JavaScript, is available on GitHub: /lbrtw/enigmatic

Add a comment