Animated logo for Recode

Here is a copy of the animated logo as found within the Recode Web site. This page summarizes the making of this logo, so read on for details. Click on the image itself for an enlarged copy, which runs continusouly without a delay between cycles. If you cannot render MPEGs, you may try an animated GIF, yet this one is nearly 9 Megs to download. (For the Blender source file, click here.)

I've once been thinking about creating an animated logo for each of my own Web sites, and so, in 2006-07, I decided to use Recode as an excuse for my first Blender animation.

Recoding is essentially an operation which alter characters in such a way that the meaning is preserved. The logo builds on that idea: alteration of characters is made by rotating them them, and the meaning is somehow represented by a mirror shadow under the characters. Once all characters have pivoted, exchanging the coding with the meaning should reveal that nothing has really changed deep down. For the logo, it means that exchanging all the altered characters and their shadow should yield the original picture, allowing the visual process to cycle and be repeated ad infinitum.

Characters below the horizon are not really a rendered mirror of characters above the horizon. While they vaguely suggest they are a mirror, they are genuine characters which are already rotated 180 degrees. So, there are not 6, but really 12 distinct characters. To help me at creating them all looking similar, I settled on the following properties:

Width  1,010
Ext1   0,100
Ext2   0,020
BevResolv  2

Colors for the scenery are recycled from already selected colors for margins, captions and background of the Recode Web site.

The rotation of individual letters is spread over 31 frames in a very precise way, to suggest a wave of movement starting at the left and propagating right. Here are the key frame numbers and current rotation for each letter (fractional numbers represent rotation progress, to be multiplied by 2π radians):

Frame       R   E   C   O   D   E

   1        0   0   0   0   0   0
   4       .1   0   0   0   0   0
   7       .2  .1   0   0   0   0
  10       .3  .2  .1   0   0   0
  13       .4  .3  .2  .1   0   0
  16       .5  .4  .3  .2  .1   0
  19       .5  .5  .4  .3  .2  .1
  22       .5  .5  .5  .4  .3  .2
  25       .5  .5  .5  .5  .4  .3
  28       .5  .5  .5  .5  .5  .4
  31       .5  .5  .5  .5  .5  .5

Exchanging the whole set of letters with their pseudo-mirror is spread over 12 frames, this uses a rotation (still to be multiplied by 2π radians) around another axis, in this way:

Frame       Rotation

  31        0
  35        1/6
  39        1/3
  43        1/2

Frame 31 is common between both movements, it is not repeated. Frame 43 is also meant to draw exactly the same picture as frame 1, and because the animation is cyclic, frame 43 is effectively omitted.

The logo was meant to be initially computed at 320 × 240 pixels, but once ready, recomputed at a smaller resolution. Then, the program convert from the ImageMagick package was used to assemble the animation in both formats (mpeg2encode has to be pre-installed for the second one):

convert -delay 7 *.jpg recode.gif
convert -delay 7 *.jpg recode.mpeg

Finally, in the logo version, the motion should not be continuous and non-stop, it would be far too distracting. Rather, I wanted a still image, which suddenly starts transforming for one cycle, and stay still again for another while (lets say 10 seconds) before the transformation restarts, etc. For adding this extra delay, I used Gimp. Within Gimp, each frame has its delay time coded within the name of the corresponding Gimp layer, and this delay is meant to be spent before that frame is displayed. So, the only remaining thing to do was, within Gimp, to edit the time on the second frame from 70ms to 10000ms.