Computer Science Programming

The Generation Game – A Simple Genetic Algorithm

Last night my housemate Hayley and I were talking about the Data Mining and Decision Systems module we took last semester, during that discussion the concept of genetic algorithms came up.

In the computer science field of artificial intelligence, a genetic algorithm (GA) is a search heuristic that mimics the process of natural selection, except that GAs use a goal-oriented targeted search and natural selection isn’t a search at all

– Wikipedia

Hayley explained the concept to me using the idea of an animal that is more likely to survive in its environment by blending in with the colour of its surroundings. So tonight, as a nice change from revision and work on my Final Year Project, I had a go at developing such an algorithm — with a somewhat humorous undertone. The result of this undertaking is a little tech demo called “The Generation Game – A Simple Genetic Algorithm”.

In the demo it is advantageous for a sheep to be green, in order to fit in with its field. However at the beginning of the game the ten sheep in the initial flock are of completely random colours.

Turns are taken, in order by

  1. A Flock of Sheep, which breeds, producing 1 new sheep for every two sheep in the flock (if there is a left over sheep it doesn’t breed). Sheep produced by the mating process are the median colour of its two parents.
  2. A Wolfpack which depending on its hunting ability can eat 10% – 60% of the heard in any given turn

The closer a sheep is to the colour green, the less likely it is the be a casualty of a wolf attack (however there are other contributing factors, and a green sheep can still be killed).

As you can see from the gif image above if the initial flock has a green sheep amongst its ranks then evolution takes place (survival of the fittest, like how Darwin described it) and within just 20 generations the flock consists of only green sheep.

Another interesting situation is when there is no green sheep in the initial flock.

Evolution with No Green Sheep
Evolution with No Green Sheep

As you can see from the example above which starts with no green sheep the flock gradually becomes a light brown colour, this is the closest colour the flock could get to green with the genes avaliable in its gene pool.

This is just a simple tech demo (written in C# with XNA) to prove to myself I understood the concept, but it worked out quite well and I think its cool. I’ll be cleaning up the code and adding some comments, so be sure to check out the repository containing the program on GitHub.

Thats all for now,

Programming Software Engineering University

Fun with Formal Language

It’s been a while since I’ve updated you all on my progress regarding my final year project, in which I’m building an integrated development environment for the PHP scripting language.

At this stage I’m researching different methodologies and algorithms for what I want to achieve in my first prototype, as well as different methodologies for the actual software engineering experience in, and of, itself.

Whilst doing this I’ve found that writing code for the algorithms I’ve been researching has been super useful in determining the ease of implementation, and actually understanding the ideas involved themselves. In the above screenshot you can see an example of one algorithm I’ve implemented to tokenize my code.

Tokenization is the process of identifying the name and value of each token in a piece of code. A token is just a set of symbols, such as a $variableName or a keyword such as true — or even a simple code delimiter such as ; or { or }.

The above screenshot shows the code as highlighted by Visual Studio and as highlighted by my program, some of the formatting is a tad different than you would expect, but this is a very early version of the program and won’t be used as part of my final product — it’s just to help me visualize how an algorithm works.


Modern Experience Development Programming University

Hull CS Blogs for Windows 8 Version 2.1 Released

You may remember a very similar Blog Title from a week ago, saying that version 2.0 of Hull CS Blogs had been released for Windows 8. After some feedback from Rob Crocombe and noticing a few things that irritated me I have made a few minor improvements and released version 2.1, which you can update to from the Windows 8 Store or download from here.


  • Changed the name on the Start Tile from “Hull Computer Science Blogs” to “Hull CS Blogs” for Aesthetic Reasons
  • Added the label “Latest Blog” above the latest blog on the home page, so now the blog title on the picture has more context
  • Improved performance on caching, meaning the initial start up of the app is much faster
  • Added “friendly dates” to each blog tile – e.g. “2 hours ago”, “3 Days ago” or “1 month ago” rather than “16/03/2012 16:45”
  • Made it so you can see who Authored each blog post on the main page
  • Improved UI for Split Views
  • Fixed a bug where the Latest Blog sometimes wouldn’t appear

I hope you enjoy the application! Please rate and review, and don’t hesitate to get in contact if you have any bug reports, ideas or feedback!


Modern Experience Development Programming

Solar System Simulation is the 8th best app for Students and Teachers on Windows 8

Today I was looking at the newly revamped developer dashboard on where you can see a lot of stats about the applications you have uploaded to the Windows 8 Store. Whilst I was having a look round I noticed that you could see which web pages linked to your application in the store. One of the websites which had given my app the most “hits” was one called Fractus Learning.

I thought I would head over to their website and have a look at what they had to say about my application and I was pleasantly surprised to see that they had written a list about the Top 10 application for Students and Teachers, and my app featured at number 8 — how apt.

In particular Fractus said the app is:

Ideal for older students, The Solar System Simulation allows users to explore the affects of gravity on land masses in space.

I was especially pleased with this after reading what Fractus are all about:

Fractus Learning is a growing team based in Dublin, Ireland working with educators around the globe to promote cutting edge technology skills and tools. We strive to build amazing learning environments where students are engaged and inspired and classrooms that are a joy to teach, work and learn in.

Our goal is to motivate, excite and enhance the teaching skill set with the use of technology, making sure educators are always on the cutting edge.

So you could say they know what they’re on about!

Thanks Fractus, look out for some excting updates to the simulation soon!


Microsoft Student Partner Programming Web Design

Microsoft App Builder Rewards

Yesterday Microsoft’s App Builder Reward Program Website went live. The scheme is very similar to that of the Windows Phone Rewards Program that was introduced last year in that application developers register, claim points depending on applications they’ve produced and then cash in these points for rewards!

Points mean prizes!

Due to one of the back-end developers for the site going on holiday and a looming “go live” date Ben Nunney and Paul Lo from Microsoft asked me to step in to fill the void. So, over the weekend I got the site ready and now its up.

There are a multitude of fantastic rewards available!
There are a multitude of fantastic rewards available!

So what’re you waiting for? Go ahead and Register as an application developer and start redeeming your points to get those fantastic prizes!



Project Regtransfers

In between my Networking Coursework and going to lectures I’ve been working on an application for my uncles company Regtransfers, on both the Windows 8 and Windows Phone platforms.

The application allows you to:

  • Search for Personalised Numberplates
  • Submit and enquirey about any plate
  • Purchase a plate
  • Read any edition of “The World of Personalised Number Plates” — The Regtransfers Magazine
  • View all the videos on the Regtransfers YouTube Page
  • Read all the status updates on the @Reg_Transfers Twitter Account

Windows 8 App

Regtransfer for Windows 8 Splashscreen
Regtransfer for Windows 8 Splashscreen

The Windows 8 version of the application runs on both Tablets and traditional PCs. It is an out-and-out “Modern Experience” application, including support for Live Tiles, the Search and Share charms and Snap View.

The Main Page

The main page of the application displays the cover of the latest magazine as well as buttons which navigate you to pages where you can subscribe to physical editions of the magazine, read all editions of the magazine in PDF version and read more information about the magazine. Clicking the cover of the latest magazine opens a page showing more information about it, from which you can choose to read a PDF version of it.

This slideshow requires JavaScript.


At the top of the main page is the Regtransfers Logo and a search box. You can search for anything, including your name or initials and the application will return to you a list of relevant number plates. It will also allow you to filter your search results from some price brackets, so you can find plates more suited to your means.

Regtransfers for Windows 8 Search Charm
Regtransfers for Windows 8 Search Charm

As you can see from the above screenshot, you can also invoke the search page using the search charm. The search charm is  a way of searching any application, file or setting from anywhere within the operating system. This means that even if you’re in another app or on the start screen you can still search for numberplates by calling in the charm bar and selecting the Regtransfers app from the list of apps underneath the search box.

Viewing a Plate

When you select a number plate from the search page, or select a recently viewed plate from the main page you are shown the View Plate page. From here you can customize the acrylic plate you can optionally choose to purchase with said numberplate.

Regtransfers for Windows 8 View Plate Page
Regtransfers for Windows 8 View Plate Page

The page allows you to view both sides of the plate — the front, white plate of course having no flag –, choose which flag to have on the plate, choose a border and decide if you want to buy a set of acrylic plates with the number plate or not. If not you’ll receive your plate on a retention certificate.

Sharing a plate to Mail
Sharing a plate to Mail

From here you can also Share your plate using the built in share charm, above you can see an example of me sharing to the mail app, but you can share the plate to any app that accepts share using HTML, RTF or Text data. This includes posting to facebook using the people app, or twitter using MetroTwit.

Buying a Plate

The process of buying the plate is dealt with by an embedded web form. All data is transferred over a secure HTTPS connection, and the Regtransfers website is PCI Compliant, so all credit card details are totally safe 🙂

Buy plate
Buy plate

Making an Enquiry

Making an enquiry is  a simple case of filling in a form and hitting submit

Enquire about a  plate
Enquire about a plate

Watching a YouTube Video

Using the fantastic “MyToolkit” library I work out the location of the YouTube .mp4 file and embed it directly within the application using a custom video player which I made to be themed the same as the rest of the application. As with the rest of the application this works in both snapped view and full screen mode.

This page also allows you to share a link to the YouTube video, and gives you the option to view the video in your default browser if you would prefer.

Subscribing to Regtransfers: The World of Personal Number Plates Magazine

One of the most important parts of the application is the magazine sign up. This is why its displayed front and center on the main page, when customers sign up for a magazine they also receive a personalized list of plates they might like to purchase by email. Signing up is dealt with by a simple form:

Subscription Page
Subscription Page

Reading PDF’s of the Magazine

As well as being able to subscribe to the magazine people might want to be able to read back-issues of the magazine. They can do this by tapping the “Read Other Issues” which brings them to the below page:

All Editions of RT Magazine Page
All Editions of RT Magazine Page

All 30 editions of the RT Magazine are available here. To read one or find out more information about one the user just has to tap the relevant magazine cover. Once they have done so they are shown a page like the one below, which displays information on the featured celebrity, main stories and provides a button which downloads the PDF of the magazine in the default browser. I would have liked to embed the PDF within the application but unfortunately this isn’t supported in the Windows RT API’s unless you purchase Foxit Embedded Reader.

Magazine Issue #13 - Vinnie Jones
Magazine Issue #13 – Vinnie Jones

Snapped View

One of my favorite features of Windows 8 is snapped view. Microsoft’s implementation of Multi-tasking in the Modern Experience Environment. Snapped view allows you to view two apps at once, pinning one to either the left or the right in a 320 pixel wide box and allowing the other to fill up the rest of the space as if it was in full-screen mode. Every page within the Regtransfers application supports snap-view, and every snap view has full feature parity with the full screen mode rather than just showing a logo – as some applications do.

Main Page Panormaic Snap View
Main Page Panormaic Snap View

Because I have an awful lot of content on the Main Page it was a bit of a challenge to fit it all onto a small 320 pixel wide window, but I achieved this with some inspiration from the pivot page used in many Windows Phone applications. Using a <FlipView> XAML element I have made it so that you can swipe between 5 different views. The Magazine View, Recent Plates View, Recent Search View, YouTube View and Twitter View.  The Regtransfers Logo and Search bar are always present.

On the other pages elements are simply resized and reordered to make more sense on a smaller screen. Some examples are shown below.

Some of the snap views in the Windows 8 App, from left to right: View all Magazine Issues Page, The View Plate Page, The Enquiry Page, The Search Page, The YouTube Page
Some of the snap views in the Windows 8 App, from left to right: View all Magazine Issues Page, The View Plate Page, The Enquiry Page, The Search Page, The YouTube Page

Windows Phone 8 App

Making the snap views for Windows 8 was a huge help in designing the pages for the Windows Phone 8 application, which sports all the features of the desktop app including search, twitter, youtube and magazine subscription and e-reading. I’ve only just started this so there isn’t too much to show. But below is a picture of the main page of the app and the search page with filters.

Regtransfers - Windows Phone 8 App
Regtransfers – Windows Phone 8 App

I will of course keep this blog updated with my progress.


Programming University

Networking Coursework – A Location Server

Networking Coursework – Client, Server, Sever Log and Storage XML File

Recently I’ve been working a lot on my coursework for the 08246 module, Networking and Web Technologies, which consists of producing a client and server for a system which stores information on the location of people at The University. The client allows the user to type in commands such as the following:

location Danny

And the server will return a response telling the user

Danny is in the ITMB Computer Labratory

The client can also update the position of someone on the server using the following Syntax

location Danny "In the Library"

The client and server can talk to each other over 4 different protocols.

  1. Whois, which is usually used to query information about a domain name on the internet.
  2. HTTP 0.9 – A deprecated form of the Hyper Text Transfer Protocol, the protocol used to deliver webpages, images and other media and files from websites.
  3. HTTP 1.0 – A newer version of HTTP
  4. HTTP 1.1 – The latest version of HTTP

The server saves the locations of all the users when it is updated, and stores a log detailing all the connections which have been made to it. At the moment the server is single-threaded and can only accept one connection at once. However I am currently working on making it multi-threaded, so that multiple clients can connect to the sever at the same time.

The coursework is in two parts. This first part requires just a command line interface and simple storage/logging. However part two will require me to update it to have a full working website and SQL Database backend. I will, of course, keep this blog updated with my progress.


Programming University

2D Graphics Solar System Simulation Coursework Result

I’ve written a few posts now about my Solar System Simulation — also known as a JavaScript Orrey — Coursework for 2D Graphics. It was the coursework I’ve been most enthusiastic about since I’ve got to university so I was anxious to get my result.

I’m very pleased to say I got a grade of 86%. This is a high first class.

Because I’m pretty confident I did quite well in the other half of the module, User Interface Design, I think I should have a high first class for the Module as a whole, which I’m very happy about! Of course I will update this blog when I get my module grades back on the 18th of February.

The lecturer who set this coursework, Dr. David Parker, provided me with some really useful feedback, saying:

This was a well featured piece of work, I also love what you did turning it into an app (though that isn’t reflected above).

Some of the code is a little over complicated and you could put some thought towards how to make it simpler. This also has maintainability consequences.

Taking that into account I intend to spend much more of my programming time working on refactoring my code to make it easier to understand and maintain.

I was also very pleased that Dr Parker described my use of SVN, a subversion system used to keep track of changes to software source code over time, as the best he had seen. 🙂


Programming University

2D Graphics Coursework – Solar System Simulation now on Windows 8

Before Christmas I submitted my Assessed Coursework for my 2D Graphics and User Interface Design module, a  2D Orrery (or Solar System Simulation in laymen terms) using the HTML 5 Canvas Tag and associated JavaScript API’s. I think I did pretty well, as I implemented every feature outlined by the specification to, what I feel, was a high standard.

6 days after the hand in date my friends Rob, James and I went to ‘Appy Christmas, an event set up by Microsoft to encourage the development of Windows 8 app in the holiday period. Whilst there I ported my application from a browser based webpage to a fully featured WinJS Windows 8 application. When I told my lecturer, Dr. David Parker about it he seemed interested in the ease of the porting experience, so I shall outline it here.

  • I added all my “Business Code” and classes by just adding the .js files to the solution
  • I edited the HTML page to make it fit better, as scrolling pages don’t look great in apps — all of the Windows 8 style came for free with no work

And that was it! At this point the application worked, however it wasn’t very touch friendly and the Koch Snowflake fractal algorithm would lag on some lower powered arm devices, including the Microsoft Surface RT, so I made the following enhancements

  • Lowered the amount of iterations my fractal function went through, lowering the computational power required
  • Added an “App Bar” to hold buttons which controlled all of the functions — the coursework spec asked that all functions were called using keyboard input, so this made it much more usable on a touch screen
  • Added support for the share charm. When you press it a bitmap image is created from the canvas and sent to whatever application you chose.

If you want to play with the application now, you can do so by downloading it from the Windows store here.

Below you can see some screenshots of the application in action.

I hope you enjoy using the solar system.


Programming University

2D Graphics Coursework – A JavaScript Orrery

I apologize for the lag in the above video, its honestly not my code! 😉 It’s the free screen recorder program I used being iffy.

For the last few weeks I’ve been steadily working on my coursework for the “2D Graphics and User Interface Design” module. We’ve been tasked with developing a digital orrery using the HTML5 canvas tag and the associated JavaScript drawing API’s. “What is an Orrery?” I hear you ask, Wikipedia to the rescue:

An orrery is a mechanical device that illustrates the relative positions and motions of the planets and moons in the Solar System in a heliocentricmodel

Heliocentric just means that the planets move around a stationary sun.

The finished, final version of the product will have gravitational forces effect the positions of each planet, allow the user to invent new planets and place them in (effecting the courses of all the other planets!) and have an additional drawing mode in which all of the planets are made to look like pretty Koch Snowflakes 🙂

In the above video you can see what I have achieved up until now, with another month remaining to get it finished. I have

  • 4 Drawing modes (Arc mode, Line Mode, Sprite (image) mode, Animated Earth Mode (Using spritesheets))
  • Independent rotation speeds for each of the planets
  • Keyboard controls to decide which mode is shown

I have the following left to implement

  • Gravity
  • User added planets
  • A moon orbiting earth
  • Elliptical orbits
  • Koch Snowflake drawing mode

I hope to get most of these done this week 🙂

One of the interesting parts of the assignment has been the programming language used itself. JavaScript, though based on the same family of programming languages as my preferred language C#, is quite different to the aforementioned language in some pretty important ways, for example Object Orientation doesn’t come naturally, instead the language uses the Prototyping paradigm, which takes a bit of getting used to if you are an OOP programmer.

JavaScript is also the first loosely typed language I have been formally taught, though I did write in PHP for a few years before university which is also loosely typed. A loosely typed language such as JavaScript doesn’t have hard and fast rules on what can be stored in a variable, for example in C# if I write:

public int WholeNumberVariable = "string";

the whole program will not compile, because putting a string in a variable that has been initialized to hold integer numbers is illegal. In JavaScript when you initialize a variable you can’t assign a type, so It can hold anything

var WholeNumberVariable = "string";
var IExpectANumericResult = WholeNumberVariable / 2;
//I'm going to be a huge bug! I expected a number to divide by 2 but now I'm trying to divide letters! This makes no sense!

This can cause some unexpected behaviour, also known as bugs. So it’s fair to say I much prefer Strongly typed languages.

But, I’m getting used to JavaScript and its numerous quirks, and actually rather enjoying it. I hope to report back soon with some additions to my orrery to show you!