This blog post is about my entry to the Mix10k code competition, and old-skool demo, plus a few tips about how to keep you code size to below 10k.

The mix10k challenge, where you are given 10k to create a Silverlight / HTML5 application, has been on my mind for a while ... the Christmas vacation was the perfect excuse to put together my entry. Inspired by the demo's of the Amiga era, here is my mix10k old-skool demo entry:

You can view my entry (and more importantly vote for it!) at the mix10k gallery.

For me the greatest challenge was the music, not least for the fact that I am no good at writing the stuff myself! The mix10k rules are fairly relaxed, you can download content, such as images and music, allowing you to circumnavigate the 10k limit. However, I thought it would be a more interesting challenge to pack everything into 10k.

Size-limited demos typically use synthesis rather than sampling for the musics. Unfortunately Silverlight isn't really geared towards sound synthesis, however, a few people have managed to create synthesized media sources. I decided to go the sampling route and use an MP3 track for my music, the idea being to use a short, highly compressed MP3 track and loop it. I posted a message on the 8bitcollective forums and within a day had a funky, and highly compressed, 4 second MP3 clip for my demo. The MP3 filesize of 4,248 bytes left me 5,992 to play with.

However, the next challenge was looping the audio, which is unfortunately something that is not supported out-of-the-box. For longer media clips it is acceptable to catch the MediaEnded event, re-wind and re-start. However, there is a delay of about half a second, which with a 4 second looped audio clip is pretty disruptive! Fortunately Silverlight does expose a lower level API for media via the abstract class MediaStreamSource, which has virtual methods which you can override to supply audio direct from a stream. The codeplex project ManagedMediaHelpers is a great place to start for information on how to load MP3 audio from a file. Typically the code to read and stream an MP3 file is over 10k, however, I was able to trim this down to roughly 1k by removing all the code for parsing the MP3 headers, replacing it with the hard-coded values for my specific MP3 file.

Unfortunately, when the audio was looped, it just didn't sound right. The trouble is, within MP3 files, the audio is split into frames. Using a useful utility from codeproject, I found that my MP3 file consisted of 56 frames of ~67ms in length. However, the audio loop was not a multiple of 67ms. To rectify this, I downloaded a copy of the free audio editor Audacity, and 'stretched' the track to fit into an integer number of frames, and re-encoded in MP3 format via lame. Finally, I had looping MP3 audio! (and 4,958 bytes left)

After the battle I had with the audio, constructing the visuals, the scrolling text, interference patterns, plasma and starfield was a piece of cake!

Here are a few quick tips for keeping your filesize under 10k.

• Use the var keyword wherever possible 
• Use the using for aliasing frequently used types

  For example:

  using K = System.Windows.Media.MediaSourceAttributesKeys;
  using J= System.Windows.Media.MediaStreamAttributeKeys;
  using M = System.Math;

  With type names as long as MediaSourceAttributesKeys, you only need to use them three times for a using alias to make sense!

• chain initialisation of variables

  The following code:

  int x1 = sin1(8) + 200
  int y1 = sin1(3) * 10 + 100
  int g = (tx - x1) * (tx - x1);

  Can be shortened to:

  int x1 = sin1(8) + 200, y1 = sin1(3) * 10 + 100, g = (tx - x1) * (tx - x1);

• Tabs not spaces

  If you are not to bothered about squeezing the most out of those 10k bytes and want your code to look pretty, at least save yourself a bit of room by using Tabs!

• Choose wisely between XAML and C#

  One big advantage that XAML has over C# is its use of value converters, compare the following XAML:

  <Ellipse Fill="White"/>

  to its equivalent in C#:

  var el = new Ellipse()
  {
     Fill = new SolidColorBrush(Color.FromArgb(255,255,255,255))
  };

  In this case, XAML is a clear winner.

• Use lambda expressions for event handlers

  You can achieve great savings by including your event handling logic within anonymous delegates (via lambda expressions), it also means that you can move variables from class scope (i.e. files) to method scope and use the var keyword. Compare:

  WriteableBitmap bitmap = new WriteableBitmap(200,200);
  
  MyPage()
  {
  	var t = new DispatcherTimer();
  	t.Tick +=new EventHandler(t_Tick);
  }
  
  void  t_Tick(object sender, EventArgs e)
  {
  	// do stuff with the bitmap
  	bitmap.Invalidate();
  }

  to:

  MyPage()
  {
  	var bitmap = new WriteableBitmap(200,200);
  	var t = new DispatcherTimer();
  	t.Tick += (s,e) =>
  		{
  			// do stuff with the bitmap
  			bitmap.Invalidate();
  		};
  }

• Ditch that App!

  The App.xaml and App.xaml.cs full of template code that you do not need. Simply ditch these files entirely and replace with a minimal application that indicates the page to display:

  public class A : Application
  {
      public A()
      {
          Startup += (i, j) => RootVisual = new MainPage();
      }
  }

• Minify your code

  Perhaps the greatest savings can be achieved by 'minifying' your code, i.e. removing any extra whitespace and reducing variable, method, types names to single characters. The problem is that in doing so, your code will become unreadable!

  In order to minify my code yet maintain readability I created a very simple console application that read my application source and performed a bunch of string replacements in order to reduce its size ...

  static Dictionary<string, string> reps = new Dictionary<string, string>()
  {
    {System.Environment.NewLine, ""},
    {"  ", " "},
    {" = ", "="},
    {" == ", "=="},
    {" * ", "*"},
    {" > ", ">"},
    {" < ", "<"},
    ...
  
    // methods
    {"Timer_Tick", "T"},
    {"CreateLine", "g"},
    {"DrawLines", "ln"},
    ...
  
    // xaml
    {"grid", "q"},
    {"image", "o"},
    {"canvas", "c"},
    {"MainPage", "Y"},
    ...
  };

  The output of this console application is sent to another project which builds my final entry. The result of this was to make my reasonably compact code 47% smaller!

You can download my thoroughly messy and unreadable code: mix10ksrc.zip

And vote for it on the mix10k site (Did I say that already?)

Regards, Colin E.