## Thursday, 6 March 2014

### Python List Comprehensions and Generators for C# Developers

If you’re a C# programmer and you’ve used LINQ, you’ll know how powerful it is to allow you to manipulate sequences of data in all kinds of interesting ways, without needing to write for loops. Python has similar capabilities, using what are called “list comprehensions” and “generators”. In this post, I’ll demonstrate how they work, showing them side by side with roughly equivalent C# code.

### List Comprehensions

A list comprehension in Python allows you to create a new list from an existing list (or as we shall see later, from any “iterable”).

Let’s start with a simple example at the Python REPL. Here we create a list, that contains the square of each number returned by the range function (which in this case returns 0,1,2,…9)

```>>> [x*x for x in range(10)]
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]
```

This is equivalent to a C# LINQ statement that takes a range (using Enumerable.Range), selects the square (using Select), and then turns the whole thing into a list (using ToList):

```Enumerable.Range(0, 10).Select(x => x*x).ToList();
```

Python list comprehensions also allow you to filter as you go, by inserting an “if” clause. Here, we’ll only take the squares of odd numbers:

```>>> [x*x for x in range(10) if x%2]
[1, 9, 25, 49, 81]
```

This is equivalent to chaining a Where clause into our LINQ statement:

```Enumerable.Range(0, 10).Where(x => x%2 != 0)
.Select(x => x*x).ToList();
```

You can actually have two “for” clauses inside your list comprehension, so you could create some coordinates as a tuple like this:

```>>> coords = [(x,y) for x in range(4) for y in range(4)]
[(0, 0), (0, 1), (0, 2), (0, 3),
(1, 0), (1, 1), (1, 2), (1, 3),
(2, 0), (2, 1), (2, 2), (2, 3),
(3, 0), (3, 1), (3, 2), (3, 3)]
```

The same effect can be achieved using the SelectMany clause in LINQ:

```Enumerable.Range(0,4).SelectMany(x => Enumerable.Range(0,4)
.Select(y => new Tuple<int,int>(x,y))).ToList();
```

You can see that the LINQ gets a little cumbersome at this point, although you can use the alternative syntax:

```from x in Enumerable.Range(0,4)
from y in Enumerable.Range(0,4)
select new Tuple<int,int>(x,y)```

Here's another Python list comprehension with two for expressions, making a list of all the spaces on a chessboard

```>>> [x + str(y+1) for x in "ABCDEFGH" for y in range(8)]
['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8',
'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8',
'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7', 'C8',
'D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8',
'E1', 'E2', 'E3', 'E4', 'E5', 'E6', 'E7', 'E8',
'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8',
'G1', 'G2', 'G3', 'G4', 'G5', 'G6', 'G7', 'G8',
'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7', 'H8']
```

And in C#, you'd do something like:

```"ABCDEFGH".SelectMany(x => Enumerable.Range(1,8)
.Select(y => x+y.ToString())).ToList()
```

### Dictionaries and Sets

You don't actually have to create lists. Python lets you use a similar syntax to create a set (no duplicate elements), or a dictionary. Here we'll start with a list of fruit, then use a list comprehension to make a list of string lengths. Then we'll make a set of unique fruit lengths, and we'll finally make a dictionary keyed on fruit name, and containing the length as a value:

```>>> fruit = [‘apples’,’oranges’,’bananas’,’pears’]
>>> [len(f) for f in fruit]
[6, 7, 7, 5]
>>> {len(f) for f in fruit}
set([5, 6, 7])
>>> {f:len(f) for f in fruit}
{‘bananas’:7, ‘oranges’:7, ‘pears’:5, ‘apples’:6}
```

We can create the set of unique lengths in C# by creating a HashSet, passing in our LINQ statement to its constructor. And you can use LINQ's ToDictionary extension method to make the equivalent dictionary of strings to lengths:

```var fruit = new [] { "apples", "oranges", "bananas", "pears" };
fruit.Select(f => f.Length).ToList();
new HashSet<int>(fruit.Select(f => f.Length));
fruit.ToDictionary(f => f, f => f.Length);
```

### Generators

Python generators are essentially the same concept as a C# method that returns an IEnumerable<T>. In fact, the syntax for creating them is very similar – you just need to use the yield keyword. Here’s a generator function that returns the names of my children:

```def generateChildren():
yield "Ben"
yield "Lily"
yield "Joel"
yield "Sam"
yield "Annie"
```

And here’s the same thing in C#:

```public IEnumerable<string> GenerateChildren()
{
yield return "Ben";
yield return "Lily";
yield return "Joel";
yield return "Sam";
yield return "Annie";
}
```

Like with C#, Python generators uses lazy evaluation. This means that they could return infinite sequences. And it also means that it is not until we actually evaluate them that we will get any errors. This code example:

```def generateNumbers():
yield 2/2
yield 3/1
yield 4/0 # will cause a ZeroDivisionError
yield 5/-1

numbersGenerator = generateNumbers()
print("Numbers Generator", numbersGenerator)
try:
numbers = [n for n in numbersGenerator]
print("Numbers", numbers)
except ZeroDivisionError:
print("oops")
```

Generates the following output:

```Numbers Generator <generator object
oops
```

Python provides a method called “next” that allows you to step through the outputs from a generator one by one. Let’s try that with our children generator function:

```>>> children = generateChildren()
>>> next(children)
'Ben'
>>> next(children)
'Lily'
>>> next(children)
'Joel'
>>> next(children)
'Sam'
>>> next(children)
'Annie'
>>> next(children)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
StopIteration
```

You’ll notice that calling next after we have reached the end gives us a StopIteration exception. C#’s closest equivalent to the Python next function is getting the enumerator and stepping through with MoveNext:

```var children = GenerateChildren().GetEnumerator();
children.MoveNext();
Console.WriteLine(children.Current);
children.MoveNext();
Console.WriteLine(children.Current);
children.MoveNext();
Console.WriteLine(children.Current);
children.MoveNext();
Console.WriteLine(children.Current);
children.MoveNext();
Console.WriteLine(children.Current);
children.MoveNext();
Console.WriteLine(children.Current);
```

This produces the following output (the last item is repeated because we didn’t check the return code of MoveNext which indicates whether we reached the end of the enumeration).

```Ben
Lily
Joel
Sam
Annie
Annie
```

In practice in C# it is fairly rare to use the enumerator directly. When you have an IEnumerable<T> you typically use it in a foreach loop or with some of the LINQ extension methods.

The Python list comprehension syntax also allows us to create new generators from existing generators. For example:

```>>> (x*x for x in range(10))
```

This allows you to compose complex generators out of simple statements, creating a pipeline very much like you can with chained LINQ extension methods.

### Conclusion

As you can see, Python list comprehensions and generators provide the same power that you are used to with C# and LINQ, and with a syntax that is more compact in most cases. Look out for a follow-up post shortly where I will demonstrate how many of the standard LINQ extension methods such as Any, All, Max, Min, Take, Skip, TakeWhile, GroupBy, First, FirstOrDefault, and OrderBy can be achieved in Python.

## Tuesday, 4 March 2014

### How to Calculate Code Churn using TFS

Your source control repository can provide a lot of valuable insight into your project. In particular, it can highlight source files that are being edited far too often. Files that are being changed on a regular basis (or by many different developers) indicates there might be one of these problems with your code:

• lots of bugs
• too many responsibilities (failure to adhere to the “Single Responsibility Principle”)
• not extensible enough (failure to adhere to the “Open Closed Principle”)

Counting changes to source control files is often called “code churn”. It’s usually defined as the sum of all added, modified and deleted lines. Most source control systems will have some way of letting you get at this information, and I might post about how to extract it for other systems at a later date, but for now, here’s two approaches you can take if you’re using TFS.

### Using the TFS API

The TFS API allows you to get details of each changeset individually. Unfortunately the lines added, deleted and modified aren’t included (or at least I can’t find them), but on the whole you’ll find that simply counting the number of modifications to each file is good enough at identifying trouble areas. I also like to count how many changes each user has made.

Here’s a simple class that demonstrates how to source control statistics from TFS using the API. You pass the URL of your collection (e.g. http://myserver:8080/tfs/MyCollection) into the constructor. Then to get the churn or user statistics you need to specify the path within that collection that you want to examine (e.g. \$/MyProject/). You’ll see that I am filtering out only changes to the files I am interested in (e.g. only C# files), and I perform a regex on the path of each item, so changes to the same file in different branches are counted together. You’d need to customise that for whatever branching strategy you are using. I’ve also made it cancellable, as this can take a long time to run if you have a long history.

```using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Text.RegularExpressions;
using Microsoft.TeamFoundation.Client;
using Microsoft.TeamFoundation.VersionControl.Client;

namespace TfsAnalysis
{
class TfsAnalyser
{

public TfsAnalyser(string url)
{
var collection = ConnectToTeamProjectCollection(url, null);

vcs = (VersionControlServer)collection.GetService(typeof(VersionControlServer));
}

public TfsAnalyser(string url, string user, string password, string domain)
{

var networkCredential = new NetworkCredential(user, password, domain);
var collection = ConnectToTeamProjectCollection(url, networkCredential);

vcs = (VersionControlServer) collection.GetService(typeof (VersionControlServer));
}

/// <summary>
/// Gets User Statistics (how many changes each user has made)
/// </summary>
/// <param name="path">Path in the form "\$/My Project/"</param>
/// <param name="cancellationToken">Cancellation token</param>
public IEnumerable<SourceControlStatistic> GetUserStatistics(string path, CancellationToken cancellationToken)
{
return GetChangesetsForProject(path, cancellationToken).GroupBy(c => c.Committer).Select(g =>
new  SourceControlStatistic { Key = g.Key, Count = g.Count() } ).OrderByDescending(s => s.Count);
}

/// <summary>
/// Gets Churn Statistics (how many times has each file been modified)
/// </summary>
/// <param name="path">Path in the form "\$/My Project/"</param>
/// <param name="cancellationToken">Cancellation token</param>
public IEnumerable<SourceControlStatistic> GetChurnStatistics(string path, CancellationToken cancellationToken)
{
return GetChangesetsForProject(path, cancellationToken)
.Select(GetChangesetWithChanges)
.SelectMany(c => c.Changes) // select the actual changed files
.Where(c => c.Item.ServerItem.Contains("/Source/")) // filter out just the files we are interested in
.Where(c => c.Item.ServerItem.EndsWith(".cs"))
.Where(c => ((int)c.ChangeType & (int)ChangeType.Edit) == (int)ChangeType.Edit) // don't count merges
.Select(c => Regex.Replace(c.Item.ServerItem, @"^.+/Source/", "")) // count changes to the same file on different branches
.GroupBy(c => c)
.Select(g =>
new SourceControlStatistic { Key = g.Key, Count = g.Count() }).OrderByDescending(s => s.Count);
}

private Changeset GetChangesetWithChanges(Changeset c)
{
}

private IEnumerable<Changeset> GetChangesetsForProject(string path, CancellationToken cancellationToken)
{
return vcs.QueryHistory(path, RecursionType.Full).TakeWhile(changeset => !cancellationToken.IsCancellationRequested);
}

private TfsTeamProjectCollection ConnectToTeamProjectCollection(string url, NetworkCredential networkCredential)
{
var teamProjectCollection = new TfsTeamProjectCollection(new Uri(url), networkCredential);
teamProjectCollection.EnsureAuthenticated();
return teamProjectCollection;
}
}
}

```

Having got this information, I usually write it out to a CSV file to analyse it offline. It can yield very interesting results. One one project I discovered several files that were being modified on average more than once a week over the lifetime of the project (10 years).

### Using the TFS Warehouse Database

There is however a quicker, and potentially easier way to get at the churn statistics, and that is to go direct to the Tfs_Warehouse database yourself. This does mean you need admin rights to access the database. You also lose the ability to differentiate between a regular edit commit, and a merge commit (although you could use the API to get this information). However it provides counts of lines added, removed and modified, and runs much quicker. The inspiration for this technique came from the Code Churn Analyser CodePlex project (and updated to use what seems to be the newer schema in the Tfs_Warehouse database rather than the older TfsWarehouse). I’ve modified their SQL slightly as in our system, Changesets weren’t always connected to WorkItems. Here’s a SQL statement that grabs the code churn:

```SELECT
[FactCodeChurn].CodeChurnSK ChurnId,
DimFile.[FileName] [File]],
DimFile.FilePath [FilePath],
DimFile.FileExtension [FileExtension],
DimChangeset.ChangesetID ChangesetId,
DimChangeset.ChangesetTitle ChangesetTitle,
DimPerson.PersonSK PersonId,
DimPerson.Name PersonTitle,
[FactCodeChurn].LastUpdatedDateTime Date,
[FactCodeChurn].LinesModified LinesModified,
[FactCodeChurn].LinesDeleted LinesDeleted
FROM [FactCodeChurn]
JOIN DimChangeset on FactCodeChurn.ChangesetSK = DimChangeset.ChangesetSK
JOIN DimPerson on DimChangeset.CheckedInBySK = DimPerson.PersonSK
JOIN DimFile on FactCodeChurn.FilenameSK = DimFile.FileSK
WHERE DimFile.FileExtension = '.cs'
```

I decided to use LINQPad to process this information, as it provides nice LINQ to SQL strongly typed objects that greatly speed up development. Once again I filtered out files I wasn’t interested in and used a regular expression to group together changes to the same file on a different branch. This one is able to count the files that have had the most different developers working on them. I use LINQPad’s “Dump” method to output the results of interest, but they could easily be output to a data file:

```void Main()
{
var churns = FactCodeChurns
.Where (cc => cc.FilenameSKDimFile.FileExtension == ".cs")
.Select(cc => new { File = Regex.Replace(cc.FilenameSKDimFile.FilePath , @"^.+/Source( Code)?/", ""),
User = cc.DimChangeset.CheckedInBySKDimPerson.Name,
LinesDeleted = cc.LinesDeleted,
LinesModifided = cc.LinesModified
});

var changes = new Dictionary<string, Stats>();
var users = new Dictionary<string, HashSet<string>>();
foreach(var churn in churns)
{
Stats stats;
if(!changes.TryGetValue(churn.File, out stats))
{
changes[churn.File] = stats = new Stats();
}
stats.Usages++;
stats.LinesDeleted += churn.LinesDeleted.Value;
stats.LinesModified += churn.LinesModifided.Value;

HashSet<string> fileUsers;
if(!users.TryGetValue(churn.File, out fileUsers))
{
users[churn.File] = fileUsers = new HashSet<string>();
}
}

changes.Where(kvp => kvp.Value.Usages > 200)
.OrderByDescending(kvp => kvp.Value.Usages)
.Select(kvp => new { kvp.Key, kvp.Value.Usages })
.Dump("Usages");
changes.Where(kvp => kvp.Value.LinesModified > 5000)
.OrderByDescending(kvp => kvp.Value.LinesModified)
.Select(kvp => new { kvp.Key, kvp.Value.LinesModified })
.Dump("Lines Modified");
.Select(kvp => new { kvp.Key, kvp.Value.LinesAdded })
changes.Where(kvp => kvp.Value.LinesDeleted > 40000)
.OrderByDescending(kvp => kvp.Value.LinesDeleted)
.Select(kvp => new { kvp.Key, kvp.Value.LinesDeleted })
.Dump("Lines Deleted");

users.Where(kvp => kvp.Value.Count > 20)
.OrderByDescending (kvp => kvp.Value.Count)
.Select(kvp => new { kvp.Key, kvp.Value })
.Dump("Users");

}

class Stats
{
public int Usages { get; set; }
public int LinesAdded { get; set; }
public int LinesDeleted { get; set; }
public int LinesModified { get; set; }
}
```

As you can see from my code, I only dump the statistics above a certain threshold – when you’ve got tens of thousands of files and commits, you’ll want to do this.

Hope this proves useful to someone. I think Code Churn statistics are a very quick and effective way of highlighting some of the areas of code that may be suffering from too much “technical debt”.

## Friday, 28 February 2014

### Should NAudio use SharpDX for MediaFoundation support?

In NAudio 1.7 I introduced Media Foundation support into NAudio. The main classes are MediaFoundationReader, MediaFoundationEncoder, MediaFoundationResampler and MediaFoundationTransform. Those four classes actually cover the bulk of what most people would want to do with Media Foundation, but they required a huge amount of interop, and there are still a few areas yet to complete which are proving rather tricky.

But I noticed a while ago that SharpDX has actually already got the vast majority of Media Foundation interop made available in its SharpDX.MediaFoundation assembly. It got me thinking, what if NAudio simply relied on the work done in SharpDX rather than creating its own interop wrappers? There are several advantages and disadvantages to taking this approach.

Completeness
A large part of SharpDX is auto-generated, which means that it contains pretty much every interface, every API call, every enumeration, and every Guid you could ever need. By contrast, the NAudio wrappers are done by hand, so there are a number of bits missing. In particular SharpDX has done the hard work of implementing the reading and encoding from standard .NET streams which is something I've really wanted to add to NAudio but it has proved very complicated to implement. SharpDX also includes interop wrappers that allow access to the "presentation attributes" which would be a nice enhancement.

SharpDX uses a fancy post-compile trick which allows COM objects created on one thread to be used on another. NAudio needs something like this, as the current workaround I use is a bit of a hack (basically recreate the MF source reader on the new thread). However, I will confess to not fully understanding how the SharpDX technique works, which is why I haven’t yet borrowed the technique for NAudio.

Closing
SharpDX has a really nice approach to creating wrappers for COM objects, which makes them disposable objects. By contrast I simply have been trying to call Marshal.ReleaseComObject in all the right places in NAudio. I try to hide this as much as possible from users of NAudio, but there are places where it does leak out leaving the potential for a memory leak.

Collaboration
I always find it slightly depressing that so many open source projects decide to compete rather than collaborate with each other. If we spent less time re-inventing the wheel and more time building upon what others have already created, I’m sure we could make some amazing software.

So I could just decide to let SharpDX do what it does well (wrap COM-based Windows APIs), and then NAudio could focus on providing helpful ways to construct your audio graph (which for me is the interesting bit). What's more, if NAudio used SharpDX, it could result in enhancements being submitted to SharpDX (I've already made a few contributions as part of my experimentation).

So there’s a lot in favour of using SharpDX, but there are some disadvantages that need to be weighed up.

Dependencies
We'd need to make NAudio depend on two additional DLLs – SharpDX.dll and SharpDX.MediaFoundation.dll. As well as increasing the overall size of the dependencies, this could also cause some namespace confusion as NAudio and SharpDX both have classes with the same name (WaveFormat is a prime example). There would also be potential for versioning conflicts if NAudio was introduced into a project that was using a different version of SharpDX.

Control
By depending on an external library like SharpDX, we'd lose a measure control over all the interop. Currently NAudio's interop is hand-crafted to be exactly how I want it. But with SharpDX, I'd need to submit pull-requests for all the tweaks I want. I'd also be dependent on the release schedule of SharpDX - a new version of NAudio would need to depend on an official release of SharpDX, not a special build. Having said that, Alexandre Mutel has been quick to accept my pull requests so far and there isn’t a pressing need for any more to be made.

Nearly There?
It may be that I'm not that far off at all. If I get read and write from a stream working, and can solve the threading issue, then the main motivation for building on SharpDX would disappear. But I can't really tell how close I am to getting it all working just how I want it.

### Trying it Out

The good news is that I can trial all of this without needing to change NAudio at all. I've made a new library that depends on NAudio and SharpDX, and offers alternative implementations of NAudio's four Media Foundation classes. I've called them SharpMediaFoundationReader, SharpMediaFoundationEncoder, SharpMediaFoundationResampler and SharpMediaFoundationTransform. It’s called NAudio.SharpMediaFoundation and it’s on GitHub.

Once a version of SharpDX is released containing my customisations, I can release this as its own NuGet package, then that would allow people who want/need the features SharpDX can offer to take advantage of it without any disruption to the existing NAudio library. So maybe I can have the best of both worlds.

Do let me know if you have any feedback on this approach to MediaFoundation. I’ll announce on my blog when an official release of NAudio.SharpMediaFoundation is available.

## Wednesday, 12 February 2014

### TypeScript Tetris

Over a decade ago I decided to teach myself Java by writing a Tetris game which I made as an “applet” embedded in a webpage. The game itself worked fine, but Java in the browser never really took off, and so no one was actually able to play my masterpiece.

Every now and then I would think about trying to port it to Javascript with a HTML 5 canvas. But one of the frustrating things about Javascript (from a Java or C# developer’s perspective) is it’s rather peculiar approach to object inheritance, which I hadn’t got round to learning.

So when TypeScript was announced, with its greatly simplified syntax for classes, I thought it might be worth giving this another try. And it turned out to be surprisingly easy to port. In fact I got it working shortly after the first version of TypeScript was released, but I never got round to blogging about it. Here’s some notes:

### The HTML

There wasn’t much that needed to be done in the HTML, except to create a HTML 5 canvas object for us to draw on. Probably there is some cool trick web developers use to pick the optimal size for the game based on your browser size, but I just went for a fixed size canvas for now.

```<canvas id="gameCanvas" width="240" height="360"></canvas>
```

### The Shape Classes

In my original Java code I had a Shape base class, with methods like move, drop, rotate etc, and a series of classes derived from it representing the different Tetris shapes (square, L-shape, T-shape etc).

These were the easiest to convert from Java into TypeScript. The only real difference was that Javascript’s arrays are slightly different to Java arrays. You declare an empty one, and then “push” elements into it. Here’s the base "Shape” class (I made my own Point type, as I don’t think JavaScript has a built in one):

```class Shape {
public points: Point[]; // points that make up this shape
public rotation = 0; // what rotation 0,1,2,3
public fillColor;

private move(x: number, y: number): Point[] {
var newPoints = [];

for (var i = 0; i < this.points.length; i++) {
newPoints.push(new Point(this.points[i].x + x, this.points[i].y + y));
}
return newPoints;
}

public setPos(newPoints: Point[]) {
this.points = newPoints;
}

// return a set of points showing where this shape would be if we dropped it one
public drop(): Point[] {
return this.move(0, 1);
}

// return a set of points showing where this shape would be if we moved left one
public moveLeft(): Point[] {
return this.move(-1, 0);
}

// return a set of points showing where this shape would be if we moved right one
public moveRight(): Point[] {
return this.move(1, 0);
}

// override these
// return a set of points showing where this shape would be if we rotate it
public rotate(clockwise: boolean): Point[] {
throw new Error("This method is abstract");
}
}

```

and here’s an example of a derived shape:

```class TShape extends Shape {
constructor (cols: number) {
super();
this.fillColor = 'red';
this.points = [];
var x = cols / 2;
var y = -2;
this.points.push(new Point(x - 1, y));
this.points.push(new Point(x, y)); // point 1 is our base point
this.points.push(new Point(x + 1, y));
this.points.push(new Point(x, y + 1));
}

public rotate(clockwise: boolean): Point[] {
this.rotation = (this.rotation + (clockwise ? 1 : -1)) % 4;
var newPoints = [];
switch (this.rotation) {
case 0:
newPoints.push(new Point(this.points[1].x - 1, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y));
newPoints.push(new Point(this.points[1].x + 1, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y + 1));
break;
case 1:
newPoints.push(new Point(this.points[1].x, this.points[1].y - 1));
newPoints.push(new Point(this.points[1].x, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y + 1));
newPoints.push(new Point(this.points[1].x - 1, this.points[1].y));
break;
case 2:
newPoints.push(new Point(this.points[1].x + 1, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y));
newPoints.push(new Point(this.points[1].x - 1, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y - 1));
break;
case 3:
newPoints.push(new Point(this.points[1].x, this.points[1].y + 1));
newPoints.push(new Point(this.points[1].x, this.points[1].y));
newPoints.push(new Point(this.points[1].x, this.points[1].y - 1));
newPoints.push(new Point(this.points[1].x + 1, this.points[1].y));
break;
}
return newPoints;
}
}
```

### Drawing

My application also had a “Grid” class, which was responsible for managing what shapes were present on the board, and for rendering it as well. So it needs the HTMLCanvasElement, and draws onto it with a CanvasRenderingContext2D. Thankfully the methods on the rendering context are actually quite close to the Java ones. We chose the colour with a call to context.fillStyle, and then draw a rectangle with context.fillRect.

```class Grid {
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
private rows: number;
public cols: number;
public blockSize: number;
private blockColor: any[][];
public backColor: any;
private xOffset: number;
private yOffset: number;

constructor (rows: number, cols: number, blockSize: number, backColor, canvas: HTMLCanvasElement) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
this.blockSize = blockSize;
this.blockColor = new Array(rows);
this.backColor = backColor;
this.cols = cols;
this.rows = rows;
for (var r = 0; r < rows; r++) {
this.blockColor[r] = new Array(cols);
}
this.xOffset = 20;
this.yOffset = 20;
}

public draw(shape: Shape) {
this.paintShape(shape, shape.fillColor);
}

public erase(shape: Shape) {
this.paintShape(shape, this.backColor);
}

private paintShape(shape: Shape, color) {
for (var i = 0; i < shape.points.length; i++) {
this.paintSquare(shape.points[i].y, shape.points[i].x, color);
}
}

// check the set of points to see if they are all free
public isPosValid(points: Point[]) {
var valid: boolean = true;
for (var i = 0; i < points.length; i++) {
if ((points[i].x < 0) ||
(points[i].x >= this.cols) ||
(points[i].y >= this.rows)) {
valid = false;
break;
}
if (points[i].y >= 0) {
if (this.blockColor[points[i].y][points[i].x] != this.backColor) {
valid = false;
break;
}
}
}
return valid;
}

for (var i = 0; i < shape.points.length; i++) {
if (shape.points[i].y < 0) {
// a block has landed and it isn't even fully on the grid yet
return false;
}
this.blockColor[shape.points[i].y][shape.points[i].x] = shape.fillColor;
}
return true;
}

public eraseGrid() {
this.context.fillStyle = this.backColor;
var width = this.cols * this.blockSize;
var height = this.rows * this.blockSize;

this.context.fillRect(this.xOffset, this.yOffset, width, height);
}

public clearGrid() {
for (var row = 0; row < this.rows; row++) {
for (var col = 0; col < this.cols; col++) {
this.blockColor[row][col] = this.backColor;
}
}
this.eraseGrid();
}

private paintSquare(row, col, color) {
if (row >= 0) { // don't paint rows that are above the grid
this.context.fillStyle = color;
this.context.fillRect(this.xOffset + col * this.blockSize, this.yOffset + row * this.blockSize, this.blockSize - 1, this.blockSize - 1);
}
}

public drawGrid() {
for (var row = 0; row < this.rows; row++) {
for (var col = 0; col < this.cols; col++) {
if (this.blockColor[row][col] !== this.backColor) {
this.paintSquare(row, col, this.blockColor[row][col]);
}
}
}
}

public paint() {
this.eraseGrid();
this.drawGrid();
}

// ... a few more methods snipped for brevity

}
```

### Keyboard Handling

The game is controlled by the keyboard, both for moving pieces and for starting/pausing the game. In the Game class constructor I subscribe to the keydown event with the following code:

```        var x = this;
document.onkeydown = function (e) { x.keyhandler(e); }; // gets the wrong thing as this, so capturing the right this
```

One slight disappointment with TypeScript is that it doesn’t do anything to fix the weirdness around JavaScript’s “this” keyword. In JavaScript, “this” isn’t always what you think it would be if you’ve got a background in Java/C#. I had to resort to little hacky tricks like this in various places to make sure the right “this” object would be available in the called method. I guess if I did more Javascript this would be second nature to me. Here’s the keyboard handler:

```private keyhandler(event: KeyboardEvent) {
var points;
if (this.phase == Game.gameState.playing) {
switch (event.keyCode) {
case 39: // right
points = this.currentShape.moveRight();
break;
case 37: // left
points = this.currentShape.moveLeft();
break;
case 38: // up arrow
points = this.currentShape.rotate(true);
break;
case 40: // down arrow
// erase ourself first
points = this.currentShape.drop();
while (this.grid.isPosValid(points)) {
this.currentShape.setPos(points);
points = this.currentShape.drop();
}

this.shapeFinished();
break;
}

switch (event.keyCode) {
case 39: // right
case 37: // left
case 38: // up
if (this.grid.isPosValid(points)) {
this.currentShape.setPos(points);
}
break;
}
}

if (event.keyCode == 113) { // F2
this.newGame();
// loop drawScene

// strange code required to get the right 'this' pointer on callbacks
// http://stackoverflow.com/questions/2749244/javascript-setinterval-and-this-solution
this.timerToken = setInterval((function (self) {
return function () { self.gameTimer(); };
})(this), this.speed);
}
else if (event.keyCode == 114) { // F3
if (this.phase == Game.gameState.paused) {
this.hideMessage();
this.phase = Game.gameState.playing;
this.grid.paint();
}
else if (this.phase == Game.gameState.playing) {
this.phase = Game.gameState.paused;
this.showMessage("PAUSED");
}
}
else if (event.keyCode == 115) { // F4
if ((this.level < 10) && (this.phase == Game.gameState.playing) || (this.phase == Game.gameState.paused)) {
this.incrementLevel();
this.updateLabels();
}
}
}
```

### Timer

Any game needs a timer loop, and my original one would drop the falling block and paint the grid each tick. But I was also painting the falling brick from the keyboard handler whenever you moved it. So I refactored things slightly to have a rendering loop, which was doing all the drawing, and then a game timer, which dropped the current block and decided if you had lost, or progressed to the next level.

I discovered that the recommended way to create a render loop in Javascript seems to be window.requestAnimationFrame (with a fallback to window.setTimeout if that’s not available). For the game timer itself I carried on using window.setTimeout. Again, you have to jump through some hoops to get the right this pointer:

```this.timerToken = setInterval((function (self) {
return function () { self.gameTimer(); };
})(this), this.speed);
```

### Messages

The final task was to show messages such as “Game over” and “Game paused”. I was in two minds about how to do this. I could either use place a div over the top of my canvas with the message in, or use fonts to draw onto the canvas. I initially went about trying to draw messages onto the canvas, which did work, but in the end I decided that simply positioning a floating div over the canvas to show messages was easier (although even that was quite frustrating to work out the correct CSS incantation).

I came up with this HTML and CSS to give me a floating message.

```<div id="container">
<canvas id="gameCanvas" width="240" height="360" ></canvas>
<div id="floatingMessage" ></div>
</div>
```
```#container {
position: relative;
float: left;
background-color: cornflowerblue;
}

#gameCanvas {
height: 360px;
width: 240px;
}

#floatingMessage {
position: absolute;
top: 120px;
left: 60px;    width: 120px;    text-align: center;
background-color: azure;
}
```

There’s still a whole host of improvements I ought to make to both the appearance and functionality of this game, but the point of this exercise was simply to see how easily I could get started with TypeScript. And the good news is, it seems pretty straightforward, even for someone without a lot of web development experience.

### Try It

I’ve uploaded the code for my TypeScript Tetris app to GitHub, and you can also play it here. (Please note, this is not intended as a “best practices” guide to anything. This was my first ever TypeScript app, ported from my first ever Java app. So there are quite a few rough edges. Feel free to send me your comments, or fork it and show me how it should be done).

## Tuesday, 11 February 2014

### Don’t Forget to Clean Your Code

I really love the idea of “Clean Code”. Keeping our classes and methods short, naming things well, and making sure our comments are actually helpful all makes a whole lot of sense. What’s even better about it is that its not a particularly complicated idea. It could be explained in a couple of hours, and even the most junior of developers shouldn’t have a problem grasping the main principles. It also doesn’t usually take too long to clean up dirty code. Rename some variables, extract some short methods out of long methods, and review the comments. The only slightly tricky bit is extracting a helper class out of a class that has grown too big.

So why don’t I write clean code all the time? Why isn’t all the code I’ve written since I heard about clean code a shining example of code cleanliness?

Well the brutal truth is, when I’m writing code, I’m not thinking about cleanness. I’m completely focused on what can I do to get the feature implemented. So at the point that I’m “done” in the sense of having working code and passing tests, my code is probably in a mess.

The trouble is, there is a huge temptation to skip the “cleaning” phase. After all, there’s always plenty of new development tasks waiting that I’m itching to get started on. But if we really believe that we spend ten times the amount of time reading code compared to writing it, then spending fifteen minutes cleaning our code before we move on will actually make us go much faster in the long-run.

Clean code is a habit you need to force yourself to learn. Clean before moving on to the next task. When the test goes green its time to clean. Clean before commit. If it’s not clean, it’s not complete.

PS: be sure to check out Corey House’s excellent Pluralsight course on Clean Code.

## Saturday, 1 February 2014

### Fire and Forget Audio Playback with NAudio

Every so often I get a request for help from someone wanting to create a simple one-liner function that can play an audio file with NAudio. Often they will create something like this:

```// warning: this won't work
public void PlaySound(string fileName)
{
using (var output = new WaveOut())
using (var player = new AudioFilePlayer(fileName))
{
output.Init(player);
output.Play();
}
}
```

Unfortunately this won’t actually work, since the Play method doesn’t block until playback is finished – it simply begins playback. So you end up disposing the playback device almost instantaneously after beginning playback. A slightly improved option simply waits for playback to stop, creating a blocking call. It uses WaveOutEvent, as the standard WaveOut only works on GUI threads.

```// better, but still not ideal
public void PlaySound(string fileName)
{
using (var output = new WaveOutEvent())
using (var player = new AudioFilePlayer(fileName))
{
output.Init(player);
output.Play();
while (output.PlaybackState == PlaybackState.Playing)
{
}
}
}
```

This approach is better, but is still not ideal, since it now blocks until audio playback is complete. It is also not particularly suitable for scenarios in which you are playing lots of short sounds, such as sound effects in a computer game. The problem is, you don’t really want to be continually opening and closing the soundcard, or having multiple instances of an output device active at once. So in this post, I explain the approach I would typically take for an application that needs to regularly play sounds in a “Fire and Forget” manner.

Use a Single Output Device

First, I’d recommend just opening the output soundcard once. Choose the output model you want (e.g. WasapiOut, WaveOutEvent), and play all the sounds through it.

Use a MixingSampleProvider

This means that to play multiple sounds simultaneously, you’ll need a mixer. I always recommend mixing with 32 bit IEEE floating point samples. and in NAudio the best way to do this is through using the MixingSampleProvider class.

Play Continuously

Obviously there are times when your application won’t be playing any sounds, so you could start and stop the output device whenever playback is idle. But it tends to be more straightforward to simply leave the soundcard running playing silence, and then just add inputs to the mixer. If you set the ReadFully property on MixingSampleProvider to true, it’s Read method will return buffers full of silence even when there are no mixer inputs. This means that the output device will keep playing continuously.

Use a Single WaveFormat

The one down-side of this approach is that you can’t mix together audio that doesn’t share the same WaveFormat. The bit depth won’t be a problem, since we are automatically converting everything to IEEE floating point. But if you are working with a stereo mixer, any mono inputs need to be made stereo before playing them. More annoying is the issue of sample rate conversion. If the files you need to play contain a mixture of sample rates, you’ll need to convert them all to a common value. 44.1kHz would be a typical choice, since this is likely to be the sample rate your soundcard is operating at.

The MixingSampleProvider has a nice feature where it will automatically remove an input whose Read method returns 0. However, it won’t attempt to Dispose that input for you, leaving you with a resource leak. The easiest way round this is to create a derived ISampleProvider class that encapsulates the AudioFileReader, and auto-disposes it when it reaches the end.

Cache Sounds

In a computer game scenario, you’ll likely be playing the same sounds again and again. You don’t really want to keep reading them from disk (and decoding them if they compressed). So it would be best to load the whole thing into memory, allowing us to replay many copies of it directly from the byte array of PCM data, using a RawSourceWaveStream. This approach has the advantage of allowing you to dispose the AudioFileReader immediately after caching its contents.

Source Code

That’s enough waffling, let’s have a look at some code that implements the features mentioned above. Let’s start with what I’ve called “AudioPlaybackEngine”. This is responsible for playing our sounds. You can either call PlaySound with a path to a file, for use with longer pieces of audio, or passing in a “CachedSound” for use with sound effects you want to play many times. I’ve included automatic conversion from mono to stereo, but no resampling is included here, so if you pass in a file of the wrong sample rate it won’t play:

```class AudioPlaybackEngine : IDisposable
{

public AudioPlaybackEngine(int sampleRate = 44100, int channelCount = 2)
{
outputDevice = new WaveOutEvent();
mixer = new MixingSampleProvider(WaveFormat.CreateIeeeFloatWaveFormat(sampleRate, channelCount));
outputDevice.Init(mixer);
outputDevice.Play();
}

public void PlaySound(string fileName)
{
}

private ISampleProvider ConvertToRightChannelCount(ISampleProvider input)
{
if (input.WaveFormat.Channels == mixer.WaveFormat.Channels)
{
return input;
}
if (input.WaveFormat.Channels == 1 && mixer.WaveFormat.Channels == 2)
{
return new MonoToStereoSampleProvider(input);
}
throw new NotImplementedException("Not yet implemented this channel count conversion");
}

public void PlaySound(CachedSound sound)
{
}

{
}

public void Dispose()
{
outputDevice.Dispose();
}

public static readonly AudioPlaybackEngine Instance = new AudioPlaybackEngine(44100, 2);
}
```

The CachedSound class is responsible for reading an audio file into memory. Sample rate conversion would be best done in here as part of the caching process, so it minimises the performance hit of resampling during playback.

```class CachedSound
{
public float[] AudioData { get; private set; }
public WaveFormat WaveFormat { get; private set; }
public CachedSound(string audioFileName)
{
{
// TODO: could add resampling in here if required
var wholeFile = new List<float>((int)(audioFileReader.Length / 4));
{
}
AudioData = wholeFile.ToArray();
}
}
}
```

There’s also a simple helper class to turn a CachedSound into an ISampleProvider that can be easily added to the mixer:

```class CachedSoundSampleProvider : ISampleProvider
{
private long position;

public CachedSoundSampleProvider(CachedSound cachedSound)
{
this.cachedSound = cachedSound;
}

public int Read(float[] buffer, int offset, int count)
{
var availableSamples = cachedSound.AudioData.Length - position;
var samplesToCopy = Math.Min(availableSamples, count);
Array.Copy(cachedSound.AudioData, position, buffer, offset, samplesToCopy);
position += samplesToCopy;
return (int)samplesToCopy;
}

public WaveFormat WaveFormat { get { return cachedSound.WaveFormat; } }
}
```

And here’s the auto disposing helper for when you are playing from an AudioFileReader directly:

```class AutoDisposeFileReader : ISampleProvider
{
private bool isDisposed;
{
}

public int Read(float[] buffer, int offset, int count)
{
if (isDisposed)
return 0;
{
isDisposed = true;
}
}

public WaveFormat WaveFormat { get; private set; }
}
```

With all this set up, now we can have our goal of using a very simple fire and forget syntax for playback:

```// on startup:
var zap = new CachedSound("zap.wav");
var boom = new CachedSound("boom.wav");

// later in the app...
AudioPlaybackEngine.Instance.PlaySound(zap);
AudioPlaybackEngine.Instance.PlaySound(boom);
AudioPlaybackEngine.Instance.PlaySound("crash.wav");

// on shutdown
AudioPlaybackEngine.Instance.Dispose();
```

Further Enhancements

This is far from complete. Obviously I’ve not added in the Resampler stage here, and it would be nice to add a master volume level for the audio playback engine, as well as allowing you to set individual sound volume and panning positions. You could even have a maximum limit of concurrent sounds. But none of those enhancements are too hard to add.

I’ll try to get something like this added into the NAudio WPF Demo application, maybe with a few of these enhancements thrown in. For now, you can get at the code from this gist.

## Monday, 27 January 2014

### Announcing Understanding Distributed Version Control

I’m very pleased to announce that my third Pluralsight course has been published today. This one is entitled “Understanding Distributed Version Control”. Regular followers of my blog will know this is a subject I often write about, and have spoken on it at various developer groups. This course draws and expands on that material to provide what I hope will be a really accessible introduction to what Distributed Version Control systems are, how they work, what the workflow is, and why you should consider using them.

The course is aimed at anyone who is interested in finding out what all the fuss is about DVCS. I know that when I started investigating DVCS, it seemed quite confusing at first, so I have tried to make the type of course that I wish I had seen back then. I focus in particular on explaining the way that DVCS systems store the revision history (in a graph structure known as a “DAG”). Personally I think that once this concept becomes clear in your mind, much of the complexity of DVCS goes away.

I have also tried to show what benefits there are to switching from centralised to distributed version control systems. I know many developers quite sensibly take an “if it ain’t broke don’t fix it” attitude, and so can be reluctant to consider such a fundamental shift in the way they use version control. I’ve tried to show that whether you work alone on a “single developer project”, or work on open source, or work in a large team of developers commercially, DVCS has some very compelling benefits. I’ve also tried to be open about some of the limitations of DVCS compared with centralized tools. I am very enthusiastic about the power and potential of DVCS, but I do recognise that there are still some rough edges in the tooling at the moment.

The final thing I try to do in this course is give you a feel for the general workflow involved in using DVCS day to day. I’ve done this by showing demos in both Mercurial and Git. I quite deliberately chose to use two different DVCS tools to show that the main principles are the same, irrespective of the particular tool you choose. Since there are many other great tutorials as well as Pluralsight courses going into more detail on the specifics of individual DVCS such as Git or Mercurial, I didn’t want to repeat that material. Really my course is designed as a precursor to those courses, helping you understand the big picture, before you get into the nitty-gritty of learning the command line syntax for various operations.

I hope you enjoy the course and find it helpful. I love to hear feedback from people who watched the course, so let me know how you get on with it. I’m always wanting to know how I can improve my courses, so any constructive criticism will also be gratefully received.